Tool di Attrazione
Costruisci quattro web app con Claude Code o Lovable: quiz, face scan che lavora solo nel browser, generatore di referenze, calcolatore. Tutte online e collegate al CRM.
Sette lezioni, quattro app
- L01 · Perché batte un PDFRisultato immediato → contatto → sequenza.
- L02 · Quiz di valutazione8 domande, 3 profili, form. Claude Code o Lovable.
- L03 · Face scan benessere in-browserIl più delicato: nessuna immagine esce dal browser.
- L04 · Generatore di referenzeUn link per cliente, click e contatti contati.
- L05 · Calcolatore personalizzatoEuro e giorni. Il più rapido da costruire.
- L06 · Pubblica e collegaRailway, tag source, CRM, sequenze dedicate.
- L07 · SFIDA: 3 strumenti pubblicati3 indirizzi pubblici che funzionano.
Meglio di un PDF
Obiettivo: capire il meccanismo "risultato subito → contatto → sequenza" e scegliere quali strumenti costruire.
Cosa cambia per la persona
Lascia l'email al buio. Poi forse apre il PDF, forse lo legge. Nel CRM arriva un indirizzo e basta.
Ordine: fiducia → contatto → valore (forse)
Risponde a 8 domande e vede subito il risultato. Lascia l'email per riceverlo completo. Nel CRM arrivano profilo e risposte: il contatto è già qualificato.
Ordine: valore → contatto → sequenza dedicata
Dallo strumento alla sequenza
ogni nodo si accende con → · nodo 04-06 già costruiti nei Moduli 3 e 7
Tre strumenti per il tuo prodotto
Sei un progettista di strumenti interattivi per prodotti di benessere venduti online in Italia, nel rispetto di AGCM e delle policy delle aziende di vendita diretta. Vendo [prodotto] di [nome azienda] a [persona]. Angolo validato: [angolo]. La mia Compliance Card dice: [cosa posso dire, sconti sì/no, premi referral sì/no]. Proponi 3 strumenti tra: quiz di valutazione (8 domande → 3 profili), calcolatore (numeri → risultato), face scan benessere in-browser (solo intrattenimento, nessun salvataggio), generatore referenze. Per ognuno: 1. Nome e domanda-gancio (max 8 parole). 2. Meccanismo: cosa inserisce la persona, cosa riceve subito, cosa riceve via email dopo il contatto. 3. I 3 risultati possibili con un consiglio di routine secondo etichetta, senza diagnosi né promesse. 4. Il rischio di compliance principale e come lo neutralizzo. 5. Tempo di costruzione stimato con Claude Code e cosa preparare. Vincoli: nessuno raccoglie o deduce dati sanitari (peso, patologie, farmaci, gravidanza); nessun risultato suona come diagnosi o promessa; nessun riferimento a guadagni. Chiudi con la tabella: strumento → tag source → tema delle 3 email dedicate.
Non chiedere
- "Hai problemi di sonno?"
- "Quanto vorresti pesare?"
- "Prendi farmaci?"
Chiedi invece
- "A che ora finisce davvero la tua giornata?"
- "Quanti giorni a settimana pranzi fuori?"
- "Dove accenderesti il diffusore per prima?"
Il quiz di valutazione
Obiettivo: un quiz di 8 domande che assegna uno di 3 profili, dà un consiglio di routine e manda il contatto a /api/lead con source: "quiz".
Una domanda per schermata
8 domande, matrice punti, 3 profili
Sei un esperto di quiz di profilazione per prodotti di benessere, attento ad AGCM e GDPR art. 9 (nessun dato sulla salute). Quiz: "[domanda-gancio]" per [prodotto] di [nome azienda], rivolto a [persona]. Uso secondo etichetta: [uso da etichetta]. Varianti: [varianti prodotto]. Produci: 1. 3 profili di routine (non di persona, non di salute): nome breve, 2 frasi, variante consigliata e modo d'uso secondo etichetta, un consiglio pratico che non richiede il prodotto. 2. 8 domande a scelta multipla, 3-4 risposte ciascuna; ogni risposta dà 0-3 punti a ciascun profilo (matrice esplicita). Temi: abitudini, orari, spazi, preferenze sensoriali, contesto, tempo, esperienza precedente, ostacolo principale. VIETATO: sonno come problema, stress come condizione, dolori, peso, patologie, farmaci, gravidanza, diete. 3. Regola di calcolo: somma per profilo, vince il massimo; parità risolta con le domande 1, 3, 5. Un esempio numerico. 4. Pagina risultato per profilo (120-160 parole): titolo "Il tuo profilo: …", routine in 3 passi, dove entra [prodotto] secondo etichetta, la frase obbligatoria "Questo quiz è uno strumento educativo e di intrattenimento: non è una valutazione medica né un consiglio sanitario.", CTA "Ricevi la routine completa via email". 5. Testi del form: campi, checkbox consenso email (obbligatoria) e SMS (facoltativa), riga privacy, bottone. 6. Schermata di ringraziamento. Formato: JSON valido con chiavi profili, domande, regola, risultati, form, grazie; poi una tabella leggibile delle 8 domande.
Claude Code costruisce quiz.html
Nel repo nm-os/ (Express con POST /api/lead che accetta { nome, email, phone,
email_consent, sms_consent, source, risposte, referral_code, event_id })
crea public/quiz.html: single-file, CSS e JS inline, font Google Unbounded /
Inter / JetBrains Mono, nessuna libreria. Metti il JSON dei contenuti in una
costante QUIZ in cima allo script.
Design System: sfondo #05060A, card #0C0E16, bordi rgba(255,255,255,.08),
testo #F5F7FA, accento lime #C8FF00 (bottoni pill, testo scuro), violet
#8B5CF6 per barra di avanzamento e badge profilo, radius 16px, fade-up 400ms.
Mobile-first, max-width 640px, touch target ≥ 44px.
Flusso: intro con la domanda-gancio, "8 domande · 2 minuti", bottone Inizia
e la riga "Strumento educativo e di intrattenimento, non una valutazione
medica" → una domanda per schermata, barra "N di 8", avanzamento 300 ms
dopo la scelta, Indietro → profilo calcolato con la regola, risposte in
sessionStorage (mai localStorage, mai cookie) → risultato con badge, testo,
3 passi, box disclaimer ben visibile, form (nome, email, telefono facoltativo,
consenso email obbligatorio, SMS facoltativo, link privacy [URL privacy]) →
grazie.
Invio: fetch POST /api/lead con { nome, email, phone, email_consent: true,
sms_consent, source: "quiz", risposte: { profilo, d1…d8 }, referral_code
dal parametro ?ref, event_id: UUID }. Bottone "Invio…" durante la richiesta;
errore in italiano senza perdere i dati.
Tracking solo se le funzioni esistono: fbq trackCustom "QuizStart" e
"QuizComplete", fbq track "Lead" con eventID = event_id, gtag "quiz_complete"
e "generate_lead". Costanti META_PIXEL_ID e GA4_ID in cima, vuote = nessuno script.
Accessibilità: focus visibile, aria-live, tasti 1-4. Aggiungi in server.js
la route GET /quiz. Alla fine dimmi come testare in locale.
[INCOLLA QUI IL JSON DEI CONTENUTI]
Ora lo facciamo davvero rec
Face scan, solo nel browser
Obiettivo: un'app che elabora la webcam nel browser, non invia e non salva immagini, chiede prima il consenso e restituisce un consiglio di routine, per gioco.
Il server non vede il volto
nessuna immagine, frame, canvas o landmark lascia il browser · bottone "Cancella tutto" sempre visibile
Consenso, scansione, risultato
Claude Code costruisce scan.html
Nel repo nm-os/ crea public/scan.html: app "Face scan benessere" single-file,
Design System scuro (lime #C8FF00 bottoni, orange #FF6B35 box disclaimer,
violet #8B5CF6 barre indicatori). Nessuna libreria oltre MediaPipe.
Vincoli di privacy NON negoziabili (verificali e scrivili in un commento
in cima al file):
- nessuna immagine, frame, canvas, blob o landmark viene inviato a nessun
server: l'unica fetch del file è POST /api/lead con testo (nome, email,
phone, consensi, source "facescan", risultato { profilo, 3 interi }, event_id);
- nessun salvataggio persistente: niente localStorage, IndexedDB, cookie;
lo stream viene fermato con getTracks().forEach(stop) PRIMA del risultato;
- la camera si attiva SOLO dopo il click su "Accetto e attivo la camera" in
una schermata di consenso con: 4 righe su cosa succede, il box disclaimer
"Questo strumento è un gioco educativo sul benessere: non è uno strumento
medico né diagnostico, non analizza la salute della pelle né alcuna
condizione. I valori mostrati sono stime di espressioni facciali e non
hanno valore sanitario.", link privacy [URL privacy], checkbox obbligatoria;
- bottone "Cancella tutto" sempre visibile: ferma la camera, azzera le
variabili, svuota sessionStorage, ricarica la pagina.
Tecnica: MediaPipe Face Landmarker via ES module da
https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14,
outputFaceBlendshapes true, runningMode VIDEO, ~150 frame (5 s) con contatore;
se getUserMedia fallisce o il modulo non carica in 10 s → link alla versione
questionario /scan-questionario.
Indicatori, tutti con "percepito/a" nel nome: stanchezza (eyeSquint, eyeBlink),
tensione (browDown, browInnerUp), relax (mouthSmile, jawOpen). 0-100, barre
animate. Profilo dal massimo: "Serale lenta", "Serale in 10 minuti",
"Serale energia": 80-120 parole con rituale in 3 passi che cita [prodotto]
secondo etichetta ([uso da etichetta]) e la frase "Risultato a scopo di
intrattenimento: non è una valutazione della tua salute."
Poi form (consenso email obbligatorio, SMS facoltativo, privacy), invio a
/api/lead, tracking condizionale (ScanComplete, Lead con eventID). In
server.js: route GET /scan con header Content-Security-Policy: default-src
'self'; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net;
connect-src 'self' https://cdn.jsdelivr.net https://storage.googleapis.com;
img-src 'self' data: blob:; media-src 'self' blob:; worker-src 'self' blob:.
Alla fine elenca i 5 controlli fatti per provare che nessun dato del volto
lascia il browser (incluso: "fetch(" compare una sola volta).
Non dire
- "Analisi della pelle"
- "Livello di stress rilevato"
- "Idratazione della pelle: 40 %"
Di' invece
- "Gioco educativo sul benessere"
- "Tensione percepita (espressioni, 5 secondi)"
- "Luce nel tuo ambiente"
Sette controlli sul codice
- La camera si accende solo dopo checkbox e bottone di consenso
- Box disclaimer visibile prima della camera e nel risultato
- DevTools → Network: unica POST a /api/lead, body di testo
fetch(compare una sola volta nel filelocalStorageeIndexedDBnon compaionogetTracks().forEach(stop)prima di mostrare il risultato- "Cancella tutto" spegne la spia della camera e torna all'inizio
- Privacy policy con sezione "Face scan" · route /scan con CSP
Il generatore di referenze
Obiettivo: la pagina /ref dove il cliente scrive il nome e riceve il suo link con una card da condividere. Il server conta click e contatti per codice.
Nome → link → card
Scrivi il tuo nome: ricevi un link e una card da mandare a chi vuoi.
Marco R.Crea il mio linkhttps://[dominio]/r/MARCO-7K2PCopiaWhatsAppMessaggio pronto: "Sto usando FitMeal a pranzo e mi trovo bene. Se vuoi provare il calcolatore, questo è il mio link."
[dominio]/r/MARCO-7K2P
Incaricato/a indipendente [nome azienda]
Codici, click, contatti, card
Nel repo nm-os/ (Express, Postgres via DATABASE_URL oppure data/referrals.json
con scrittura atomica, basicAuth già presente, POST /api/lead che salva
referral_code) costruisci il generatore referenze:
1. Tabelle referrals (codice unico, nome, email facoltativa, created_at) e
referral_clicks (codice, ip_hash, user_agent troncato, created_at).
2. POST /api/ref: { nome 2-40 caratteri } → codice = 5 lettere del nome
maiuscole + "-" + 4 caratteri casuali (crypto). Rate limit 10/ora per IP.
3. GET /r/:codice: registra il click con ip_hash = sha256(ip + REF_SALT),
mai l'IP in chiaro; cookie "ref" 30 giorni SameSite=Lax; redirect 302 a
"/?ref=CODICE" (o REF_LANDING_PATH, es. "/calc").
4. In POST /api/lead: referral_code = body o cookie; valida che esista.
5. GET /api/ref/:codice/stats → { click, lead, ultimo_click }, senza dati
personali. GET /api/ref/stats (basicAuth) → tutti i codici, filtro periodo.
6. public/ref.html: titolo "Condividi [prodotto] con chi vuoi bene", campo
nome, bottone "Crea il mio link"; risultato con link in JetBrains Mono,
"Copia", "Condividi su WhatsApp" (messaggio senza promesse né prezzi),
"Scarica la card": canvas 1080×1080, sfondo #05060A, gradiente
violet→lime, nome, brand, link, riga "Incaricato/a indipendente
[nome azienda]". Box riconoscimento con testo da REF_REWARD_TEXT (se vuoto,
il box non appare). Link a /ref/regolamento e alla privacy.
7. public/ref-dashboard.html su GET /ref/dashboard (basicAuth): nome, codice,
click, contatti, tasso, filtro periodo. Nessun dato personale.
Vincoli: query parametrizzate, niente IP in chiaro, testi in italiano scritti
per intero, nessuna promessa di premi in denaro nel codice o nei testi.
Non dire
- "10 € per ogni amico che porti"
- "Entra nel mio team con questo link"
- "Invita tutta la rubrica con un click"
Di' invece
- "Grazie: la guida 'Autunno in 3 abbinamenti' è per te"
- "Se vuoi provare il calcolatore, questo è il mio link"
- "Lo gestisce Marco, distributore indipendente. Zero impegno."
Il calcolatore
Obiettivo: un calcolatore con 2-3 numeri da inserire, un risultato onesto marcato "esempio" e un form. Euro e giorni, mai peso o calorie.
Input, risultato, form
Claude Code costruisce calc.html
Nel repo nm-os/ crea public/calc.html: calcolatore "[domanda-gancio, es.
Quanto ti costa davvero il pranzo in ufficio?]" per [prodotto] di [nome azienda].
Single-file, Design System scuro (lime bottoni, violet slider, JetBrains Mono
per i numeri), mobile-first, nessuna libreria.
Input con slider e valore visibile: [input 1, es. giorni a settimana fuori
0-5] · [input 2, es. spesa media a pranzo 3-15 €] · [input 3 facoltativo,
es. minuti in fila 0-30]. Nessun input su peso, calorie, salute.
Calcolo in una funzione calcola() con le formule esplicite in commento:
[formule, es. spesa mese = giorni × spesa × 4,33; anno = mese × 12;
confronto = giorni × PREZZO_PORZIONE × 4,33 con PREZZO_PORZIONE dal listino
in una costante in cima]. Risultato aggiornato in tempo reale, numero
grande animato, e una riga di confronto scritta così: "Con [giorni] giorni
a settimana a circa [prezzo] € a porzione, la spesa stimata sarebbe [X] €
al mese (esempio, prezzo di listino)". Mai la parola "risparmi" come
promessa. Sotto, la frase di legge: "[claim di legge, es. Sostituisce un
pasto nel contesto di una dieta ipocalorica]".
Poi il form (nome, email, consenso email obbligatorio, SMS facoltativo,
link privacy [URL privacy]) e invio POST /api/lead con { nome, email,
email_consent: true, sms_consent, source: "calcolatore", risposte: { input
e risultato }, referral_code da ?ref o cookie, event_id }. Tracking
condizionale: fbq trackCustom "CalcComplete", fbq track "Lead" con eventID,
gtag "calc_complete" e "generate_lead". Route GET /calc in server.js.
Tutti i testi in italiano scritti per intero. Alla fine: come testare in
locale e 3 combinazioni di input con il risultato atteso.
Pubblica e collega
Obiettivo: tutto online su Railway, ogni contatto nel CRM con il tag source giusto e una sequenza dedicata.
Da GitHub a Railway
Quattro fili, uno per strumento
- Tag source su ogni contattoquiz · facescan · referral · calcolatore. Il CRM lo mostra in colonna.
- Agente che legge le risposteAggiorna system.txt: "se risposte.profilo esiste, citalo nel motivo del punteggio".
- Una sequenza dedicata su Resend3 email sul risultato: "la tua routine Serale lenta", "il tuo conto del pranzo". Parte dal tag source.
- Eventi Pixel e GA4 per ogni completamentoQuizComplete, ScanComplete, CalcComplete + Lead deduplicato con event_id.
- Referral ovunquequiz.html e calc.html leggono ?ref e il cookie: il codice arriva in referral_code.
Ora lo facciamo davvero rec
Due strade, stessi strumenti
| Funzione | Economico | Completo |
|---|---|---|
| Costruzione | Claude Pro + Claude Code, pagine singole nella tua cartella 20 €/mese | Claude Max + Claude Code oppure Lovable Pro con editor visuale da 100 €/mese · Lovable 25 $/mese |
| Hosting | Railway Hobby, attivo dal Modulo 3 5 $/meseun servizio, quattro pagine | Railway Pro + Postgres + un dominio per pagina 20 $/mesees. quiz.[dominio] |
| Face scan | Questionario, nessuna camera 0 €zero rischio biometrico | MediaPipe nel browser + CSP + questionario di riserva 0 €eventuale parere legale, una volta, 150-300 € |
| Referral | Codici in data/referrals.json, card generata nel browser 0 € | Postgres + card Canva Pro con modello e connettore ≈ 12 €/mese |
| Sequenze dedicate | Resend Free · Automations 0 € | Resend Pro + invio via API con instradamento per source 20 $/mese |
| Totale indicativo | ≈ 25 €/mese | ≈ 175-200 €/mese |
Tre strumenti online
Obiettivo: tre indirizzi pubblici che funzionano dal telefono, con i contatti nel CRM. Postali nella community.
Prima di postare
- /quiz dal telefono: 8 domande, risultato, form, grazie
- /calc: 3 combinazioni di input danno il risultato atteso
- /ref: link creato, click contato, contatto con referral_code nel CRM
- /scan o /scan-questionario: 7 controlli superati
- Ogni contatto di prova ha il source giusto nel CRM
- Il disclaimer sta nel risultato, non nel footer
- Nessuna domanda o input su peso, salute, farmaci, calorie
- Eventi Lead in Events Manager, senza doppioni
- REF_REWARD_TEXT coerente con la Compliance Card (o vuoto)
Cosa hai costruito
- Quiz a 8 domande con 3 profili e consiglio di routine
- Face scan nel browser (o questionario), consenso e disclaimer
- Generatore di referenze: link, card, click e contatti per codice
- Calcolatore con formule esplicite e risultato "esempio"
- Tutti online su Railway, contatti nel CRM con il tag source
- Una sequenza email dedicata per ognuno