Atelier — siti demo automatici per locali
Trova locali senza sito e genera una demo 3D fedele al brand, pronta per un contatto a norma.
- Node.js
- Three.js
- motion
- Lenis
- SQLite
- Cloudflare Pages
- node:test
- 1,152coppie testo/sfondo verificate su 192 palette, nessuna sotto WCAG AA
- 4 daysper due implementazioni complete, prima Codex poi Claude Code
- 100Lighthouse accessibilità, best practice e SEO sul sito di prova fittizio
Da un locale senza sito a una demo 3D
Trova un locale senza sito, trasforma foto, menu e post reali in una demo fedele al brand con una scena 3D, e gli scrive solo dopo un doppio opt-in.
Tocca un blocco per vedere cosa fa.
- Ingresso
- Logica
- Infrastruttura
- Persone
- Dati
Ingresso
Ricerca locali
Trova i locali senza sito su OpenStreetMap con l'API gratuita Overpass (Google Places è solo uno stub) e dà a ogni contatto un punteggio da 0 a 100.
- OpenStreetMap
- Overpass API
Passa a Brand DNA, CRM locale
Logica
Brand DNA
Trasforma sito, post, foto e menu reali del locale in fatti classificati; il colore d'accento è misurato sulle sue foto in OKLab, non inventato.
- OKLab
Riceve da Ricerca localiPassa a Design system
Logica
Design system
8 archetipi tenuti come dati, 7 ricette di 'gesto' contro i siti fatti in serie e una scelta tra 192 palette che emette solo coppie di testo WCAG AA.
- DESIGN.md
- WCAG AA
Riceve da Brand DNAPassa a Generatore di siti
Logica
Generatore di siti
Costruisce 12-14 sezioni da un catalogo di 16 (menu vero, galleria, recensioni con fonte, orari) più una scena 3D firma.
- Three.js
- motion
- Lenis
Riceve da Design systemPassa a Quality gate
Logica
Quality gate
Le regole R21-R35 e un controllo di ricchezza bloccano un sito senza menu vero o con meno di 6 voci in galleria; poi passano un auditor e Lighthouse.
- Lighthouse
- node:test
Riceve da Generatore di sitiPassa a Deploy su Pages
Infrastruttura
Deploy su Pages
Carica su Cloudflare Pages senza dipendenze (BLAKE3 scritto a mano), in dry-run di default; non tocca mai il DNS, quindi il token non ha permessi DNS.
- Cloudflare Pages
- BLAKE3
Riceve da Quality gatePassa a Varco del consenso
Persone
Varco del consenso
Email solo dopo che il locale conferma un doppio opt-in, imposto da un trigger SQLite; un invio reale richiede sia un flag esplicito sia la chiave API.
- Resend
- SQLite
Riceve da Deploy su PagesPassa a CRM locale
Dati
CRM locale
SQLite con 11 tabelle, 4 trigger e storico solo in aggiunta; la dashboard locale lo legge senza esporre nessun indirizzo email.
- SQLite
- node:sqlite
Riceve da Varco del consenso, Ricerca locali
Il problema
Molti buoni locali non hanno un sito, o ne hanno uno debole. Una demo già pronta sul loro brand convince più di una proposta a freddo, ma le demo fatte a mano costano troppo, e in Italia l'email promozionale di norma richiede il consenso.
Cosa ho costruito
- Ho fissato l'ordine del lavoro dopo che i primi tre siti generati erano piatti: prima una skill madre di design, poi un solo sito di prova, solo dopo altri esempi.
- Ho diretto due costruzioni complete in quattro giorni: Codex ha scritto la v1 come monorepo TypeScript, poi Claude Code con cinque agenti in parallelo ha scritto la v2, un motore Node senza framework di circa 23.000 righe.
- Ho fatto partire il motore dal locale vero: sito, post, foto e menu reali diventano fatti classificati come osservati, dedotti, sconosciuti o in conflitto, e le palette sono scelte perché ogni coppia di testo passi WCAG AA.
- Ho messo le regole legali nel database: un trigger SQLite rifiuta qualsiasi email senza un doppio opt-in confermato, gli invii partono solo dal martedì al giovedì 9:30-11:00 e ogni comando parte in dry-run.
La parte difficile
Fare il deploy su Cloudflare Pages senza dipendenze. Pages indicizza gli asset con un hash BLAKE3, che Node non ha, quindi BLAKE3 è stato scritto da zero e verificato con i vettori di test ufficiali, compreso il confine di chunk a 1.024 byte dove un'implementazione sbagliata sbaglia in silenzio.
Risultato
L'intera catena gira in locale ed è coperta da test e dry-run; il sito di prova fittizio passa il quality gate e prende 100 in Lighthouse su accessibilità, best practice e SEO. Per scelta non è uscito nulla: nessuna demo pubblicata e nessuna email inviata finché non ci sono credenziali e una revisione legale.
Il mio ruolo
Progetto personale. Ho fissato visione, vincoli e ordine del lavoro, fornito i materiali di riferimento e giudicato ogni risultato; il codice l'hanno scritto Codex (v1) e Claude Code con agenti in parallelo (v2).
