🔍 O system prompt vazado
As ~10.000 palavras que governam o Claude Design — vazadas por Elder Plinius em abril/2026. Análise completa.
Primeira linha: "You are an expert designer working with the user as a manager." Claude é funcionário.
Essa hierarquia determina como Claude responde — executa instruções, não debate.
Manager · Executor · Sem push-back · Delivery-focus.
Lista explícita de "avoid": gradientes agressivos, emojis, card-com-accent-esquerda, SVG desenhado, Inter/Roboto/Arial/Fraunces.
Sem DS, Claude cai nessa lista negativa automaticamente.
Anti-slop · Default estético · Quebra com DS.
"Make at least 10 questions, perhaps more" — texto literal. Não é sugestão.
Entender a origem permite override explícito no user prompt.
Literal · Override via user prompt · Pre-answer.
"Try to give 3+ variations, start basic, get advanced." Default é 3.
Sem pedir mais, você fica na escada padrão — 3 opções limitadas.
Default 3 · Progression · Pedido explícito.
Entender → Explorar → Planejar → Construir → done() → fork_verifier_agent → resumir.
Você pode interromper em qualquer passo. Entender o pipeline te dá pontos de controle.
6 passos · Pontos de controle · Verificador passo 5.
Claude recusa recriar UI distintiva de empresa X se seu email não é @empresa-x.com.
Evita copiar Stripe/Apple/Linear direto. Oferece alternativa original.
IP protection · Email-domain gate · Alternativa original.
🧩 Starter components
deck_stage, design_canvas, ios_frame, android_frame, macos_window, browser_window, animations.jsx.
Web component. Envolve slides, faz scale 1920×1080, teclado nav, contador, print-PDF, localStorage, postMessage.
System prompt exige uso para ANY deck. Manualmente você perde features.
Web component · 1920×1080 · localStorage · Speaker notes.
Layout em grade com células rotuladas. Para apresentar 2+ opções estáticas lado a lado.
Para variações puramente visuais (cor, layout), é o starter correto.
Grid labelled · Comparação estática · Decision-enabling.
Molduras de iPhone/Android com status bar, notch/home indicator, teclado virtual.
Protótipo ganha 80% mais "realismo" percebido.
Device frames · Realismo · Stakeholder clarity.
Janela macOS com traffic lights; browser com address bar e tabs.
Para apps desktop ou para mostrar landing "vista num browser real".
Traffic lights · Address bar · Tabs · Context real.
Stage + Sprite + useTime + Easing + interpolate. Motion design em React.
System prompt manda usar antes de cair em Popmotion.
Timeline · Scrubber · Hooks · Fallback Popmotion.
Tool que Claude invoca com kind: "deck_stage.js" etc. Retorna código pronto.
Você pode PEDIR explicitamente: "use copy_starter_component com kind: ios_frame.jsx".
Tool import · Kind exato · Extension obrigatória.
🔒 Verificador silencioso
fork_verifier_agent: o subagente que revisa com olhos frescos e silenciosamente — mesmo conceito do Claude Code.
Subagente com contexto zero. Avalia o design como se fosse primeira vez.
Mesmo conceito do Claude Code: nunca deixar o modelo revisar o próprio trabalho no mesmo contexto.
Fresh eyes · Contexto novo · Anti-bias.
Após done() retornar sem erros de console, Claude chama fork_verifier_agent em background.
Silencioso em sucesso — só interrompe se algo estiver errado.
Background · Silent success · Only-alert-on-fail.
Screenshots em diferentes viewports, teste de layout (overflow, alignment), sondagem JS (console errors, JS probes).
Saber o que ele checa permite pedir verificações direcionadas.
Multi-viewport · Overflow · Console errors · JS probes.
"Tire screenshot e confira o espaçamento" — Claude invoca com task específica.
Sem poluir seu contexto, você recebe check focado.
Task-directed · Out-of-context · Independent return.
System prompt: "Não espere por ele; encerre seu turno."
Claude segue e só é interrompido se há problema. Verificador é async.
Async · Non-blocking · Interrupt-on-issue.
"Não faça sua própria verificação antes de chamar done; não capture screenshots proativamente."
Self-check polui contexto com detalhes que não importam. Deixe o verificador.
Trust verificador · Context hygiene · Role separation.
⚡ window.claude.complete: Haiku + 1024 tokens
O Claude "ao vivo" dentro dos mocks. NÃO é Opus 4.7 — é Haiku 4.5 com cap fixo.
Função JS disponível dentro de qualquer HTML gerado. Chama LLM sem SDK, sem API key.
Protótipos interativos com AI real — dashboards com insights dinâmicos, chat, sugestões.
Zero config · In-mock AI · Prototype com LLM.
Os bastidores rodam claude-haiku-4-5 mesmo quando o mock diz "powered by Opus".
Expectativas: Haiku é rápido e barato, mas limitado para raciocínio complexo.
Haiku 4.5 · Rápido · Limitado · Cost-saving.
Max 1024 tokens de OUTPUT. Não há parâmetro para mudar.
Bom para: resumos curtos, sugestões, classificação. Ruim para: geração longa, código extenso.
1024 tokens · Output-cap · Use-case fit.
complete("prompt direto") OU complete({messages: [{role:'user', content:'...'}]}).
Messages permite system prompt customizado + histórico.
Simple string · Messages format · System prompt.
Rate-limited por viewer. Mock em share URL consome quota de quem está visualizando.
Em apresentação ao vivo, limite pode bater se muitos chamam ao mesmo tempo.
Per-viewer · Quota · Live-demo risk.
Dashboards com insights dinâmicos, chatbot simples, sugestão de próximos passos, classificação de texto.
Saber o sweet spot evita frustração.
Insights · Chat curto · Classificação · Sugestão.
🎬 Animações: Stage, Sprite, hooks, Easing
animations.jsx em profundidade. Timeline, useTime/useSprite, interpolate, entry/exit. Popmotion só se não cobrir.
<Stage> envolve toda a animação. Inclui autoscale, scrubber timeline, play/pause.
É a base — Sprites vivem dentro. Configure duração aqui.
Timeline · Scrubber · Play/pause · Duração.
<Sprite start={0} end={2000}>...</Sprite>. Existe só entre start e end (em ms).
Composição: múltiplos Sprites formam cenas.
start/end · Lifecycle · Composição · Cenas.
useTime() retorna tempo absoluto. useSprite(name) retorna progresso 0-1 do Sprite atual.
Base de toda animação — você pluga useSprite() em opacity, transform, etc.
Hooks React · Progress 0-1 · Reactive rendering.
Easing.easeOut(v), interpolate(v, [0,1], [0,100]). Transforma 0-1 em algo útil.
Sem easing, animação fica robótica linear. Com, ganha naturalidade.
Easing · Interpolate · Range mapping · Natural motion.
Helpers prontos: fadeIn, slideUp, scaleIn — e seus inversos.
Cobrem 80% das animações de entrada/saída de elementos.
fadeIn/Out · slideIn/Out · scaleIn/Out · Composição.
"Only fall back to Popmotion if the starter genuinely can't cover the use case."
Mantém consistência e evita bloat. animations.jsx cobre 95% dos casos.
Fallback · Consistency · Avoid bloat.
🎯 Edge cases & limitações
Newspaper default, 1920×1080 fixo, sem título em protótipos, cross-project limitations, scrollIntoView proibido, styles naming.
Italic serif, off-white, pull-quote = signals de "não tinha DS".
Se vê isso no output, seu prompt/DS foi fraco. Quebre com restrições explícitas.
Sintomas · Restrição explícita · DS completo.
deck_stage.js é hardcoded 1920×1080 (16:9). Para 9:16 (stories, Instagram), precisa ser explícito.
Evita retrabalho: diga aspect ratio ANTES de pedir slides.
16:9 default · Override explícito · Aspect ratio.
"Resist the urge to add a 'title' screen" — system prompt. Protótipos vão direto ao ponto.
Se quer título, peça explicitamente.
No title default · Override if needed · Direct-to-content.
Você lê de outro projeto, mas não pode renderizar asset externo — copie primeiro.
Path externo = imagem quebrada.
copy_files · Explicit copy · Path local.
"Never use scrollIntoView — it can mess up the web app." Use outros métodos DOM.
Em protótipos com scroll, usar errado quebra tudo.
Forbidden · window.scrollTo · Element offsetTop.
NUNCA "const styles = {}". Sempre "const terminalStyles = {}".
Babel scripts inline compartilham escopo — colisão de nome crasha silenciosamente.
Naming collision · Babel scope · Unique prefix.
🧙 Manipulação avançada: sobrescrevendo o sys prompt
User prompt sempre ganha. Como forçar mais variações, pular perguntas, sair do newspaper, etc.
User prompt sempre tem prioridade sobre system prompt quando não há conflito ético.
É o que permite todos os "hacks" subsequentes.
Priority · Override · Ethical floor.
"Skip questions. Use defaults: [lista]. Generate now."
Use quando: pressão de tempo + você já sabe o que quer. Caso contrário, baixa qualidade.
Time-pressure · Risk-aware · Defaults explícitos.
Override do default 3. Use N até 7 com sanidade.
Acima de 7, Claude começa a repetir conceitos.
N <= 7 · Diversidade real · Axis nomeados.
Restrição explícita: "sem italic serif, sem off-white, sem pull-quote editorial".
Frase mata o viés default em 1 linha.
Explicit negation · Bias kill · Feeling alternativo.
"Sem gradient blobs, sem floating orbs, sem glassmorphism, sem emojis fora do DS".
Esses são os 4 maiores "AI tropes" que denunciam output gerado.
Anti-AI · Originalidade · Detection avoidance.
"Use exactly primary #E07A4F, font Newsreader italic for headlines, body Geist, spacing 8/16/24/32 only."
Útil quando você TEM marca definida e quer zero improvisação.
Especificidade total · Zero-creativity · Brand strict.