03
Design System + AI Handoff
El design system no acaba en Figma. Acaba en producción.
- Design Systems
- AI Workflow
- Dev Handoff
El problema
Entre el diseño y el código, demasiado conocimiento se perdía por el camino.
En el handoff tradicional, el desarrollador entra en Figma, interpreta el diseño, toma decisiones que no debería tener que tomar y, casi inevitablemente, se deja cosas. No por falta de atención — sino porque traducir un sistema de diseño a código de forma fiel es un trabajo que requiere contexto que Figma no transmite solo.
El resultado era un ciclo de revisiones: diseño comprobaba si se habían aplicado correctamente los estilos, el developer volvía a revisar qué había cambiado, y el conocimiento del design system viajaba de persona a persona en lugar de estar codificado en el proceso.
El proceso
- 01Design systemCreación desde cero de un sistema de diseño completo: tokens, componentes, variantes y documentación de uso. La única fuente de verdad entre diseño y desarrollo.
- 02Diagnóstico del handoffEl sistema existía, pero el handoff seguía siendo manual e interpretativo. Los ciclos de revisión eran síntoma de que el conocimiento no estaba en el proceso.
- 03Skill de generaciónPrimer skill: Claude lee el diseño en Figma a través del MCP y, con las restricciones del framework del equipo, genera código listo para usar. El developer no parte de cero.
- 04Skill de validaciónSegundo skill: mapea el conocimiento del design system y verifica lo que el framework no controla — padding, tipografía, comportamientos visuales. QA de diseño automatizado.
- 05ProducciónAmbos skills funcionan en producción. Flujo completo: diseño en Figma → código en el framework → validación automática contra el design system.
La solución
Design system desde cero
Tokens, componentes y documentación de uso. La base que hace posible la automatización: si el sistema no es consistente, los skills no pueden serlo.
Generación de código contextual
El skill lee el diseño y genera código adaptado al framework del equipo, no código genérico. El conocimiento del sistema está codificado en las restricciones del skill.
Validación automática de diseño
El segundo skill revisa lo que escapa al framework: padding, tipografía, proporciones. El conocimiento que antes viajaba informalmente ahora está en el proceso.
Handoff sin revisiones manuales
El desarrollador no interpreta el diseño, lo recibe traducido. El equipo de diseño no revisa el código, el skill lo hace.
Tecnología
- FigmaDesign system, componentes y fuente de verdad del diseño
- ClaudeMotor de los dos skills de generación y validación
- Figma MCPConexión entre Claude y el contenido del archivo de Figma
Reflexión
Automatizar el handoff no es reemplazar el criterio — es preservarlo.
El handoff manual no fallaba porque los developers no prestaran atención. Fallaba porque pedir a alguien que traduzca fielmente un sistema complejo a otro sistema complejo, de forma consistente y sin omisiones, es un problema de proceso — no de personas.
La IA no elimina el juicio de diseño: lo codifica. El conocimiento que antes dependía de que alguien lo transmitiera informalmente ahora está en el propio flujo de trabajo. Y eso libera tiempo para lo que realmente requiere criterio.