Claude Code per il design.

Cos'è realmente Claude Code

Claude Code è lo strumento di coding agentico di Anthropic. Legge la tua codebase, modifica file, esegue comandi e si integra con i tuoi strumenti di sviluppo — pianificando, scrivendo e verificando il lavoro a partire da compiti in linguaggio naturale, anziché limitarsi a completare righe in autocompletamento.

È disponibile su diverse superfici che condividono tutte lo stesso motore: una CLI da terminale, estensioni IDE per VS Code, Cursor e JetBrains, un'app desktop con revisione visiva delle diff e un'esperienza web per i task a lunga esecuzione. I tuoi file CLAUDE.md, le impostazioni e i server MCP ti seguono su tutte.

• File di istruzioni: Claude Code legge un file CLAUDE.md nella root del progetto all'inizio di ogni sessione — il posto naturale dove codificare le tue convenzioni di design, i tokens e le checklist di revisione.
• Skill: Le Agent Skill impacchettano istruzioni, script e risorse riutilizzabili che Claude carica su richiesta, inclusa la skill ufficiale Frontend Design di Anthropic per il gusto estetico.
• Pianificazione e subagenti: Può pianificare prima di agire e generare subagenti che lavorano in parallelo su parti diverse di un task, il che mantiene coerenti i grandi refactoring di UI.

• Fornitore: Anthropic
• Credenziale: chiave API Anthropic (BYOK, tramite la Console) o un abbonamento Claude (Pro / Max)
• Superfici: CLI da terminale, estensioni VS Code / Cursor / JetBrains, app desktop, web

Perché Claude Code è bravo nel design

Tra gli agenti di coding, Claude Code ha la reputazione di avere gusto nel lavoro frontend. Alcune cose lo spiegano.

• Decisioni specifiche, non vaghe: Claude Code tende a impegnarsi su scelte concrete — valori hex esatti, scale di spaziatura, ramp tipografici e gerarchia dei componenti — invece di tergiversare, ed è proprio questo che distingue una vera interfaccia da un segnaposto.
• Ragionamento consapevole della codebase: Con un ampio contesto di lavoro rifattorizza la UI su molti file contemporaneamente, riutilizzando i tuoi componenti e tokens esistenti invece di reinventare stili improvvisati.
• Una skill frontend ufficiale: Anthropic include una skill Frontend Design che fa scrivere a Claude prima una direzione di design e lo allontana deliberatamente da font di sistema generici e prevedibili gradienti viola.

La lezione è la stessa che Anthropic ripete sui propri modelli: Claude non ha gusto di default — lasciato a sé converge verso il centro statistico del web design (Inter, gradienti viola, ombre soft). Produce buon design quando gli dai dei vincoli. Open Design impacchetta esattamente quegli input, ed è per questo che i due si combinano bene (più sotto).

Configurare Claude Code per il lavoro di design, da zero

Ecco il percorso completo, da una macchina pulita a un Claude Code in grado di costruire e verificare la UI.

# 1. Install Claude Code (native install, recommended)
curl -fsSL https://claude.ai/install.sh | bash
# or: brew install --cask claude-code
# Windows PowerShell: irm https://claude.ai/install.ps1 | iex

# 2. Start it in your project and sign in on first run
cd your-project
claude            # sign in with your Claude subscription or API key

# 3. Generate project context
/init             # creates a CLAUDE.md for this project

# 4. Add the official Frontend Design skill
claude plugin install frontend-design@claude-plugins-official

# 5. Wire the Figma MCP server (optional, for design handoff)
claude plugin install figma@claude-plugins-official

• Codifica le tue regole di design: Inserisci i tuoi tokens, le primitive e le convenzioni in CLAUDE.md e indirizza Claude verso di essi, così l'output rispetta un brand invece di ripiegare su un look generico.
• Aggiungi la verifica nel browser: Collega un MCP Playwright o Chrome così Claude renderizza in un browser reale e controlla il proprio output sui vari breakpoint, invece di confermare solo che la build passa.

Il flusso di lavoro con CLAUDE.md e le Skill

Il ciclo di design a maggior leva con Claude Code consiste nel fornirgli riferimenti reali più il tuo contesto di design, e poi iterare finché la UI non corrisponde — con CLAUDE.md e le Skill a portare i vincoli, così da non doverli rispiegare a ogni prompt.

1. Parti dai riferimenti visivi più chiari di cui disponi — e includi più stati (desktop e mobile, hover, vuoto, caricamento), non solo un'unica immagine hero.
2. Sii specifico nel prompt; prompt vaghi producono UI generiche anche con un agente forte.
3. Tieni il tuo design system e le tue convenzioni in CLAUDE.md, e indica a Claude dove si trovano i tokens e le primitive canoniche.
4. Aggiungi la skill Frontend Design così Claude si impegna su una vera direzione estetica prima di scrivere codice.
5. Collega la verifica nel browser così Claude renderizza, ridimensiona ai breakpoint e confronta con i riferimenti — non si limita a confermare che la build funziona.

Inserisci un'immagine di riferimento nella sessione e formula il prompt con vincoli concreti:

claude "Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse the design-system components and tokens described in CLAUDE.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser, verify it matches the references across
  breakpoints, and iterate until it does."

Tieni in esecuzione un dev server a fianco, mantieni i prompt piccoli e mirati e fai commit delle buone iterazioni / revert di quelle cattive (avvisando Claude quando fai revert) così ogni passaggio si costruisce su una base pulita. Usa la modalità plan per i refactoring più grandi così da poter rivedere l'approccio prima di qualsiasi modifica ai file.

Claude Code + Figma: round-trip design ↔ codice

Nel febbraio 2026 Anthropic e Figma hanno rilasciato un'integrazione bidirezionale di prima classe tramite il server Figma MCP. Funziona in entrambe le direzioni.

• Design → Codice: Seleziona un frame in Figma o incolla un link in Claude Code, recupera il contesto di design e chiedigli di implementarlo usando la tua libreria di componenti esistente. Code Connect mantiene l'output allineato ai tuoi componenti reali.
• Codice → Design: Costruisci e visualizza in anteprima una funzionalità nel browser, poi di' "Send this to Figma" per catturare la UI in esecuzione come layer Figma modificabili — l'intera schermata o un elemento selezionato.

Installalo una volta con claude plugin install figma@claude-plugins-official (la modalità Dev Mode MCP richiede un piano Figma a pagamento). Lo stesso Figma MCP è disponibile per Claude Code, Codex, Cursor e VS Code — esattamente il tipo di capacità portabile e multi-agente che Open Design è costruito per orchestrare.

Claude Code vs Codex vs Cursor per il design

Non c'è un unico vincitore per il lavoro di design — ogni agente ha un punto di forza diverso e i team esperti li combinano. Un riassunto equo:

Il verdetto ricorrente della community è che il gusto viene dagli esseri umani: tutti e tre, senza skill, riferimenti e vincoli, ripiegano su un'estetica generica. È questo il vero problema da risolvere — ed è di forma da strumento di design, non da modello.

Insidie, e come evitare l'estetica da "sbobba dell'IA"

Anche con la reputazione di gusto di Claude Code, la lamentela più comune sul design generato dall'IA è che appare generico — font Inter, gradienti viola su bianco, ombre soft, angoli arrotondati esagerati, un'estetica che "urla che l'ha fatto un'IA". Anthropic stessa lo attribuisce alla convergenza distributiva: le scelte sicure dominano i dati di addestramento del web. Altri problemi segnalati includono layout mobile rotti e istruzioni che trapelano nel testo della UI.

• Installa la skill Frontend Design: Costringe Claude a impegnarsi su una vera direzione ed evita esplicitamente font e gradienti abusati dall'IA.
• Abilita la verifica nel browser: Fai renderizzare Claude e auto-controllare sui vari breakpoint così i layout non si rompono in silenzio su mobile.
• Fornisci tokens e riferimenti: Tokens di design reali e screenshot di riferimento sono la singola leva più grande sulla qualità dell'output.
• Codifica le regole in CLAUDE.md: Metti regole in stile "niente hero card, al massimo due caratteri, gerarchia brand-first" dove l'agente le legge a ogni esecuzione.

Nota che ogni mitigazione consiste nel dare all'agente un contesto di design curato. Mantenere quel contesto a mano, progetto per progetto, è la fatica che Open Design elimina.

Progettare con Claude Code dentro Open Design

Open Design è il layer di design open-source che il flusso di lavoro qui sopra continua a richiedere. Tratta Claude Code come un adattatore di prima parte e lo avvolge in una libreria curata di skill e design system, una pipeline di rendering strutturata e una UI desktop locale — così il contesto di design che rende bravo Claude Code è presente fin dalla prima esecuzione, non assemblato a mano ogni volta.

1. Installa Open Design e seleziona Claude Code come tuo agente.
2. Autenticati con la tua chiave API Anthropic (BYOK) o il tuo abbonamento Claude — le credenziali restano sulla tua macchina e non vengono mai instradate tramite noi.
3. Scegli un design system e una skill, poi genera deck, prototipi e landing page con un gusto coerente.
4. Ogni artefatto e file DESIGN.md vive nella tua repo, non in un cloud ospitato.

Stesso agente Claude Code, stessa chiave — più un vero flusso di lavoro di design portabile e open-source tutt'intorno. È local-first e Apache-2.0, quindi nulla del tuo lavoro o delle tue credenziali lascia la tua macchina.

Domande frequenti

1. 01 Claude Code è adatto al lavoro di design? +

   Sì — è ampiamente considerato l'agente di coding con il miglior gusto per il frontend, capace di decisioni specifiche e consapevoli della codebase su valori hex, spaziatura e scale tipografiche. Con la skill Frontend Design, un design system e immagini di riferimento reali nel contesto produce UI responsive di qualità da produzione e può verificarla in un browser. Senza quel contesto tende a ripiegare su un look generico, ed è il divario che Open Design colma.

2. 02 Mi serve un abbonamento Claude per progettare con Claude Code? +

   Puoi usare sia una chiave API Anthropic (BYOK, tramite la Console) sia un abbonamento Claude (Pro / Max). In ogni caso Open Design non instrada mai le tue credenziali — vengono usate direttamente dal tuo agente sulla tua macchina.

3. 03 Claude Code o Codex per il design frontend? +

   Entrambi sono forti. Claude Code è noto per decisioni di design specifiche e consapevoli della codebase e per il ragionamento frontend; Codex ha una forte rifinitura visiva ed eccelle nelle build delegate e in sandbox. Molti team usano entrambi — Open Design ti permette di cambiare agente senza modificare il tuo flusso di lavoro di design.

4. 04 Come collego Claude Code a Figma? +

   Installa il plugin Figma ufficiale con claude plugin install figma@claude-plugins-official. Potrai poi implementare i frame di Figma in codice usando il contesto di design, e riportare una UI in esecuzione verso frame Figma modificabili con "Send this to Figma". La modalità Dev Mode MCP richiede un piano Figma a pagamento.

5. 05 Cosa sono le Skill e CLAUDE.md? +

   CLAUDE.md è un file markdown nella root del tuo progetto che Claude Code legge all'inizio di ogni sessione — il posto dove codificare le tue convenzioni di design. Le Skill impacchettano istruzioni e risorse riutilizzabili che Claude carica su richiesta, inclusa la skill ufficiale Frontend Design di Anthropic. Open Design include una libreria curata di entrambe, così salti la configurazione progetto per progetto.

6. 06 Come evito l'estetica generica da "sbobba dell'IA"? +

   Installa la skill Frontend Design, fornisci tokens di design reali e screenshot di riferimento, codifica le regole del brand in CLAUDE.md e abilita la verifica nel browser. Open Design li include come libreria curata, così salti la configurazione progetto per progetto.

7. 07 Open Design è affiliato ad Anthropic? +

   No. Claude Code è un prodotto di Anthropic; Open Design è un progetto open-source indipendente che lo supporta come adattatore di prima parte. Claude e Claude Code sono marchi di Anthropic.

8. 08 I miei file e le mie credenziali sono al sicuro? +

   Sì — Open Design è local-first e Apache-2.0. I tuoi file, gli artefatti e DESIGN.md restano nella tua repo, e le tue credenziali Anthropic vengono usate direttamente dal tuo agente, mai instradate attraverso i server di Open Design.