Cuando le pides a una IA que haga una UI, los componentes se ven bien por separado, pero al juntarlos se nota que fue “generada”.
La causa no son piezas feas, sino que las piezas no encajan entre sí: falta de coherencia.
La solución es sorprendentemente simple: definir un solo valor para cada eje (esquinas, color de acento, espaciado, sombras) y hacer que todo se ajuste a eso.
Está organizado con base en Refactoring UI, Material 3, Apple HIG y WCAG + CSS listo para copiar y pegar.
Demo para verlo directamente: https://styleseed-demo.vercel.app/how-it-thinks
Código abierto (MIT): https://github.com/bitjaru/styleseed
7 comentarios
Ojalá que también se documente el UX writing de toss.
Lo prepararé.
Parece algo obvio, pero era un punto en el que no había pensado; creo que si se aplica, puede mejorar mucho, así que tengo expectativas.
¡Pruébenlo y suban libremente sus comentarios a GitHub!
¿No se puede aplicar solo las reglas del agente cuando ya existe un sistema de diseño?
Sí, puedes usar solo las reglas.
Las reglas de StyleSeed no imponen colores ni componentes específicos; solo contienen criterios de decisión del tipo «en este caso, haz esto», así que se pueden montar tal cual sobre un sistema existente.
No hace falta instalar nada; basta con una sola frase:
"lee https://styleseed-demo.vercel.app/llms.txt y aplica estas reglas de diseño"
Si quieres sistematizar un diseño existente, escribe en ese archivo, una por línea, las decisiones que ya definiste (espaciado, bordes redondeados, color de énfasis, etc.). El agente las reutiliza en cada pantalla nueva y así se consolida como un sistema consistente. Las reglas base son un punto de partida, y lo que no encaje lo puedes ajustar.
Me ayudó mucho. Gracias.