MÓDULO 5.5

🔗 Handoff Claude Design → Claude Code

Bundle empacotado, zero re-contextualização, round-trip design ↔ code mantendo sincronia.

1

📦 O que vai no bundle

Ao clicar "Export → Claude Code", Claude Design empacota:

  • •HTML final renderizado — pronto para deploy
  • •Componentes React soltos (quando aplicável)
  • •CSS variables do DESIGN.md
  • •DESIGN.md do projeto
  • •Assets copiados (imagens, fontes)
  • •Tweaks mapeados como feature flags
  • •Notas de implementação — contexto, decisões, TODOs
2

💻 Comando pronto para colar

No fim do export, você recebe algo como:

$ claude continue-from cd_proj_abc123 \
  --framework nextjs \
  --style tailwind \
  --typescript

# Claude Code abre com contexto completo:
# HTML + componentes + DESIGN.md + assets + tweaks

Zero re-explicação. Claude Code já sabe tudo.

3

⚙️ Framework específico

Bundle é framework-agnostic (HTML puro). Claude Code converte para seu stack: Next.js, Remix, Astro, Vue, SvelteKit. Especifique no comando ou na primeira mensagem no terminal.

4

🎨 Tweaks viram feature flags reais

Cada Tweak virou feature flag no código. A/B testing em produção sem implementar nada do zero. Integra com serviços tipo LaunchDarkly, GrowthBook, GrowthFlag.

5

⚠️ Auditoria de produção

HTML gerado precisa auditoria humana antes de ir à produção:

SEGURANÇA

XSS, CSRF, input validation, API keys expostas

ACCESSIBILITY

ARIA, contraste, keyboard nav, screen readers

SEO

Title tags, meta, schema, hierarquia H1-H6

WEB VITALS

LCP, INP, CLS, otimização de imagens, code split

6

🔄 Round-trip design ↔ code

Fluxo ideal: Design muda? Volte ao Claude Design, ajuste, re-export. Claude Code atualiza código preservando sua lógica de backend/integração. Single source of truth visual, implementação iterada.

✅ Resumo

✓
Bundle completo — HTML + componentes + CSS vars + assets + DESIGN.md.
✓
Comando pronto — claude continue-from, zero re-explicação.
✓
Framework-agnostic — Next.js, Remix, Astro, Vue conforme stack.
✓
Tweaks → feature flags — A/B trivial em produção.
✓
Auditoria humana obrigatória — segurança, a11y, SEO, vitals.
✓
Round-trip — design ↔ code em sync.
← Módulo 5.4Módulo 5.6 →