Partiamo dal problema reale.
Hai un'idea. Hai bisogno di mostrarla. Non sei un designer. Non hai tempo di imparare Figma. Non vuoi aspettare tre giorni la coda creativa dell'agenzia.
Ecco esattamente a cosa serve Claude Design.
Non è un generatore di immagini. Non è Canva con l'AI appiccicata sopra. Non è Figma per tutti — anche se Figma ci ha perso il sonno quando è uscito.
È lo strumento che comprime il passaggio da "ho un'idea" a "ho qualcosa da mostrare" da ore a minuti.
Prototipi interattivi. Pitch deck. Landing page. Mockup di app. Tutto in linguaggio naturale, tutto cliccabile, tutto modificabile.
Cos'è Claude Design e chi può usarlo
Claude Design è un prodotto di Anthropic — separato dalla chat normale di Claude, con una sua interfaccia, il suo canvas e il suo URL dedicato.
Gira su Claude Opus 4.7, il modello più potente di Anthropic. Questo ha conseguenze sui costi, ma ci arriviamo.
È disponibile per:
Claude Pro ($20/mese)
Claude Max 5x ($100/mese)
Claude Max 20x ($200/mese)
Team e Enterprise
Piano gratuito: escluso.
L'interfaccia: tre zone, una logica
Apri claude.ai/design. Crei un nuovo progetto. L'interfaccia si divide in tre zone precise.
Pannello sinistro — la Chat. Qui descrivi quello che vuoi. Dai istruzioni. Chiedi varianti. Aggiungi sezioni. È il motore principale.
Pannello destro — il Canvas. Dove appare il design. Non è una lavagna libera dove puoi spostare elementi a piacere come in Figma. È l'area dove il prototipo vive e si aggiorna.
Barra in alto — gli strumenti. Quattro modalità: Chat, Comments, Edit, Draw. Ognuna ha un momento giusto. Le vediamo dopo.
Una cosa importante da capire subito. Quello che vedi nel canvas non è un'immagine. È un prototipo interattivo: puoi cliccarlo, fare hover sugli elementi, scrollare. È codice HTML/CSS/JS reale sotto il cofano. Non grafica.
Questo cambia tutto — perché significa che può essere passato a uno sviluppatore o a Claude Code per diventare un prodotto funzionante.
Il workflow completo: dalla prima apertura all'output finale
Bene. Adesso ti spiego come si usa davvero, dall'inizio alla fine.
Step 1 — Imposta il design system (una volta sola)
Prima di fare qualsiasi cosa, fai questa cosa. Una volta. Non la salti.
Il design system è quello che trasforma Claude Design da "strumento generico che produce roba anonima" a "strumento che produce roba che sembra tua". Colori giusti, font giusti, stile coerente. Su ogni progetto, automaticamente, senza doverlo rispiegare ogni volta.
Nella schermata di onboarding — o dopo dalle impostazioni organizzazione — trovi un form con cinque campi.
Company name and blurb. Non solo il nome. Contesto completo. Esempio utile: "AI Pratika: consulenza AI per PMI italiane, tono diretto e pratico, interfacce pulite, palette blu e bianco, output principalmente presentazioni e dashboard." Questo diventa il brief implicito su ogni generazione.
Link code on GitHub.
Se hai un repository con il tuo design system — variabili CSS, configurazione Tailwind, design-tokens.json — linkalo qui. Claude legge i token, non il codebase intero.
Link code from your computer. Drag & drop di una cartella locale. Funziona bene con file di variabili e componenti. Un'alternativa efficace che in pochi conoscono: caricare il design system scritto in Markdown — colori, font, spacing, pattern descritti testualmente. I modelli lo leggono benissimo e consuma meno token.
Upload a .fig file. Il file nativo di Figma. Lo esporti da Figma → File → Save local copy. Claude estrae colori, tipografia, componenti e pattern di layout. Testato: con un design system macOS in .fig, ogni nuovo progetto riprendeva automaticamente il linguaggio visivo, la tipografia, tutto.
Tre cose che devi sapere e che non trovi scritte in evidenza da nessuna parte:
Add fonts, logos and assets. Loghi (SVG meglio di PNG — contiene informazioni vettoriali), font, PDF delle brand guidelines, screenshot del prodotto.
Il tip più sottovalutato di tutti: carica uno screenshot della tua pagina reale, non solo la palette colori. Claude impara di più dal brand vedendolo in uso nel mondo reale che leggendo una spec sheet.
Any other notes. Campo testo libero. Metti tutto quello che i file non riescono a trasmettere: tono di voce, regole di stile, cosa evitare.
Esempi concreti:
"Mai gradienti. Solo tinte piatte."
"Bordi arrotondati 8px ovunque."
"L'utente tipo è un CFO over 45 — interfacce dense, non minimaliste."
"Tono: autorevole ma non freddo."
Finito il setup, pubblica il design system — c'è un toggle Published/Draft. Da quel momento, ogni progetto creato dalla home di Claude Design lo usa automaticamente.
Step 2 — Crea un nuovo progetto
Dalla dashboard di Claude Design, crei un nuovo progetto. Dai un nome. Opzionalmente una riga di brief.
Nel pannello sinistro trovi le tipologie di output disponibili:
Mockup / Prototype — per app, dashboard, interfacce interattive
Slide deck — per presentazioni e pitch
Template — per documenti, one-pager, materiali marketing
Altro — per tutto il resto: landing page, report, materiali custom
Scegli il tipo. Poi scrivi il primo prompt nella chat.
Prompt efficace — cosa mettere:
Non scrivere "fammi una landing page". Scrivere:
Crea una landing page per una SaaS B2B nel settore HR.
Target: HR manager di aziende con 50-200 dipendenti.
Sezioni: hero con CTA primaria, 3 feature principali con icone,
social proof con loghi clienti, pricing con 2 tier, footer.
Stile: professionale, palette blu navy e bianco, desktop-first.Claude farà 4-5 domande di chiarimento prima di generare. Rispondile. Ogni risposta che dai migliora la qualità dell'output. Saltarle è buttare via potenziale.
Poi aspetti. Mediamente 45-90 secondi su prompt di media complessità. Il canvas si popola.
Step 3 — Modifica il risultato
Qui entra in gioco la differenza tra chi usa Claude Design bene e chi brucia i token inutilmente.
Hai quattro modalità per modificare il design. Ognuna ha il suo momento.
Chat — per i cambiamenti strutturali. Nuove schermate, cambio di layout generale, aggiunta di sezioni intere, richieste complesse che richiedono contesto. È la modalità più costosa in token — Claude rigenera parti consistenti del design. Usala per le grandi mosse.
Comments — la mossa che tutti ignorano. Clicchi sulla barra in alto → Comments. Clicchi su un elemento specifico del canvas. Lasci un'istruzione precisa. Accumuli più commenti. Li mandi tutti insieme in una sola chiamata.
Perché funziona: stai dicendo a Claude esattamente quale elemento toccare. Zero ambiguità. Zero rischio che sistemi la cosa sbagliata. E soprattutto — zero token sprecati a rigenerare l'intero design per una modifica piccola.
Workflow pratico:
→ Clicca "Comment" nella barra
→ Clicca sull'elemento → scrivi l'istruzione
→ Ripeti per ogni elemento da modificare
→ Seleziona tutto → "Send to Claude"
Claude processa tutto in una sola generazione.Edit Mode — zero token, massima precisione. Manipolazione diretta. Cambi colori, font, dimensioni, allineamenti tu stesso. Nessuna chiamata all'AI. Nessun token consumato. Usalo per swap di colore, aggiustamenti di font, fix che sai già esattamente come fare.
Draw Mode — mostra invece di spiegare. Disegni sul canvas. Frecce, cerchi, annotazioni. Quando una modifica spaziale è difficile da descrivere a parole — "sposta questo blocco lì" con una freccia è più chiaro di tre frasi di testo.
Step 4 — Esporta o passa avanti
Design finito. Ora hai queste opzioni:
HTML standalone — file scaricabile, navigabile in browser, condivisibile
PDF — per presentazioni e condivisione
PPTX — per chi deve aprirlo in PowerPoint o Keynote
Handoff to Claude Code — impacchetta tutto in un bundle che Claude Code implementa direttamente nel codebase. Da prototipo a prodotto.
Send to Canva — tecnicamente funziona, ma è ancora buggy e costa il 5% dell'allowance settimanale solo per il trasferimento. Da evitare per ora.
Quanto costa davvero: i numeri onesti
Claude Design non si misura a design. Si misura con un allowance settimanale di token che si resetta ogni 7 giorni. Separato dalla chat normale e da Claude Code — l'attività in Design non attinge mai dagli altri limiti.
Opus 4.7 è il modello più token-hungry di Anthropic. Una sessione completa pesa molto più di una risposta testuale. Dal campo:
Un utente ha consumato il 65% del suo allowance Pro in 20 minuti. Due sessioni complete bruciano circa il 58% del limite settimanale.
Tradotto in numeri pratici:
| Piano | Costo mensile | Sessioni stimate/settimana | Costo implicito per sessione |
|---|---|---|---|
| Pro | $20 | 1–2 | ~$10 |
| Max 5x | $100 | 5–10 | ~$2–3 |
| Max 20x | $200 | 15–20+ | ~$1–2 |
Una "sessione" = prima bozza + 5-10 iterazioni di modifica.
Se finisci l'allowance puoi acquistare usage extra senza aspettare il reset settimanale.
Cosa può fare e cosa non può fare
Chiaro su questo. Claude Design nella versione attuale — research preview, maggio 2026 — ha confini precisi.
Funziona bene per:
Prototipi multi-schermata con navigazione funzionante
Pitch deck e slide deck strutturati
Landing page e one-pager
Design system foundation da codebase o file Figma
Materiali marketing on-brand se il design system è configurato
Non è lo strumento giusto per:
Animazioni complesse e micro-interazioni sofisticate
Collaborazione sincrona in team (nessun multiplayer, nessun cursore condiviso)
Generazione di loghi o asset grafici vettoriali
Lavori che richiedono gusto strategico di brand e direzione creativa senior
Gli errori da non fare (e che quasi tutti fanno)
Saltare il design system. Il risultato è output generico senza identità. Trenta minuti di setup all'inizio salvano ore di correzioni su ogni progetto successivo.
Caricare tutto il codebase. Subfolder frontend-focused. Non il repository intero.
Incollare l'URL Figma. Non funziona. Serve il .fig esportato.
Chiedere una modifica alla volta in chat. Accumula i commenti e mandali insieme. Stesso risultato, token dimezzati.
Esplorare senza un brief. Claude Design consuma token anche mentre "guardi cosa fa". Arriva con l'idea chiara, scrivi il prompt prima di aprire lo strumento.
Checklist operativa: prima sessione
- Piano Pro o superiore attivato
- Accesso su claude.ai/design verificato
- Design system configurato (almeno: company blurb + logo + colori)
- Progetto di test fatto per validare l'output on-brand
- Design system pubblicato (toggle su "Published")
- Prompt della prima sessione scritto prima di aprire Claude Design
- Strategia chiara: Opus per le bozze, Edit Mode per i ritocchi
Claude Design è disponibile su claude.ai/design per i piani Pro, Max, Team ed Enterprise. Documentazione ufficiale su support.claude.com. Il modello che usa — Claude Opus 4.7 — è lo stesso disponibile tramite API Anthropic.
All prossima guida su AIPratika.com