Il comando /design: artboard prima del codice

Intermedio

Ultima verifica: 2026-08-27.

/design è una research preview (rilasciata nella settimana 34, 17–21 agosto 2026). Le version gate, la disponibilità sui piani e il comportamento possono cambiare — verifica sul digest whats-new di Claude Code prima di affidarti a qualsiasi dettaglio specifico.

Conferma confrontando con la fonte ufficiale.

Anthropic ha inserito in Claude Code uno slash command che salta di proposito la fase di codice. /design pubblica un canvas di artboard UI modificabili a partire da un brief in inglese semplice; scegli quello che ti piace, lo ritocchi e solo dopo Claude lo trasforma in codice reale. È la prima funzionalità di Claude Code in cui il deliverable non è codice — la fase di design è l'artefatto stesso.

What you'll learn

• Capire cos'è un artboard e perché cambia il flusso coding-first
• Eseguire /design correttamente al primo tentativo (versione, piano, forma del prompt)
• Conoscere le tre fasi: draft → scegli+modifica → implementa
• Evitare le tre trappole note: costo dei token, deriva rispetto allo stile del tuo repo e muro del piano free
• Abbinare /design allo stile di output Concise uscito la stessa settimana

Cos'è davvero

/design è una skill — non un semplice slash command. Quando la invochi, Claude Code passa il testimone al workflow degli artboard di Claude Design e stampa un link a un canvas pubblicato. Un artboard è una schermata funzionante su cui puoi agire: cambiare il colore, spostare un blocco, allargare uno spazio. È renderizzato sul runtime degli artifacts, quindi vive nel tuo account Claude, non come file nel tuo repo.

Questa distinzione conta. L'output di /design è un URL, non una diff. Nulla finisce in git status finché non dici a Claude di implementare.

What you'll learn

• Disponibilità: Pro, Max, Team, Enterprise. Non free. Richiede Claude Code v2.1.233 o superiore. Disponibile sia nella CLI che nel Claude Code Desktop.
• Stato: research preview — aspettati che la forma dell'invocazione, il formato di output e il numero di artboard inclusi cambino.

Le tre fasi

Guided walkthrough1 of 3

1. Esegui /design con un brief che dica a cosa serve la schermata. Claude pubblica diverse varianti di artboard affiancate, ognuna modificabile. Ottieni un link; aprilo nel browser.

La forma di prompt che funziona

/design premia i brief che descrivono scopo e pubblico, non target di pixel. Due pattern:

/design — brief di feature

/design a few options for the sign-in screen. Users are engineers on mobile.
Optimize for one-hand thumb reach; SSO is the primary path, email/password
secondary. Show a state for a locked-out account.

/design — ridisegnare una superficie esistente

/design redesign our composer based on what people actually use it for:
drafting long messages, attaching files, and switching model. The current
version buries the model picker; make it a first-class control.

Due cose che in quei brief lavorano molto senza dare nell'occhio:

• Nominare utente e vincolo ("engineers on mobile", "one-hand thumb reach") toglie a Claude il layout medio-statistico su cui ripiega di default.
• Nominare uno stato di fallimento ("locked-out account") costringe l'artboard a coprire i casi vuoti/errore/limite, non solo il happy path.

Le tre trappole

1. Consuma token. Più artboard a piena fedeltà per invocazione bruciano budget più in fretta di un normale turno di chat. Gli utenti della research preview lo segnalano in modo costante. Riserva /design alle decisioni vere, non a schizzi da buttare.

2. Non combacia con il tuo codebase. Claude Design genera partendo da un'estetica generica, non dai componenti che hai già. Se vuoi che l'artboard sembri parte del resto della tua app, metti in cima al repo un DESIGN.md (font, scala di spaziatura, token di colore, componenti esistenti) e citalo nel brief — lo stesso trucco che impedisce alla fase di implementazione di /design di reinventare i tuoi button primitives.

Fai riferimento a DESIGN.md prima di /design

Before you draft anything, read DESIGN.md and list the type scale, spacing
scale, and named color tokens you'll use. Then /design a settings screen
that respects those tokens.

3. Muro del piano free. /design è chiuso dietro i piani a pagamento (Pro e superiori). Se il tuo team paga i posti Claude Code ma un contractor è sul piano free, per lui /design semplicemente non c'è.

Abbinalo allo stile di output Concise

Anthropic ha rilasciato la stessa settimana lo stile di output built-in Concise (v2.1.237). Fa in modo che Claude apra con i risultati e salti il preambolo — un buon compagno per /design, perché il turno di handoff ("implementa l'opzione 2") non ha bisogno di essere raccontato:

~/.claude/settings.json

{
  "outputStyle": "Concise"
}

Concise mantiene comunque tutto il dettaglio per i report d'errore, gli avvisi di sicurezza e le conferme di azioni distruttive — perdi la narrazione, non le protezioni.

Quando /design vince rispetto a scrivere codice direttamente

Usa /design quando	Saltalo quando
La decisione visiva è la parte difficile (nuova superficie, layout poco chiaro)	Sai già com'è il layout; ti serve solo il codice
Vuoi confrontare 3+ direzioni a basso costo prima di impegnarti	Stai iterando sulla logica di una schermata esistente, non sulla forma
Lo stakeholder ha bisogno di un artefatto quasi cliccabile da approvare	La schermata deve rispettare un design system esistente 1:1
Contano gli stati di fallimento/vuoto/loading	Stai prototipando tooling interno usa-e-getta

Meccaniche non ovvie

• L'URL del canvas è condivisibile. Poiché gli artboard vivono sugli artifacts, il link funziona per chiunque abbia accesso alla vista del tuo account Claude — puoi mandarlo a un designer o a un PM senza esportare nulla.
• L'iterazione è a doppio canale. Puoi modificare sul canvas e continuare a promptare nel thread di Claude Code. Entrambi alimentano lo stesso contesto.
• L'implementazione rispetta comunque il tuo repo. Nel momento in cui dici "implementa", Claude Code torna al normale comportamento repo-aware — userà la tua config Tailwind, i tuoi componenti, la tua struttura di file. L'artboard è il bersaglio; il tuo codebase è il terreno.

Premi Invio o Spazio per girare la carta. Usa le frecce sinistra e destra per spostarti tra le carte.Termine mostrato.

1 / 7

Verifica te stesso

0/4

1. 1Dove vivono gli artboard prodotti da /design?
2. 2Sei su Claude Code v2.1.230 e un account Claude free. Cosa succede con /design?
3. 3Quale forma di brief dà a /design le migliori chance di produrre un artboard utile?
4. 4Perché lo stile di output Concise è un buon compagno per /design?

Fonti e approfondimenti

• Claude Code whats-new · Settimana 34 (17–21 ago 2026) — nota di lancio ufficiale con version gate, disponibilità sui piani e demo.
• Claude Code Updates by Anthropic (Ago 2026) — changelog scorrevole che include /design, lo stile di output Concise e il Remote Control uscito dalla preview.
• Claude Code /design Command: UI Artboards (Ago 2026) — explainx.ai — articolo pratico con le fasi del workflow e i feedback dei primi utenti sul costo in token.
• Claude Code Design Prompts: Copy-Paste Patterns — Superdesign — il pattern DESIGN.md e le forme di brief ancorate a un riferimento.
• Introducing Claude Design (Anthropic, Apr 2026) — il prodotto Claude Design originale che /design porta dentro Claude Code.

Prossimo

• Custom Slash Commands — come /design sta di fianco ai comandi che costruisci da solo.
• Output Styles — lo stile Concise che si abbina agli handoff di /design.
• Ship a Beautiful Site — il pattern DESIGN.md in profondità, più i vincoli anti-slop per qualunque cosa /design passi al codice.