Quando você pede uma UI para a IA, os componentes até parecem normais, mas quando junta tudo fica com aquela "cara de gerado".
A causa não são peças feias, e sim o fato de elas não combinarem entre si — a falta de coerência.
A solução é surpreendentemente simples — definir apenas um valor para cada eixo (bordas, cor de destaque, espaçamento, sombra) e alinhar tudo a isso.
Organizei isso com base em Refactoring UI, Material 3, Apple HIG e WCAG + CSS pronto para copiar e colar.
Demo para ver na prática: https://styleseed-demo.vercel.app/how-it-thinks
Código aberto (MIT): https://github.com/bitjaru/styleseed
7 comentários
Seria bom se o UX writing da toss também fosse documentado.
Vou preparar.
Parece meio óbvio, mas era um ponto em que eu não tinha pensado; acho que, se aplicar isso, vai melhorar bastante, então estou animado.
Experimentem e fiquem à vontade para enviar feedback no GitHub!
Não dá para aplicar apenas as regras do agent quando já existe um design system estabelecido?
Sim, dá para usar só as regras.
As regras do StyleSeed não impõem cores ou componentes específicos; elas trazem apenas critérios de decisão do tipo "nesses casos, faça assim", então podem ser aplicadas diretamente sobre o sistema existente.
Sem instalar nada, basta uma frase:
"leia https://styleseed-demo.vercel.app/llms.txt e aplique estas regras de design"
Se você quiser transformar o design atual em um sistema, escreva nesse arquivo, linha por linha, as decisões que já definiu (espaçamento, cantos arredondados, cor de destaque etc.). O agente vai reutilizá-las em cada nova tela, consolidando tudo como um sistema consistente. As regras básicas são um ponto de partida, e você pode ajustar o que não servir.
Isso me ajudou muito. Obrigado.