ag-referencia-redesign-workflow

Redesign Workflow — Screenshot → Variante + Preset + Prompt

Diferencial real vs GlowUp UI: inputar screenshot/URL e receber mapeamento preciso para nossa biblioteca interna (86 variantes) + prompt pronto para regerar. Complementa /ag-referencia-design-presentation (taxonomia) e /ag-referencia-prompt-guide (estrutura de prompt).

---

Quando usar

• Cliente/stakeholder manda screenshot pedindo "quero isso no nosso app"
• Cliente manda URL concorrente pedindo redesign competitivo
• App rAIz legado precisa refresh — captura tela atual, recomenda variante moderna
• Dev não sabe qual variante escolher — dá input visual, recebe sugestão

Quando NÃO usar

• Componente isolado (botão, input) — usar /presentation direto por navegação
• Feature com business logic complexa — UI só cobre 20% do trabalho, o resto é domínio
• Projeto sem tokens rAIz — workflow pressupõe output adaptado ao design-system da empresa

---

Entradas aceitas

Tipo	Como fornecer	Ferramenta de captura
URL pública	"redesign https://example.com"	Chrome DevTools MCP navigate_page + take_screenshot
URL localhost	"redesign http://localhost:3011/x"	idem
Screenshot upload	colar PNG/JPG na conversa	Claude multimodal direto (sem captura)
Path local	"redesign ~/screenshots/app.png"	Read tool direto
Figma URL	"redesign figma.com/file/..."	figma-implement-design skill primeiro

---

Pipeline de 5 passos

1. Captura

Se URL: Chrome DevTools MCP

mcp__plugin_chrome-devtools-mcp_chrome-devtools__navigate_page({ url: "..." })
mcp__plugin_chrome-devtools-mcp_chrome-devtools__take_screenshot({ fullPage: true })

Se screenshot/upload: já está disponível, pular captura.

Salvar em ~/Claude/docs/diagnosticos/redesign-<timestamp>/input.png para auditoria.

2. Análise visual (Claude multimodal)

Enviar screenshot com prompt estruturado de classificação:

Analise este screenshot e classifique:

1. Categoria dominante (escolha 1-2 de):
   - 01 Auth Forms (login, signup)
   - 02 Pricing
   - 03 Features/Bento
   - 04 Hero Sections
   - 05 CTA Banners
   - 06 Stats / Social Proof
   - 07 Nav Bars
   - 08 Testimonials
   - 09 Footer
   - 10 FAQ
   - 11 Onboarding (checklist, tour)
   - 12 Blog / Content
   - 13 Contact
   - 14 States (404, loading, empty)

2. Estilo estético percebido (escolha 1):
   - raiz-default: laranja + teal, rounded-xl, shadows sutis, Inter
   - minimalist: sem sombras, mono slate, tipografia fina
   - brutalist: rounded-none, borders pretas, shadows offset duros
   - glass: backdrop-blur, semi-transparent, glow
   - dark-mono: fundo quase-preto, zinc scale, branco puro como acento
   - soft-saas: pastéis lavanda/pêssego, rounded-3xl, shadows difusas
   - neobrutalism: rounded-md, shadows offset coloridas, pastéis saturados

3. Estrutura geométrica em 1 frase (ex: "split 50/50 form+hero", "3-tier cards", "bento 4-tile").

4. Tom/voz percebido (ex: "corporate B2B", "startup playful", "editorial", "gaming").

Output JSON:
{
  "category": "04 Hero Sections",
  "subtype_hint": "04b-split-text-image OR 04c-animated-gradient",
  "style": "raiz-default",
  "structure": "split 50/50 texto+screenshot",
  "voice": "SaaS corporate B2B",
  "confidence": "high|medium|low",
  "notes": "..."
}