StyleSeed – o open source que injeta senso de design em ferramentas de codificação com IA (2.200 linhas de regras de design)

Ao criar uma UI com vibe coding, existe o problema de que “funciona, mas o design fica ruim”.

StyleSeed é um projeto open source que injeta regras de design em ferramentas de codificação com IA (como o Claude Code). Basta copiar os arquivos para o projeto, e a IA passa a gerar uma UI no nível do app do Toss.

Inclui:

• 60 regras de design visual em 2.200 linhas (filosofia de cores, hierarquia tipográfica, estrutura de cartões, padrões proibidos etc.)
• 47 componentes React (31 baseados em shadcn/ui + 16 padrões de dashboard)
• 10 skills do Claude Code (geração de UI, auditoria de UX, geração de microcopy etc.)
• Tema Tailwind CSS v4 (modo claro/escuro)

Se o DESIGN.md do awesome-design-md (23 mil estrelas) fornece tokens de marca, o StyleSeed é um “cérebro de design” que inclui regras de layout, guias de UX e até componentes.

A primeira seed é no estilo Toss. Seeds de Apple, Linear e Stripe estão planejadas. Licença MIT.

[bitjaru0402]

▎ Atualização — publiquei uma demo ao vivo clicável. ▎
▎ 🎬 https://styleseed-demo.vercel.app ▎
▎ É uma tela que faz o morph da mesma UI de chat para três marcas de uma vez: Toss → Raycast → Arc. Cor, arredondamento, movimento, sombra e gradiente mudam tudo por meio de um único atributo data-skin. Só com tokens, sem bifurcação no código. ▎
▎ Também coloquei uma prévia em GIF no topo do README: https://github.com/bitjaru/styleseed ▎
▎ Obrigado a todos que deixaram opiniões na primeira publicação 🙏

[kurthong]

Parece irônico que a expansão do conhecimento de domínio por meio do open source esteja brilhando justamente na era da IA. Muito incrível, obrigado por compartilhar esse conhecimento!

[aldlfkahs]

Obrigado por compartilhar. Acho que vai ser bem útil quando eu estiver fazendo projetos pessoais.

[kaydash]

Incrível!