Vai al contenuto principale

Da Loom a pagina web Parte 2 di 3

Genera la pagina con Claude Design

~4 min di lettura Agg. 24 ago 2026

Claude Design, e il gesto che sblocca tutto

Claude Design è lo strumento di Anthropic Labs per creare design, prototipi e pagine collaborando con Claude. Con l'ultimo aggiornamento ha imparato a rispettare il tuo design system invece di sfornare il solito mockup generico.

Il gesto pratico, perché è qui che molti si bloccano: apri claude.ai/design, crei un nuovo progetto e nella chat incolli il prompt insieme al link "per agente" copiato da Clips. Tutto qui. Nessun file da caricare: Claude apre il link da solo, legge la trascrizione e guarda i fotogrammi.

L'interfaccia di Claude Design con un nuovo progetto appena creato
Claude Design: un nuovo progetto, pronto per il prompt e il link di Clips.

Da qui ho provato due strade, e i risultati cambiano a vista d'occhio.

Strada A: senza design system

Parto pulito: do a Claude Design il link "per agente" del Clip e gli chiedo di replicare il linktree nello stile mostrato nel video. Nessun design system a monte.

Il prompt della Strada A incollato in Claude Design, con solo il link per agente
Strada A: il link per agente e un prompt essenziale, niente design system.
PROMPT · STRADA A
Leggi e riproduci quello che viene detto nel transcript, qui trovi le immagini
(i frame) e il transcript https://clips.agent-native.com/api/agent-context.json?id=gu8pAvt2knDU.
Il risultato ottenuto senza design system, con un secondo prompt per chiarire i colori di AI Pratika
Il risultato senza design system: ho dovuto aggiungere un secondo prompt per i colori di AI Pratika.

Il risultato lo scarichi direttamente (o lo esporti, per esempio in PDF, o lo colleghi a una piattaforma come Vercel per metterlo online). È buono, sorprendente per lo sforzo. Ma, onestamente, senza un design system l'agente "interpreta" lo stile: coglie il senso, non i dettagli fini.

Il processo per scaricare la pagina creata da Claude Design
Il processo per scaricare la pagina creata.

Strada B: con design system

Un design system è l'insieme di colori, font, spaziature e componenti del tuo brand: le regole con cui le cose devono apparire. Claude Design può importarlo da un file, un repository o gli asset che gli fornisci, così parti dal tuo brand invece che da zero.

L'impostazione del Design System dentro Claude Design
In Claude Design imposto il Design System.
PROMPT · STRADA B
Leggi e riproduci quello che viene detto nel transcript, qui trovi le immagini
(i frame) e il transcript https://clips.agent-native.com/api/agent-context.json?id=gu8pAvt2knDU. Il Design system di AI Pratika lo hai già

Stesso video, stesso link, ma ora Claude Design ha componenti approvati su cui costruire, e prima di mostrarti il risultato lo confronta con il design system.

Il risultato ottenuto utilizzando il Design System di AI Pratika: colori, spaziature e tipografia coerenti
Il risultato con il Design System di AI Pratika: colori giusti, spaziature coerenti, tipografia allineata.

La differenza si vede senza bisogno di spiegarla. Il design system non è un vezzo da nerd: è la differenza tra "carino" e "pubblicabile".

Saltare il design system è la scorciatoia che si paga dopo. Senza, l'agente indovina lo stile e tu passi mezz'ora a sistemare a mano quello che un design system gli avrebbe dato già pronto.

Da brief confuso a UX/UI completa Un brief vago diventa un’app navigabile. Spot prodotto da una foto Una foto diventa uno spot animato, senza codice. Far guardare i video a Claude Claude guarda i tuoi video e li trasforma in testo. Higgsfield in Claude Code Genera immagini e video mentre programmi in Claude Code. Da un Loom a una pagina web Un video schermo diventa una pagina web, senza codice. Video Shorts con NotebookLM Le tue fonti diventano uno short verticale. Landing luxury su Lovable Landing page di lusso con un solo prompt. Excalidraw in locale Excalidraw gratis sul tuo computer, senza codice. Mistral OCR nel flow Estrai testo dai documenti con Mistral OCR. Claude SEO nel terminale 25 skill SEO gratis dentro Claude Code. Google Search Console dentro Claude Code I dati di Search Console dentro il terminale. Routine di Claude Code Claude che lavora da solo, a computer spento. Clonare una landing in React con v0 Clona una landing reale in codice React. Context economy con Claude Lavora leggero e non bruciare i limiti di Claude. Dal prompt alla skill auto-evolutiva Skill Claude che imparano dai tuoi errori. Da NotebookLM a Canva: presentazioni Slide da NotebookLM, finalmente editabili in Canva. La mappa per capire ogni tool AI 12 categorie per incasellare qualsiasi tool AI. PNG trasparenti con ChatGPT PNG con trasparenza reale, non la scacchiera finta. Infografiche animate con Gemini Infografiche che si animano in loop con Gemini. Ricerca di mercato con Deep Research Deep Research come tuo analista di mercato. Farti citare dai motori AI (AEO) Diventa una fonte che ChatGPT e Perplexity citano.