Do Figma ao Claude Code: O Manual do Designer

1┌─────────────────────────────────────────────────────────────────────────┐
2│                                                                         │
3│   ANTES (Inferno da Entrega)            DEPOIS (Vibe Coding)            │
4│   ────────────────────────              ───────────────────             │
5│                                                                         │
6│   Design                               Design                           │
7│      ↓                                    ↓                             │
8│   Documento de especificação           Claude lê o Figma diretamente    │
9│      ↓                                    ↓                             │
10│   Dev interpreta                       Você prompta: "Construa isso"    │
11│      ↓                                    ↓                             │
12│   Revisão                              Código de produção               │
13│      ↓                                    ↓                             │
14│   Loop de feedback ×10                 Enviar 🚀                        │
15│      ↓                                                                  │
16│   "Quase lá"                           Tempo: Minutos                   │
17│                                                                         │
18│   Tempo: Semanas                                                        │
19│                                                                         │
20└─────────────────────────────────────────────────────────────────────────┘

1Figma.com → Clique no perfil (canto superior esquerdo) → Configurações → Segurança
2→ Tokens de acesso pessoal → Gerar novo token → Copie imediatamente

1claude mcp add figma -e FIGMA_PERSONAL_ACCESS_TOKEN=figd_xxxxxxxxxx

1No Claude Code, digite: /mcp
2Você deve ver: figma ✓ conectado

1┌─────────────────────────────────────────────────────────────────────────┐
2│                         SEU ARQUIVO FIGMA                              │
3├─────────────────────────────────────────────────────────────────────────┤
4│                                                                         │
5│   ┌─────────────────────────────────────────────────────────────────┐   │
6│   │  O QUE O CLAUDE PODE LER                                      │   │
7│   ├─────────────────────────────────────────────────────────────────┤   │
8│   │  ✓ Nomes de camadas e hierarquia   ✓ Configurações de Auto Layout│   │
9│   │  ✓ Cores (preenchimentos, traços)  ✓ Variantes de componentes   │   │
10│   │  ✓ Estilos de tipografia           ✓ Espaçamento e padding      │   │
11│   │  ✓ Efeitos (sombras, desfoque)     ✓ Restrições                 │   │
12│   │  ✓ Design tokens/variáveis         ✓ Conteúdo de texto          │   │
13│   └─────────────────────────────────────────────────────────────────┘   │
14│                                                                         │
15│   ┌─────────────────────────────────────────────────────────────────┐   │
16│   │  O QUE O CLAUDE NÃO PODE LER                                   │   │
17│   ├─────────────────────────────────────────────────────────────────┤   │
18│   │  ✗ Pixels de imagem reais        ✗ Interações de protótipo     │   │
19│   │  ✗ Comentários e feedback        ✗ Histórico de versões        │   │
20│   └─────────────────────────────────────────────────────────────────┘   │
21│                                                                         │
22└─────────────────────────────────────────────────────────────────────────┘

1Leia meu design no Figma em:
2https://www.figma.com/design/[SEU-ID-DO-ARQUIVO]/[NOME-DO-ARQUIVO]
3
4Me dê:
51. Uma visão geral da estrutura da página
62. Lista das seções principais
73. Paleta de cores sendo usada
84. Estilos de tipografia
95. Quaisquer componentes que você possa identificar

1Do arquivo Figma, extraia e crie:
2
31. Uma configuração Tailwind com:
4   - Cores personalizadas correspondentes ao design
5   - Famílias e tamanhos de fonte
6   - Escala de espaçamento baseada no que você vê
7
82. Arquivo de variáveis CSS como backup
9
10Formate as cores como nomes semânticos (primary, secondary, accent, neutral).

1Olhe para o [NOME DO COMPONENTE] no meu arquivo Figma.
2
3Gere um componente React que:
4- Corresponda ao estilo exato (cores, espaçamento, tipografia)
5- Use Tailwind CSS
6- Suporte todas as variantes que defini (se houver)
7- Seja totalmente tipado com TypeScript
8- Inclua estados de hover/foco baseados no design

1Gere a seção [NOME DA SEÇÃO] do meu design no Figma.
2
3Requisitos:
4- Corresponda exatamente ao design
5- Torne-a responsiva:
6  - Mobile (<768px): [descreva o layout]
7  - Desktop (≥768px): [descreva o layout]
8- Use HTML semântico (section, nav, main, article)
9- Inclua todo o conteúdo de texto do design

1┌─────────────────────────────────────────────────────────────────────────┐
2│                           MCP EM AÇÃO                                  │
3└───────────────────────────────┬─────────────────────────────────────────┘
4                                │
5        ┌───────────────────────┼───────────────────────┐
6        ▼                       ▼                       ▼
7┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
8│  DESIGN FIGMA     │  │     FIGJAM        │  │   FIGMA MAKE      │
9│  ─────────────    │  │  ─────────────    │  │  ─────────────    │
10│                   │  │                   │  │                   │
11│  Arquivos de      │  │  Wireframes &     │  │  UI gerada por    │
12│  design → Código  │  │  fluxos de        │  │  IA → Injetar     │
13│  de produção      │  │  usuário → App    │  │  no codebase      │
14│                   │  │  funcional        │  │                   │
15│                   │  │                   │  │                   │
16│  ⭐ MAIS USADO    │  │  🎯 PODEROSO      │  │  ⚡ MAIS RÁPIDO   │
17└───────────────────┘  └───────────────────┘  └───────────────────┘
18        │                       │                       │
19        ▼                       ▼                       ▼
20┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
21│ "Construa minha   │  │ "Leia meu fluxo   │  │ "Pegue este       │
22│ landing page a    │  │ de usuário e crie │  │ design do Make e  │
23│ partir deste      │  │ a estrutura de    │  │ adicione ao meu   │
24│ design Figma"     │  │ rotas Next.js"    │  │ aplicativo de     │
25│                   │  │                   │  │ portfólio"        │
26└───────────────────┘  └───────────────────┘  └───────────────────┘

1PASSO 1                    PASSO 2                    PASSO 3
2───────────────────────────────────────────────────────────────────
3"Leia meu arquivo         "Gere componentes          "Construa a
4de sistema de design      base: Button,              homepage usando
5e extraia todos os        Card, Input, Badge"        estes componentes"
6tokens"
7        │                        │                        │
8        └────────────────────────┴────────────────────────┘
9                                 │
10                                 ▼
11                    PASSO 4: Adicione páginas uma a uma
12                    "Agora construa a página de preços"
13                    "Agora construa a página 'Sobre'"

1"Leia [URL], extraia tokens, gere a página completa com todas as seções,
2torne-a responsiva, use Next.js + Tailwind. Vai."
3
4     ┌──────────────────────────────────────────────────────────┐
5     │  ⚠️  Funciona melhor quando seu arquivo Figma é bem      │
6     │     organizado, com nomes adequados e Auto Layout em     │
7     │     toda a estrutura                                     │
8     └──────────────────────────────────────────────────────────┘

1┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐
2│ Tokens  │ → │ Átomos  │ → │ Moléculas│ → │ Seções  │ → │  Página  │
3│ (cores, │    │ (botão, │    │ (card,   │    │ (hero,  │    │ (página  │
4│ fontes) │    │ input)  │    │ nav)     │    │ footer) │    │ completa)│
5└─────────┘    └─────────┘    └─────────┘    └─────────┘    └─────────┘

1┌─────────────────────────────────────────────────────────────────────────┐
2│  NOMENCLATURA                                                           │
3│  [ ] Camadas usam nomes semânticos     hero-section ✓   Frame 427 ✗    │
4│  [ ] Componentes têm nomes claros      Button/Primary ✓  Component 1 ✗ │
5│  [ ] Variantes têm props descritivas   size=lg ✓        variant=2 ✗    │
6├─────────────────────────────────────────────────────────────────────────┤
7│  ESTRUTURA                                                              │
8│  [ ] Auto Layout em TODOS os contêineres  Flexbox pronto ✓  Bagunça ✗  │
9│  [ ] Hierarquia plana (aninhamento mínimo) DOM limpo ✓     Sopa de div ✗│
10│  [ ] Seções claramente separadas          Parsing fácil ✓  Caos ✗      │
11├─────────────────────────────────────────────────────────────────────────┤
12│  TOKENS                                                                 │
13│  [ ] Cores definidas como estilos         Extraível ✓      Hardcoded ✗  │
14│  [ ] Tipografia como estilos de texto     Consistente ✓    Aleatório ✗  │
15│  [ ] Espaçamento consistente              Sistemático ✓    Arbitrário ✗ │
16└─────────────────────────────────────────────────────────────────────────┘

11. NOMEIE AS CAMADAS COMO CLASSES CSS
2   nav-links ✓    Group 5 ✗
3
42. TRABALHE SEÇÃO POR SEÇÃO
5   Hero → Recursos → Depoimentos → Rodapé
6   (Não peça a página inteira de uma vez)
7
83. REFERENCIE O FIGMA DIRETAMENTE
9   "Olhe para o card na seção de Recursos"
10   (Não: "Crie um card com cantos arredondados")
11
124. EXPORTE OS ATIVOS PRIMEIRO
13   Imagens precisam de exportação manual → pasta /public
14   Depois diga ao Claude: "A imagem do hero está em /public/hero.png"
15
165. INFORME SUA STACK COM ANTECEDÊNCIA
17   "Estou usando Next.js 14 + Tailwind + TypeScript"
18   (O Claude vai corresponder às suas convenções)

1Quero converter meu design do Figma para código.
2
3URL do Figma: [COLE SUA URL]
4
5Stack: Next.js 14 + Tailwind CSS + TypeScript
6
7Por favor:
81. Primeiro, analise o design e me diga o que você vê
92. Extraia a paleta de cores e crie uma configuração Tailwind
103. Depois eu direi qual seção construir primeiro
11
12Vamos passo a passo.