Este post es el primero de una serie donde construyo un design system completo desde cero. El punto de partida fue generar variables de Figma con Claude Code.
Archivo en blanco, terminal abierta y un prompt… con eso arranqué el nuevo UX fomo Design System.
No improvisé.
Tenía un archivo Markdown preparado donde especifiqué exactamente qué quería obtener: tokens basados en Tailwind, primitivos, colores semánticos en light y dark mode, spacing, radius, stroke, icon size, breakpoints y 22 estilos de texto.
Abrí la terminal, inicié Claude Code en la carpeta del proyecto, copié el link del archivo de Figma, pegué el prompt y lancé la petición.
Claude Code trabajó por fases y me pidió confirmación antes de continuar con cada una:
- Fase 1: primitivos
- Fase 1B: colores semánticos
- Fase 1C: spacing, radius, stroke, icon size y breakpoints
- Fase 2: text styles con heading, body y caption
Resultado: 7 colecciones y 166 variables generadas.
El tutorial
Puedes ver todo el proceso creación de tokens en el vídeo, y te lo cuento con más detalle debajo del reproductor.
Lo que tuve que ajustar
Ya lo sabes, revisar lo que hizo la máquina es parte del flujo.
Lo primero que detecté fue un problema con los tokens de color: el light y dark mode tenían los mismos valores. Un fondo blanco en light y blanco en dark no tenía sentido. Volví a la terminal, le pedí que los cambiara y Claude Code lo arregló sin problema.
Otra cosa: los estilos de texto tenían valores hardcodeados, font size, line-height y font weight puestos a mano, sin variables vinculadas.
Le pedí que lo ajustara. Con Sonnet necesité una segunda instrucción. Las veces que lo hice con Opus lo hizo del tirón. Y me lo apunté para afinar el prompt la próxima vez.
El line-height
Ojo a esto…
Cuando revisé el encabezado H1, el line-height estaba en píxeles. Con texto en varias líneas quedaba demasiado grande. Lo probé en porcentaje, 110%, y quedó mejor, aunque seguramente el estilo final lo dejaré en 140% en próximos vídeos.
Los valores de line-height en Figma los sigo poniendo a mano. Así que le pedí al modelo que eliminara las variables de line-height y hardcodeara esos valores directamente en los estilos de texto.
La colección de tipografía quedó más limpia.
Lo que quedó generado
7 colecciones de variables listas para usar en componentes: primitivos, colores semánticos, spacing, radius, stroke, icon size y breakpoints. Y 22 estilos de texto con variables font size y font weight. Los tendré que iterar, pero la base está hecha. Todo en el mismo archivo donde están las variables.
El prompt que usé lo tienes aquí: github.com/juanpoldi/figma-design-system-prompts
En el siguiente vídeo montaré el primer componente con Claude Code. Así seguiré con todo el sistema de diseño.
Aprende sobre UX/UI + IA, Figma y Product Design
📣 Apúntate a mi newsletter semanal
