Handoff → Code

Para o facilitador⏱ 5 min

Este é o Handoff 2 — o WOW do workshop. Mostre ao vivo: clique no botão no Claude Design, copie a URL, cole no terminal. O Claude Code vai buscar o arquivo de design e implementar tudo automaticamente. A frase que funciona: “O Claude Design não precisa explicar para o Claude Code — ele lê a URL.”

O Claude Design tem um botão nativo de handoff: ele empacota o KV visual, as especificações dos componentes e um README de implementação, e gera uma URL. O Claude Code recebe essa URL e implementa os componentes direto no projeto — sem copiar CSS manualmente, sem reexplicar nada.

5 min · Fase 07 de 10

Handoff 2 ← WOWClaude Design → Claude Code— URL gerada pelo botão nativo de handoff

Gerar a URL de handoff no Claude DesignNo Claude Design, clique no botão Share / Handoff to Claude Code

Gera uma URL no formato e copia para a área de transferência.

Implementar no Claude CodeVolte ao terminal com Claude Code aberto e cole:

claude code

Fetch this design file, read its readme, and implement the relevant aspects of the design.
https://api.anthropic.com/v1/design/h/[COLE-A-URL-DO-CLAUDE-DESIGN-AQUI]

Implement: the designs in this project

═══════════════════════════════
AO FINAL — REGISTRE NA SMART-MEMORY:
═══════════════════════════════

1. Atualize docs/smart-memory/shared-context.md:
   - Handoff Code concluído — componentes implementados a partir do Claude Design
   - Próxima ação: UX agent recria LP com componentes reais → [[project/lp-v2]]

2. Crie docs/smart-memory/project/components.md:

---
title: Componentes do Design System
tipo: referência
status: implementado
origem: Claude Design handoff
---

# Componentes — [nome]

## Implementados via handoff

### Botão primário
- Estados: default · hover · disabled
- Variável base: var(--color-primary)

### Card
- Estrutura: título + descrição + CTA
- Raio: var(--radius-md)

### Input de texto
- Com label e placeholder
- Estado: default · focus · error

### Badge / Pill
- Variações: default · success · warning · error

## Como usar
Esses componentes usam exclusivamente as CSS vars do design-system.css.
Não duplique valores — altere só as vars.

→ Tokens: [[brand-tokens]] · CSS: [[design-system]] · LP V2: [[lp-v2]]

O Claude Code busca o arquivo de design, lê o README do handoff e implementa os componentes no projeto — usando as CSS vars que o Arquiteto criou.

O que é implementado

CSS dos componentes

Botão, card, input, badge — usando var(--color-*), var(--radius-*), var(--shadow-*)

HTML semântico de exemplo

Markup de referência para cada componente

COMPONENT-GUIDE.md

Regras de uso: quando usar cada componente, variações, combinações permitidas

Por que funciona sem instruções manuaisA URL gerada pelo Claude Design não é só um link — ela aponta para um arquivo estruturado com o KV completo, as especificações dos componentes e um README com instruções de implementação. O Claude Code lê esse arquivo como lê qualquer outro contexto — e sabe exatamente o que criar, onde salvar e quais CSS vars usar.