Un Figma dentro
Claude Code

/design è una skill già dentro Claude Code. Le scrivi cosa ti serve e lei non tocca il progetto: disegna la schermata come tavole su una lavagna unica, pubblicata come artifact di Claude Design su claude.ai.

Va bene per l'interfaccia di un'app, un flusso di schermate, una landing page o una locandina. Tu apri la lavagna nel browser, scegli la versione che ti convince, la ritocchi e solo dopo fai scrivere il codice.

Il vantaggio è tutto qui: la grafica la decidi prima, quando cambiarla costa un clic e non una riscrittura.

Non c'è niente da installare. Ci sono quattro condizioni da rispettare. Se ne manca una il comando non disegna.

1. Claude Code 2.1.265 o successivo. Controlla con claude --version e aggiorna con claude update. Dall'app desktop serve la versione 1.13576.0 o successiva.
2. Un piano Pro, Max, Team o Enterprise. Su Pro, Max e Team è già acceso. Su Enterprise lo accende un Owner in Organization settings, alla voce Artifacts.
3. L'accesso con l'account claude.ai. Fai /login dentro Claude Code. Con una chiave API non funziona.
4. Il modello servito da Anthropic. Su Amazon Bedrock, Google Cloud e Microsoft Foundry il comando non c'è.

È una funzione in beta. Dall'Italia funziona come nel resto del mondo: blocchi documentati non ce ne sono.

Scrivi /design seguito dal brief. Più il brief è preciso su chi usa la schermata e cosa deve riuscire a fare, più le tavole sono utili.

/design la pagina di prenotazione del mio studio

/design la pagina di prenotazione di uno studio di fisioterapia.
Chi arriva vuole scegliere il trattamento, vedere gli orari liberi e prenotare in meno di un minuto.
Fammi quattro versioni della stessa schermata, diverse fra loro per impostazione: una minimale, una con le foto dello studio, una con il calendario in primo piano, una pensata per il telefono.

/design il flusso di iscrizione a una newsletter: la pagina con il modulo, la schermata di conferma e la mail di benvenuto.
Tre tavole, stesso stile.

Claude ti restituisce un link. La lavagna si apre dal browser del computer.

Le tavole sono modificabili a mano. Non devi riscrivere un prompt per spostare un bottone.

1. Apri l'artifact dal browser del computer e guarda le tavole una accanto all'altra.
2. Seleziona un elemento su una tavola, un titolo o un bottone per esempio. Poi cambialo. Le modifiche si salvano da sole.
3. Se vuoi farla vedere a qualcuno prima di costruirla, esporta la tavola in PNG o in PDF.

Quando una tavola ti convince, torni nel terminale e gliela fai implementare. Claude riparte dal disegno che hai già ritoccato, non da uno screenshot.

Implementa la tavola 2 della lavagna in questo progetto.
Rispetta i ritocchi che ho fatto a mano sulla tavola.
Prima di scrivere il codice dimmi quali file crei e quali modifichi.

Il giro completo è quello dell'annuncio: scegli una versione, la ritocchi, la fai implementare.

Di default sceglie lui colori e font. Ci sono due modi per fargli usare i tuoi.

Il modo veloce. Scrivi colori, font e spaziature nel file CLAUDE.md del progetto. Claude li tratta come più importanti delle sue scelte.

## Design system
- Colore principale: #0F766E
- Colore di sfondo: #FAFAF9
- Testo: #1C1917
- Font dei titoli: Playfair Display
- Font del testo: Manrope
- Angoli: 8px
- Spaziatura base: 8px

Il modo completo. Se hai già un design system in React nel repository, /design-login autorizza l'accesso e /design-sync lo converte e lo carica su Claude Design, così le tavole usano i tuoi componenti veri. La prima sincronizzazione controlla ogni componente: su un repository grande può richiedere qualche ora.