Forge: il compilatore deterministico che cambia il modo di fare siti con l’IA

Ogni builder di siti con l’IA funziona allo stesso modo: scrivi un prompt, un LLM scrive l’HTML e ottieni quello che ti dà. A volte è buono. A volte no. Premi di nuovo "genera" e ottieni qualcosa di completamente diverso: un altro layout, altri colori, un’altra qualità. Il risultato è, in sostanza, imprevedibile.

Noi abbiamo lanciato quel modello. Funzionava. Con quello le persone hanno creato siti veri. Ma guardando generare migliaia di siti è emerso uno schema: l’LLM spendeva la maggior parte dei suoi token a reinventare cose che non avrebbe dovuto decidere. Sistemi di navigazione. Contrasto dei colori. Breakpoint per il mobile. Link di ancoraggio. Caricamento dei font. Markup del modulo di contatto.

Ogni generazione era un nuovo lancio di dadi su problemi che hanno risposte corrette.

Forge è la nostra risposta a questa osservazione. Non è un miglioramento incrementale: è un’architettura radicalmente diversa per il modo in cui l’IA costruisce i siti.

Il problema di lasciare che l’IA scriva HTML grezzo

Quando chiedi a un LLM di "creare un sito per una barberia", deve prendere migliaia di decisioni contemporaneamente: quali sezioni includere. In che ordine metterle. Come appare la navigazione. Quali colori usare. Come gestire i layout per il mobile. Come caricare i font. Come collegare i link di ancoraggio. Come strutturare l’HTML in modo semantico. Come gestire i rapporti di contrasto. Come formattare gli orari di apertura. Come rendere un numero di telefono un link cliccabile.

Alcune di quelle decisioni sono creative: quali sezioni includere, quale tavolozza di colori si addice a una barberia, quale deve essere l’atmosfera generale.

La maggior parte sono ingegneria: la navigazione deve scorrere fino ad ancore reali, il rapporto di contrasto deve essere almeno 4,5:1, il numero di telefono deve essere in formato E.164, il font deve essere caricato da Google Fonts con preconnect, il layout mobile deve impilarsi in verticale sotto i 480px.

Quando lasci che l’LLM gestisca entrambe le cose, le decisioni creative sono buone ma quelle ingegneristiche sono incoerenti. Alcune generazioni hanno un contrasto perfetto. Altre no. Alcune hanno link di ancoraggio funzionanti. Altre hanno href morti che puntano a sezioni che non esistono. Alcune caricano i font correttamente. Altre incorporano un font-face che non si risolve mai.

L’intuizione alla base di Forge: separare le decisioni creative da quelle ingegneristiche. Lasciare la creatività all’IA. Lasciare la correttezza a un compilatore.

L’architettura in due fasi

Forge divide la generazione di un sito in due fasi distinte:

Fase 1: l’IA decide cosa costruire (SiteSpec)

Invece di scrivere HTML grezzo, l’IA produce una specifica strutturata, un documento JSON che chiamiamo SiteSpec. La SiteSpec descrive quali sezioni deve avere il sito, quali contenuti vanno in ciascuna sezione, quali devono essere la tavolozza dei colori e la tipografia, come appare la navigazione e qual è il trattamento di design complessivo.

L’IA prende tutte le decisioni creative: l’estetica deve essere scura e lussuosa oppure luminosa ed editoriale? La sezione iniziale deve usare un font per titoli condensato come Bebas Neue o un elegante serif come Cormorant Garamond? Le sezioni devono includere una galleria, una fascia di statistiche, una FAQ o una griglia del team?

Ma l’IA NON decide come renderizzare niente di tutto questo. Non scrive una sola riga di HTML o CSS. Descrive l’intenzione.

Fase 2: il compilatore lo renderizza alla perfezione (ogni volta)

La SiteSpec viene passata a un compilatore deterministico, una funzione pura che prende una specifica e un playbook e produce un HTML autonomo e di livello professionale. Lo stesso input produce sempre lo stesso output.

Il compilatore si occupa di ogni decisione ingegneristica:

• Ancore di navigazione: ogni link di navigazione punta a una sezione reale. Le ancore morte sono impossibili; il compilatore riconcilia ogni #href con gli ID effettivi delle sezioni.
• Sicurezza del contrasto: il contrasto tra testo e sfondo viene controllato e imposto secondo WCAG AA (4,5:1). L’IA sceglie la tavolozza; il compilatore garantisce la leggibilità.
• Alternanza delle superfici: due sezioni adiacenti non hanno mai la stessa tonalità di sfondo. Il compilatore alterna in automatico le superfici di base e secondarie per creare ritmo visivo.
• Normalizzazione dei contatti: i numeri di telefono vengono formattati in E.164 per i link tel:, i canali WhatsApp vengono rilevati automaticamente, orari di apertura e indirizzi vengono sistemati. Ogni dato di contatto funziona come un vero link cliccabile.
• Caricamento dei font: i Google Fonts vengono caricati con preconnect e display-swap. Nessun font-face rotto, nessuno spostamento del layout.
• Layout responsive: ogni blocco viene renderizzato correttamente ai breakpoint mobile, tablet e desktop. L’IA non sceglie i breakpoint; li impone il compilatore.
• Sintesi di piè di pagina e navigazione: se l’IA omette un piè di pagina o la navigazione (cosa che fa risparmiare token), il compilatore li ricava dalle sezioni esistenti. Nel risultato finale non manca mai nulla.

Perché è importante: velocità e determinismo

Velocità

Dato che l’IA produce dati strutturati invece di HTML grezzo, l’output è molto più piccolo. La generazione di una pagina HTML completa richiede da 15.000 a 25.000 token di output dell’LLM. Una SiteSpec per lo stesso sito ne richiede da 4.000 a 6.000: una riduzione di 3–4 volte. Questo si traduce direttamente in una generazione più veloce (meno di 90 secondi per un sito completo) e in costi più bassi.

Determinismo

Il compilatore è una funzione pura. Data la stessa SiteSpec, produce sempre lo stesso HTML. Questo significa:

• Modificare è sicuro. Quando cambi il titolo di una sezione nell’editor visivo, cambia solo quella sezione. Il compilatore rigenera la specifica e il resto del sito è identico. Nessun effetto collaterale a cascata.
• La qualità è garantita. Contrasto, ancore, formattazione dei contatti, caricamento dei font: tutto è corretto a ogni singola generazione, non solo qualche volta.
• Testare è possibile. Un motore deterministico può essere valutato in modo sistematico. Eseguiamo controlli automatici su contrasto dei colori, integrità delle ancore, varietà dei blocchi e varianza del design tra le generazioni.

Creatività con dei limiti

Ecco l’intuizione controintuitiva: i vincoli rendono l’IA più creativa, non meno. Quando l’LLM è libero dallo scrivere HTML e CSS standard, spende tutto il suo budget di token sulle decisioni che contano davvero: la scelta delle sezioni, la strategia dei contenuti, il trattamento di design, la teoria del colore. Il risultato creativo è migliore proprio perché la parte ingegneristica è gestita.

Il sistema dei Playbook

Il compilatore non ha scritto nel codice il modo in cui viene renderizzato ogni blocco. Prende invece un Playbook, un modulo che definisce la libreria dei blocchi (come ogni tipo di sezione viene renderizzato in HTML/CSS), il sistema di risoluzione del design (come vengono risolte tavolozze e tipografia) e il foglio di stile di base.

Cambia il playbook e la stessa SiteSpec viene renderizzata in un linguaggio visivo completamente diverso. Il motore resta lo stesso. I blocchi cambiano. È ciò che rende Forge estensibile: nuovi tipi di sezione, nuovi trattamenti di design, nuove strategie di rendering, il tutto senza toccare il nucleo del compilatore.

Oggi il playbook del generatore di siti include oltre 26 tipi di blocco distinti, dalle sezioni iniziali agli elenchi di servizi, fino a fasce di statistiche, gallerie, FAQ, griglie del team, marquee, inviti alla prenotazione e altro ancora. L’IA sceglie da questa libreria in base al tipo di attività e ai contenuti, e il compilatore li renderizza con precisione al pixel.

Come è nato Forge

Forge non è nato da un grande piano. È nato da un prototipo, un solo file compile.mjs che prendeva una specifica JSON scritta a mano e la renderizzava in HTML. La domanda era semplice: se definissimo noi i blocchi e lasciassimo all’IA il compito di riempirli di contenuto, il risultato sarebbe migliore dell’HTML grezzo di un LLM?

Lo era. Enormemente migliore. Il prototipo renderizzava il sito di una barberia con contrasto perfetto, navigazione funzionante, caricamento corretto dei font e un’estetica coerente scura e dorata, tutto a partire da una specifica JSON che era una frazione delle dimensioni dell’HTML equivalente.

Da lì l’architettura ha preso forma:

1. Il prototipo è diventato un motore tipizzato e privo di framework, importabile da qualsiasi runtime JavaScript senza dipendenze da React, Next.js o dagli interni di SiteDrop.
2. I renderer dei blocchi scritti nel codice sono diventati un sistema di Playbook componibile: ogni playbook definisce i propri blocchi, token di design e CSS.
3. L’integrazione con l’LLM è passata dall’output in HTML grezzo all’uso strutturato di strumenti (lo schema della SiteSpec È lo schema dello strumento: insegna al modello cosa produrre e allo stesso tempo vincola la forma dell’output).
4. Uno schema che si documenta da solo ha sostituito il tradizionale prompt di sistema: le descrizioni dello schema insegnano all’IA cosa significa ogni campo, così la "grammatica" sono poche righe.
5. I controlli di qualità (verifica del contrasto, riconciliazione delle ancore, alternanza delle superfici, normalizzazione dei contatti) sono stati integrati nel compilatore, in modo da essere eseguiti a ogni generazione e non come post-elaborazione facoltativa.

Il risultato è un motore indipendente dal fornitore (funziona con Claude, GPT, Gemini, DeepSeek, xAI, qualsiasi modello che supporti l’output strutturato), privo di framework (estraibile come pacchetto autonomo) e deterministico (stessa specifica → stesso HTML, sempre).

Cosa significa per te

Se usi SiteDrop, Forge è già in funzione quando generi un sito. Non devi fare nulla di diverso: il miglioramento sta nella qualità, nella velocità e nella coerenza del risultato:

• Generazione più veloce: i siti vengono generati in meno di 90 secondi perché l’output dell’IA è 3–4 volte più piccolo.
• Qualità costante: ogni generazione ha un contrasto corretto, una navigazione funzionante, un caricamento dei font adeguato e recapiti formattati.
• Maggiore varietà di design: l’IA sceglie tra oltre 26 tipi di blocco, oltre 4 archetipi di design e un’ampia gamma di abbinamenti tipografici. Una barberia ottiene un’estetica scura e condensata; uno studio dentistico un’atmosfera pulita ed editoriale; un ristorante di alta cucina un trattamento serif di lusso.
• Modifiche più sicure: l’editor visivo modifica la SiteSpec e la rigenera tramite il compilatore, quindi i cambiamenti sono prevedibili e privi di effetti collaterali.

Dove andrà Forge

L’architettura del compilatore è la base di tutto ciò che stiamo costruendo. Poiché il motore è guidato dalla specifica, ogni nuova funzionalità è un nuovo tipo di blocco, un nuovo playbook o un nuovo token di design, non una riscrittura della pipeline di generazione. Questo è il potere della separazione: l’IA diventa più brava a decidere, il compilatore diventa più bravo a renderizzare, ed entrambi migliorano in modo indipendente.

Crediamo che questo schema in due fasi (l’IA per l’intenzione, il compilatore per l’esecuzione) sia il modo in cui verranno costruite le applicazioni web in futuro. Non solo siti di una pagina, ma applicazioni multipagina, dashboard ed esperienze interattive. L’IA descrive ciò che deve esistere. Il compilatore garantisce che funzioni.