Claude Design: come costruire una landing page partendo da un prompt pronto

Un reel di @denys_vibe_coding mostra come ottenere una landing page con Claude Design senza partire da una pagina vuota: si sceglie un template da una libreria di prompt, lo si incolla nello strumento, si sostituiscono i contenuti e Claude costruisce la pagina in un solo passaggio. Nella didascalia, chi pubblica offre una guida completa con tutti i link a chi commenta "Aura", e la manda in messaggio privato. Instagram etichetta il profilo come generato dall'IA e i contenuti come contenuti IA, un dato da tenere presente quando si valutano le promesse del video.

Il reel è un buon punto di partenza per un tema più ampio: cosa fa Claude Design, cosa significa usare prompt pronti per costruire pagine web e quali verifiche restano a carico di chi pubblica. Nei sottotitoli il nome dello strumento compare come "Cloud Design"; quello corretto è Claude Design.

Cosa mostra il reel

Il video segue quattro passaggi. Entra prima nella sezione Templates di un sito che raccoglie prompt per pagine web: nelle miniature si leggono nomi come Liquid Glass Agency, 3D Portfolio, Urban Jungle e Orbit NFT, ciascuno con un pulsante per copiare il prompt e uno per vedere l'anteprima. Poi passa a Claude Design, dove l'interfaccia propone di partire da un contesto: un design system, uno screenshot, una codebase o un file Figma. Il terzo passaggio è l'incolla dei prompt e la sostituzione dei contenuti. Il quarto è il risultato: una landing page per un prodotto di nome Focal, un dispositivo per la concentrazione con intelligenza artificiale, con un titolo di apertura su un'immagine e sezioni sotto.

Dai frammenti leggibili della chat, il prompt prevede un video di sfondo in formato mp4 da caricare nel progetto, con una dissolvenza in apertura e in chiusura a ogni ciclo di riproduzione.

Il video non nomina il sito dei template. MotionSites AI, che offre prompt per Lovable, Bolt, Cursor e Claude, ha tra i suoi modelli uno chiamato Liquid Glass Agency, ma i fotogrammi non bastano per stabilire che sia lo stesso sito.

Cos'è Claude Design

Claude Design è un prodotto di Anthropic Labs presentato il 17 aprile 2026. Permette di creare con Claude design, prototipi, slide, one-pager e materiali di marketing, tra cui landing page. Al lancio era basato su Claude Opus 4.7 ed era disponibile in anteprima di ricerca per gli abbonati Pro, Max, Team ed Enterprise. La pagina di Anthropic, aggiornata il 9 settembre 2026, parla ancora di anteprima di ricerca.

Si parte da un prompt, da immagini e documenti (DOCX, PPTX, XLSX) o da una codebase, e c'è anche uno strumento di cattura web per prelevare elementi da un sito esistente. Il risultato si rifinisce con la conversazione, con commenti sugli elementi, con modifiche dirette al testo e con controlli regolabili, creati da Claude, per spaziature, colori e layout. Durante la configurazione iniziale Claude può costruire un design system leggendo codebase e file di design, e da quel momento ogni progetto usa colori, tipografia e componenti definiti.

Per l'esportazione Anthropic indica un URL interno all'organizzazione, una cartella, Canva, PDF, PPTX e file HTML autonomi. Quando il design è pronto, Claude prepara un pacchetto di consegna da passare a Claude Code. L'accesso è incluso nel piano e consuma i limiti dell'abbonamento, con la possibilità di attivare un uso extra. Per le organizzazioni Enterprise è disattivato di default.

Dal prompt alla landing page

Mettendo insieme quanto mostra il reel e quanto descrive Anthropic, il flusso è questo.

1. Scegliere un template e copiarne il prompt.
2. Creare un progetto in Claude Design e, se esistono, collegare il design system o una codebase di riferimento.
3. Incollare il prompt e sostituire testi, nomi e dati con quelli del proprio progetto.
4. Caricare gli asset richiesti dal prompt, per esempio il video di sfondo, e rifinire con commenti, modifiche dirette e controlli regolabili.
5. Esportare come file HTML autonomo oppure generare il pacchetto da consegnare a Claude Code.

L'ordine esatto delle schermate può differire da quello descritto, perché l'interfaccia è in anteprima di ricerca e il video ne mostra solo alcuni momenti.

Cosa controllare prima di pubblicare

Un prompt pubblico produce pagine simili tra loro: chi copia lo stesso template parte con ogni probabilità dalla stessa struttura, dalla stessa tipografia e dalla stessa animazione. Per questo il design system pesa più del template. Fornire a Claude Design i colori, i caratteri e i componenti del progetto riduce il rischio di consegnare una pagina identica a quelle di altri.

I prompt delle librerie hanno termini d'uso propri, che per questo articolo non sono stati letti. Prima di usare un template per un cliente conviene controllarli.

Un hero con video a schermo intero in loop richiede il download di un file video al primo caricamento e sovrappone il testo a immagini in movimento. Vanno misurati il peso della pagina su rete mobile, il contrasto del testo e il comportamento con la preferenza di sistema che riduce le animazioni, prefers-reduced-motion.

Il reel parla di sito intero, ma la demo è una sola pagina per un prodotto di fantasia. Un sito in produzione richiede navigazione tra più pagine, moduli, metadati, contenuti reali e test. Anthropic presenta Claude Design come strumento per prototipi e materiali visivi e prevede il passaggio a Claude Code per l'implementazione, ed è in quel momento che il codice va letto e verificato.

Resta infine il costo in termini di limiti d'uso. Claude Design usa quelli dell'abbonamento e il reel non dice quanto consumi una pagina come quella mostrata.

Fonti

1. @denys_vibe_coding (Instagram), “Se vuoi la guida completa con tutti i link, commenta Aura”, data di pubblicazione non visibile, consultato il 15 ottobre 2026
2. Anthropic, “Introducing Claude Design by Anthropic Labs”, 17 aprile 2026, ultima modifica 9 settembre 2026
3. MotionSites AI, “home page”, consultata il 15 ottobre 2026