← Todos os guiasClaude Code

Prompts de Design para AI

Todos os sites gerados por AI parecem iguais. Roxos, gradientes brilhantes, fontes genéricas e layouts que gritam "feito por template grátis". O problema não é a ferramenta, és tu que não sabes escrever o prompt de design. Este guia ensina-te a construir interfaces que parecem feitas por agência de 5.000€, usando apenas 20 linhas de instruções bem escritas. Vais aprender a estrutura exacta de um prompt de design profissional, as regras visuais que eliminam o aspecto genérico e as ferramentas que transformam texto em aplicações funcionais com bases de dados reais, logins de utilizador e sistemas de pagamento integrados.

Por Diogo Köpke, fundador da KopkAI15 min de leituraActualizado 2 de maio de 2026

Introdução

A diferença entre um site roxo genérico e uma plataforma com identidade própria está nas três primeiras linhas do teu prompt. Não é magia, é método. Vais dominar esse método nos próximos 15 minutos.

O Problema

O "problema roxo" existe porque as AI de design foram treinadas em milhões de templates Bootstrap, Tailwind UI e dashboards SaaS dos últimos cinco anos. Todos usavam paletas vibrantes com roxo #6366f1, gradientes de marca e fontes Inter ou Poppins. Quando pedes "cria-me um dashboard", a AI replica esse padrão porque é o mais comum no dataset. O resultado? Sites que parecem clones do Stripe, Linear ou Notion, mas sem a qualidade de execução.

A segunda camada do problema é a ausência de restrições. Sem regras visuais claras, a AI vai inventar: adiciona sombras excessivas, animações em tudo, componentes desnecessários e páginas que ninguém pediu. Um simples "cria um sistema de reservas" pode resultar em 12 páginas com calendários animados, gráficos de estatísticas e painéis de administração complexos. Tu querias três ecrãs simples.

Sites gerados por AI sem prompt de design têm 89% de probabilidade de usar roxo ou azul vibrante como cor primária.
Ferramentas como v0.dev e Bolt.new defaultam para componentes Shadcn/UI que partilham a mesma estética.
Sem especificações de espaçamento, a AI usa margins de 16px e paddings de 24px em todo o lado, criando layouts apertados.

A Solução

A solução é um prompt de design estruturado em três blocos: restrições visuais, regras de sistema e descrição funcional. O primeiro bloco elimina o roxo e os vícios do template. O segundo define a linguagem visual que a AI deve seguir: tipografia, espaçamentos, animações e hierarquia. O terceiro descreve o que construir, mas só depois de estabeleceres as fundações estéticas. Esta ordem inverte o processo habitual e força a AI a pensar em identidade antes de função.

As restrições visuais começam sempre com negações. "Sem gradientes. Sem cores vibrantes. Sem sombras decorativas. Sem animações por defeito." Estas quatro linhas eliminam 80% do aspecto genérico. Depois adicionas o que queres: "Paleta monocromática em cinza ardósia. Cor de acento única em verde oliva. Fundos brancos ou cinza-claro apenas." Três linhas definem toda a estética cromática.

Bloco 1: Restrições visuais em 4-6 linhas negativas seguidas de 3-4 linhas positivas.
Bloco 2: Regras de sistema em 6-8 linhas sobre tipografia, espaçamento e interacção.
Bloco 3: Descrição funcional em 5-10 linhas sobre páginas, fluxos e dados.

Pré-requisitos

Precisas de uma conta numa ferramenta de AI builder. Bolt.new da StackBlitz é gratuita e gera aplicações React/Vue com Vite. v0.dev da Vercel é gratuita para 200 gerações por mês e produz componentes Next.js com Tailwind CSS. Lovable tem plano gratuito com 100 prompts e gera apps full-conjunto de ferramentas com Supabase. Base44 oferece trial de 14 dias e constrói sistemas com bases de dados PostgreSQL reais. Escolhe consoante conjunto de ferramentas: React puro usa Bolt, Next.js usa v0, full-conjunto de ferramentas com backend usa Lovable ou Base44.

Precisas de compreender básicos de design de interfaces. Não tens de ser designer, mas deves saber que espaçamento generoso significa margins de 32-48px entre secções, que hierarquia tipográfica usa 2-3 tamanhos de fonte no máximo e que animações subtis duram 150-250ms. Se não sabes avaliar se um layout está equilibrado, vais aceitar outputs medíocres sem perceber. Estuda durante 2 horas o Refactoring UI do Adam Wathan ou o Better Web Type do Matej Latin.

Cria conta em pelo menos duas ferramentas AI builder para comparar outputs.
Lê a documentação de prompts da ferramenta escolhida: v0.dev docs ou Bolt.new guide.
Prepara referências visuais: guarda 3-5 screenshots de sites que gostas da estética.

Implementação Passo a Passo

Passo 1: Escrever o Bloco de Restrições

Abre um editor de texto limpo e começa com negações absolutas. "Sem gradientes de cor. Sem roxos, azuis vibrantes ou verdes néon. Sem sombras decorativas ou glows. Sem animações automáticas em hover. Sem ícones ilustrativos ou gráficos decorativos." Cada frase elimina uma categoria de decisões ruins que a AI toma por defeito. Depois de 4-6 negações, inverte para positivo. "Usa paleta monocromática baseada em cinza neutro #71717a como cor de texto principal. Cor de acento única: verde musgo #65a30d para botões primários e links. Fundos: branco puro #ffffff ou cinza muito claro #fafafa apenas."

Este bloco define a personalidade visual. Se queres aspecto corporativo sério, usas cinzas e azul marinho. Se queres aspecto criativo moderno, usas pretos profundos com laranja queimado. A escolha da paleta transmite mais do que qualquer outro elemento. Testa a tua paleta no Coolors ou Adobe Color antes de a escrever no prompt. Verifica contraste WCAG AA no WebAIM Contrast Checker para garantir acessibilidade.

4-6 linhas de negações absolutas para eliminar padrões genéricos.
3-4 linhas de especificações cromáticas com hex codes exactos.
1 linha sobre fundos permitidos (geralmente 2 tons no máximo).

Passo 2: Definir Regras Tipográficas

Continua o prompt com tipografia. "Fonte: Inter para interface, SF Mono para código. Tamanhos: 14px texto base, 18px títulos de secção, 24px títulos de página. Peso: 400 regular para corpo, 600 semibold para headings. Line-height: 1.6 para parágrafos, 1.2 para títulos. Sem itálico decorativo." Estas seis linhas definem toda a hierarquia textual. A AI vai respeitar estes valores em vez de inventar 12 tamanhos de fonte diferentes.

Se a ferramenta suporta custom fonts, especifica via Google Fonts ou Bunny Fonts (alternativa GDPR-compliant). "Carrega fonte Work Sans via Bunny Fonts, weights 400 e 600 apenas." A maioria das ferramentas AI suporta isto nativamente. Se não especificares fonte, vais receber Inter ou Poppins porque são as mais comuns em templates Tailwind. Não há nada de errado com Inter, mas é como usar Arial: seguro e entediante.

Passo 3: Estabelecer Espaçamento e Layout

Espaçamento generoso é o truque visual mais subestimado. "Margins entre secções: 48px vertical. Padding interno de cards e containers: 32px. Gap entre elementos relacionados: 16px. Largura máxima de conteúdo: 1200px. Sem layouts a 100% de largura." Cinco linhas criam respiração visual que distingue design profissional de amador. A AI tende a apertar tudo porque templates Bootstrap usam espaços pequenos para caber mais conteúdo. Tu queres o oposto.

Para layouts multi-coluna, especifica breakpoints. "Layout desktop: 2 colunas até 1024px, depois 3 colunas. Mobile: sempre 1 coluna abaixo de 640px. Sem carrosséis horizontais ou scroll lateral." A maioria das ferramentas AI usa Tailwind CSS, por isso podes referenciar breakpoints Tailwind directamente: sm:640px, md:768px, lg:1024px, xl:1280px. Isto garante consistência com o sistema de design da framework.

Define margins entre secções (recomendado: 48-64px).
Define padding interno de componentes (recomendado: 24-32px).
Define gap entre elementos grid/flex (recomendado: 16-24px).
Estabelece max-width para legibilidade (recomendado: 1200-1400px).

Passo 4: Especificar Animações e Interacções

Animações subtis adicionam polish sem distrair. "Transições: 200ms ease-out para todos os estados hover. Sem animações de entrada automáticas. Botões: escala 0.98 em active state. Links: underline animado de 150ms. Sem parallax ou scroll effects." Estas regras criam micro-interacções consistentes. A duração de 200ms é o sweet spot: rápida o suficiente para não atrasar, lenta o suficiente para ser percebida. Valores abaixo de 150ms parecem instantâneos, acima de 300ms parecem lentos.

Evita especificar animações complexas no prompt inicial. Deixa a AI gerar o layout base primeiro, depois refinas animações em iterações seguintes. Se pedires "animações suaves e fluidas" sem especificar duração e easing, vais receber cubic-bezier aleatórios e durações inconsistentes. Melhor ser específico: "transition: all 200ms ease-out" aplicado globalmente via CSS.

Passo 5: Escrever a Descrição Funcional

Só agora descreves o que construir. "Constrói um dashboard de gestão de projectos com três páginas: lista de projectos (tabela com filtros), detalhe de projecto (timeline de tarefas com status), página de equipa (grid de avatares e roles). Cada projecto tem nome, cliente, orçamento, data de início e progresso percentual. Tarefas têm título, responsável, deadline e três estados: pendente, em progresso, concluído. Sistema de login simples com email e password."

Esta descrição é clara e estruturada. Defines entidades (projecto, tarefa, utilizador), atributos de cada uma e relações entre elas. A AI vai inferir a base de dados necessária. Ferramentas como Base44 e Lovable criam automaticamente schemas SQL, APIs REST e formulários de CRUD. Não precisas de especificar "adiciona API endereço de ligação para criar projecto", a ferramenta faz isso quando detecta que há um formulário de criação.

Lista as páginas/ecrãs principais (3-7 para começar).
Descreve as entidades de dados e seus atributos.
Especifica relações (um projecto tem muitas tarefas).
Menciona funcionalidades críticas (filtros, pesquisa, autenticação).

Passo 6: Submeter e Iterar

Copia o prompt completo para a ferramenta escolhida e gera a primeira versão. Bolt.new demora 30-60 segundos a gerar código React. v0.dev gera componentes isolados em 10-20 segundos. Base44 e Lovable demoram 2-3 minutos porque estão a construir backend e base de dados também. Não interrompas o processo. Quando terminar, abre o preview e avalia apenas a estética inicial: paleta de cores, espaçamento, tipografia. Ignora bugs funcionais nesta fase.

Se o output ainda parecer genérico, o problema está no bloco de restrições. Adiciona mais negações específicas. "Sem borders arredondadas acima de 8px radius. Sem cards com sombras. Sem badges coloridos ou status pills." Cada iteração deve focar-se num aspecto. Não tentes corrigir cores, espaçamento e funcionalidade na mesma iteração. A AI confunde-se com prompts que misturam camadas diferentes. Faz três iterações separadas: uma para visual, uma para layout, uma para funcionalidade.

Ferramentas e Recursos

Bolt.new da StackBlitz é a mais rápida para protótipos React, Vue ou Svelte. Gera código fonte visível que podes exportar para GitHub. Plano gratuito: 20 prompts por mês. Plano pago (20€/mês): prompts ilimitados e deploy automático. Ideal para quem quer código limpo e controlo total. Não tem backend integrado, tens de ligar a Firebase ou Supabase manualmente.

v0.dev da Vercel gera componentes Next.js isolados. Óptima para construir bibliotecas de componentes reutilizáveis. Plano gratuito: 200 gerações por mês. Integração nativa com Vercel para deploy. Usa Shadcn/UI por baixo, por isso os componentes seguem convenções Radix UI. Melhor escolha se já usas Next.js em produção e queres adicionar componentes específicos sem reconstruir páginas inteiras.

Lovable constrói apps full-conjunto de ferramentas com Supabase como backend. Gera autenticação, base de dados PostgreSQL e storage de ficheiros automaticamente. Plano gratuito: 100 prompts. Plano Pro (39€/mês): projetos ilimitados e colaboração em equipa. Ideal para MVPs que precisam de backend real sem configurar infraestrutura. A AI escreve queries SQL, políticas de Row Level Security e até Cloud Functions quando necessário.

Base44 é a mais enterprise-ready. Gera arquitecturas multi-serviço com bases de dados relacionais complexas, filas de jobs e APIs REST documentadas. Trial gratuito de 14 dias. Plano inicial (49€/mês): 3 projetos activos. Exporta código para Docker containers prontos para deploy. Melhor para sistemas internos de empresas: CRMs, ERPs, ferramentas de processo. Overkill para sites simples.

Refactoring UI: livro de 250 páginas sobre design de interfaces sem ser designer. 99 USD, vale cada cêntimo.
Coolors: gerador de paletas de cores. Gratuito, gera esquemas harmoniosos com um clique.
Type Scale: calculadora de hierarquia tipográfica. Define ratio e extrai tamanhos proporcionais.
WebAIM Contrast Checker: valida contraste WCAG AA/AAA. Essencial para acessibilidade.

Caso Prático

Imagina uma consultoria de marketing com 8 colaboradores que precisa de um sistema interno para gerir campanhas de clientes. Cada campanha tem orçamento, timings, deliverables e aprovações. O sistema deve mostrar dashboards de progresso, alertar quando deadlines se aproximam e gerar relatórios mensais. Contratar uma agência para construir isto custa 8.000-12.000€ e demora 6-8 semanas. Vamos construir com AI em 4 horas.

Começas com o prompt de design estruturado. Bloco de restrições: sem roxos, sem gradientes, paleta em cinza carvão com laranja terracota como acento. Bloco de tipografia: Inter 14px base, 20px títulos, weights 400 e 600. Bloco de espaçamento: margins de 56px entre secções, padding de 32px em cards. Bloco de animações: 200ms ease-out universal. Depois descreves funcionalidade: 4 páginas (lista de campanhas, detalhe de campanha com timeline, relatórios, gestão de equipa), entidades (campanha, deliverable, cliente, colaborador) e relações (uma campanha tem múltiplos deliverables, cada deliverable atribuído a um colaborador).

Submétes a Lovable porque precisas de backend real. A ferramenta demora 3 minutos a gerar: base de dados PostgreSQL com 5 tabelas relacionais, autenticação com roles (admin e membro), APIs REST para CRUD de campanhas e deliverables, dashboard React com gráficos de progresso usando Recharts, sistema de notificações por email via Supabase Edge Functions. Primeira versão tem 85% do que precisas. Fazes duas iterações: uma para ajustar cores dos status badges (pendente em laranja, concluído em verde oliva), outra para adicionar filtros por cliente e data na lista de campanhas. Total: 4 horas de trabalho.

Cálculo de poupança: 4 horas × 30€ (teu custo horário interno) = 120€ investidos. Alternativa: agência a 10.000€ ou developer freelancer a 50€/hora × 80 horas = 4.000€. Poupaste 3.880€ e tens o sistema funcional hoje em vez de daqui a 2 meses. A consultoria pode facturar este sistema como produto próprio a outros clientes do sector. Se vende a 3 clientes a 1.500€ cada, são 4.500€ de receita adicional gerada por 4 horas de prompt engineering.

Erros Comuns

Erro número um: escrever a descrição funcional antes das restrições visuais. Isto gera a aplicação completa com estética genérica. Depois tens de refazer 80% do código para mudar cores e espaçamentos porque a AI hardcoded valores Tailwind por todo o lado. Ordem correcta: sempre restrições primeiro, funcionalidade depois. A AI usa as restrições como contexto global para todas as decisões seguintes.

Erro número dois: restrições vagas. "Usa cores suaves e profissionais" não diz nada à AI. Suave para ti pode ser pastel, para a AI pode ser cinza médio. Profissional pode ser azul corporativo ou preto minimalista. Tens de dar hex codes exactos. "Cor primária: #18181b (cinza quase preto). Cor de acento: #f97316 (laranja vivo). Fundos: #ffffff e #f8fafc apenas." Zero ambiguidade.

Erro número três: pedir demasiadas páginas na primeira iteração. "Constrói um CRM completo com gestão de leads, lista de contactos de vendas, dashboard de métricas, calendário de tarefas, chat interno e integração com email." A AI vai gerar 15 páginas medíocres em vez de 3 páginas excelentes. Começa com o core mínimo (lista, detalhe, formulário), testa, depois adiciona features secundárias uma de cada vez. Cada feature adicional aumenta a superfície de bugs e inconsistências.

Escrever funcionalidade antes de restrições visuais resulta em redesign completo.
Restrições vagas ("cores suaves", "design limpo") geram interpretações aleatórias.
Pedir 10+ páginas logo gera mediocridade distribuída em vez de qualidade concentrada.
Não especificar durações de animação resulta em timings inconsistentes entre componentes.
Misturar correcções visuais e funcionais no mesmo prompt confunde a AI.

Checklist de Implementação

Escolher ferramenta AI builder apropriada: Bolt para frontend, Lovable/Base44 para full-conjunto de ferramentas.
Preparar referências visuais: guardar 3-5 screenshots de sites com estética desejada.
Definir paleta cromática: 1 cor base de texto, 1 cor de acento, 2 tons de fundo. Validar contraste WCAG AA.
Escrever bloco de restrições: 4-6 negações seguidas de 3-4 especificações cromáticas.
Escrever regras tipográficas: fonte, 3 tamanhos, 2 weights, line-heights.
Definir espaçamento: margins entre secções, padding de containers, gap de grids.
Especificar animações: duração universal (200ms), easing (ease-out), estados a animar.
Descrever funcionalidade: listar páginas, entidades de dados, atributos e relações.
Submeter prompt e aguardar geração completa sem interromper.
Avaliar output em três camadas separadas: estética, layout, funcionalidade.
Fazer iteração de polish visual: ajustar cores, espaçamentos e tipografia.
Fazer iteração de refinamento funcional: corrigir bugs, adicionar validações.
Testar em mobile e desktop, validar acessibilidade com Lighthouse.
Exportar código e configurar deploy (Vercel, Netlify ou Railway).

Preferes que isto seja feito por nós? Conhece o nosso serviço de inteligência artificial para empresas.