Do Figma ao Claude Code: O Manual do Designer

1┌─────────────────────────────────────────────────────────────────────────┐
2│                                                                         │
3│   BEFORE (Handoff Hell)                AFTER (Vibe Coding)              │
4│   ────────────────────                 ───────────────────              │
5│                                                                         │
6│   Design                               Design                           │
7│      ↓                                    ↓                             │
8│   Spec doc                             Claude reads Figma directly      │
9│      ↓                                    ↓                             │
10│   Dev interprets                       You prompt: "Build this"         │
11│      ↓                                    ↓                             │
12│   Review                               Production code                  │
13│      ↓                                    ↓                             │
14│   Feedback loop ×10                    Ship 🚀                          │
15│      ↓                                                                  │
16│   "Close enough"                       Timeline: Minutes                │
17│                                                                         │
18│   Timeline: Weeks                                                       │
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│                         YOUR FIGMA FILE                                 │
3├─────────────────────────────────────────────────────────────────────────┤
4│                                                                         │
5│   ┌─────────────────────────────────────────────────────────────────┐   │
6│   │  WHAT CLAUDE CAN READ                                           │   │
7│   ├─────────────────────────────────────────────────────────────────┤   │
8│   │  ✓ Layer names & hierarchy    ✓ Auto Layout settings           │   │
9│   │  ✓ Colors (fills, strokes)    ✓ Component variants             │   │
10│   │  ✓ Typography styles          ✓ Spacing & padding              │   │
11│   │  ✓ Effects (shadows, blur)    ✓ Constraints                    │   │
12│   │  ✓ Design tokens/variables    ✓ Text content                   │   │
13│   └─────────────────────────────────────────────────────────────────┘   │
14│                                                                         │
15│   ┌─────────────────────────────────────────────────────────────────┐   │
16│   │  WHAT CLAUDE CANNOT READ                                        │   │
17│   ├─────────────────────────────────────────────────────────────────┤   │
18│   │  ✗ Actual image pixels        ✗ Prototype interactions         │   │
19│   │  ✗ Comments & feedback        ✗ Version history                │   │
20│   └─────────────────────────────────────────────────────────────────┘   │
21│                                                                         │
22└─────────────────────────────────────────────────────────────────────────┘

1Leia meu design do Figma em:
2https://www.figma.com/design/[YOUR-FILE-ID]/[FILE-NAME]
3
4Me dê:
51. Visão geral da estrutura da página
62. Lista das principais seções
73. Paleta de cores sendo usada
84. Estilos tipográficos
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 de fontes e tamanhos
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- Corresponde ao estilo exato (cores, espaçamento, tipografia)
5- Usa Tailwind CSS
6- Suporta todas as variantes que defini (se houver)
7- É totalmente tipado com TypeScript
8- Inclui estados de hover/focus baseados no design

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

1┌─────────────────────────────────────────────────────────────────────────┐
2│                           MCP IN ACTION                                 │
3└───────────────────────────────┬─────────────────────────────────────────┘
4                                │
5        ┌───────────────────────┼───────────────────────┐
6        ▼                       ▼                       ▼
7┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
8│  FIGMA DESIGN     │  │     FIGJAM        │  │   FIGMA MAKE      │
9│  ─────────────    │  │  ─────────────    │  │  ─────────────    │
10│                   │  │                   │  │                   │
11│  Design files     │  │  Wireframes &     │  │  AI-generated     │
12│  → Production     │  │  user flows →     │  │  UI → Inject      │
13│  code             │  │  Working app      │  │  into codebase    │
14│                   │  │                   │  │                   │
15│  ⭐ MOST USED     │  │  🎯 POWERFUL      │  │  ⚡ FASTEST       │
16└───────────────────┘  └───────────────────┘  └───────────────────┘
17        │                       │                       │
18        ▼                       ▼                       ▼
19┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
20│ "Build my landing │  │ "Read my user     │  │ "Take this Make   │
21│ page from this    │  │ flow and create   │  │ design and add it │
22│ Figma design"     │  │ the Next.js       │  │ to my existing    │
23│                   │  │ route structure"  │  │ portfolio app"    │
24└───────────────────┘  └───────────────────┘  └───────────────────┘

1PASSO 1                    PASSO 2                    PASSO 3
2───────────────────────────────────────────────────────────────────
3"Leia meu arquivo          "Gere componentes          "Construa página
4 de sistema de design      base: Button,             inicial usando
5 e extraia todos os        Card, Input, Badge"       esses componentes"
6 tokens"
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 página completa com todas as seções,
2torne-a responsiva, use Next.js + Tailwind. Vá."
3
4     ┌──────────────────────────────────────────────────────────┐
5     │  ⚠️  Funciona melhor quando seu arquivo Figma está bem   │
6     │     organizado, com nomes adequados e Auto Layout em     │
7     │     todo o design                                        │
8     └──────────────────────────────────────────────────────────┘

1┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐
2│ Tokens  │ → │ Atoms   │ → │ Molecules│ → │ Sections│ → │  Page   │
3│ (colors,│    │ (button,│    │ (card,  │    │ (hero,  │    │ (full   │
4│ fonts)  │    │ input)  │    │ nav)    │    │ footer) │    │ page)   │
5└─────────┘    └─────────┘    └─────────┘    └─────────┘    └─────────┘

1┌─────────────────────────────────────────────────────────────────────────┐
2│  NOMEAÇÃO                                                              │
3│  [ ] Camadas usam nomes semânticos     hero-section ✓   Frame 427 ✗    │
4│  [ ] Componentes são nomeados claramente  Button/Primary ✓  Componente 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 absoluta ✗│
9│  [ ] Hierarquia plana (aninhamento mínimo)  DOM limpo ✓      Sopa de divs ✗     │
10│  [ ] Seções claramente separadas        Fácil parsing ✓   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 → Features → Testimonials → Footer
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 Features"
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 Hero está em /public/hero.png"
15
165. COMPARTILHE SUA STACK ANTECIPADAMENTE
17   "Estou usando Next.js 14 + Tailwind + TypeScript"
18   (Claude corresponderá às suas convenções)

1Quero converter meu design Figma em 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 vê
92. Extraia a paleta de cores e crie uma configuração Tailwind
103. Depois direi qual seção construir primeiro
11
12Vamos passo a passo.