Workflow de Design

Como transformar um design do Claude Design em código de produção.

📹 Vídeo: Design handoff ao vivo

Em breve — será gravado na sua primeira semana.

---

Quando usar

Issues com label needs-design. O designer cria o design no Claude Design antes de qualquer código ser escrito. Após aprovação, a label muda para design-ready.

---

O fluxo

flowchart TD
    A[Issue aberta com\nlabel needs-design] --> B
    B[Designer abre\nclaude.ai/design] --> C
    C[Cria ou edita\no design] --> D
    D[Clica Handoff to Claude Code] --> E
    E[Marca Download zip instead\ne baixa o ZIP] --> F
    F[Copia ZIP para /tmp/\ne avisa o Claude Code] --> G
    G[Claude extrai o ZIP\ne lê os arquivos] --> H
    H[Implementa alinhado\nà Issue] --> I
    I[Comenta artefatos\nna Issue] --> J
    J[Abre PR com\nCloses #N]

    style A fill:#fff3cd,stroke:#ffc107
    style J fill:#d4edda,stroke:#28a745

---

Por que ZIP e não a URL?

O dialog de handoff mostra duas opções:

Opção	Funciona?	Por quê
URL api.anthropic.com/v1/design/h/...	❌ Não	Requer auth de sessão Anthropic (não API key). Arquivo >10MB excede o limite do Claude Code
Download zip instead	✅ Sim	ZIP local, sem restrições de tamanho ou autenticação

Sempre use o ZIP.

---

Como entregar o ZIP ao Claude Code

cp ~/Downloads/<nome-do-design>.zip /tmp/design-handoff.zip

Depois avise no chat: feito (ou arraste o arquivo se o ambiente suportar).

---

O que tem dentro do ZIP

monetizando-design-system/
  project/
    SKILL.md                    ← regras do brand — ler primeiro
    colors_and_type.css         ← todos os tokens em um arquivo
    ui_kits/
      mobile-app/flows/*.html   ← protótipos das telas Mobile
      internet-banking/flows/   ← protótipos do IB Web
      back-office/flows/        ← protótipos do BackOffice
    react/components/*.tsx      ← componentes React de referência
    tokens/*.css                ← tokens granulares por categoria

---

Regras críticas do Design System

Regra	Detalhe
Idioma	Sempre pt-BR. Nunca "banco" — use "conta digital"
Headings	Playfair Display exclusivamente
Valores monetários	Inter + tabular-nums obrigatório
Ícones	Lucide outline, 24px, dourado #D99D52
Glassmorphism	Proibido em tabelas e listas longas
RegulatoryFooter	Obrigatório em toda página (disclosure Monetizando Invest)

---

Registrar artefatos na Issue

Após implementar, comente na Issue:

Design handoff: ZIP entregue em YYYY-MM-DD
Arquivo lido: ui_kits/mobile-app/flows/home.html
Decisão: [o que o design mostrou vs o que foi implementado e por quê]

Isso garante rastreabilidade: qualquer dev futuro entende de onde veio a decisão visual.

---

Exemplo real

Issue #314 (Mobile) — remoção do card "Investido" da KPIStrip. O design mostrou strip com 2 cards ("A receber" + "Em atraso"). A Issue especificava remover apenas o card duplicado, mantendo "Aprovações" + "Agendados". A Issue prevaleceu; a direção futura foi anotada como TODO. PR: MonetizandoInvest-Mobile#334