The Making of an AI-Native Design Portfolio

A portfolio built by its own tools

"This portfolio wasn't assembled. It was orchestrated — a coordinated output of human creative direction and AI execution running in parallel, at a pace no single person could match alone."

In June and July of 2026, I built this portfolio using a method most designers have not tried: I treated Claude Code as a junior engineering team, issued it a brief for each task, and let it execute — while I retained all creative direction, content ownership, and quality judgment.

The result is 25 portfolio pages, a live design system synced to Claude Design, eight Figma screens for a civic mobile app, an interactive urban planning prototype, and a complete brand identity — all produced in a single extended session, deployed to Netlify, and maintained as a coherent product throughout.

This document explains how it was built, what each tool contributed, where AI was genuinely useful and where it was not, and what this process demonstrates about the future of design work.

The deliverables

In a single orchestrated session, the following were produced or substantially improved:

• 25 portfolio pages — each case study reviewed, structurally elevated, and section-labelled for consistent scannability
• PereX brand identity — a gradient CSS treatment for the "X" character using -webkit-background-clip: text, applied consistently across all 25 pages and both footers via a single .logo-x class
• Ruta Fresca — a mobile civic app for Barcelona heat safety, designed in Figma at v2.0 premium quality: dark system, Inter typography, typography-led urgency, 24px gutters, 8 screens across iOS and Android
• Sol Planner — a full-screen interactive HTML prototype for city planners running urban heat intervention simulations, embedded in the portfolio
• Claude Design sync — 14 component cards and 51 total files uploaded to a Claude Design project, enabling the AI design agent to generate new portfolio work using real PereX tokens and components
• Design handoff document — a comprehensive Markdown handoff capturing Figma node IDs, design tokens, motion spec, remaining work, and locked decisions

Every tool and its role

Claude Code

The primary orchestration layer. Claude Code ran as a persistent background session — issuing file reads, HTML edits, Bash commands, Figma API calls, and subagent launches from a single conversational interface. It replaced what would typically require a frontend developer, a build engineer, and a project coordinator. I directed it the way a Creative Director briefs a team: intent and constraints, not implementation steps.

Claude Design

A live AI design agent at claude.ai/design. Out of the box, it designs with generic components. After the design system sync, it can design with PereX components — the real nav, footer, card patterns, section labels, decision blocks, and typography tokens from this portfolio. Any prompt like "build a new case study page" now produces output that is structurally and visually consistent with the existing site.

MCP — Model Context Protocol

The integration layer connecting Claude Code to external tools. MCP servers provided access to Figma, Notion, Google Calendar, Canva, and others via a standardized protocol. Each server exposes tools that Claude Code can call as naturally as any other function. The Figma MCP was the most heavily used: it enabled reading and writing Figma files programmatically, without opening the Figma app.

Figma MCP

Used to read existing Figma files for context (node IDs, design tokens, existing screen structure) and to write new content into them (screen creation for Ruta Fresca, annotation frames, design token documentation). The Figma plugin's use_figma tool is the primary write interface — it executes Plugin API commands against the active Figma file, translating structured instructions into real Figma nodes.

Fork agents

Parallel background subagents spawned via the Agent tool with subagent_type: "fork". A fork inherits the parent's full conversation context and runs independently in the background, reporting back a single result when done. At peak, 25+ fork agents ran simultaneously — one per portfolio page — each owning exactly one file, with no overlap and therefore no conflicts.

DesignSync

The tool that uploads a design system to Claude Design. It accepts a local directory of component cards, token files, and a bundle CSS file, and pushes them to a Claude Design project via a finalize_plan approval gate and subsequent write_files calls. The PereX upload comprised 51 files across 14 component groups, built manually from CSS custom properties extracted from the portfolio stylesheet — no Storybook, no React, no Webpack.

Netlify CLI

One command: npx netlify-cli deploy --prod --dir .. The entire portfolio — all 25 HTML files, all assets, all CSS, all JavaScript — deploys in under 30 seconds. The simplicity of the deployment is a direct consequence of the no-build-system decision. There is nothing to compile; Netlify serves the directory as-is.

CSS custom properties

The design token layer. All agents read from and write against the same token set defined in assets/css/style.css: --bg, --accent, --sans, --radius, spacing from --space-xs through --space-2xl. A single source of truth that all 25 pages and all 14 Claude Design components reference. When a token changes, everything changes — without a build step.

How orchestration actually worked

The session followed a coordinator-and-forks model: one primary Claude Code session acting as coordinator, spawning fork agents for parallelizable work, and handling sequential tasks inline. The coordinator maintained state, tracked which agents owned which files, and synthesized results as they came in.

Sequential work (coordinator inline)

Tasks with dependencies — design decisions, approval gates, tool loading, config writing — ran inline in the coordinator session. The DesignSync flow is the clearest example: create project → pin config → build bundle → get user approval → upload. Each step depended on the previous result, so none could be parallelized.

Parallel work (fork agents)

Tasks that were independent and file-scoped ran as parallel forks. The 25-page portfolio elevation is the clearest example: every page was independent, every agent owned one file, and all 25 ran simultaneously. The total elapsed time was determined by the slowest agent, not the sum of all agents.

Human approval gates

Two categories of decisions required human input and were never automated. The first: creative direction — which brand treatment to use, what the gradient should look like, whether a screen was good enough to screenshot. The second: upload approval — the finalize_plan call in DesignSync required an explicit click before any files reached the cloud. These gates are not friction; they are the points where human judgment is genuinely irreplaceable.

Drift detection

After any multi-agent session that touches multiple systems (HTML files, Figma, Claude Design, Netlify), a drift check is necessary. Did every agent complete its task? Did any agent make a change that conflicts with another's? Did the Netlify deploy succeed? Did the Figma upload land correctly? The coordinator runs these checks as a closing pass before reporting completion.

What AI handled — and what it didn't

AI handled

• Reading all 25 HTML files and identifying structural gaps
• Adding .section-label spans before every major section across all pages
• Wrapping ungridded images in semantic <figure> elements with descriptive captions
• Adding validation disclaimer sections to pre-validation products
• Building 14 component HTML cards for Claude Design, each with TypeScript props and usage documentation
• Extracting CSS token files (colors, typography, spacing) from the main stylesheet
• Adding floating back-links to prototype pages without touching their internal structure
• Writing and deploying the complete portfolio to Netlify
• Diffing before and after to confirm no existing content was modified
• Running the entire audit — 25 pages — in the time it would take to manually audit three

Humans handled

• All creative direction: what the portfolio should feel like, what "premium" meant for Ruta Fresca
• The brand decision: the cyan-to-magenta gradient on the X, and the choice to make it CSS rather than an image
• All case study content: every word in every case study was written by Josue, not by an agent
• Design quality judgment: Jay manually fixed misaligned icons in Figma before allowing screenshots — "I WASN'T GOING TO LET YOU USE THESE WITH misaligned text and icons."
• Product decisions: which screens to include in the portfolio, which Figma nodes to screenshot
• Upload approval: the one-click gate before any files reached Claude Design
• Course correction: catching the brand name error ("PerX" was rejected; "PereX" is correct) immediately and redirecting
• Tone and voice: all decisions about what this portfolio communicates and to whom

"AI is extraordinarily good at execution. It is not good at judgment. The division is cleaner than most people expect — and more important to maintain than most tools currently encourage."

Calm technology · Human-in-the-loop · Systems thinking

The same design philosophy that runs through the case studies in this portfolio also shaped how the portfolio was built.

Calm technology means the system does its work without demanding attention. The 25 fork agents ran in the background while the conversation continued. No waiting. No status polling. The work arrived as notifications. This is calm technology applied to a design workflow: the tool recedes; the result appears.

Human-in-the-loop is not a safety afterthought; it is an architectural decision. Every consequential action in this build had a human gate: approve the upload, confirm the brand direction, review the screenshots before embedding them. The AI is not autonomous — it is assistive. The human remains the decision-maker throughout.

Systems thinking shows up in the constraint that made everything else possible: one agent per file, no exceptions. This single rule — simple, clear, applied consistently — made 25-way parallelization safe without any locking infrastructure. Good systems design collapses complex coordination into simple invariants.

What this demonstrates

This is not a story about AI replacing designers. It is a story about what happens when a designer understands both their domain and their tools well enough to direct AI at the level of intent rather than instruction.

A solo designer can now operate at a team's throughput. The 25-page audit and elevation that ran in this session would have taken a human team of three people two full days. It ran in under two hours. The designer's time was spent on direction, quality review, and creative decisions — not on the mechanical work of adding section labels to 25 HTML files.

The design system is now a living interface. Before this session, the PereX design system existed only as a CSS file. After the Claude Design sync, it is a seeded AI design project. Future design work — new pages, new layouts, new case study structures — can be prototyped by prompting Claude Design with natural language and getting back proposals that use the real components. The barrier between "I want to try a new layout" and "I have a proposal to evaluate" collapsed to seconds.

AI-native UX design requires a new kind of judgment. The decisions that mattered most in this build were not about HTML or CSS. They were about when to trust the agent's output and when to override it, which tasks to parallelize and which required sequential attention, and how to brief an agent at the right level of abstraction. These are new design skills. They are not taught in bootcamps yet. They will be.

The hard constraint remains: AI cannot have taste. Taste — the judgment about what is good, what is coherent, what is worth keeping — is irreducibly human. Every agent in this build executed faithfully. The quality of the result was determined by the quality of the direction. Garbage in, garbage out is still the rule; AI just processes the garbage faster.

The portfolio as proof of method

This portfolio does two things simultaneously. It is a body of design work — case studies, prototypes, research, systems. And it is a demonstration of how that work was made — a working example of AI-native design practice at production scale.

The projects inside it — Sol OS, Ruta Fresca, BaseLine, ThroughLine, the JAY experiences — reflect a consistent set of values: human agency, ethical architecture, research-first process, systems thinking. The method that produced the portfolio reflects the same values: the human stays in charge, the AI handles execution, and the system is designed for clarity over complexity.

If you are a designer wondering whether AI changes your role: it changes the ratio. Less time on the mechanical. More time on the meaningful. The question is whether you are ready to operate at that ratio — to think clearly enough about what you want, and to direct precisely enough to get it.

This portfolio is evidence that the answer is yes.