Design system para fundadores:não precisas de designer

Um design system para fundadores faz um produto construído com IA parecer profissional, sem designer: design tokens, uma biblioteca de componentes que é tua e regras que a IA consiga seguir. Construí 1.480 componentes em produção e nunca desenhei nenhum de raiz.

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

Porque é que um design system para fundadores importa: as apps construídas com IA derivam para a incoerência

Esta é a parte mais difícil de construir com IA, e não é o código. É a coerência. A IA consegue construir-te um ecrã bonito. Mas vai condizer com os últimos cem ecrãs? As mesmas cores, os mesmos espaçamentos, as mesmas formas de botão?

Sem um sistema, não. Pede três botões em três dias diferentes e recebes três azuis diferentes, três margens interiores diferentes, três raios de canto diferentes. Cada um parece bem sozinho. Juntos, gritam "protótipo". Isto é dívida de design, e acumula-se exatamente como a dívida técnica: cada novo ecrã é uma nova decisão de design, e cada nova decisão é uma nova oportunidade de derivar.

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

Design tokens: decide uma vez, reutiliza em todo o lado

Os design tokens são as constantes do aspeto do teu produto — uma lista curta de valores aprovados que todos os ecrãs têm de usar. Em vez de "um azul qualquer", há a cor da marca. Em vez de espaços arbitrários, uma escala de espaçamento. Em vez de tamanhos de texto improvisados, uma escala tipográfica.

A questão não é a estética — é que os tokens transformam o design de uma decisão de critério numa consulta. E a IA é espetacular em consultas. Assim que os teus tokens existem, "faz com que fique bonito" passa a ser "usa os tokens", que é uma instrução que a IA consegue mesmo seguir.

shadcn/ui: componentes profissionais que são teus

Os tokens dão-te os ingredientes. Para os componentes propriamente ditos, uso o shadcn/ui — e a razão é específica do desenvolvimento com IA. Não é uma biblioteca de componentes tradicional que instalas como uma caixa negra selada. Dá-te o código real de 77 componentes bem desenhados, totalmente acessíveis e prontos para produção — botões, formulários, diálogos, tabelas, separadores, notificações — que copias para o teu próprio projeto. São teus. Podes alterá-los.

Porque é que isso importa: quando um componente é uma caixa negra, a IA não consegue ver lá dentro, por isso inventa os seus próprios estilos à volta dele. Quando o código do componente vive no teu projeto, a IA lê-o, aprende o padrão e constrói novos componentes que condizem — a mesma estrutura, os mesmos tokens, o mesmo comportamento. A configuração demorou-me 15 minutos. Esses 77 componentes base tornaram-se a fundação dos 1.480 componentes de funcionalidades, com acessibilidade e modo escuro tratados desde o primeiro dia.

12 semanasA tua carreira corporativa nunca foi o planoCandidata-te ao Solopreneur Accelerator.Candidatar-me →

Variantes: ensina as tuas regras à IA

A peça final são as variantes — versões com nome de cada componente para cada situação. Um botão não é estilizado caso a caso; vem num menu fixo: predefinido, secundário, contorno, fantasma, perigo. Pequeno, médio, grande. E é isso.

A recompensa é que a linguagem substitui o estilo. Quando digo à IA "cria um botão de eliminar", ela sabe que deve usar a variante de perigo. Ninguém escolhe um tom de vermelho. Ninguém escolhe uma margem. A decisão foi tomada uma vez, quando a variante foi definida, e todos os botões de eliminar do produto são idênticos para sempre.

O mesmo princípio de "decidir uma vez" atravessa toda a base de código, não só a interface — é assim que um único padrão escalou para 633 serviços do lado dos dados. E combina com a outra metade do acabamento visual: tratar os estados de carregamento, de erro e vazios de que todos os ecrãs precisam. Sistema mais estados é o que faz uma app construída com IA parecer um produto.

Como fazer o briefing do teu design system à IA

Quando o sistema existe, cada pedido de componente segue a mesma forma: indica o padrão a copiar, os tokens a usar e os estados a tratar. Algo como:

Cria um cartão de caso de sucesso. Segue o padrão do cartão de métricas que já existe. Usa os tokens de cartão padrão, os tamanhos de texto padrão para título e corpo e a cor da marca no fundo do ícone. Inclui modo escuro e acessibilidade por teclado, como no componente de referência.

A IA gera um componente que condiz com o teu produto à primeira — porque não lhe pediste para desenhar, pediste-lhe para cumprir. O arquiteto és tu; o sistema é o teu regulamento de construção.

Para manter tudo apertado, faço uma pequena auditoria todos os meses: procuro cores escritas à mão que deviam ser tokens, espaçamentos aleatórios que deviam estar na escala, estilos de modo claro sem o par de modo escuro e estilos avulsos repetidos que deviam passar a ser uma variante. Trinta minutos por mês mantêm 1.480 componentes com o aspeto de um único sistema.

E há um efeito composto de que ninguém te fala: a tua biblioteca de componentes é dados de treino para a tua IA. Cada componente bem construído ensina-lhe os teus padrões. Ao fim de 100 componentes, constrói como tu. Ao fim de 1.000, a deriva desaparece por completo.

O livroThe Solopreneur RevolutionLuis Gonçalves sobre como construir um negócio de EUpreendedor com IA sem deixar o emprego.Quero o livro →

Perguntas frequentes

Preciso de contratar um designer para o meu SaaS?

Não para um produto construído a solo. Um design system — tokens, componentes teus, variantes com nome — dá-te uma interface profissional e coerente sem competências de design. Um designer passa a valer a pena mais tarde, para trabalho de marca e marketing, não para manter os teus botões no mesmo tom de azul.

O que são design tokens, em linguagem simples?

Uma lista curta de valores de design aprovados: as tuas cores, os teus tamanhos de espaçamento, os teus tamanhos de texto, o arredondamento dos cantos. Cada ecrã tem de escolher da lista em vez de inventar valores. Transforma "faz com que fique bonito" numa regra que a IA consegue seguir mecanicamente.

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

É uma coleção de 77 componentes de interface prontos para produção cujo código copias para o teu próprio projeto, em vez de os instalares como uma biblioteca selada. Como o código está à vista, a IA consegue lê-lo e reproduzir os padrões — por isso os novos componentes condizem com os antigos em vez de inventarem estilos novos.

Como impeço a IA de inventar estilos novos?

Referencia, não descrevas. Cada pedido indica um componente existente como padrão e os tokens a usar — "segue o padrão do cartão de métricas" vale mais do que qualquer adjetivo. Depois faz uma auditoria mensal às cores escritas à mão e aos espaçamentos fora da escala, e junta os estilos repetidos em variantes com nome.