Come creare un agente AI per landing page e siti

Cos'è un agente AI per creare landing page e siti

Un agente AI per creare landing page è un modello linguistico con un sistema di file intorno che gli dice chi è, per chi lavora, in che ordine procedere e con quali strumenti. Gli dai un obiettivo, lui passa dal brief al design, dal codice alla pubblicazione, e si ferma a chiederti conferma a ogni fase.

Chi apre Claude Code per la prima volta tende a usarlo come una chat un po' più potente. Scrivi cosa vuoi, lui produce qualcosa, tu correggi.

Funziona finché il lavoro sta dentro una conversazione. Poi il progetto va diviso in fasi, le decisioni prese giorni prima devono restare valide, i file dipendono da altri file. Serve qualcosa di più ordinato.

Con questo setup ho costruito in poche ore una landing page con form di iscrizione, login e area membri funzionante. Qui sotto trovi la versione essenziale di come funziona. Se vuoi il tutorial completo passo per passo, con il video, c'è la versione lunga su Substack.

Cosa serve a un agente AI per funzionare

Il modello LLM possiamo immaginarlo come un cervello molto intelligente. Tutto quello che gli sta intorno e gli permette di lavorare in modo ordinato è l'imbracatura (in inglese harness). È la parte che costruiamo noi, e quella che decide la qualità dell'output.

I pezzi sono sette:

1. Istruzioni. Stanno in un file chiamato CLAUDE.md: chi è l'agente, cosa fa, come si comporta.
2. Contesto. Tutto il resto: chi siamo, il business, il tono di voce, il posizionamento. Senza contesto l'output peggiora parecchio, e si vede subito.
3. MCP. I connettori. È il sistema definito da Anthropic con cui l'agente chiede qualcosa a un servizio esterno e il servizio risponde. Figma, Canva, Supabase, Vercel e Meta si collegano così.
4. Memoria. Le decisioni prese e lo storico dei cambiamenti. Evita all'agente di ripartire ogni volta da capo.
5. Comandi. Scorciatoie: digiti / e una parola chiave, e parte un processo già definito. Nel mio agente /setup configura chiavi e MCP, /design sviluppa il design della pagina sul design system che gli abbiamo dato.
6. Skill. File markdown che funzionano come specialisti verticali (copy, design, sviluppo, testing). Si scaricano da skills.sh, da GitHub, oppure si scrivono. Dentro una skill puoi mettere anche degli script, quindi oltre a spiegare può eseguire.
7. Subagenti. Specialisti per fase a cui l'orchestratore delega il lavoro.

Il flusso è questo: dai un comando, l'agente orchestratore legge istruzioni e memoria, poi delega ai subagenti. Ogni subagente richiama le sue skill e i servizi esterni tramite MCP.

Facciamo un esempio pratico. Il subagente del copy apre prima il suo manuale operativo, poi richiama la skill di marketing psychology per i trigger persuasivi, poi quella di copywriting e headline optimization, infine passa il testo in editing per renderlo meno robotico.

Come organizzare le cartelle di un agente AI

La struttura è quasi sempre la stessa e la uso come base per ogni progetto nuovo. Lo scheletro è pronto, il lavoro si sposta sui file di contesto.

agente/
├── .claude/       impostazioni, comandi, skill, team di subagenti
├── context/       tutto il contesto dell'azienda (brand/)
├── directives/    manuali di processo, uno per agente
├── execution/     script, modelli, checklist
├── output/        dove atterrano i file finiti (quasi tutti HTML)
├── CLAUDE.md      istruzioni dell'orchestratore
├── .mcp.json      configurazione dei connettori
└── .env           chiavi API e token

Dentro .claude ci sono i subagenti, uno per area: brand, wireframe, design, sviluppo, testing, pubblicazione.

Nella sottocartella context/brand tengo almeno tre file:

• Brand kit o design system: colori, font, gerarchia degli elementi, valori comunicativi.
• Tone of voice e anti-AI writing style: il secondo è universale e serve a togliere dal copy i pattern tipici dell'AI.
• Business profile: proposta di valore, posizionamento, problemi ricorrenti del pubblico, desideri e obiezioni. Se non ne hai uno, qui spiego come costruirlo con l'AI.

In directives c'è anche un file di self improvement, dove finisce tutto quello che insegniamo all'agente strada facendo.

Skill e direttive: che differenza c'è

Sono entrambi file markdown che insegnano un processo ripetitivo a Claude. Preferisco tenerli separati.

• Le skill stanno in .claude e lavorano in orizzontale su tutto. Rispondono alla domanda generica: come si scrive un copy?
• Le direttive stanno in directives e sono pagine di manuale operativo, verticali su un singolo agente. Rispondono a come si scrive il copy qui, con il nostro tono, per il nostro pubblico, con i nostri vincoli.

Sono due livelli di specificità diversi, e separarli evita che l'agente peschi il manuale sbagliato. Per agenti semplici puoi tenerle tutte nella stessa cartella.

Cosa serve per iniziare con Claude Code

Il setup minimo è di tre cose.

1. Un account Claude a pagamento, almeno Pro. Ha limiti di token su finestra oraria, giornaliera e settimanale. Se sprechi token, a un certo punto resti fermo per qualche ora.
2. Visual Studio Code. L'app desktop di Claude, per questo lavoro, è a mio avviso un po' depotenziata. Scarichi VS Code da code.visualstudio.com, cerchi Claude Code tra le Extensions e lo installi. Così vedi la struttura dei file di lato mentre l'agente lavora.
3. Il materiale del brand in una cartella. Chi sei, il tono di voce, il prodotto, l'indirizzo del sito.

Poi c'è da scegliere la modalità di lavoro di Claude Code:

Due dettagli che aiutano un sacco. Puoi aprire più chat di Claude Code in parallelo: mentre l'agente costruiva la pagina, in un'altra finestra raccoglievo le chiavi API. E per i prompt lunghi detto invece di scrivere, con Wispr Flow o Glaido: viene meno faticoso e di solito anche più chiaro.

Le 7 fasi per creare una landing page con un agente AI

L'agente lavora per fasi e ognuna si chiude con un punto di approvazione (gate). Il valore sta nel rispettare l'ordine, perché ogni fase eredita output e decisioni di quella prima.

1. Onboarding e contesto. Qualche domanda per inquadrare il progetto (che tipo di sito, quali credenziali sono pronte), poi legge le cartelle del brand.
2. DNA del brand. Conferma cosa ha capito e chiede sui nodi aperti. A me ne ha chiesti tre: l'area membri è un login vero? Chi gestisce le email automatiche? Da dove arriva il traffico?
3. Brief CRO. Un solo obiettivo di conversione e la decisione su cosa succede dopo il form. Niente azioni concorrenti. Qui trovi 7 strategie per le conversioni di una landing.
4. Design system. Colori, tipografia, componenti, poi wireframe e design. L'agente me l'ha proposto prima in HTML e l'ha scritto nel file ufficiale solo dopo la mia approvazione.
5. Sviluppo. La pagina viene costruita in codice, sezione per sezione. Nel mio caso 11: hero, loghi, cosa impari, come funziona, bonus, chi sono, testimonianze, a chi è rivolto, FAQ, CTA finale, footer.
6. Servizi esterni. Login con Clerk, database con Supabase, email con SendFox. Mi servivano per un funnel di acquisizione: mini-corso gratuito di 25 email, con in regalo una checklist interattiva nell'area membri.
7. Pubblicazione e test. Il sito va online e si testa il flusso intero: form, registrazione, email, accesso all'area riservata.

Che strumenti usa l'agente per costruire il sito

Ogni strumento è legato a una fase.

Il flusso è lineare: l'utente compila il form, Clerk crea l'account, il contatto finisce su SendFox che fa partire la sequenza email, i dati vanno su Supabase e Vercel tiene il sito online.

Su getdesign.md scarichi in markdown il design system di siti conosciuti e lo dai in pasto a Claude Code. Senza una guida di questo tipo, Claude Code tende a produrre un output più basico di quello che vorresti.

Quanto costa creare un sito con un agente AI

Poco, quasi niente se lo confronti con uno sviluppo custom.

• Visual Studio Code è gratuito.
• Clerk e Supabase hanno un piano free che copre un progetto di questo tipo.
• Vercel pubblica gratis su un suo sottodominio; il dominio personalizzato lo aggiungi dopo.
• Firecrawl ha un account free, ma lo scraping consuma crediti.

L'unica voce di spesa vera resta l'abbonamento a Claude, Pro o Max.

Cosa fare quando l'agente sbaglia

Succede sempre, ed è normale. Quello che Claude Code produce all'inizio è un prototipo: serve dargli feedback su cosa funziona e cosa no, a voce o con screenshot, una cosa alla volta.

Tre errori che ho dovuto correggere:

• Il form diverso da come l'avevo chiesto. Volevo l'autenticazione dentro il form principale, l'ha spezzata in due passaggi. Anche quel setup reggeva, quindi la prima domanda da farsi è se il difetto è vero oppure è una nostra preferenza.
• La chiave di Firecrawl non veniva letta. Gli MCP leggono il file .env all'avvio della sessione: se aggiungi una chiave a sessione aperta, va riavviato Claude Code. In più c'era uno spazio di troppo dopo i due punti.
• Le chiavi API passate in chat. Le ho revocate subito dopo. Il posto giusto è il .env, e i token andrebbero ruotati ogni 30, 60 o 90 giorni.

La differenza la fa dove finisce il feedback: in un file di learnings. La volta dopo l'agente parte da lì.

Come iniziare: il piano in 3 ore

Il modo più semplice per capire come funziona è provarlo su un tuo progetto. Ogni passaggio si chiude con un risultato verificabile, e finché non c'è non ha senso andare avanti.

1. Ambiente (20 min). Apri la cartella dell'agente in VS Code, lancia il comando che avvia un nuovo progetto e descrivi cosa vuoi costruire.
2. Contesto e DNA del brand (20 min). Passa all'agente la cartella del brand e l'indirizzo del sito. Correggi subito quello che non torna su tono, pubblico e promessa.
3. Brief CRO (15 min). Un obiettivo di conversione e cosa succede dopo il form.
4. Design system e design (30 min). Lo validi solo quando rispecchia la tua identità.
5. Servizi esterni (40 min). Autenticazione, database, email e pubblicazione. Chiavi nel .env.
6. Pubblicazione e test (30 min). Apri l'indirizzo online e percorri il flusso come un utente vero. Correggi una cosa alla volta, altrimenti non capisci quale intervento ha risolto cosa.

Alla fine hai una landing pubblicata, con form collegato a database ed email, e la cartella dell'agente popolata con il tuo contesto, pronta per il progetto successivo.

Se vuoi partire dal mio setup, il toolkit su GitHub contiene l'agente completo con cartelle, comandi e subagenti: lo cloni, apri una sessione di Claude Code e digiti /new-project. Conviene clonarlo di nuovo a ogni progetto, così parti da una copia pulita.