Skip to main content

03

Design System + AI Handoff

The design system doesn't end in Figma. It ends in production.

  • Design Systems
  • AI Workflow
  • Dev Handoff

El problema

Between design and code, too much knowledge was lost along the way.

In traditional handoff, the developer opens Figma, interprets the design, makes decisions they shouldn't have to make and, almost inevitably, misses things. Not through lack of attention — but because faithfully translating a design system into code requires context that Figma alone doesn't convey.

The result was a cycle of reviews: design checked whether styles had been applied correctly, the developer went back to check what had changed, and design system knowledge travelled from person to person instead of being encoded in the process.

El proceso

  1. 01Design systemBuilt a complete design system from scratch: tokens, components, variants and usage documentation. The single source of truth between design and development.
  2. 02Handoff diagnosisThe system existed, but handoff was still manual and interpretive. Review cycles were a symptom that the knowledge wasn't in the process.
  3. 03Generation skillFirst skill: Claude reads the design in Figma via the MCP and, with the team's framework constraints, generates ready-to-use code. The developer doesn't start from scratch.
  4. 04Validation skillSecond skill: maps the design system knowledge and verifies what the framework doesn't control — padding, typography, visual behaviours. Automated design QA.
  5. 05ProductionBoth skills run in production. Full flow: design in Figma → code in the framework → automatic validation against the design system.

La solución

Design system from scratch

Tokens, components and usage documentation. The foundation that makes automation possible: if the system isn't consistent, the skills can't be either.

Contextual code generation

The skill reads the design and generates code adapted to the team's framework, not generic code. System knowledge is encoded in the skill's constraints.

Automated design validation

The second skill checks what falls outside the framework: padding, typography, proportions. Knowledge that previously travelled informally is now in the process.

Handoff without manual reviews

The developer doesn't interpret the design — they receive it translated. The design team doesn't review the code — the skill does.

Tecnología

  • FigmaDesign system, components and source of truth for design
  • ClaudeEngine behind both the generation and validation skills
  • Figma MCPConnection between Claude and the Figma file content

Reflexión

Automating handoff isn't replacing judgement — it's preserving it.

Manual handoff didn't fail because developers weren't paying attention. It failed because asking someone to faithfully translate a complex system into another complex system, consistently and without omissions, is a process problem — not a people problem.

AI doesn't eliminate design judgement: it encodes it. The knowledge that previously depended on someone passing it on informally is now in the workflow itself. And that frees up time for what genuinely requires judgement.