Un design system es el conjunto de decisiones visuales, tus colores, tu tipografía, tus espaciados y tus componentes reutilizables, que mantienen coherente todo lo que construyes. Con Claude Code lo montas desde cero y lo mantienes al día con el tiempo.
Puedes hacerlo por dos vías, con Claude Design o a partir de un diseño que ya tengas en Figma, y esta guía te lleva paso a paso por las dos. Síguela en orden y al terminar tendrás tu design system funcionando.
Montar un design system a mano lleva horas de catalogar colores, anotar tamaños, recrear botones y documentarlo todo, y Claude Code se encarga de esa parte mecánica, cataloga tus estilos, extrae los tokens y genera los componentes en código con su documentación.
Lo que no hace es decidir por ti, porque las decisiones de diseño siguen siendo tuyas, qué paleta transmite tu marca o cómo se comporta cada componente, y solo acelera la ejecución cuando ya las tienes tomadas.
Puedes montarlo con Claude Design, la vía nativa más directa si empiezas de cero, o conectando Claude Code con Figma cuando ya tienes ahí tu diseño y quieres pasarlo a código sin rehacerlo.
Antes de nada necesitas tener Claude Code instalado y funcionando en tu equipo, que es el único requisito común a las dos vías.
Si vas por la vía de Claude Design no necesitas nada más, solo abres la skill de Claude Design, creas tu organización y empiezas a montar tu sistema.
Si vas por la vía de Figma necesitas un archivo de Figma con tu diseño y el plugin que instala el servidor MCP, el puente que deja a Claude Code leer tus frames y variables, y te sirve igual si partes de un diseño terminado o desde cero.
Los pasos que siguen son los mismos por las dos vías, y solo cambian algunos detalles entre Claude Design y Figma que te iré señalando. Ve en orden hasta la comprobación final para verlo entero.
Tu vía depende de dónde partes, así que vas por Claude Design si arrancas de cero o solo tienes el proyecto en código, y tiras por Figma si tu diseño ya vive ahí y quieres llevarlo a código.
Con Claude Design trabajas dentro de la propia herramienta, mientras que con Figma das el salto de tu archivo al código, así que deja la vía decidida antes de seguir y el resto irá rodado.
En la vía de Claude Design le das tus activos de marca durante el onboarding, desde repositorios y prototipos hasta un logo suelto, y Claude saca de ahí tus colores, tu tipografía y tus patrones. En la de Figma activas el Dev Mode y arrancas el servidor MCP con la guía oficial de Figma para que lea tus frames y variables.
Antes de generar nada pídele un inventario con un prompt como "audita este diseño y catalógame los colores, tipografías, espaciados y componentes que encuentres", y tendrás una foto clara de lo que hay y de las incoherencias que arrastras.
Los design tokens son la versión formal de tus decisiones de diseño, cada valor guardado con un nombre para reutilizarlo en todo el producto, como tus colores, tu escala tipográfica, tus espaciados, tus radios de borde y tus sombras.
Haz que Claude Code los extraiga del inventario y los escriba en el formato de tu stack, que con Tailwind suele ser la configuración del tema y las variables de tu CSS. Pídeselos en modo claro y modo oscuro para que cada componente parta de los mismos valores en vez de inventárselos.
Con los tokens listos, encárgale a Claude Code los componentes que vas a reutilizar, como botones, tarjetas o campos de formulario, construidos sobre esos valores en vez de a mano, y cada uno apuntará a la variable del sistema para que un cambio en el color primario se propague solo a todo lo que lo use.
Dile que compare su resultado con el sistema y lo corrija antes de enseñártelo, y revisa que cada componente respete los espaciados y los estados que esperas, porque tú tienes la última palabra sobre el diseño.
Un design system sin documentar se olvida en cuanto entra otra persona al proyecto, así que pídele a Claude Code un archivo de documentación, normalmente un DESIGN.md, con los tokens, los componentes y cómo se usa cada uno.
Ese archivo le sirve de referencia en las siguientes sesiones y a tu equipo para construir sin salirse del sistema, y cuando cambies algo actualízalo también para que no se quede desfasado.
La prueba de fuego es montar una pantalla completa solo con los componentes que acabas de crear, así que encárgale a Claude Code una vista real, un login, un dashboard o una landing.
Fíjate en si la arma reutilizando tus componentes y tus valores sin inventarse colores nuevos, y si aparece un valor suelto o un componente que no existía, ahí tienes un hueco que cerrar antes de darlo por bueno.
Con el tiempo el código se desvía del sistema y aparecen colores escritos a mano, espaciados sueltos que nadie tokenizó y componentes que dejaron de coincidir con el original, algo normal cuando varias personas tocan el proyecto durante meses.
Claude Code te ayuda a reconducir esa deriva usando tu propio sistema como referencia, y puedes pedirle auditorías periódicas y reenlazados con prompts como estos.
Trabajar con instancias reales de los componentes cambia el resultado, porque un botón que es instancia del sistema y no una copia de sus valores refleja cualquier cambio del original en todas partes, mientras que si copiaste los valores sueltos cada pantalla queda congelada en el pasado y la coherencia se pierde.
Ya tienes todo lo que necesitas para montar tu design system con Claude Code y mantenerlo coherente a medida que el proyecto crece, y como es el mismo flujo en cada proyecto nuevo, cuanto antes lo montes menos tiempo perderás después peleándote con estilos sueltos.
Si quieres aprender a sacarle todo el partido a Claude Code y crear tus propios proyectos sin programar, apúntate a nuestro curso gratuito de Vibe Coding con Claude Code.
Descubre lo que puedes crear en 7 días, sin saber programar
Cada día, un proyecto que podrás construir sin escribir una sola línea de código, directo a tu bandeja de entrada.
Empieza Gratis
Academia de herramientas no-code y low–code
.svg){kind=icon}
