03
Design System + AI Handoff
El design system no acaba a Figma. Acaba a producció.
- Design Systems
- AI Workflow
- Dev Handoff
El problema
Entre el disseny i el codi, massa coneixement es perdia pel camí.
En el handoff tradicional, el desenvolupador entra a Figma, interpreta el disseny, pren decisions que no hauria de prendre i, gairebé inevitablement, es deixa coses. No per manca d'atenció — sinó perquè traduir un sistema de disseny a codi de forma fidel és una feina que requereix context que Figma no transmet sol.
El resultat era un cicle de revisions: disseny comprovava si s'havien aplicat correctament els estils, el developer tornava a revisar què havia canviat, i el coneixement del design system viatjava de persona a persona en lloc d'estar codificat en el procés.
El proceso
- 01Design systemCreació des de zero d'un sistema de disseny complet: tokens, components, variants i documentació d'ús. L'única font de veritat entre disseny i desenvolupament.
- 02Diagnòstic del handoffEl sistema existia, però el handoff seguia sent manual i interpretatiu. Els cicles de revisió eren símptoma que el coneixement no estava en el procés.
- 03Skill de generacióPrimer skill: Claude llegeix el disseny a Figma a través del MCP i, amb les restriccions del framework de l'equip, genera codi llest per usar. El developer no parteix de zero.
- 04Skill de validacióSegon skill: mapeja el coneixement del design system i verifica el que el framework no controla — padding, tipografia, comportaments visuals. QA de disseny automatitzat.
- 05ProduccióTots dos skills funcionen en producció. Flux complet: disseny a Figma → codi al framework → validació automàtica contra el design system.
La solución
Design system des de zero
Tokens, components i documentació d'ús. La base que fa possible l'automatització: si el sistema no és consistent, els skills no poden ser-ho.
Generació de codi contextual
El skill llegeix el disseny i genera codi adaptat al framework de l'equip, no codi genèric. El coneixement del sistema està codificat a les restriccions del skill.
Validació automàtica de disseny
El segon skill revisa el que escapa al framework: padding, tipografia, proporcions. El coneixement que abans viatjava informalment ara és al procés.
Handoff sense revisions manuals
El desenvolupador no interpreta el disseny, el rep traduït. L'equip de disseny no revisa el codi, el skill ho fa.
Tecnología
- FigmaDesign system, components i font de veritat del disseny
- ClaudeMotor dels dos skills de generació i validació
- Figma MCPConnexió entre Claude i el contingut de l'arxiu de Figma
Reflexión
Automatitzar el handoff no és substituir el criteri — és preservar-lo.
El handoff manual no fallava perquè els developers no prestessin atenció. Fallava perquè demanar a algú que tradueixi fidelment un sistema complex a un altre sistema complex, de forma consistent i sense omissions, és un problema de procés — no de persones.
La IA no elimina el judici de disseny: el codifica. El coneixement que abans depenia que algú el transmetés informalment ara és al propi flux de treball. I això allibera temps per al que realment requereix criteri.