Prompt de Design do Sistema Claude Engenharia Reversa para Agentes de IA sem Poluição (UI)

A maioria dos prompts de "assistente de design" produz modelos genéricos de SaaS — gradientes agressivos, decorações com emoji, cards de cantos arredondados e Inter em todo lugar. O Claude Design System Prompt de Trystan-SA rejeita explicitamente esses padrões. É um prompt de sistema com engenharia reversa (licenciado MIT) que transforma um LLM em um colaborador de design opinativo, acessível e resistente à IA genérica.

O que está incluído

• claude/system-prompt.md — 20 capítulos cobrindo disciplina de conteúdo, disciplina estética, hierarquia visual, acessibilidade WCAG, estados de interação, pensamento sistêmico (componentes + tokens) e respeito ao meio (CSS Grid real, oklch(), text-wrap: pretty).
• claude/skills/ — 14 procedimentos invocáveis agrupados em Produção (perguntas de descoberta, direção estética frontend, wireframe, criar deck, criar protótipo, criar ajustável, gerar variações), Sistema (extração de design system, extração de componente) e Revisão (auditoria de acessibilidade, verificação de AI slop, revisão de hierarquia e ritmo, verificação de estados de interação, refinamento).
• Variante codex/ adaptada para OpenAI Codex (loop único, sem subagentes).

Como usar

Cole o conteúdo de system-prompt.md como instrução do sistema para qualquer LLM (Claude, GPT, Gemini, modelos locais). O agente segue a filosofia de design e referencia as habilidades pelo nome quando as tarefas correspondem. As habilidades podem ser encadeadas — um fluxo típico do zero: discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass. Um fluxo com reconhecimento de marca: design-system-extract → generate-variations → make-tweakable → polish-pass.

Princípios de design

O prompt impõe disciplina de conteúdo (sem preenchimento, cada elemento ganha seu lugar), disciplina estética (evitar tropos de IA, comprometer-se com paleta e tom), hierarquia visual e ritmo (escalas de tamanho, cor, peso, posição, densidade, espaçamento), acessibilidade (WCAG, HTML semântico, navegação por teclado, anéis de foco, preferências de movimento), feedback de interação (hover, active, disabled, focus, carregamento, estados de validação) e pensamento sistêmico (componentes e tokens em vez de páginas avulsas).

Para quem é

Desenvolvedores que usam agentes de codificação de IA e desejam resultados de design opinativos e acessíveis, sem os tropos genéricos de SaaS.