StyleSeed: un motor de diseño que enseña a Claude Code y Cursor a pensar como diseñadores

Fuentes: StyleSeed: a design engine that teaches Claude Code and Cursor to think like designers

StyleSeed es un motor de diseño de código abierto pensado para integrarse con asistentes de IA generativa como Claude Code y Cursor. Su objetivo es resolver un problema muy concreto: las interfaces que producen estas herramientas suelen parecer genéricas o «hechas por IA», porque los modelos carecen de criterio de diseño y no solo de datos visuales.

El proyecto se articcula en dos capas. La primera es un motor independiente de marca formado por 69 reglas visuales de diseño (ritmo espacial, jerarquía de información, sombras, tipografía, accesibilidad, etc.), 48 componentes React (32 primitivas y 16 patrones) y 11 habilidades ejecutables mediante comandos slash (/ss-setup, /ss-page, /ss-component, /ss-review, entre otras). Las reglas son agnósticas de marca y operan sobre tokens semánticos, de modo que el mismo motor sirve para cualquier identidad visual. La segunda capa es la «piel»: un único archivo theme.css que aplica la paleta, la tipografía y el estilo de marcas como Toss, Stripe, Linear, Vercel o Notion, con más de 58 pieles adicionales obtenibles desde el repositorio awesome-design-md.

El flujo de uso es directo: se copia el contenido de la carpeta engine al proyecto, se ejecuta el asistente /ss-setup, se elige una piel y el motor genera la primera página. A partir de ahí, las reglas se leen automáticamente desde un archivo CLAUDE.md o .cursorrules y se aplican sin código condicional ni reescrituras. StyleSeed se complementa, en lugar de competir, con repositorios de datos de marca: mientras aquellos aportan la paleta, StyleSeed aporta el criterio sobre cómo utilizarla.