Design system para fundadores:você não precisa de designer

Um design system para fundadores deixa um produto construído com IA com cara de profissional, sem designer: design tokens, uma biblioteca de componentes que é sua e regras que a IA consegue seguir. Construí 1.480 componentes em produção e nunca desenhei nenhum do zero.

Dashboards, formulários, tabelas, modais, gráficos, assistentes em várias etapas. Todos parecem pertencer ao mesmo produto. Todos funcionam no modo escuro. E nada disso veio de talento para design. Veio de tomar cada decisão de design exatamente uma vez — e depois fazer a IA reaproveitá-la 1.480 vezes.

Por que um design system para fundadores importa: apps construídos com IA vão ficando inconsistentes

Esta é a parte mais difícil de construir com IA, e não é o código. É a consistência. A IA consegue construir uma tela linda para você. Mas ela vai combinar com as últimas cem telas? Mesmas cores, mesmo espaçamento, mesmos formatos de botão?

Sem um sistema, não. Peça três botões em três dias diferentes e você recebe três azuis diferentes, três paddings diferentes, três arredondamentos de canto diferentes. Cada um parece ok sozinho. Juntos, gritam "protótipo". Isso é dívida de design, e ela se acumula exatamente como a dívida técnica: cada tela nova é uma nova decisão de design, e cada nova decisão é uma nova chance de desvio.

Um designer resolveria isso impondo bom gosto. Um design system resolve isso eliminando a decisão por completo.

Design tokens: decida uma vez, reutilize em todo lugar

Design tokens são as constantes do visual do seu produto — uma lista curta de valores aprovados que toda tela precisa usar. Em vez de "um azul qualquer", existe a cor da marca. Em vez de espaços arbitrários, uma escala de espaçamento. Em vez de tamanhos de texto livres, uma escala tipográfica.

O ponto não é estética — é que os tokens transformam o design de uma questão de julgamento numa consulta. E a IA é espetacular em consultas. Quando os seus tokens existem, "deixe bonito" vira "use os tokens", e essa é uma instrução que a IA consegue de fato seguir.

shadcn/ui: componentes profissionais que são seus

Os tokens te dão os ingredientes. Para os componentes em si, eu uso o shadcn/ui — e o motivo é específico do desenvolvimento com IA. Ele não é uma biblioteca de componentes tradicional que você instala como uma caixa-preta lacrada. Ele te dá o código de verdade de 77 componentes lindamente desenhados, totalmente acessíveis e prontos para produção — botões, formulários, diálogos, tabelas, abas, toasts — que você copia para o seu próprio projeto. Eles são seus. Você pode alterá-los.

Por que isso importa: quando um componente é uma caixa-preta, a IA não consegue ver o que tem dentro, então inventa os próprios estilos ao redor dele. Quando o código do componente mora no seu projeto, a IA o lê, aprende o padrão e constrói componentes novos que combinam — mesma estrutura, mesmos tokens, mesmo comportamento. A configuração levou 15 minutos. Esses 77 componentes básicos viraram a fundação de todos os 1.480 componentes de funcionalidade, com acessibilidade e modo escuro resolvidos desde o primeiro dia.

12 semanasA sua carreira corporativa nunca foi o planoCandidate-se à Aceleradora de EUpreendedores.Candidatar-se →

Variantes: ensine as suas regras à IA

A peça final são as variantes — versões nomeadas de cada componente para cada situação. Um botão não é estilizado de improviso; ele vem num cardápio fixo: default, secondary, outline, ghost, danger. Pequeno, médio, grande. Só isso.

A recompensa é que a linguagem substitui a estilização. Quando eu digo à IA "crie um botão de excluir", ela sabe que deve usar a variante danger. Ninguém escolhe um tom de vermelho. Ninguém escolhe um padding. A decisão foi tomada uma vez, quando a variante foi definida, e todo botão de excluir do produto é idêntico para sempre.

O mesmo princípio de "decidir uma vez" atravessa todo o código, não só a interface — é como um único padrão escalou para 633 serviços do lado dos dados. E ele anda junto com a outra metade do acabamento visual: tratar os estados de carregamento, erro e vazio de que toda tela precisa. Sistema mais estados é o que faz um app construído com IA parecer um produto.

Como passar o seu design system para a IA

Quando o sistema existe, todo pedido de componente segue o mesmo formato: diga qual padrão copiar, quais tokens usar e quais estados tratar. Algo assim:

Crie um card de história de sucesso. Siga o padrão do card de métrica existente. Use os tokens padrão de card, os tamanhos padrão de título e de texto e a cor da marca no fundo do ícone. Inclua modo escuro e acessibilidade por teclado, como no componente de referência.

A IA gera um componente que combina com o seu produto logo na primeira tentativa — porque você não pediu para ela desenhar, pediu para ela obedecer. Você é o arquiteto; o sistema é o seu código de obras.

Para manter tudo nos trilhos, faço uma auditoria curta todo mês: procuro cores fixas no código que deveriam ser tokens, espaçamentos aleatórios que deveriam estar na escala, estilos de modo claro sem o par do modo escuro e estilizações avulsas repetidas que deveriam virar uma variante. Trinta minutos por mês mantêm 1.480 componentes com cara de um sistema só.

E existe um efeito composto de que ninguém te fala: a sua biblioteca de componentes é material de treino para a sua IA. Cada componente bem construído ensina os seus padrões a ela. Depois de 100 componentes, ela constrói como você. Depois de 1.000, o desvio desaparece por completo.

O livroA Revolução do EUpreendedorLuis Gonçalves sobre como construir um negócio de EUpreendedor com IA sem largar o emprego.Quero o livro →

Perguntas frequentes

Preciso contratar um designer para o meu SaaS?

Não para um produto construído sozinho. Um design system — tokens, componentes próprios, variantes nomeadas — te dá uma interface profissional e consistente sem habilidades de design. Um designer passa a valer a pena mais tarde, para trabalho de marca e marketing, não para manter seus botões no mesmo tom de azul.

O que são design tokens, em português claro?

Uma lista curta de valores de design aprovados: suas cores, seus tamanhos de espaçamento, seus tamanhos de texto, o arredondamento dos cantos. Toda tela precisa escolher dessa lista em vez de inventar valores. Isso transforma "deixe bonito" numa regra que a IA consegue seguir mecanicamente.

O que é o shadcn/ui e por que ele é bom para desenvolvimento com IA?

É uma coleção de 77 componentes de interface prontos para produção cujo código você copia para o seu próprio projeto, em vez de instalá-lo como uma biblioteca lacrada. Como o código fica visível, a IA consegue lê-lo e replicar os padrões — então os componentes novos combinam com os antigos em vez de inventar estilos novos.

Como impedir que a IA invente estilos novos?

Referencie, não descreva. Todo pedido deve citar um componente existente como padrão e os tokens a usar — "siga o padrão do card de métrica" vale mais do que qualquer adjetivo. Depois, audite todo mês em busca de cores fixas no código e espaçamentos fora da escala, e transforme estilos repetidos em variantes nomeadas.