Una CLI que permite a un asistente de IA crear y editar diseños reales y editables en tu aplicación local Figma Desktop, sin necesidad de una clave de API.
1,1 mil130JavaScriptMITActualizado hace 14 días
BIAsia/c2d2c
Skills de Claude Code para llevar diseños de Figma a una base de código y devolver el estado del código a Figma, además de una skill para gobernar el sistema de estilos.
Alternativa open source a:Figma Dev Mode
- Estrellas
- 57
- Forks
- 2
- Issues abiertos
- 0
- Último commit
- hace 3 meses
¿Qué es?
c2d2c es un conjunto de tres skills de Claude Code que conectan Figma y una base de código de producción en ambas direcciones. La skill d2c convierte un enlace de diseño de Figma en código mediante un análisis de los componentes existentes, la revisión de un plan, una implementación 1:1, una página de regresión, la validación con capturas de pantalla y la apertura automática de una merge request. La skill c2d hace el recorrido inverso y exporta componentes, estados y design tokens del código fuente a archivos de Figma.
La tercera skill, ds-govern, trabaja únicamente del lado del código. Hace un inventario del uso de estilos, como el radio de borde, propone una única fuente de verdad, migra todo el proyecto a ella y añade un control de CI para evitar desviaciones. Un plugin opcional de Figma, Token Sync, permite que los diseñadores envíen cambios de vuelta al código como merge requests.
Instálalo con npx skills add. Cada skill se activa mediante solicitudes en lenguaje natural, y la primera vez que se ejecuta guarda la configuración del proyecto en un archivo C2D2C.md en la raíz del repositorio. Los pasos relacionados con el diseño requieren el conector Figma MCP.
Funciones clave
- 01Implementación de diseños de Figma en código, con un análisis de los componentes reutilizables antes de empezar
- 02Exportación de componentes, estados y design tokens del código a Figma
- 03Unificación del sistema de estilos con una única fuente de tokens y un control de CI
- 04Herramienta de capturas de regresión basada en Playwright, con capturas de página completa y primeros planos de secciones
- 05Plugin opcional de Figma que envía los cambios de los diseñadores al código como merge requests
Casos de uso
- Implementar un diseño de Figma 1:1 en una base de código frontend existente
- Exportar los componentes de una base de código a Figma para revisarlos en el proceso de diseño
- Unificar valores dispersos de espaciado, radio o color en una escala de tokens
Inicio rápido
- 1
Instala las skills con el gestor de paquetes
npx skills add BIAsia/c2d2c - 2
Conecta el conector Figma MCP (acceso de lectura para d2c y de escritura para c2d)
- 3
Pídele al agente que ejecute una skill indicando lo que quieres hacer y el enlace de Figma; la configuración se inicializa en C2D2C.md la primera vez que se ejecuta
Antes de usarlo
- El conector Figma MCP es un requisito imprescindible.
- El README recomienda ejecutarlo con Claude Fable 5 y señala que los modelos anteriores suelen omitir pasos.
Temas
Preguntas frecuentes
- ¿Qué es c2d2c?
- Skills de Claude Code para llevar diseños de Figma a una base de código y devolver el estado del código a Figma, además de una skill para gobernar el sistema de estilos. c2d2c es un conjunto de tres skills de Claude Code que conectan Figma y una base de código de producción en ambas direcciones. La skill d2c convierte un enlace de diseño de Figma en código mediante un análisis de los componentes existentes, la revisión de un plan, una implementación 1:1, una página de regresión, la validación con capturas de pantalla y la apertura automática de una merge request. La skill c2d hace el recorrido inverso y exporta componentes, estados y design tokens del código fuente a archivos de Figma.
- ¿c2d2c es gratuito? ¿Qué licencia tiene?
- c2d2c es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
- ¿c2d2c sigue mantenido?
- Actualizado en los últimos 6 meses. El último commit de c2d2c fue el 3 ago 2026.
- ¿Para qué puedo usar c2d2c?
- Implementar un diseño de Figma 1:1 en una base de código frontend existente Exportar los componentes de una base de código a Figma para revisarlos en el proceso de diseño Unificar valores dispersos de espaciado, radio o color en una escala de tokens
- ¿Cómo se instala c2d2c?
- Instala las skills con el gestor de paquetes: npx skills add BIAsia/c2d2c Conecta el conector Figma MCP (acceso de lectura para d2c y de escritura para c2d) Pídele al agente que ejecute una skill indicando lo que quieres hacer y el enlace de Figma; la configuración se inicializa en C2D2C.md la primera vez que se ejecuta
- ¿Dónde consigo c2d2c?
- El código fuente y las instrucciones de instalación están en GitHub: https://github.com/BIAsia/c2d2c
Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.
Proyectos relacionados
CLI que extrae el sistema de diseño de un sitio web, un repositorio git o una base de código local en una carpeta de archivos que Claude Code puede leer para crear una UI a juego.
2,4 mil250TypeScriptSin licenciaActualizado hace 6 meses
Agent Skills para que los agentes de programación diseñen interfaces distintivas, con dirección de arte, fotos reales y una revisión en el navegador, en lugar de páginas genéricas de IA.
99,8 mil6,8 milJavaScriptMITActualizado hace 21 horas
Kit de instrucciones y conocimientos que convierte Claude y otros agentes de programación en expertos en diseño UX/UI, con tokens DTCG, especificaciones de componentes, 138 sistemas de diseño y 52 comprobaciones objetivas.
2,4 mil253JavaScriptMITActualizado anteayer
Una skill de agente que extrae la identidad visual de interfaces de referencia y la convierte en Design DNA estructurado en JSON, para luego generar interfaces que sigan ese estilo.
2 mil109JavaScriptMITActualizado hace 2 meses
Servidor MCP gratuito y bidireccional para Figma que permite a agentes de programación convertir diseños en código y devolver diseños al lienzo.
1,1 mil63TypeScriptMITActualizado hace 3 días