Design System: El Motor de Escala
Arquitectura de Design Tokens y componentes reutilizables integrados con Nuxt UI y Tailwind, el sistema que hizo posible todo lo demás.
Sin un sistema compartido, diseño e ingeniería hablaban idiomas distintos. En producción, cada componente existía en tres versiones simultáneas.
Cuando llegué a GroWrk, el producto funcionaba, pero sobre una base frágil. Los diseños originales habían nacido en PowerPoint y Google Slides. Había una paleta de colores en Figma, pero no había sistema. Cada nueva feature obligaba a reinventar decisiones que ya deberían estar resueltas.
El problema real se volvió visible al tercer año, cuando intentamos actualizar la identidad visual. En producción existían decenas de versiones del mismo botón. Cada desarrollador había resuelto el mismo componente a su manera. El Design System de Figma existía en papel, pero para ingeniería, no existía.
Necesitábamos una sola fuente de verdad. Una que diseño e ingeniería pudieran compartir, sin detener el producto mientras lo construíamos.
Un Design System no se construye de una vez. Se cultiva.
El sistema que nadie pidió pero todos necesitaban
- ✓Construido en paralelo al desarrollo del producto, sin congelar features
- ✓31 componentes base documentados en Figma
- ✓6 categorías de tokens: colores, tipografía, shadows, radii, espaciados
- ✓250 tokens en total. Cada componente con mínimo 2 variables
- ✓Botones con hasta 60 variables para cubrir todos los estados posibles
- ✓Librería dedicada de 330 iconos
- ✓Único usuario real: yo
El momento en que el sistema reveló su propio problema
- ✓La actualización de identidad visual expuso las inconsistencias acumuladas en producción
- ✓Cada desarrollador había construido su propio botón. A su manera
- ✓El DS de Figma y el código seguían siendo mundos paralelos
- ✓Primera adopción real por parte de otros diseñadores del equipo
- ✓La diseñadora Jr. comenzó a usarlo, y sus preguntas retroalimentaron el sistema directamente
- ✓Primeras conversaciones con devs para migrar componentes a Storybook (no completado)
Una fuente de verdad para diseño e ingeniería
- ✓Migración estratégica a NUXT UI + Tailwind. Base compartida con ingeniería desde el inicio
- ✓40 componentes documentados con comportamiento definido en código y en Figma
- ✓~300 tokens. Sistema bilingüe: diseño e ingeniería sobre la misma nomenclatura
- ✓Auditoría de iconos: de 330 reducidos a 234 homologados y en uso activo
- ✓Librería de imágenes: 34 assets documentados, usados en producción y centralizados
- ✓Workshops por componente para construir custom components sobre la base de NUXT
- ✓ProductCard como caso emblemático: compuesto desde múltiples componentes de NUXT, reutilizable en todas las plataformas
Las decisiones que no aparecen en las pantallas.
Un Design System no es una librería de componentes. Es una serie de decisiones sobre cómo quieres que un equipo trabaje. Estas son las que más definieron el resultado.
Al inicio, el Design System era mi proyecto. Lo construía, lo mantenía, y nadie más lo sentía suyo.
Cambié el proceso: antes de publicar cualquier componente nuevo, lo exponía al equipo en un workshop. Decisiones colectivas sobre funcionalidad, variantes y estados. Si todos participaban en definirlo, todos lo adoptaban.
La diseñadora Jr. no solo empezó a usar el sistema. Empezó a proponer mejoras. Sus preguntas retroalimentaron directamente cada versión del DS. El debate sobre el outline de un input no era pérdida de tiempo: era el proceso de hacer que el sistema le perteneciera a todos.
¿Y si el Design System pudiera diseñar contigo?
Al tener toda la documentación del DS centralizada en Notion y Figma, surgió una pregunta natural: ¿podíamos convertir esas reglas en contexto para un modelo de IA que generara UI directamente desde ellas?
En conjunto con el PM, construimos un AI Playground: un proyecto en código que contiene todas las reglas del DS (design.md, rules.md, skills.md) como contexto inyectado. Cualquier miembro del equipo puede describir una pantalla en lenguaje natural y recibir una propuesta que sigue el sistema de diseño de GroWrk.
El proceso tomó cerca de dos meses, trabajando en paralelo a nuestras responsabilidades normales. Conforme salían al mercado modelos más capaces, la calidad de las propuestas mejoró de forma sostenida.
Primer prompt: 80–90% de fidelidad al DS desde el primer output
Con auditoría IA: 99–100% de fidelidad tras revisión automatizada
"Creemos que es una herramienta que va a cambiar la forma en que diseñamos." — PM, GroWrk Remote
"Ya quiero probarla, se ve que nos va a ahorrar mucho tiempo." — Sony, Diseñadora, GroWrk Remote
Lo que cambió, en números y en cultura.
De 2–3 horas a 20 minutos en tablas complejas
Sistema bilingüe: diseño e ingeniería
Librería limpia, sin redundancias