5 modi per costruire una landing con AI, dal più easy al pro

Cosa fa questo articolo. Mappa i 5 modi in cui puoi costruire una landing con l’AI nel 2026, dal più easy al pro. Per ognuno: tempo, costo, dove si rompe, lock-in, qualità percepita e per quale tipo di persona o team è adatto. Più il workflow che uso io, in dettaglio.

In sintesi, per chi ha fretta: devi pubblicare una landing per vendere un servizio, validare un’offerta, raccogliere iscritti o lanciare una campagna? Hai tre strade immediate. La costruisci internamente con un AI builder (Lovable, v0). Usi un builder visuale (Framer, Webflow). La affidi a un’agenzia. Questo articolo aggiunge due opzioni intermedie e ti aiuta a capire dove sei tu adesso. Se sei semi-tecnico o vuoi controllo evolutivo su offerte, copy e test, guarda soprattutto L2-L3.

Lo scopo è darti una bussola, non venderti il workflow giusto. Quello giusto dipende da chi sei, da quanto tempo hai, da quanta fiducia deve generare la pagina e da cosa vuoi davvero controllare dopo il go-live. Alla fine dovresti sapere in che livello stai oggi e dove ha senso muoverti, se serve.

Per consulenti, studi professionali, founder e team marketing il punto non è “fare una landing con AI”. Il punto è scegliere quanta fiducia, controllo e velocità di iterazione ti servono prima che una pagina diventi un collo di bottiglia commerciale.

I 5 livelli, in fila:

Nota · prezzi. Verificati al 25 maggio 2026 sulle pagine ufficiali. Cambiano spesso: prima di sottoscrivere qualunque tool, controlla la sua pagina pricing aggiornata. La maggior parte dei tool sotto fattura in USD anche se sei in Italia.

Per scegliere veloce, in base a dove sei:

• Sei studente o aspirante operatore con budget $20-30/mese? Parti da v0 o Bolt: sono rapidi, costano poco, ti fanno capire se la promessa interessa. Non trasformarli subito nel tuo sito definitivo.
• Sei professionista (commercialista, avvocato, notaio, medico, architetto) con sito fermo da anni? L1 (Framer o Webflow) se ti serve una presenza sobria, chiara e aggiornabile senza codice; L4 se il sito deve gestire SEO locale, campagne, privacy, tracking, moduli di contatto e responsabilità contrattuale.
• Sei freelance designer con clienti che cambiano idea su offerta, headline, pricing o prova sociale? Framer (L1) ti dà la velocità di iterazione visuale che nessun altro livello regge.
• Sei consulente boutique, advisor o founder e pubblichi 2-3 landing l’anno per offerte, nicchie o campagne diverse? L2 o L3, scegli in base a quanto vuoi controllare copy, test, performance e manutenzione.
• Sei marketing/ops in una PMI strutturata 25-200 persone? L1 per landing tattiche che il team deve aggiornare spesso + L4 per sito corporate, campagne integrate, CRM, tracking e governance.

L0 — AI page builder (un prompt, una landing)

Scrivi una frase in inglese, premi invio, dopo qualche minuto hai una landing pubblicata. Sono i tool che hanno reso famosa la parola “vibe coding”. Lovable, v0, Bolt, Replit sono tutte applicazioni web che generano codice e lo deployano automaticamente.

Cosa esce davvero. Una landing che funziona, hostata in un’ora. La velocità è reale, il prezzo entry-level è basso, il barrier-to-try è quasi zero.

Dove si rompe, l’estetica AI-looking. Tutti questi tool ricadono per default sulla stessa combinazione: shadcn/ui (una libreria di componenti React molto diffusa) più Tailwind, palette HSL viola/blu, hero centrato con sfondo a gradient mesh, 3 card “feature” con icone outline Lucide, 3 testimonial circolari con quote in italic. Per un test veloce non è un problema. Se stai comprando traffico o chiedendo fiducia a un cliente B2B, quei pattern diventano un segnale debole.

Per chi è L0. Hai bisogno di una landing per testare un’idea in 48 ore: una promessa, una waitlist, un lead magnet, un nuovo servizio. La pagina non è ancora il tuo asset reputazionale principale.

Per chi NON è L0. La tua landing è il primo filtro di fiducia per clienti, pazienti, imprese o buyer B2B. Devi apparire solido, chiaro sulle competenze e attento a privacy, tono e prova. Il copy default rischia di farti sembrare intercambiabile proprio quando dovresti creare fiducia.

L1 — No-code + AI assist (design-first, builder visuale)

Builder visuali che esistono da prima dell’AI, su cui oggi è stato innestato uno strato di funzioni generative. Il punto qui non è “AI fa la landing”, è “lavoro dentro un builder visuale, l’AI mi aiuta a velocizzare sezioni e copy”.

Cosa esce davvero. Una landing con design coerente al tuo brand, perché tu hai scelto fonti, colori, layout. L’AI ha aiutato con copy, sezioni, immagini. Il risultato può sembrare curato e credibile per una prima call commerciale, a patto che positioning e copy non restino generici.

L’ecosistema reale di un designer Framer nel 2026. Non lavora solo con Framer: la pipeline tipica è Figma → Relume (libreria di sezioni AI-generated) → Framer per il polish finale. Plugin come Anima e Locofy traducono da Figma in modo più o meno fedele. Workshop e Wireframer (dentro Framer) generano sezioni intere rispettando le variabili di brand. Animazioni scroll-linked, parallax stratificato, page transitions native: fatte in 10 minuti senza scrivere una riga. Nei livelli 2-3 le stesse animazioni richiedono GSAP + Lenis + qualche ora.

Il vero peso quotidiano, però, non sono le animazioni: sono CMS Collections, form nativi e interactions stateful (hover, click, drag) tutti integrati nel canvas. Quando devi cambiare headline, prova sociale, form, pricing, lead magnet o una sezione di campagna, lo fai senza aprire un ticket dev. È questo che fa di L1 una destinazione, non una stazione di passaggio. Conosco freelance designer che fatturano €4-8k a landing su Framer/Webflow e non hanno mai aperto un terminale. Va benissimo così.

Dove si rompe, il lock-in di hosting. Stai costruendo sul terreno di qualcun altro. Framer chiude, Webflow alza i prezzi, Wix cambia policy: sei vulnerabile. Per landing tattica va benissimo. Per un’azienda che vuole controllare il proprio sito strategicamente nel lungo termine, è un rischio da pesare.

Per chi è L1. Studio professionale, freelance designer, consulente, boutique advisor o founder che vuole una landing credibile senza mantenere codice. Hai 1-3 giorni da investire, vuoi autonomia sul contenuto e devi iterare messaggi, offerte o campagne velocemente.

Per chi NON è L1. Vuoi pieno controllo su hosting, performance, tracciamenti, privacy, SEO tecnica e continuità nel lungo periodo. Oppure hai policy interne che non permettono piattaforme chiuse.

L2 — AI code-assist (IDE con copilot, senza full agent)

Qui scrivi codice tu, ma l’AI è dentro l’editor: completa righe, suggerisce intere funzioni, fa refactor su comando. Il livello dove la maggior parte degli sviluppatori tech vive nel 2026.

Se non scrivi codice, leggi L2 come criterio per capire cosa chiedere a un freelance o a un partner tecnico: proprietà del codice, hosting, performance, manutenzione, tracking e integrazioni.

Cosa esce davvero. Codice tuo, stack a scelta, nessun lock-in di hosting. Tempi più lunghi di L0/L1 ma controllo pieno e capacità evolutiva.

Dove si rompe, la curva di apprendimento. Devi sapere cos’è un componente React, una build pipeline, come fare deploy. L’AI aiuta ma non sostituisce le basi. Se non hai mai gestito repository, deploy e review, L2 richiede qualche giorno di onboarding prima di diventare davvero produttivo.

Per chi è L2. Sviluppatore o tech-fluent che vuole controllo e autonomia. Founder semi-tech o consulente operativo che vuole pubblicare landing, lead magnet e pagine verticali senza dipendere ogni volta da builder o agenzie. Designer che ha imparato un po’ di codice e vuole superare i template Framer.

Per chi NON è L2. Non hai mai aperto un terminale e non vuoi imparare deploy, repository e build pipeline adesso. Non sentirti meno per questo: L0 e L1 esistono apposta, sono scelte legittime.

L3 — Agenti orchestrati (il workflow che uso io)

Da qui in poi entriamo nei dettagli del workflow che uso io. Se sei in L0 o L1 puoi anche saltare a “L4” più in basso. Leggi L3 se vuoi capire come trasformare una landing in un processo ripetibile di positioning, design review, copy review e iterazione su conversione.

L’idea base

Claude Code è un harness (l’ambiente che ospita ed esegue gli agenti AI), non un singolo agente. Dentro una sessione lancio decine di sub-task in parallelo, ognuno con un prompt specializzato per fare una cosa specifica: un designer che valuta motion, un copywriter che pensa come un commercialista, un altro come un avvocato, un code reviewer che cerca pattern AI-looking, un risk auditor. Per un advisor o founder i sub-task più utili sono spesso: ICP review, obiezioni di fiducia, chiarezza dell’offerta, ansia sul prezzo, buchi di prova, attrito sulla CTA.

Onestà tecnica · cosa sono davvero i “subagent specializzati”. Sono Task invocations con persona diversa nel prompt. Non hanno pesi isolati né memoria separata: la specializzazione vive nel prompt, non nel modello. L’effetto operativo è simile a un team di review (ognuno vede solo il proprio compito, tu fai la sintesi), ma tecnicamente è un singolo modello che recita N ruoli su contesti disgiunti. Chi ti racconta che “Claude Code orchestra agenti diversi” sta facendo marketing, non architettura.

Codex entra dopo, in sessione separata, come second opinion sul copy critico (H1, hero above-the-fold, CTA). Bias di training diversi tra Claude e Codex significa doppia conferma quando convergono, dissenso utile quando divergono. Il punto di L3 non è “avere più agenti”: è produrre più direzioni di messaggio e visual, farle criticare da ICP diversi, poi convergere su una pagina più credibile prima di mandarle traffico.

Attenzione · GDPR e segreto professionale. Wispr Flow, Claude Code e Codex inviano dati a server US (Anthropic, OpenAI, Wispr Inc.). Se sei commercialista, avvocato, medico o lavori per una società regolata, non dettare/incollare dati personali di clienti o coperti da segreto professionale senza DPA firmati con i provider e una base giuridica adeguata. Per uso interno su contenuti tuoi (brief landing, copy marketing, codice senza dati cliente) non c’è problema. Per uso su dati cliente o paziente, parla prima con il tuo DPO.

Il workflow a colpo d’occhio

flowchart LR
  V["Brief vocale"] --> CC["Claude Code"]
  CC -->|parallel| D["Designer / mockup"]
  CC -->|parallel| I["Review per ICP"]
  CC -->|parallel| R["Code reviewer"]
  D --> ME{"Tu decidi"}
  I --> ME
  R --> ME
  ME -->|baseline| P["Port a Astro"]
  P --> PL["Polish iterativo"]
  PL -->|copy critico| CX["Codex"]
  CX --> PL
  PL --> LIVE["Landing live"]

5 step

1. Brief vocale + decomposizione. Apro Wispr Flow e detto a voce libera quello che voglio. Senza dettatura impiegherei il doppio del tempo. Claude Code riformatta la trascrizione in brief strutturato. Se l’H1 esce generico (succede sempre alla prima passata), uso il prompt “Decomposizione H1 in 4 nomi” scaricabile in fondo: mi forza a scrivere Costruisco X per chi gestisce {n1, n2, n3, n4} dove i 4 sono problemi concreti del cliente ideale, non categorie astratte: urgenze, dubbi, criteri di fiducia e motivi per cui rimanda il contatto.

2. Mockup batch in parallelo. Una sessione Claude Code, N sub-task spawnati in parallelo nello stesso turno, ognuno costruisce UN mockup HTML statico con una direzione visuale diversa. Una sessione di 30-45 minuti che produce 24 varianti contemporaneamente, non 24 ore di lavoro sequenziale. Per ForPros ho iterato 24 mockup prima del north star (il riferimento visuale finale). Per AMI 14. Per Glamping 4. Tutti standalone, niente framework.

3. Review per ICP in parallelo. Sub-task ulteriori, uno per ogni profilo target. Esempi dai miei log reali: Round 3 · commercialista, Round 3 · avvocato, Round 3 · marketer, PMI entrepreneur review, Senior designer/UX consultant, Red-team hidden risks. Ognuno non vede il contesto degli altri. Tornano 5-7 report. Tu fai il merge perché la scelta finale è strategica: quale promessa regge, quale pubblico vuoi attrarre, quale rischio reputazionale accetti.

4. Port a Astro. Mockup baseline locked, si passa a una sessione singola lunga (90-120 minuti) per il port a Astro. Skill custom che uso: image-to-code, scaricabile insieme alle altre 4 in fondo come skills.zip.

5. Polish iterativo + Codex su copy critico. Polish in commit atomici. Cronologia reale di Midas: 31 commit in 2 giorni. Quando il copy sta per andare pubblico, apro Codex in sessione separata col prompt prompt-codex-copy-review.md (scaricabile in fondo).

Costo reale L3

Tutti i prezzi sotto sono in USD (i tool fatturano in dollari anche dall’Italia):

Aggiungi al totale fisso le tue ore al costo opportunità che ti sei dato. Per un consulente, il costo vero non sono i tool: sono 30-60 ore che potresti fatturare. L3 ha senso quando quelle ore costruiscono un asset riusabile: workflow, prompt, componenti, pagine verticali, non una singola landing isolata.

L4 — Agenzia tradizionale

Human-led nel processo principale: strategy, design e sviluppo restano responsabilità di un team, anche se l’AI può essere usata come acceleratore interno. Budget €5.000-15.000 per landing seria, 6-8 settimane. Per organizzazioni con bisogno strutturato.

L4 non vende ore di build. Vende un pacchetto strategico che L0-L3 non possono sostituire:

• Brand strategy e naming a monte (workshop discovery, positioning, narrative)
• Ricerca competitive documentata, A/B testing strutturato post-launch
• Accountability contrattuale: SLA chiari, penali in caso di mancato delivery, DPA firmata per il trattamento dati
• Integrazione martech: connettori CRM (HubSpot, Salesforce), automazione marketing, tracking server-side
• Revisione di tono e claim: niente promesse eccessive, niente copy aggressivo, messaggi compatibili con reputazione e deontologia
• Privacy e lead intake: form, consenso, tracking e gestione richieste progettati prima del go-live
• Governance multi-stakeholder: gestione di approvazioni cross-funzionali (CMO + Legal + IT + CFO), revisioni iterate con il board
• Handover documentato: il sito resta mantenibile dal team interno o da agenzia terza

Quando L4 ha senso nel 2026. Quando il sito è parte di un rebrand più ampio. Quando devi rispondere a un board, non a te stesso. Quando la landing deve sostenere una vendita ad alto valore, una promessa delicata o un progetto che non puoi permetterti di validare con copy approssimativo. Quando l’integrazione con il martech aziendale è non banale. Quando ti serve un partner che si prende responsabilità contrattuale del risultato.

Quando L4 non ha senso. Quando il sito è una landing tattica con vita 6-12 mesi, quando il decisore unico sei tu, quando il volume di iterazioni che farai dopo il go-live è alto (un’agenzia è ottimizzata per il delivery, meno per la manutenzione evolutiva).

Parametri tipici di un progetto L4 (ordini di grandezza, mercato IT 2026):

Non c’è una gerarchia “L3 batte L4”. Ci sono due strumenti che fanno cose diverse. La maggioranza delle PMI strutturate italiane (25-200 persone) usa L4 per il sito corporate strategico + L1 (Framer/Webflow interno) per landing tattiche di campagna, e fa benissimo. Un freelance L3 entra spesso in affiancamento a L4 per training del team interno, non in competizione.

Come riconosci una landing AI-looking: 3 spie

Per chi è arrivato fin qui e vuole evitare il default. Il problema non è “sembrare fatto con AI” in astratto. È sembrare generico, intercambiabile o poco affidabile nel momento in cui una persona deve decidere se contattarti. Questi sono i segnali che identificano “fatto con Lovable/v0/Bolt” a colpo d’occhio:

1. Stack visivo shadcn/ui più Tailwind: card con rounded-lg, border sottile, palette HSL viola/blu, button primary nero o bianco font-medium. Se vedi tutto questo insieme è quasi sempre AI-generated.
2. Hero centrato con grid radiale o gradient mesh in background, sotto-headline in inglese tipo “Build X faster with AI”, due CTA “Get Started” + “Learn More” affiancati.
3. 3 card feature con icone outline Lucide identiche, più 3 testimonial avatar circolari con quote in italic. Pattern viene gratis da v0.

Per Framer la firma è diversa: animazioni reveal-on-scroll, tipografia editorial (Inter o Geist), immagini sticky che scrollano. Si chiama “Framer template”.

Migration path tra livelli

Se parti da un livello e vuoi salire, quanto duole:

Regola pratica: più ti sposti verso L2/L3, più il codice è davvero tuo. L0 dà velocità più lock-in (soft o duro). L1 dà design quality più lock-in di hosting. L2/L3 danno controllo più zero lock-in, ma devi saperci stare. La domanda non è solo “quanto controllo tecnico voglio?”, ma “quanto spesso cambierò offerta, pubblico, copy e proof dopo il go-live?”.

Dove l’AI si rompe: 3 gotcha tecnici

Se non tocchi codice, salta direttamente al “Glossario veloce” sotto. Se però stai valutando L2/L3 con un collaboratore tecnico, questi sono esempi concreti del tipo di problemi che vuoi saper riconoscere, anche senza risolverli tu.

1. Astro View Transitions perde data-theme su page swap

Sintomo: dark mode applicato, click su link interno, nuova pagina light. Causa: ClientRouter sostituisce gli attributi di <html> durante lo swap.

(function () {
  function resolveTheme() {
    var stored = localStorage.getItem("forpros-theme");
    if (stored) return stored;
    return window.matchMedia("(prefers-color-scheme: dark)").matches
      ? "dark"
      : "light";
  }
  document.documentElement.setAttribute("data-theme", resolveTheme());
  document.addEventListener("astro:before-swap", function (event) {
    event.newDocument.documentElement.setAttribute(
      "data-theme",
      resolveTheme(),
    );
  });
})();

2. MDX strippa class= su HTML inline complesso

In Astro Markdown standard, <figure><img class="theme-light" ... /></figure> perde gli attributi class. Risultato: niente swap dual-mode. Fix: rinomina .md in .mdx e aggiungi @astrojs/mdx come integration.

3. MDX wrappa il content del figcaption in <p>

Il <p> interno eredita font-size: 17px dalla regola prose, ignorando il 12px impostato sul figcaption. Fix: targetare entrambi nel CSS.

.res-prose :global(figcaption),
.res-prose :global(figcaption p) {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

I numeri reali (solo L3)

Dal git log e dalle sessioni Claude Code degli ultimi 60 giorni:

I numeri “sub-task” e “ore” sono stime aggregate dalle sessioni: non misurate al secondo. Le metriche git e Codex sono invece esatte e verificabili (lo zip dei 24 mockup di forpros è in fondo).

I 3 siti live, da guardare dal vivo

Niente screenshot statici: gli effetti scroll-driven e le animazioni si vedono solo nel browser. Clicca per aprire in nuovo tab.

Glossario veloce

Termini usati in questo articolo che potrebbero non essere ovvi:

• AI page builder: applicazione web in cui scrivi un prompt e ti esce un sito completo (Lovable, v0, Bolt, Replit).
• No-code builder: applicazione visuale tipo PowerPoint per fare siti senza scrivere codice (Framer, Webflow, Wix, Squarespace).
• IDE: l’ambiente in cui uno sviluppatore scrive codice (esempio: Visual Studio Code).
• AI code-assist: AI integrata dentro un IDE che suggerisce codice mentre scrivi (Cursor, Cline).
• Sub-task / Task: invocazione di un agente AI con un prompt specifico, lanciata dentro la sessione principale di Claude Code.
• Harness: l’ambiente che ospita ed esegue un agente AI. Claude Code è un harness, non l’agente in sé.
• MDX: Markdown esteso che permette HTML/componenti React/Astro inline nel testo.
• View Transitions: API browser nativa che permette transizioni smooth tra pagine senza full reload.
• ICP: Ideal Customer Profile, il profilo del cliente ideale di un prodotto o servizio.
• North star: il riferimento visivo finale scelto come baseline, dopo aver iterato N varianti.
• Lock-in: dipendenza tecnologica da un fornitore. Più alto è il lock-in, più è doloroso cambiare strumento dopo.
• BYO API key: “bring your own API key”. Tool dove paghi tu direttamente al provider AI (Anthropic, OpenAI) le sue tariffe d’uso, invece di un abbonamento fisso al tool.
• Baseline: la versione “scelta” su cui si itera, dopo aver scartato le alternative. Stesso concetto di “north star” ma applicato al risultato già locked.
• Vibe coding: termine 2024-2026 per “costruire software descrivendolo in linguaggio naturale a un’AI”. Non un metodo ingegneristico, un’attitudine.
• Core Web Vitals: le metriche con cui Google misura la performance di un sito (caricamento, interattività, stabilità visiva). Influenzano SEO.
• Pull request: la richiesta di unire le tue modifiche al codice principale del progetto. È il punto in cui altri rivedono il tuo lavoro prima che entri in produzione.
• DPO / DPA: il DPO (Data Protection Officer) è il responsabile privacy in un’organizzazione. Il DPA (Data Processing Agreement) è il contratto che regola cosa il fornitore può fare con i tuoi dati.

Workflow del venerdì

Ogni venerdì in newsletter pubblico un workflow operativo come questo: un caso reale, replicabile, con numeri concreti e i punti dove l’AI ha sbagliato.

Se vuoi riceverli, il modulo è in fondo alla home. Una mail a settimana, niente di più.

Se devi scegliere lo stack per una landing, migliorare una pagina che non converte o costruire un workflow per pubblicare campagne e contenuti con continuità, vendo consulenza a tempo in quattro formati. Una chiamata di un’ora per decidere quale livello scegliere. Un audit del workflow se sei già in L2 ma non scala. Un setup completo del workflow L3 dentro la tua organizzazione. Un’advisory continua mensile per chi pubblica landing/contenuti in continuo. Prezzi e termini espliciti su /lavora-con-me. Per scrivermi direttamente: michele@forpros.it.

Nota di trasparenza. Nessuna affiliazione commerciale con i tool citati in questo articolo. Le menzioni si basano su uso diretto (L3) o su research pubblica verificata (L0-L2). Prezzi verificati al 25 maggio 2026: cambiano spesso, controlla sempre la pagina pricing ufficiale del tool prima di sottoscrivere.