Design-Dev Agentic Pipeline

Design-Dev Agentic Pipeline

Designing for
Machine Legibility

Stack

Figma, Figma MCP, Code Connect, Storybook, Claude Code

Role

Staff Designer

– Leading the design system overhaul the pipeline runs on

Problem

Every traditional handoff has a translation layer — the gap between what the designer meant and what the engineer builds. If a model can read a well-structured design file and generate working UI, the deliverable doesn’t have to be documentation anymore. It can be software.

TL;DR

An AI agent can read your design and build the UI. Although it does a pretty good job at assembling, it doesn't add craft. So the design work moves upstream, into the system itself.

  • But the agent only assembles. It doesn't add taste, it carries through whatever taste is already in your design system.

  • So the design work doesn't vanish. It moves upstream, into authoring the system itself.

  • The craft isn't in the assembly. It's in the vocabulary the agent assembles from.

The setup

Figma MCP + Claude Code + a design system where every Figma component is linked to its real code counterpart. The agent reads the actual Button, real props, tokens, variants, and builds from production components, not a picture.

Figma MCP + Claude Code + a design system where every Figma component is linked to its real code counterpart. The agent reads the actual Button, real props, tokens, variants, and builds from production components, not a picture.

What it removes

The handoff specs and the manual rebuild was happily removed from the equation… the two most expensive, least valuable steps. Nothing goes stale, because design and code read from the same contract. My edits ended up migrating directly into the codebase, because a running UI became the more honest surface.

The system

Five design inputs, one production build. I redesigned FigJam nodes as structured data objects instead of labels — screen name, route path, frame link, description — organized the Figma file to mirror the codebase directory, gave every interactive element an element ID in its layer name, and generated the PRD directly from the file. An MCP server queried the design live at build time, turning naming conventions into a real schema.

What it changed

Zero transcription errors between design intent and AI input. 1:1 parity across FigJam names, Figma layers, and code element IDs. The design file became a live data source via MCP rather than a static export that goes stale overnight — and the loop ran end-to-end, design file → prototype → PRD → production build, with no manual re-entry.

The problem with traditional handoff

Redlines and annotations narrow the gap between design intent and built UI, but neither is the thing itself — the prototype is.

So the goal shifted: make the design file structured enough that a machine can read it and generate working code. “What if the deliverable we handed engineers was already running?”

The system

Five design inputs, one production build. I redesigned FigJam nodes as structured data objects instead of labels — screen name, route path, frame link, description — organized the Figma file to mirror the codebase directory, gave every interactive element an element ID in its layer name, and generated the PRD directly from the file. An MCP server queried the design live at build time, turning naming conventions into a real schema.

What it changed

Zero transcription errors between design intent and AI input. 1:1 parity across FigJam names, Figma layers, and code element IDs. The design file became a live data source via MCP rather than a static export that goes stale overnight — and the loop ran end-to-end, design file → prototype → PRD → production build, with no manual re-entry.