GuideIntermediate

Crie seu sistema de design ANTES de construir · para que seu app não pareça "feito por IA sem critério"

Existe uma razão pela qual os apps feitos com IA às vezes parecem amadores, mesmo funcionando: eles não têm um sistema de design. Cada tela que a IA gera por conta própria usa cores diferentes, espaçamentos diferentes, botões diferentes — e o resultado parece feito por cinco pessoas que não conversaram entre si. A solução não é "dar mais capricho" em cada tela; é construir UMA vez um sistema de design e fazer com que a IA o respeite sempre. E o erro mais comum é deixá-lo para o final: a PRIMEIRA coisa que você deve pedir à sua IA, antes de qualquer tela, é que ela construa seu sistema de design. Neste guia você vai ver quais seções ele deve ter (as mesmas que os produtos premium usam), como é um de verdade profissional, e dois prompts prontos para que sua IA —Claude, Codex, Cursor, v0— construa o seu com nível de Vale do Silício.

Jun 22, 202613 min

Para quem é isto?

Para qualquer pessoa que construa um app ou site com IA e queira que ele pareça profissional e coerente — você não precisa ser designer. Se suas telas parecem diferentes entre si ou "feitas por IA", isto resolve pela raiz. Funciona com Claude Code, Codex, Cursor, v0, Bolt ou qualquer ferramenta de design com IA.

A dor · seu app parece "feito por IA sem critério"

Você pede uma tela para a IA e ela fica boa. Você pede outra, e ela usa outro tom de roxo, outro tamanho de botão, outro espaçamento. Uma terceira, e aparece uma sombra que não estava em nenhuma outra. Cada tela, separadamente, não está ruim — mas juntas, seu app parece feito por cinco pessoas que não entraram em acordo. É isso que faz algo parecer amador, mesmo funcionando perfeitamente.

Por que isso acontece (não é culpa da IA)

A IA, em cada tela nova, toma decisões de design do zero — escolhe cores, tamanhos e espaçamentos que fiquem bem NAQUELA tela, sem memória do que decidiu nas outras. Não é que ela seja ruim em design; é que ela não tem uma fonte de verdade que a obrigue a ser consistente. Essa fonte de verdade é o sistema de design.

O que é um sistema de design? (falando fácil)

Um sistema de design é um documento único com TODAS as regras visuais do seu produto: quais cores existem e para quê, quais tamanhos de texto, quanto espaço entre as coisas, como são os botões, os cards, as animações. A IA o lê, e a partir daí toda tela que ela gerar sai coerente — porque ela não inventa mais, segue as regras.

Imagine assim · o manual de marca de uma franquia

Pense em qualquer franquia grande: todas as suas lojas parecem iguais no mundo inteiro porque seguem um manual de marca rigoroso — o mesmo vermelho, a mesma tipografia, o mesmo logo à mesma distância. O sistema de design é esse manual para o seu app: a IA é o funcionário, e o manual faz com que cada "loja" (tela) fique idêntica de boa.

A regra de ouro · construa-o PRIMEIRO, não no final

Aqui está o erro que quase todo mundo comete: pedir telas primeiro e pensar no design "depois, quando tiver tempo". A essa altura você já tem vinte telas inconsistentes e consertá-las é um remendo eterno. A PRIMEIRA coisa que você deve pedir à sua IA, antes da primeira tela, é que ela construa seu sistema de design. Assim tudo que vier depois já nasce coerente. É a decisão que mais eleva o acabamento do seu produto, e quase não custa nada.

As seções que ele deve ter (o padrão dos produtos premium)

Um sistema de design sério não é "uma paleta de cores". Ele é exaustivo. Estas são as seções que os sistemas de nível enterprise têm (as mesmas que produtos como Linear, Vercel ou Raycast usam), e que seu prompt deve pedir:

O esqueleto de um sistema de design completo

Filosofia / identidade: o DNA estético (minimalista? escuro premium? colorido?) e os pilares de design.

Cor: cor de marca + escala de superfícies (fundos por níveis) + escala de texto + bordas + cores semânticas (sucesso/erro/aviso) + paleta de gráficos.

Tipografia: a fonte, a escala de tamanhos exata, os pesos permitidos, alturas de linha e espaçamento entre letras.

Espaçamento e grid: a unidade base (ex. 8px) e todos os múltiplos permitidos.

Border-radius: as curvas dos cantos por tipo de elemento.

Sombras / elevação: os níveis de profundidade.

Componentes: botões, cards, inputs, modais, badges, tooltips, etc. — com seus valores exatos.

Movimento / animação: durações, curvas de easing, o que anima e o que não anima.

Estados: repouso, hover, foco, ativo, desabilitado, erro, sucesso.

Iconografia, layout, estados vazios e antipadrões (o que NUNCA fazer).

O segredo pro · flexível vs. inegociável

O que separa um sistema amador de um lendário: distinguir o que é flexível (o que cada projeto adapta, ex. a cor de marca) do que é inegociável (os valores exatos de espaçamento, tamanhos, opacidades, animações — que NÃO se mexem porque destroem a harmonia). Diga à sua IA para marcar essa diferença no seu sistema. É o que faz parecer "afinado com bisturi" e não improvisado.

Como é um de verdade profissional (trecho de referência)

Para você ver o NÍVEL de detalhe que deve exigir, aqui vai um trecho do tipo de sistema que usamos para construir produtos premium. Repare na precisão — não diz "use roxo", diz exatamente qual roxo e com qual opacidade para cada situação:

texto

COR DE MARCA (acento) — aparece SÓ no que é interativo/ativo, nunca decorativo
  Primary:  #8B5CF6   · Light: #A78BFA (texto/ícones) · Deep: #7C3AED (pressionado)

SUPERFÍCIES (5 níveis de profundidade, não "preto chapado"):
  surface-1 #0A0A0A (fundo)  · surface-2 #0D0D0D (sidebar) · surface-3 #111111 (cards)
  surface-4 #1A1A1A (dropdowns) · surface-5 #222222 (ativo sobre elevado)

TEXTO (por opacidade, não por cor):
  Primário #FFFFFF · Secundário rgba(255,255,255,0.70) · Terciário 0.45 · Apagado 0.28

TIPOGRAFIA — Inter · base 14px · pesos SÓ 400/500/600/700 (nunca 300/800/900)
  BODY 12px · TITLE 16px · HERO 24px · letter-spacing 0.07em em labels em maiúscula

ESPAÇAMENTO — grid de 8px (4px micro). Nunca números ímpares (3,7,9,11px).
RADIUS — inputs 8px · cards 12px · modais 16px (os filhos SEMPRE menos que o pai)
ANIMAÇÃO — só opacity/transform/box-shadow · hover scale 1.02–1.05 · nunca animar width/height

Isso é só a cor e a tipografia

E esse trecho é apenas 2 das ~14 seções. Um sistema completo cobre componentes, movimento, estados, layout e antipadrões com o mesmo nível de precisão. Por isso um bom sistema de design tem centenas de linhas — e por isso vale tanto: a IA nunca mais precisa adivinhar.

Prompt 1 · Construir seu sistema do zero

Se você não tem uma marca definida, deixe a IA propor a estética e montar o sistema completo. Copie e cole para o seu agente de design/código:

Cole na sua IA · sistema de design do zerotexto

Antes de construir qualquer tela, quero que a gente crie o SISTEMA DE DESIGN do meu produto, para que tudo que você gerar depois seja coerente. Meu produto é: [descreva seu app e para quem é]. Estética que eu gosto: [ex. "escura premium estilo Linear" / "clara e amigável" / "não sei, sugira você"].

Crie um documento de sistema de design COMPLETO e exaustivo, com estas seções, cada uma com VALORES EXATOS (não aproximações):
1. Filosofia/identidade e pilares de design.
2. Cor: cor de marca + escala de superfícies/fundos por níveis + escala de texto por opacidade + bordas + cores semânticas (sucesso/erro/aviso/info) + paleta de gráficos.
3. Tipografia: fonte, escala de tamanhos exata, pesos permitidos, alturas de linha, letter-spacing.
4. Espaçamento e grid (unidade base e múltiplos).
5. Border-radius por tipo de elemento.
6. Sombras/elevação por níveis.
7. Componentes (botões, cards, inputs, modais, badges, tooltips, dropdowns) com seus valores.
8. Movimento/animação (durações, easing, o que anima e o que não anima).
9. Estados (repouso, hover, foco, ativo, desabilitado, erro, sucesso).
10. Iconografia, layout/grid, estados vazios e uma lista de ANTIPADRÕES (o que nunca fazer).

IMPORTANTE: marque claramente o que é FLEXÍVEL (adaptável, ex. a cor de marca) e o que é INEGOCIÁVEL (os valores exatos que não se mexem). O objetivo: que o resultado fique indistinguível de um produto premium do Vale do Silício. Salve este sistema e respeite-o em CADA tela que a gente construir a partir de agora.

Prompt 2 · Construir o sistema em torno da SUA marca

Se você já tem cores, logo ou uma identidade, use este para que a IA monte o sistema completo respeitando-os:

Cole na sua IA · sistema de design a partir da sua marcatexto

Quero criar o SISTEMA DE DESIGN completo do meu produto a partir da minha marca atual, antes de construir telas. Minha marca: cor(es) [cole suas cores/hex], tipografia [se você tiver uma], e este estilo/sensação [descreva: sério, divertido, luxuoso, etc.]. Meu produto é [descreva].

A partir da minha marca, construa um sistema de design COMPLETO e exaustivo com valores EXATOS, cobrindo: filosofia, cor (minha marca + superfícies + texto + bordas + semânticas + gráficos), tipografia (escala, pesos, alturas), espaçamento/grid, border-radius, sombras, componentes (botões, cards, inputs, modais, badges, tooltips), movimento/animação, estados, iconografia, layout, estados vazios e antipadrões.

Regras: respeite minhas cores de marca como base; derive as variantes (claras, escuras, opacidades) a partir delas; marque o que é flexível e o que é inegociável; e que o acabamento fique premium. Quando terminar, respeite-o em cada tela que a gente construir.

Seu presente · um sistema de design COMPLETO, pronto para copiar

Para você não começar do zero, aqui está um sistema de design completo e profissional — estética dark premium, neutra e genérica. Copie ele inteiro, cole na sua IA e diga "construa tudo respeitando este sistema". Ou troque a cor de marca (a única coisa flexível) e faça dele o seu. É o mesmo nível de rigor que os produtos do Vale do Silício usam: cada valor está afinado, nada é ao acaso.

Sistema de design completo · copie e cole na sua IAtexto

Construa TUDO respeitando este sistema de design. A única coisa flexível é a cor de marca; o resto são valores exatos, não os mude.

=== FILOSOFIA ===
Interface escura premium, minimalista e precisa (estilo Linear/Vercel). Profundidade por camadas, não chapado. A cor de marca aparece SÓ no que é interativo/ativo, nunca como decoração. Hierarquia por tamanho+peso+opacidade, não por cor.

=== COR ===
Marca (FLEXÍVEL — troque pela sua): Primary #8B5CF6 · Light #A78BFA (texto/ícones) · Deep #7C3AED (pressionado).
Superfícies (5 níveis de profundidade): surface-1 #0A0A0A (fundo) · surface-2 #0D0D0D (sidebar) · surface-3 #111111 (cards) · surface-4 #1A1A1A (dropdowns/tooltips) · surface-5 #222222 (ativo sobre elevado). Nunca pule níveis.
Texto (por opacidade branca): primário #FFFFFF · secundário rgba(255,255,255,0.70) · terciário 0.45 · quaternário 0.28 · apagado 0.20.
Bordas (branco com opacidade): forte 0.20 · normal 0.10 · sutil 0.08 · hairline 0.06.
Semânticas: sucesso #10B981 · aviso #F59E0B · erro #EF4444 · info #3B82F6 (fundo a 0.07-0.10, borda 0.15-0.22, texto cor plena).

=== TIPOGRAFIA ===
Fonte: Inter (variable), antialiased, tabular-nums nos números. Base 14px.
Escala (px): micro 9 · caption 10 · small 11 · body 12 · base 13 · subhead 14 · title 16 · heading 18 · display 20 · hero 24.
Pesos SÓ: 400 (corpo) · 500 (labels/nav) · 600 (títulos/botões) · 700 (números/KPIs). NUNCA 300, 800 nem 900.
Alturas de linha: labels/botões 1.0-1.2 · corpo 1.55 · código 1.6.
Labels em maiúscula: 10-11px, peso 600-700, letter-spacing 0.07em, cor opacidade 0.28-0.40. Nunca o corpo em maiúscula.

=== ESPAÇAMENTO ===
Grid de 8px (4px só micro-espaçamento interno). Valores: 4·8·12·16·20·24·32·40·48·64. NUNCA números ímpares (3,7,9,11px) para layout.

=== BORDER-RADIUS ===
badges 4-6px · inputs/dropdown-items 8px · cards 12-14px · modais 16px · hero 20px · círculo 50%. Regra: os filhos SEMPRE com raio menor que o pai.

=== SOMBRAS ===
cards: só borda (sem sombra) · dropdowns: 0 8px 28px rgba(0,0,0,0.55) · modais: 0 32px 80px rgba(0,0,0,0.75). Glow de marca no hover em cards interativos: 0 0 0 1px rgba(MARCA,0.40), 0 8px 32px rgba(MARCA,0.16).

=== COMPONENTES (valores exatos) ===
Botão padrão: padding 8px 16px, radius 8px, font 12px peso 600. Primário: bg rgba(MARCA,0.20), borda rgba(MARCA,0.40), texto Light. Ghost: bg rgba(255,255,255,0.05), borda 0.08, texto 0.45.
Card: padding 12-16px, radius 12-14px, borda rgba(255,255,255,0.05), bg rgba(255,255,255,0.02). Hover: bg 0.045.
Input: padding 8px 12px, radius 8px, bg rgba(255,255,255,0.04-0.06), borda 0.10. Foco: borda rgba(MARCA,0.40) + sombra 0 0 0 3px rgba(MARCA,0.12).
Modal: bg #111111, borda 0.10, radius 16px, overlay rgba(0,0,0,0.72). Badge: 9px peso 700, padding 2px 6px, radius 4px.
Nav item ativo: bg rgba(MARCA,0.15), texto Light, peso 600. Repouso: transparente, texto 0.45, peso 400.

=== MOVIMENTO ===
Anime SÓ opacity, transform (scale/translate) e box-shadow. NUNCA width/height/padding/margin (causam reflow).
Durações: tap 0.08s · tooltip 0.12s · entrada/saída 0.15s · transição padrão 0.18-0.22s · ambiente (pulso) 2s+.
Hover botão: scale 1.02-1.05 · tap: scale 0.93-0.97. Easing padrão: cubic-bezier(0.16, 1, 0.3, 1).

=== ESTADOS (cada elemento interativo) ===
Repouso · Hover (tint + scale, 80-180ms) · Foco (borda marca + anel) · Ativo (scale 0.93-0.97) · Desabilitado (opacidade 0.35-0.50, sem ponteiro) · Erro (borda vermelha + texto erro) · Sucesso (flash verde 1800ms).

=== ÍCONES / LAYOUT / VAZIOS ===
Ícones: lucide, 12-16px padrão, cor herda do texto. Layout: sidebar 64px (ícone) ou 176px (expandida), painéis 280-320px, conteúdo flex-1, máx 1440px. Estado vazio: ícone apagado 0.15 + título 0.35 + subtítulo 0.20 + CTA ghost.

=== ANTIPADRÕES (nunca) ===
Nunca peso 300/800/900 na UI · nunca cor cinza com nome (use rgba branco) · nunca números ímpares de espaçamento · nunca animar layout · nunca "transition: all" · nunca a cor de marca em mais de 15-20% da tela · nunca o mesmo raio (ou maior) num filho do que no seu pai.

Objetivo: que o resultado fique indistinguível de um produto premium do Vale do Silício. Respeite estes valores em CADA tela.

Isto já é um sistema usável de verdade

O de cima não é um exemplo de brinquedo: é um sistema de design funcional, com todos os valores afinados. Cole ele tal como está para uma estética dark premium, ou troque a cor de marca (#8B5CF6) pela sua. Se você quiser algo mais sob medida, use os Prompts 1 ou 2 acima para que sua IA gere um próprio com essa mesma estrutura.

O hábito · guarde onde a IA sempre leia

Um sistema de design só serve se a IA o respeitar SEMPRE. Guarde-o no seu CLAUDE.md (ou no arquivo de instruções do seu agente) e, de tempos em tempos, peça para ela revisar se alguma tela saiu das regras. O hábito: nenhuma tela nova sem que ela respeite o sistema. É o mesmo que o protocolo C-A-R, mas para o design.

No NeuralOS, o sistema de design já vem de fábrica

Os apps que você constrói no NeuralOS nascem sobre um sistema de design premium já integrado (a estética Lux-Linear-Obsidian) — então tudo que você gera sai coerente e com acabamento profissional desde a primeira tela, sem que você tenha que montar o sistema. A visão: que você não consiga construir algo feio ou inconsistente por acidente.

CLAUDE.md / memória · onde guardar seu sistema de design

O sistema de design vive na memória da sua IA para que ela o respeite sempre. É assim que se guarda.

O protocolo C-A-R · audite também o design

Na fase de auditar, verifique se cada tela respeita o sistema de design. A consistência também se audita.

#design#ui#sistema-de-design#consistencia

Ready to build?