🟢 Prompts & Automações

Prompt de ~20 linhas que cobre todas as 10 perguntas do Claude Design. Estrutura canônica seed.

Economia de 10 min de setup por pitch.

Pre-answered · Estrutura 10 slides · Feeling specified.

Cole template + anexe PDF do one-pager/data room/notes. Claude extrai ideias e visualiza.

Você não precisa reescrever conteúdo em bullets — Claude faz.

PDF input · Auto-extract · Visualização automática.

Stripe×A24, Linear×Stripe, Warm editorial — troque uma linha do template.

Mesmo conteúdo, estéticas radicalmente diferentes.

Remix estético · Mesma estrutura · Feeling diferente.

Adicionar "Include speaker notes: full conversational script per slide" → Claude gera notas completas.

Notes = você tem roteiro pronto para falar 40min sem improvisar.

Full script · Conversational · Per-slide · #speaker-notes.

Peça "use recharts via CDN for growth chart: [dados CSV colados]". Chart real, não imagem.

Charts interativos impressionam investidor mais que PNG estática.

Recharts · CDN · CSV input · Interativo.

Apresentação live → PDF (investidor que quer printar), PPTX (para editar no PowerPoint/Google Slides).

Ambos exports saem do mesmo projeto, em segundos.

Multi-format · PDF print · PPTX edit.

Estrutura hero + 3 bens + social proof + FAQ + 2 CTAs. Comprovado em centenas de landings.

Não reinvente a roda. Use template, mude conteúdo.

Proven structure · Content-first · CTA duplicado.

Frase que ativa questions_v2 garantido. Recebe 10 perguntas para calibrar.

Resultado MUITO melhor que skipar.

Explicit trigger · 10 questions · Calibration.

Declare: "optimize for email capture" ou "demo request" ou "free trial signup".

Muda copy, CTA e friction. Sem isso, genérico.

Goal-specific · CTA alignment · Low-friction.

"Modern and clean, persuasive but not hype". Sem "Revolucione", sem "Desbloqueie".

Audiência sofisticada rejeita hype. Você quer confiança.

Modern · Persuasive · Não-hype · Confiança.

Peça Tweaks de: headline text, accent color, dark/light toggle, hero variant A/B.

A/B testing fica trivial — toggle e compara.

Custom tweaks · A/B variant · Live toggle.

Export HTML → Netlify drop ou Vercel CLI. No ar em 30s.

Zero build step. Landing viva sem engenharia.

Standalone · Drag-drop · Zero build.

"Read my repo [URL] and design files. Extract full design system: hex colors, font stacks, spacing scale, border radii, components. Generate DESIGN.md."

É o primeiro passo em qualquer projeto sério.

github_get_tree · Import seletivo · DESIGN.md output.

"Visit linear.app. Extract palette, typography, density. Generate DESIGN.md derived from it."

Hack oficial. Inspiração concreta sem copiar.

Web capture · Derived · Original output.

"Combine Linear DS with A24 film feeling: oversized type, generous spacing, cinematic dark."

Originalidade em 2026 vem de fusão.

Linear×A24 · Stripe×A24 · Fusion aesthetic.

"Derive harmonious colors using OKLCH from brand primary #[hex]. Maintain lightness ~55%."

Expandir paleta de 2 cores para 6 mantendo harmonia.

OKLCH · Lightness fixo · Derivação harmônica.

"AVOID Inter, Roboto, Arial, Fraunces. Suggest headline: Newsreader or Reckless. Body: Geist or Söhne."

Tipografia distinctiva = 50% do feeling premium.

Anti-overused · Newsreader · Geist · Söhne.

DESIGN-v1.md (legado), DESIGN-v2.md (atual), CHANGELOG.md. Trate como código.

Rebranding sem quebrar projetos antigos.

DS-as-code · Versioning · Legacy support.

Skill Claude Code que entrevista você localmente com as 10 perguntas canônicas.

Você responde offline e cola prompt pronto em claude.ai/design.

Offline interview · Pronto para colar · Front-loaded.

Q1 tipo · Q2 produto/audiência · Q3 feeling · Q4 contexto · Q5 brand · Q6 variações · Q7 sections · Q8 não-fazer · Q9 handoff · Q10 tweaks.

Cobre exatamente o que Claude Design perguntaria.

Parity cobertura · Ordem idêntica · Pre-answer exato.

Block copy-paste com todas respostas mapeadas + restrições + tweaks + handoff explícito.

Zero perguntas na ferramenta. Geração imediata.

Copy-paste block · Zero questions · Immediate gen.

Edite skill.md para adicionar perguntas específicas da sua marca/vertical.

Sua skill personalizada acelera 10x.

Fork skill · Questions custom · Brand-specific.

"skip the interview, just build it" + brief curto. Skill infere defaults e avisa o que você não especificou.

Modo rápido para quando você já sabe.

Skip interview · Defaults inference · Flag warnings.

Skill referencia DESIGN.md do projeto. Output já vem com brand system amarrado.

Zero setup, output premium.

Composição · Reference DS · Premium default.

HTML final, componentes React soltos, CSS vars, DESIGN.md, lista de assets usados, notas de implementação.

Nada se perde entre design e dev.

HTML · React components · CSS vars · Assets.

No fim do export, Claude Design gera comando: "claude continue-from [project-id]". Cole no terminal.

Claude Code abre com contexto completo — sem re-explicar.

Continue-from · Context preservation · Zero setup.

Bundle HTML genérico. Claude Code converte para Next.js, Remix, Astro, Vue conforme seu stack.

Flexibilidade total no stack final.

Next.js · Remix · Astro · Framework-agnostic.

Tweaks definidos no design viram feature flags reais no código. Toggle em produção.

A/B testing em produção sem implementar do zero.

Tweaks → flags · Prod A/B · Zero extra work.

HTML gerado precisa auditoria: segurança, a11y (ARIA, contraste, teclado), SEO, Core Web Vitals.

Claude Design não valida isso automaticamente.

Security · A11y · SEO · Web Vitals.

Mudança visual? Volte pro Claude Design, ajuste, re-export → Claude Code atualiza código.

Design e código em sync sem manutenção dupla.

Round-trip · Single source · Auto-sync.

Fazer design primeiro elimina ~40% de retrabalho em Claude Code (descobrir no código o que seria visual).

Tokens economizados + entrega mais rápida.

40% less rework · Token saving · Visual first.

Desenhar componentes e fluxo no Claude Design antes de pedir implementação ao Claude Code.

Arquitetura emerge do design, não do código.

Visual architecture · Component discovery · Flow first.

Peça Claude Design: "plan the structure first, then generate". Ele cria plano textual antes de HTML.

Você valida plano antes de gastar tokens gerando.

Plan first · Text plan · Validate before gen.

Design visual é mais fácil de aprovar que spec técnica. Stakeholder OK → code OK.

Reduz ciclos de "isso não era o que eu queria".

Visual approval · Stakeholder sync · Zero scope creep.

HTML final já é spec. Menos ambiguidade que documento textual.

"É assim, olha aqui" > "Especifique em 15 páginas".

HTML = spec · Zero ambiguidade · Visual clarity.

Brief → Claude Design (visual) → aprovação → Claude Code (implementação) → deploy.

Fluxo enxuto, reusável, documentável.

Design-first pipeline · Visual approval · Deploy.

Protocolo padrão para LLMs conversarem com ferramentas externas. Integra Claude com APIs suas.

Conectar Claude Design ao seu CMS, banco de dados, Slack.

Protocol · External tools · Integration layer.

Agente Claude que roda toda segunda às 9h: gera relatório semanal, atualiza dashboards, envia update de status.

Automação recorrente sem intervenção humana.

Cron · Scheduled trigger · Recurring task.

Passe DESIGN.md + 10 briefings. Agente roda em background 1h, gera 10 designs.

Escala design para volume que humano não faz.

Background agent · Batch generation · Scale.

Webhook → Claude Design gera → Claude Code implementa → GitHub PR → deploy automático.

Design-to-prod em minutos, não dias.

Webhook · PR auto · Deploy CI/CD.

MCP pluga no seu DB de métricas. Claude Design gera dashboard atualizado diariamente.

Relatórios visuais sem time dedicado.

MCP + DB · Auto-update · Zero maintenance.

Em 2026-2027: agentes que recebem metas (OKRs) e executam mudanças no produto sem supervisão.

Entender pra onde a indústria vai.

Autonomous agents · Goal-directed · Near future.