HomeRisorseClaude Design

Playbook · Claude AI

Claude Design: la guida completa per creare prototipi con l'AI

Dal prompt al prototipo cliccabile, fino all'handoff diretto a Claude Code. Come funziona davvero il tool di design generativo di Anthropic — e dove trova i suoi limiti.

Claude Design · research preview dal 17 aprile 2026

Claude Design è il pezzo che mancava tra pensare un prodotto e svilupparlo: un tool che trasforma un prompt in HTML interattivo — non immagini statiche — dentro lo stesso ecosistema di Claude e Claude Code.

Cos'è Claude Design

Fino a poco tempo fa il workflow era spezzato in due: Claude per ragionare — struttura, copy, architettura del prodotto — e Claude Code per sviluppare. Nel mezzo restava un vuoto: il design. Claude Design chiude quel vuoto.

Con un prompt produce prototipi cliccabili, landing page, pitch deck, wireframe, video animati, app mobile e design system — tutto in HTML interattivo, non mockup statici. La differenza è che il risultato si può già cliccare, testare e passare a sviluppo.

Figma ha perso il 7% in borsa il giorno del lancio di Claude Design. Il CPO di Anthropic si era dimesso dal board di Figma tre giorni prima. Non era una coincidenza.

Accesso e setup del brand system

Claude Design è disponibile su claude.ai/design, solo sui piani Pro, Max, Team ed Enterprise — non sul piano Free. L'interfaccia divide chat (a sinistra) e canvas (a destra): descrivi, Claude genera, tu iteri.

Il passaggio che cambia tutto è il brand system: lo configuri una volta — caricando un repository GitHub, un file Figma, una slide deck o semplicemente logo e palette — e da quel momento ogni progetto nuovo esce già coerente con i tuoi colori, font e componenti. Zero ripetizioni.

Come funziona in pratica

Selezioni l'organizzazione → carichi gli asset di brand → Claude genera automaticamente palette, tipografia, componenti e layout pattern → verifichi con un progetto di test → pubblichi il design system con un toggle. Da lì in poi è sempre attivo.

Come si avvia un progetto

Ci sono quattro modi per partire, e nel playbook completo trovi i prompt esatti per ognuno:

  • Prompt testuale — descrivi in linguaggio naturale cosa vuoi costruire; Claude fa domande di chiarimento quando serve.
  • Upload file — carichi un Word, PowerPoint o Excel e Claude lo trasforma in output visivo mantenendo il brand system.
  • Web Capture — punti Claude a un URL reale, lui cattura navbar, hero, card, form esistenti e li adatta al tuo brand.
  • Immagini di riferimento — carichi screenshot o moodboard e chiedi "fallo simile a questo".

Il ciclo di raffinamento live

Una volta generato il primo output, hai tre livelli di controllo — e sapere quando usare quale è quello che fa la differenza tra iterare in 2 minuti o in 20:

  1. Chat, per cambiamenti strutturali

    Riorganizzare una dashboard, cambiare lo schema colori, chiedere 2-3 layout alternativi da confrontare.

  2. Commenti inline, per fix puntuali

    Clicchi sull'elemento esatto sul canvas — "aumenta il padding di questo bottone", "usa il colore primario qui".

  3. Tweaks panel, per regolazioni globali

    Slider generati su misura per il progetto — palette, border radius, spaziatura, densità — senza toccare codice.

C'è anche il Web Capture per portare elementi reali (non screenshot) da un sito esistente dentro il tuo progetto — utile per prototipi cliente, redesign o reference da competitor.

L'handoff a Claude Code

Questo è il punto che chiude davvero il loop. Il developer non riceve un'immagine da reinterpretare: riceve un bundle completo — design-spec.md, tokens.json, componenti, schermate, asset e un prototipo HTML già cliccabile — pronto per essere sviluppato senza dover ri-spiegare nulla da capo.

Per l'export ci sono anche altre strade a seconda di dove deve arrivare il risultato: PPTX editabile per una presentazione, PDF press-ready per la stampa, HTML standalone per una demo offline, Canva per editing collaborativo con il team.

La Prompt Formula

Ogni prompt forte per Claude Design nel playbook segue la stessa struttura — più elementi includi, più l'output si avvicina a quello che hai in testa:

GOAL · LAYOUT · CONTENT · AUDIENCE · TONE · BRAND

Cosa stai costruendo e perché → come deve essere organizzato lo spazio → quali informazioni deve contenere → chi lo userà → che sensazione deve dare → "usa il mio brand system" (o specifica colori/font).

Nel playbook trovi anche 10 prompt di ispirazione già pronti — da one-pager investor a infografiche, da newsletter HTML a pagine di pricing — copiabili e adattabili al tuo contesto.

4 use case reali

Il playbook include il prompt completo per ciascuno di questi quattro scenari, con la struttura esatta da rispettare:

01 Landing page — hero, problema, soluzione, social proof, CTA finale
02 Dashboard interna — header, sidebar, KPI card, stati vuoto/pieno
03 App mobile — onboarding, registrazione, home, schermata core, profilo

Il quarto — design system da zero — genera un UI kit completo (colori, tipografia, spacing, componenti, icone, motion) partendo solo dalla brand identity: è quello che consuma più tempo di generazione, circa 10 minuti, ma vale quando serve una base solida su cui costruire tutto il resto.

Limiti reali (research preview)

Vale la pena essere onesti: Claude Design è in research preview dal 17 aprile 2026, senza data di General Availability. Nel playbook trovo utile segnalare dove il tool non è ancora maturo:

  • Non è Figma per team strutturati — se gestisci design token a scala con design review formali, non sostituisce ancora quel workflow.
  • Frontier design è early — 3D, voce, animazioni motion funzionano, ma su progetti complessi servono più iterazioni.
  • Il prompt fa la differenza — su UI semplici funziona quasi tutto; su dashboard dati o logica condizionale, un prompt specifico batte sempre uno generico.
  • Export video diretto non c'è ancora — per i video animati, al momento, il modo per portarli fuori è la registrazione schermo.

Ricevi il playbook completo

Setup dettagliato, i 10 prompt pronti e i 4 use case con prompt completi. Compila in 10 secondi.

Domande frequenti

Claude Design è gratuito?

No, è disponibile solo sui piani a pagamento di Claude — Pro, Max, Team ed Enterprise. Non è incluso nel piano Free.

Serve saper programmare per usare Claude Design?

No. Si usa in linguaggio naturale: descrivi cosa vuoi in chat e Claude genera l'HTML interattivo sul canvas. Sapere programmare aiuta nella fase di handoff a Claude Code, non è un requisito per progettare.

Claude Design sostituisce Figma?

Non ancora del tutto. Per prototipazione rapida, landing page, deck e mockup è già molto forte. Per team strutturati che gestiscono design token a scala, Figma resta lo strumento di riferimento.

Posso esportare il progetto in PowerPoint o PDF?

Sì. Claude Design esporta in PPTX editabile, PDF press-ready, HTML standalone, Canva editabile o come bundle di sviluppo per Claude Code.

Come passo da un prototipo Claude Design a codice funzionante?

Con l'handoff diretto a Claude Code: Claude Design genera un bundle con specifiche, design token, componenti, schermate e un prototipo HTML cliccabile, così lo sviluppo parte già allineato al design.

Continua a leggere

Claude AI

Il Setup Completo di Claude, spiegato bene

Claude AI

Fare presentazioni con Claude, passo dopo passo

Claude AI

Le 10 skill più potenti per Claude