Da Figma a Claude Code: Il manuale per designer

1┌─────────────────────────────────────────────────────────────────────────┐
2│                                                                         │
3│   PRIMA (Inferno del passaggio)          DOPO (Vibe Coding)            │
4│   ────────────────────────               ───────────────────           │
5│                                                                         │
6│   Design                               Design                          │
7│      ↓                                    ↓                            │
8│   Documento specifiche                  Claude legge Figma direttamente│
9│      ↓                                    ↓                            │
10│   Sviluppatore interpreta               Tu richiedi: "Costruisci questo"│
11│      ↓                                    ↓                            │
12│   Revisione                             Codice di produzione           │
13│      ↓                                    ↓                            │
14│   Ciclo di feedback ×10                 Pubblica 🚀                    │
15│      ↓                                                            │
16│   "Abbastanza simile"                   Tempi: Minuti                 │
17│                                                                         │
18│   Tempi: Settimane                                                     │
19│                                                                         │
20└─────────────────────────────────────────────────────────────────────────┘

1Figma.com → Clicca sul profilo (in alto a sinistra) → Impostazioni → Sicurezza
2→ Token di accesso personali → Genera nuovo token → Copia immediatamente

1claude mcp add figma -e FIGMA_PERSONAL_ACCESS_TOKEN=figd_xxxxxxxxxx

1In Claude Code, digita: /mcp
2Dovresti vedere: figma ✓ connesso

1┌─────────────────────────────────────────────────────────────────────────┐
2│                         IL TUO FILE FIGMA                              │
3├─────────────────────────────────────────────────────────────────────────┤
4│                                                                         │
5│   ┌─────────────────────────────────────────────────────────────────┐   │
6│   │  COSA CLAUDE PUÒ LEGGERE                                      │   │
7│   ├─────────────────────────────────────────────────────────────────┤   │
8│   │  ✓ Nomi dei layer e gerarchia   ✓ Impostazioni Auto Layout     │   │
9│   │  ✓ Colori (riempimenti, contorni) ✓ Varianti dei componenti    │   │
10│   │  ✓ Stili tipografici            ✓ Spaziatura e padding         │   │
11│   │  ✓ Effetti (ombre, sfocatura)   ✓ Vincoli                      │   │
12│   │  ✓ Token/variabili di design    ✓ Contenuto testuale            │   │
13│   └─────────────────────────────────────────────────────────────────┘   │
14│                                                                         │
15│   ┌─────────────────────────────────────────────────────────────────┐   │
16│   │  COSA CLAUDE NON PUÒ LEGGERE                                   │   │
17│   ├─────────────────────────────────────────────────────────────────┤   │
18│   │  ✗ Pixel effettivi dell'immagine  ✗ Interazioni del prototipo  │   │
19│   │  ✗ Commenti e feedback            ✗ Cronologia versioni        │   │
20│   └─────────────────────────────────────────────────────────────────┘   │
21│                                                                         │
22└─────────────────────────────────────────────────────────────────────────┘

1Leggi il mio design Figma all'indirizzo:
2https://www.figma.com/design/[IL-TUO-ID-FILE]/[NOME-FILE]
3
4Dammi:
51. Panoramica della struttura della pagina
62. Elenco delle sezioni principali
73. Tavolozza dei colori utilizzata
84. Stili tipografici
95. Eventuali componenti che riesci a identificare

1Dal file Figma, estrai e crea:
2
31. Una configurazione Tailwind con:
4   - Colori personalizzati che corrispondono al design
5   - Famiglie e dimensioni dei caratteri
6   - Scala di spaziatura basata su ciò che vedi
7
82. File di variabili CSS come backup
9
10Formatta i colori con nomi semantici (primary, secondary, accent, neutral).

1Guarda il [NOME COMPONENTE] nel mio file Figma.
2
3Genera un componente React che:
4- Corrisponda allo stile esatto (colori, spaziatura, tipografia)
5- Utilizzi Tailwind CSS
6- Supporti tutte le varianti che ho definito (se presenti)
7- Sia completamente tipizzato con TypeScript
8- Includa stati hover/focus basati sul design

1Genera la sezione [NOME SEZIONE] dal mio design Figma.
2
3Requisiti:
4- Corrispondere esattamente al design
5- Renderla responsive:
6  - Mobile (<768px): [descrivi layout]
7  - Desktop (≥768px): [descrivi layout]
8- Usare HTML semantico (section, nav, main, article)
9- Includere tutto il contenuto testuale dal design

1┌─────────────────────────────────────────────────────────────────────────┐
2│                           MCP IN AZIONE                                │
3└───────────────────────────────┬─────────────────────────────────────────┘
4                                │
5        ┌───────────────────────┼───────────────────────┐
6        ▼                       ▼                       ▼
7┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
8│  DESIGN FIGMA     │  │     FIGJAM        │  │   FIGMA MAKE      │
9│  ─────────────    │  │  ─────────────    │  │  ─────────────    │
10│                   │  │                   │  │                   │
11│  File di design   │  │  Wireframe e      │  │  UI generata      │
12│  → Codice di      │  │  flussi utente →  │  │  dall'IA →        │
13│  produzione       │  │  App funzionante  │  │  Inietta nel      │
14│                   │  │                   │  │  codebase         │
15│                   │  │                   │  │                   │
16│  ⭐ PIÙ USATO     │  │  🎯 POTENTE       │  │  ⚡ PIÙ VELOCE    │
17└───────────────────┘  └───────────────────┘  └───────────────────┘
18        │                       │                       │
19        ▼                       ▼                       ▼
20┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
21│ "Costruisci la    │  │ "Leggi il mio     │  │ "Prendi questo    │
22│ mia landing page  │  │ flusso utente e   │  │ design Make e     │
23│ da questo design  │  │ crea la struttura │  │ aggiungilo alla   │
24│ Figma"            │  │ delle route       │  │ mia app           │
25│                   │  │ Next.js"          │  │ portfolio         │
26└───────────────────┘  └───────────────────┘  └───────────────────┘

1PASSAGGIO 1              PASSAGGIO 2              PASSAGGIO 3
2───────────────────────────────────────────────────────────────────
3"Leggi il mio file      "Genera componenti        "Costruisci la
4del sistema di design   di base: Button,          homepage usando
5ed estrai tutti         Card, Input, Badge"       questi componenti"
6i token"
7        │                        │                        │
8        └────────────────────────┴────────────────────────┘
9                                 │
10                                 ▼
11                    PASSAGGIO 4: Aggiungi pagine una per una
12                    "Ora costruisci la pagina dei prezzi"
13                    "Ora costruisci la pagina 'Chi siamo'"

1"Leggi [URL], estrai token, genera pagina completa con tutte le sezioni,
2rendila responsive, usa Next.js + Tailwind. Vai."
3
4     ┌──────────────────────────────────────────────────────────┐
5     │  ⚠️  Funziona meglio quando il tuo file Figma è ben     │
6     │     organizzato con una denominazione corretta e         │
7     │     Auto Layout dappertutto                             │
8     └──────────────────────────────────────────────────────────┘

1┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐
2│ Token   │ → │ Atomi   │ → │ Molecole│ → │ Sezioni │ → │ Pagina  │
3│ (colori, │    │ (pulsante,│    │ (card, │    │ (hero,  │    │ (pagina │
4│ caratteri)│    │ input)  │    │ nav)    │    │ footer) │    │ intera) │
5└─────────┘    └─────────┘    └─────────┘    └─────────┘    └─────────┘

1┌─────────────────────────────────────────────────────────────────────────┐
2│  NOMENCLATURA                                                           │
3│  [ ] I layer usano nomi semantici      hero-sezione ✓   Riquadro 427 ✗ │
4│  [ ] I componenti sono chiaramente     Pulsante/Primario ✓  Componente 1 ✗ │
5│      denominati                                                         │
6│  [ ] Le varianti hanno proprietà       dimensione=lg ✓   variante=2 ✗  │
7│      descrittive                                                        │
8├─────────────────────────────────────────────────────────────────────────┤
9│  STRUTTURA                                                              │
10│  [ ] Auto Layout su TUTTI i contenitori Pronto Flexbox ✓  Caos assoluto ✗ │
11│  [ ] Gerarchia piatta (nidificazione  DOM pulito ✓      Zuppa di div ✗ │
12│      minima)                                                            │
13│  [ ] Sezioni chiaramente separate     Analisi facile ✓  Caos ✗         │
14├─────────────────────────────────────────────────────────────────────────┤
15│  TOKEN                                                                  │
16│  [ ] Colori definiti come stili        Estraibili ✓     Codificati ✗   │
17│  [ ] Tipografia come stili di testo   Coerente ✓       Casuale ✗       │
18│  [ ] Spaziatura coerente              Sistematica ✓    Arbitraria ✗    │
19└─────────────────────────────────────────────────────────────────────────┘

11. DENOMINA I LAYER COME CLASSI CSS
2   nav-links ✓    Gruppo 5 ✗
3
42. LAVORA SEZIONE PER SEZIONE
5   Hero → Caratteristiche → Testimonianze → Footer
6   (Non chiedere l'intera pagina in una volta)
7
83. FAI RIFERIMENTO DIRETTAMENTE A FIGMA
9   "Guarda la card nella sezione Caratteristiche"
10   (Non: "Crea una card con angoli arrotondati")
11
124. ESPORTA PRIMA LE RISORSE
13   Le immagini richiedono esportazione manuale → cartella /public
14   Poi dì a Claude: "L'immagine hero è in /public/hero.png"
15
165. COMUNICA IL TUO STACK IN ANTICIPO
17   "Sto usando Next.js 14 + Tailwind + TypeScript"
18   (Claude si adatterà alle tue convenzioni)

1Voglio convertire il mio design Figma in codice.
2
3URL Figma: [INCOLLA IL TUO URL]
4
5Stack: Next.js 14 + Tailwind CSS + TypeScript
6
7Per favore:
81. Prima, analizza il design e dimmi cosa vedi
92. Estrai la tavolozza dei colori e crea una configurazione Tailwind
103. Poi ti dirò quale sezione costruire per prima
11
12Procediamo passo dopo passo.