A maior parte do que vês por aí com aspecto de “feito por IA” não é inteligente — é um template mal disfarçado com gradiente, emoji e border-radius: 12px.
Há um problema crescente no design assistido por IA. Quando pedes a um LLM para criar uma página, recebes quase sempre o mesmo resultado: um hero com gradiente roxo, um card com border-left: 4px solid, um botão gigante com Get Started, e a fonte Inter. É funcional, mas é genérico. Parece tudo igual.
O Claude Design System Prompt, criado por Trystan S, é uma resposta directa a este problema. É um system prompt e biblioteca de skills open-source (MIT) que transforma qualquer LLM — Claude, GPT, Gemini, ou modelos locais — num designer com opinião, que pensa em sistemas, respeita acessibilidade, e rejeita os truques visuais que denunciam output de IA.
Neste guia vais aprender: - O que é o Claude Design System Prompt e porque foi criado - Como ele combate o “AI slop” no design - As 20 filosofias de design que o prompt aplica - As 14 skills que tornam o agente executável - Como usar isto nos teus próprios projetos
O problema: templates que parecem IA
Se já usaste ChatGPT ou Claude para gerar HTML+CSS, conheces o padrão. Os outputs partilham a mesma estética: gradientes berrantes, emojis a decorar headlines, fontes Inter ou Roboto por defeito, cards com cantos redondos e borda esquerda colorida.
Isto não é design. É um template estatístico — a média de tudo o que o modelo viu em sites de SaaS e landing pages. O repositório chama-lhe AI slop: output que parece razoável à primeira vista mas que, quando olhas com atenção, não tem intenção. Não há sistema de cores, não há hierarquia visual, não há decisões — há apenas aproximações.
O prompt do Trystan inverte isto. Em vez de “gera uma página bonita”, ele define princípios concretos que o modelo segue:
Um gerador de código enche a página com output razoável. Um designer pergunta para que serve a página, o que deve ser visto primeiro, o que pode ser cortado.
As 20 filosofias de design
O system prompt está dividido em 20 capítulos. Cada um é uma regra de design, escrita como instrução para o modelo. Não são sugestões — são constraints que o LLM tem de seguir.
Alguns dos capítulos mais interessantes:
Capítulo 5 — Fuga de filler: Nada existe na página sem uma razão. Se não serve para comunicar ou orientar o utilizador, é cortado. Espaço vazio resolve-se com composição, não com decoração.
Capítulo 6 — Disciplina estética vs. AI slop: Define explicitamente os padrões a evitar: gradientes de 3+ cores, border-left em todos os cards, emojis decorativos, fontes sem critério, SVG ilustrações genéricas.
Capítulo 10 — Acessibilidade: HTML semântico, focus-visible em todos os elementos interativos, prefers-reduced-motion, alt text, labels reais (não placeholders a fazer de label). WCAG não é opcional.
Capítulo 13 — System thinking: Desenha componentes, não páginas. Define tokens de design — --space-md, --color-primary, --radius-sm — e reutiliza. Uma página é uma composição de componentes, não um one-off.
Capítulo 14 — Respeitar o medium: CSS Grid real, oklch() para cores, text-wrap: pretty, container queries. O prompt diz explicitamente: não tentes recriar o Figma em código. Usa o que a web já faz bem.
As 14 skills
O prompt não é só filosofia. Inclui 14 skills que o modelo pode invocar conforme a tarefa. Cada skill é um procedimento faseado com verificação.
Produção (construir)
| Skill | Quando usar |
|---|---|
discovery-questions |
No início de qualquer pedido novo ou ambíguo |
frontend-aesthetic-direction |
Quando não existe marca e vais fazer hi-fi |
wireframe |
Para explorar layouts em baixa fidelidade |
make-a-deck |
Apresentações em HTML |
make-a-prototype |
Protótipos interativos com estado real |
make-tweakable |
Painel flutuante para ajustar o design ao vivo |
generate-variations |
3+ variações de alta fidelidade |
Sistema (extrair estrutura)
| Skill | Quando usar |
|---|---|
design-system-extract |
Extrair tokens de uma marca ou código |
component-extract |
Inventariar componentes reutilizáveis |
Revisão (auditar e corrigir)
| Skill | Quando usar |
|---|---|
accessibility-audit |
Verificar contraste, HTML semântico, teclado |
ai-slop-check |
Detectar e remover tropes visuais de IA |
hierarchy-rhythm-review |
Verificar escala de espaçamento e hierarquia |
interaction-states-pass |
Verificar hover, focus, active, disabled |
polish-pass |
Gate final antes de entregar |
Uma chain típica para um projeto novo: discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass.
Como usar na prática
Pega no ficheiro claude/system-prompt.md e usa como system prompt no LLM à tua escolha. Funciona com Claude, ChatGPT, Gemini, e até modelos locais. O modelo lê as 20 filosofias e referencia as skills pelo nome quando a tarefa corresponde.
# Exemplo: usar com Claude Code
claude -p "Cria um protótipo interativo para uma app de tracking de hábitos" \
--system-prompt ./claude/system-prompt.md
Para trabalhos mais complexos, cada skill em claude/skills/ pode ser carregada separadamente. Pedes ao modelo para invocar ai-slop-check depois de gerar um hero, ou interaction-states-pass antes de considerar o trabalho terminado.
Há também uma variante para OpenAI Codex na pasta codex/, adaptada para single-loop sem subagentes. A filosofia é a mesma, mas as skills actuam como revisões sequenciais em vez de paralelas.
O que eu acho disto
Uso LLMs para gerar UI há quase dois anos. O padrão é sempre o mesmo: vês o resultado, identificas 5 coisas que estão mal, dizes ao modelo para corrigir, ele corrige 3 e parte 2. É frustrante porque o modelo não tem critério estético — só estatística.
Este prompt resolve isso de forma elegante. Em vez de contornar o problema com “faz melhor”, ele diz ao modelo o que é bom design. Dá-lhe um sistema de valores, não uma checklist.
A parte mais inteligente é o ai-slop-check. Detecta padrões como gradientes multi-cor, emojis decorativos, border-left: 4px solid em cards, fontes Inter/Roboto como default silencioso, e #FFFFFF com #000000 sem tonalidade adaptada ao tema. Tudo o que denuncia “fui gerado por IA” é identificado e marcado para substituição.
Isto não é só para designers. Se és developer e usas IA para gerar protótipos ou páginas, este prompt vai melhorar drasticamente a qualidade do output. O modelo continua a gerar código — mas agora com critério.
Conclusão
O Claude Design System Prompt é mais do que um prompt. É uma tentativa de ensinar a LLMs o que significa ter bom gosto, consistência, e respeito pelo utilizador. Num mundo onde cada vez mais interfaces são geradas por IA, ter ferramentas que rejeitam o “default AI aesthetic” é um passo na direção certa.
O repositório está em github.com/Trystan-SA/claude-design-system-prompt, licença MIT, e aceita contribuições. Se trabalhas com design e IA, experimenta. O teu próximo protótipo pode não ter gradiente nenhum — e isso é bom.
Comentários (0)
Nenhum comentário ainda. Seja o primeiro!
Deixar comentário