StyleSeed – código abierto que les da sentido de diseño a las herramientas de código con IA (2,200 líneas de reglas de diseño)

Cuando creas una UI con vibe coding, aparece el problema de que "funciona, pero el diseño se ve mal".

StyleSeed es un proyecto de código abierto que incorpora reglas de diseño en herramientas de código con IA (como Claude Code). Si copias los archivos al proyecto, la IA puede generar una UI al nivel de la app de Toss.

Incluye:

• 60 reglas de diseño visual en 2,200 líneas (filosofía de color, jerarquía tipográfica, estructura de tarjetas, patrones prohibidos, etc.)
• 47 componentes de React (31 basados en shadcn/ui + 16 patrones de dashboard)
• 10 skills de Claude Code (generación de UI, auditoría de UX, generación de microcopy, etc.)
• Tema de Tailwind CSS v4 (modo claro/oscuro)

Si DESIGN.md de awesome-design-md (23K estrellas) aporta tokens de marca, StyleSeed es un "cerebro de diseño" que también incluye reglas de layout, guías de UX y componentes.

La primera seed es estilo Toss. Próximamente se agregarán seeds de Apple, Linear y Stripe. Licencia MIT.

[bitjaru0402]

▎ Actualización: subí una demo en vivo interactiva.
▎
▎ 🎬 https://styleseed-demo.vercel.app
▎
▎ Es una pantalla donde la misma UI de chat hace morph entre tres marcas, Toss → Raycast → Arc, de una sola vez. El color, los bordes redondeados, la animación, las sombras y los degradados cambian por completo con una sola propiedad data-skin. Solo con tokens, sin bifurcaciones de código.
▎
▎ También dejé una vista previa en GIF al inicio del README: https://github.com/bitjaru/styleseed
▎
▎ Gracias a quienes dejaron comentarios en la primera publicación 🙏

[kurthong]

Parece irónico que la expansión del conocimiento de dominio a través del open source esté brillando en esta era de la IA; ¡muchísimas gracias por compartir un conocimiento tan increíble!

[aldlfkahs]

Gracias por compartirlo. Parece que me será útil para proyectos personales.

[kaydash]

¡Está genial!