Acelera el paso del diseño al código con la importación del sistema de diseño de Claude

Importa tus tokens de diseño y componentes existentes en Claude Design para que genere interfaces que coincidan automáticamente con las directrices de tu marca. Esto elimina los ciclos manuales de reconstrucción de diseño a código y mantiene los prototipos coherentes con tu sistema desde el primer borrador.

Claude Design ahora admite la importación de todo tu sistema de diseño directamente desde GitHub. En lugar de que Claude genere interfaces aleatorias, aprende tu biblioteca de componentes, paleta de colores, tipografía y reglas de espaciado, y luego construye prototipos que respetan tus estándares. Esto importa porque cierra la brecha entre lo que quieren los diseñadores y lo que implementan los desarrolladores.

Para configurarlo, crea un archivo design-system-spec.json en la raíz de tu repositorio que asigne tus tokens de diseño, archivos de componentes y recursos SVG. El archivo es sencillo: solo indica a Claude la URL de tu repositorio, especifica tu framework (React, Vue, etc.) y enumera las rutas a tus recursos de diseño. Haz commit de esto una vez, y cada vez que abras Claude Design podrás importar tu sistema.

Aquí tienes un flujo de trabajo real: un product manager describe un nuevo panel de ajustes para su SaaS: "Reconstruye nuestra página de ajustes con tres pestañas: Perfil, Facturación, Equipo. Mueve los interruptores de notificaciones a Preferencias." Claude Design genera un prototipo usando los componentes y colores reales de tu sistema. Un diseñador lo revisa en el lienzo, ajusta el espaciado con controles deslizantes y añade notas de implementación directamente sobre los elementos. Luego pulsa "Enviar a Claude Code": Claude Code recibe todo como una especificación legible por máquina, no como una captura de pantalla, y puede implementarla. Para los equipos que ya usan Claude Pro o Max, esto elimina el tedioso paso de pegar maquetas en el código y reconstruirlas manualmente.

Una limitación: la importación es una instantánea. Si actualizas tu biblioteca de componentes después de importarla, ejecuta el comando /design-sync en Claude Code para refrescar. Trátalo como reconstruir una prueba tras una actualización del sistema: la sincronización es un solo comando, no un proceso manual.