My AI-Native Process

00~/renan-rios$cat ~/process/README.md▋

My AI-Native Process

An AI-orchestrated, code-native design process. I take a project from a raw PRD to a production-close prototype engineers ship from — and because the design is real code from the first mock, nothing gets lost in handoff. No Figma.

pipeline.tscode-native

PRD

Second brain

Research

Mocks · code

Prototype

Production

01~/renan-rios$ls ./steps▋

Six steps, one repository

Each step names the AI doing the heavy lifting — from a raw PRD all the way to production.

01-frame.md01

Frame the problem

I run the PRD through AI to strip the noise and surface what matters, capturing it into my Obsidian second brain — a local, linked Markdown knowledge base that AI agents like Claude read, write and synthesize — then pressure-test design directions with the agent before touching a pixel.

VS CodeGitHub CopilotClaude OpusObsidian

02-synthesize.md02

Synthesize the second brain

My whole Obsidian second brain — every PRD, meeting note, transcript and chat — feeds into NotebookLM, whose data visualizations expose the project's real priorities and patterns.

ObsidianNotebookLM

03-research.md03

Research, predicted & pressure-tested

I choose the research methods, use AI to predict outcomes and interrogate findings, and commit every UX research deliverable to the repo.

NotebookLMGitHub

04-explore.md04

Explore directions — in codeNo Figma

I generate three or four mocks as real code with Copilot CLI and iterate on GitHub with the team. No Figma, ever.

Copilot CLIVS CodeGitHub

05-prototype.md05

Prototype at full fidelity

I orchestrate Copilot, Claude and MCP servers into a production-close prototype, iterating until it behaves like the real thing.

VS CodeGitHub CopilotClaude CodeMCP servers

06-handoff.md06

Hand off through the repo

Engineers pick up the same repository and turn the prototype into the shipped product — no translation, no lossy handoff.

GitHub

02~/renan-rios$grep -r figma ./project▋

Code-native. No Figma.

From the first mock to production, the design is real code — so nothing is lost in translation at handoff.

prototype main

Explorer · prototype

1import { Card } from "@/components/Card";
2import { risks } from "@/data/risks";
3 
4export function Dashboard() {
5  return (
6    <div className="grid gap-4">
7      {risks.map((r) => (
8        <Card key={r.id} risk={r} />
9      ))}
10    </div>
11  );
12}

Terminalbash

✓PRD → production, all in code.

03~/renan-rios$ai distill PRD.pdf --signal▋

Frame the problem

I run the PRD through AI to cut the noise, surface what actually matters, and pressure-test design directions with the agent — before a single pixel exists.

01-frame.md1,240 lines → 4 signals

PRD.pdf · raw

01## Revenue projections FY25

02Primary user: security admin

03Competitor logo guidelines…

04Job: assess posture at a glance

05Legal disclaimer, appendix B

06Constraint: lives in the Entra shell

07Stakeholder bios & org chart

08Success: time-to-first-insight ↓

signal.md · distilled

Primary user: security admin
Job: assess posture at a glance
Constraint: lives in the Entra shell
Success: time-to-first-insight ↓

agent · directionsA · Prioritized listB · Risk heatmapC · Triage wizard

04~/renan-rios$cat ~/notes/second-brain.md▋

The second brain

Where every input lives before the AI makes sense of it — a linked web of notes the agents read, write and synthesize.

One connected second brain

Every input lands in one place — a connected, private knowledge base of linked notes. I capture PRDs, meeting notes, transcripts, chat and research, wire related ideas together, and let AI agents read, write and synthesize across the whole web. It becomes the single source the rest of the process draws from.

Capture everythingLinked notesLocal & privateAI reads · writes · synthesizes

second brain — graph205 notes · 210 links

05~/renan-rios$run research --predict --commit▋

Research, predicted & pressure-tested

I choose the methods, use AI to predict the outcomes and interrogate the findings, then commit every UX research deliverable to the repo.

Predict, then verify

I pick the methods for the question at hand, use AI to predict the likely outcome, then run the study and interrogate exactly where reality diverged. Every deliverable is committed to the repo — research versioned right next to the design it shaped.

Usability testingInterviewsSurveyHeuristic eval

03-research.mdpredicted vs observed

Admins skim, don't read

predicted72% scan-firstobserved78% scannedmatch

Sorting by risk wins

predictedpreferredobservedconfirmedmatch

Five filters is enough

predictedenoughobservedwanted sevendelta

committed to repo

research/usability-round-1.md
research/interview-notes.md
research/survey-results.csv
research/synthesis.md

06~/renan-rios$copilot mock --count 4▋

Explore directions — in code

I spin up three or four real, coded mocks — no Figma — put them in front of the team, and let the strongest direction win.

04-explore.tsx4 mocks · 1 direction

→ the team reviews all four in the browser; the strongest direction moves forward.

07~/renan-rios$compile --design --to code▋

Interfaces, turned into code

For me, designing and building aren't separate steps. Every interface starts as a real component — so the mockup a team reviews is already production code, and nothing gets redrawn or lost on the way to ship.

export function Overview() {
  return (
    <Card title="Overview">
      {stats.map((s) => (
        <Row key={s.id} label={s.label} />
      ))}
    </Card>
  );
}

Overview

Active users72%

Risk score↓ 18%

MFA coverage94%

export function SignIn() {
  return (
    <form className="grid gap-3">
      <Field label="Email" />
      <Field label="Password" />
      <Button>Sign in</Button>
    </form>
  );
}

Password

export function Weekly() {
  return (
    <Chart data={weekly}>
      {weekly.map((d) => (
        <Bar key={d.day} height={d.value} />
      ))}
    </Chart>
  );
}

Weekly

MonSun

export function Overview() {
  return (
    <Card title="Overview">
      {stats.map((s) => (
        <Row key={s.id} label={s.label} />
      ))}
    </Card>
  );
}

Overview

Active users72%

Risk score↓ 18%

MFA coverage94%

export function SignIn() {
  return (
    <form className="grid gap-3">
      <Field label="Email" />
      <Field label="Password" />
      <Button>Sign in</Button>
    </form>
  );
}

Password

export function Weekly() {
  return (
    <Chart data={weekly}>
      {weekly.map((d) => (
        <Bar key={d.day} height={d.value} />
      ))}
    </Chart>
  );
}

Weekly

MonSun

export function Overview() {
  return (
    <Card title="Overview">
      {stats.map((s) => (
        <Row key={s.id} label={s.label} />
      ))}
    </Card>
  );
}

Overview

Active users72%

Risk score↓ 18%

MFA coverage94%

export function SignIn() {
  return (
    <form className="grid gap-3">
      <Field label="Email" />
      <Field label="Password" />
      <Button>Sign in</Button>
    </form>
  );
}

Password

export function Weekly() {
  return (
    <Chart data={weekly}>
      {weekly.map((d) => (
        <Bar key={d.day} height={d.value} />
      ))}
    </Chart>
  );
}

Weekly

MonSun

export function Overview() {
  return (
    <Card title="Overview">
      {stats.map((s) => (
        <Row key={s.id} label={s.label} />
      ))}
    </Card>
  );
}

Overview

Active users72%

Risk score↓ 18%

MFA coverage94%

export function SignIn() {
  return (
    <form className="grid gap-3">
      <Field label="Email" />
      <Field label="Password" />
      <Button>Sign in</Button>
    </form>
  );
}

Password

export function Weekly() {
  return (
    <Chart data={weekly}>
      {weekly.map((d) => (
        <Bar key={d.day} height={d.value} />
      ))}
    </Chart>
  );
}

Weekly

MonSun

08~/renan-rios$git push origin main▋

Hand off through the repo

Engineers pull the same repository the prototype lives in and turn it into the shipped product — no redraw, no translation, no lossy handoff.

One repo, zero translation

Because the prototype is already production-grade code in the same repository, engineers don't rebuild from a picture — they pull the branch, wire it to real data, and ship. The design can't drift from what launches, because they are the same thing.

Same codebaseReal componentsTyped & documentedPR-ready

06-handoff.tsprototype → production

$ git push origin main

→ prototype/ ready for engineering

PR #128 · design → production Merged

3 files · reviewed by 2 engineers · CI green

prototypeproduction

shipped — no redraw, no lossy handoff

09~/renan-rios$cat tools.json▋

The stack

Every tool in the loop — and what it actually does.

Obsidian

Offline-first Markdown “second brain” of linked notes.

NotebookLM

Google's AI research tool that synthesizes sources into notes & visuals.

VS Code

Microsoft's code editor — where the whole process runs.

GitHub Copilot

GitHub's AI pair-programmer, inside the editor.

Copilot CLI

Agentic GitHub Copilot in the terminal.

Claude Opus

Anthropic's frontier model — reasoning & design partner.

Claude Code

Anthropic's agentic coding tool in the terminal.

MCP servers

Model Context Protocol — the open standard wiring agents to tools & data.

GitHub

Where the code lives, iterates and hands off.

main 0↓ 0↑ 0 0 renan-rios/portfolio

GitHub LinkedInLn 1, Col 1Spaces: 2UTF-8TypeScript JSX