BE LEAD / Lab
Dal prompt
al sito.
Scrivi un'idea in una frase. In pochi secondi vedi il codice scriversi e un piccolo sito comporsi, blocco per blocco. È una simulazione a regole, e te lo diciamo subito.
Il simulatore
Descrivi un'idea, guarda il sito prendere forma.
Simulazione dimostrativa: il risultato è generato nel browser da regole, non da un modello AI.
Generazione
Capisco l'idea
In attesaSettore, tono, luogo e dettagli
Scelgo la direzione
In attesaTipografia, layout, motivo e icone
Scrivo il codice
In attesaJSX riga per riga, anteprima blocco per blocco
L'anteprima apparirà qui
Descrivi un'idea o scegli un esempio, poi premi Genera.
Come è fatto
Regole scritte a mano, non un modello che scrive.
Questa pagina imita quello che si vede quando si fa vibe coding: descrivi un'idea a parole e compaiono codice e sito. Qui però non lavora nessuna intelligenza artificiale. Tutto succede nel tuo browser, con un motore a regole scritto in TypeScript, senza chiamate di rete: puoi staccare la connessione e continua a funzionare.
Cosa fa il motore a regole
Il prompt viene portato in minuscolo, senza accenti, e confrontato con elenchi di parole chiave. Una parola come "osteria" vale più di "cena", e a parità di punteggio vince quella citata prima. Così escono il settore (undici possibili, dalla ristorazione alla musica), il tono (caldo, minimale, lusso, tecnico, giocoso, naturale, notturno) e alcuni dettagli: un luogo, un anno, la richiesta di prenotazioni o di corsi serali. Sono le parole che vedi evidenziate nella prima fase.
Ogni tono indica due palette tra sei e due combinazioni tipografiche fatte solo con font di sistema. Il settore sceglie icone, motivo grafico dell'hero e testi, composti da frasi scritte a mano con spazi da riempire: "sul lago", "dal 1960", "a Milano". Un seme numerico, calcolato dal testo del prompt, rende ogni variante riproducibile: stesso prompt e stessa variante danno sempre lo stesso sito.
Il codice che si scrive a sinistra, l'anteprima a destra e il file HTML da scaricare nascono dalla stessa struttura dati, quindi non possono divergere. L'anteprima è DOM vero, con uno stile confinato sotto un prefisso CSS, ridotto in scala con una trasformazione e reso responsive con le container query. La scrittura a flusso usa requestAnimationFrame, la copia la Clipboard API, il download un Blob creato sul momento. Se il sistema chiede meno movimento, il risultato compare subito.
E il vibe coding reale?
Nel vibe coding vero un modello come Claude legge la richiesta, ragiona sul contesto e scrive codice nuovo: non sceglie tra frasi già pronte. Può proporre una struttura che qui non esiste, correggersi quando gli indichi un errore, lavorare su un progetto intero con dati, pagine e logica. Il risultato però non è ancora un prodotto. Serve una persona che rilegga il codice, lo provi su dispositivi diversi, controlli accessibilità, testi e dati, e solo dopo lo pubblichi.
Anche questa pagina è nata così. In un dialogo con Claude abbiamo descritto l'esperienza, le regole e i vincoli: niente rete, niente AI finta presentata come vera, uso completo da tastiera, rispetto di chi preferisce meno animazioni. Poi abbiamo letto il codice, provato le frasi generate una per una, corretto concordanze e parole fuori posto. Il modello accelera la scrittura; le scelte e la revisione restano nostre.