Todo son tokens
Cambia el color, el radio o la letra y mira cómo responden los componentes.
GuardarNuevohola@acme.com
Ver DS Generator en 1 minuto
DS Generator · Design systems
Crea, mantén y exporta.
Desliza para explorar
Token
color.primary#CF4A12
Llega a componentes, Figma y código
Figma · Synced
GitHub · acme/design-system
FusionadaDesign system: 3 cambios
+ --primary: #10b981;
Salud del sistema
1000 rotos · 0 sin usar
Cobertura 100 %
Cobertura 100 %
Tu design system vive repartido entre Figma, el código y un documento que nadie actualiza.
DS Generator lo junta en un sitio: fundamentos, componentes y documentación. Cambias un token y llega a cada componente, a Figma, a tu código y a la documentación.
Cómo funciona
De un color
a un sistema entero.
Cinco pasos, del primer token a un sistema documentado y sano.
01
Define los fundamentos
Color, tipografía, espaciado, radios, sombras, movimiento, materiales, degradados e iconos. Todo son tokens, con contraste comprobado.
Color OKLCHTipografíaEspaciadoMovimiento
02
Crea componentes
Elígelos del catálogo, créalos con IA desde una frase, constrúyelos por piezas o impórtalos de GitHub y Figma. Siempre con tus tokens.
CatálogoCon IAPor piezasImportar
03
Cambia con seguridad
El mapa te enseña qué componentes dependen de cada token antes de tocarlo. Luego cambias y todo se actualiza a la vez.
MapaUn cambio, todo
04
Sincroniza
Figma en los dos sentidos y pull request en GitHub con un clic, con tokens, componentes e iconos. O descarga el paquete.
FigmaGitHubPaquete
05
Documenta y vigila
La IA te hace un par de preguntas y escribe la documentación de cada componente. Y la salud te avisa de lo roto y lo que sobra.
Documentación con IASalud
Todo lo que hace
Hecho para que el sistema no se rompa.
Componentes sin límite
Cuatro formas de tenerlos, siempre con tus tokens.
Mira a qué afecta
Toca un token y verás qué componentes cambian.
Figma y código, en sincronía
Cambia en un lado y llega al otro.
Figma · Variables
color/primary
radius/md · 8
tokens.css
--primary: #cf4a12;
--radius-md: 8px;
GitHub con un clic
Del changelog a una pull request con tokens, componentes e iconos.
color.primaryFundamento
radius.mdFundamento
ButtonComponente
AbiertaDesign system: 3 cambios
- --primary: #cf4a12;
+ --primary: #10b981;
Documentación con IA
La IA te hace un par de preguntas sobre el componente y escribe su documentación. Tú la revisas y la aplicas.
ButtonInputCardTabsDialog
Button
Sin documentar todavía.
La salud del sistema
Lo roto, lo que sobra y lo que falta, a la vista.
86
Referencias rotas0
Tokens sin usar3
Cobertura94 %
Todos los fundamentos
No solo color: cada decisión visual de tu producto es un token que se puede cambiar, exportar y documentar.
ColorTipografíaEspaciadoRadiosSombrasMovimientoBordesOpacidadMaterialesDegradadosIconos
Un paquete, también para agentes
Descarga el paquete con tokens y componentes, o publícalo en tu repositorio. Lleva habilidades para que tu agente de IA construya pantallas con tu sistema y lo audite.
@acme/design-system
1.2.0 · tokens · componentes · iconosDescargar
1.2.0 · tokens · componentes · iconosDescargar
skill · build-uiskill · audit
Siguiente paso · Friction Miner
Ya lo has cambiado. ¿Qué dicen ahora tus usuarios?
Friction Miner escucha reseñas, encuestas y entrevistas para saber si el cambio les ha llegado, y te cuenta dónde está la siguiente fricción. Y el ciclo vuelve a empezar.
EscuchaMideConstruye
Cómo acceder
Incluida en la comunidad Repeat.
DS Generator viene con la comunidad, junto a Friction Miner, UX Auditor y el método con el que se construyeron.
- Las tres herramientasUna sola cuenta
- El métodoDe UX/UI a Product Designer
- Directos cada semanaCon feedback real
- Recursos y plantillasSkills, kits y guías
¿Ya eres miembro? Abrir DS Generator
Preguntas frecuentes
¿Con qué componentes trabaja?+
Parte del catálogo de shadcn y le suma los tuyos: los que creas con IA, los que construyes por piezas y los que importas de tu repositorio de GitHub o de Figma. Todos usan tus tokens.
¿La sincronización con Figma va en los dos sentidos?+
Sí. Con el plugin de DS Generator, lo que cambias en la app llega a las variables de Figma, y lo que cambias en Figma vuelve a la app.
¿Qué se sube a GitHub?+
Una pull request en tu repositorio con los tokens, los componentes y los iconos. También puedes descargar el paquete y usarlo como prefieras.
¿Cómo se escribe la documentación?+
La IA analiza cada componente, te hace un par de preguntas sobre cómo se usa y redacta la documentación. Tú la revisas antes de aplicarla. Usa tu propia clave de Anthropic.
¿Puedo usarla sin ser de la comunidad?+
De momento no: DS Generator se incluye con Repeat, junto a Friction Miner y UX Auditor.