Modulo 08 · Fase DUPLICA

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.

Risultato: 3 strumenti pubblicatiDurata: 7 lezioni
Mappa del modulo

Sette lezioni, quattro app

  1. L01 · Perché batte un PDFRisultato immediato → contatto → sequenza.
  2. L02 · Quiz di valutazione8 domande, 3 profili, form. Claude Code o Lovable.
  3. L03 · Face scan benessere in-browserIl più delicato: nessuna immagine esce dal browser.
  4. L04 · Generatore di referenzeUn link per cliente, click e contatti contati.
  5. L05 · Calcolatore personalizzatoEuro e giorni. Il più rapido da costruire.
  6. L06 · Pubblica e collegaRailway, tag source, CRM, sequenze dedicate.
  7. L07 · SFIDA: 3 strumenti pubblicati3 indirizzi pubblici che funzionano.
M08.L01 · Lezione 1 di 7

Meglio di un PDF

Obiettivo: capire il meccanismo "risultato subito → contatto → sequenza" e scegliere quali strumenti costruire.

Il confronto

Cosa cambia per la persona

Il PDF classico
"Scarica la guida"

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)

Strumento di attrazione
"Scopri la tua routine"

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

Il meccanismo

Dallo strumento alla sequenza

01Strumentoquiz · scan · ref · calc
02Risultatosubito, in 2 minuti
03Contattoform + consenso
04/api/leadsource: "quiz"
05CRM + agentelegge le risposte · punteggio
06Sequenzadedicata al risultato

ogni nodo si accende con → · nodo 04-06 già costruiti nei Moduli 3 e 7

Prompt · quali strumenti per te

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.
Attenzione compliance

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?"
M08.L02 · Lezione 2 di 7

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".

Anteprima · quiz AromaVita

Una domanda per schermata

Domanda 3 di 8
A che ora finisce davvero la tua giornata?
Prima delle 19
Tra le 20 e le 22
Dopo le 22
Dipende dal giorno
Strumento educativo e di intrattenimento, non una valutazione medica.
domanda
Il tuo profilo
Serale lenta
Ti serve un momento lungo per chiudere la giornata. Luci basse, 10 minuti di diffusore con 3 gocce di Blend Sera secondo etichetta, telefono in un'altra stanza.
Questo quiz è uno strumento educativo: non è una valutazione medica né un consiglio sanitario.
Ricevi la routine completa
risultato + form
Prompt · contenuti del quiz

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.
Prompt · Claude Code

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]
Demo a schermo

Ora lo facciamo davvero rec

Claude Code scrive quiz.htmltest in localedeploy e prova dal telefono

M08.L03 · Lezione 3 di 7

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.

Dove vanno i dati

Il server non vede il volto

01Consensocasella + bottone, prima della camera
02WebcamgetUserMedia · 5 secondi
03BrowserMediaPipe in WebAssembly · espressioni → 3 indicatori
04Risultatostream fermato · profilo di routine
05/api/leadsolo testo: nome, email, profilo

nessuna immagine, frame, canvas o landmark lascia il browser · bottone "Cancella tutto" sempre visibile

Anteprima · face scan AromaVita

Consenso, scansione, risultato

Prima di iniziare
Tutto succede nel tuo browser. Nessuna immagine viene inviata o salvata. Dura 5 secondi e puoi cancellare tutto quando vuoi.
Gioco educativo sul benessere: non è uno strumento medico né diagnostico.
☑ Ho letto e acconsento all'elaborazione locale del mio volto per questo gioco
Accetto e attivo la camera
consenso
Guarda la camera · 3 s
in locale
Elaborazione nel browser. Niente invii.
Cancella tutto
scansione
Indicatori percepiti · gioco
Tensione percepita62
Stanchezza percepita48
Relax percepito35
Profilo: Serale lenta
Risultato a scopo di intrattenimento: non è una valutazione della tua salute.
Ricevi la routine
risultato
Prompt · Claude Code

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).
Attenzione compliance

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"
Checklist · prima del deploy

Sette controlli sul codice

M08.L04 · Lezione 4 di 7

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.

Anteprima · /ref cliente FitMeal

Nome → link → card

https://[dominio]/ref
Condividi FitMeal con chi vuoi bene

Scrivi il tuo nome: ricevi un link e una card da mandare a chi vuoi.

Marco R.Crea il mio link
https://[dominio]/r/MARCO-7K2PCopiaWhatsApp

Messaggio pronto: "Sto usando FitMeal a pranzo e mi trovo bene. Se vuoi provare il calcolatore, questo è il mio link."

Card 1080×1080 · fatta nel browser
Marco R. ti invita

[dominio]/r/MARCO-7K2P

Incaricato/a indipendente [nome azienda]

Prompt · Claude Code

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.
Attenzione compliance

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."
M08.L05 · Lezione 5 di 7

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.

Anteprima · i due calcolatori del case study

Input, risultato, form

Quanto ti costa davvero il pranzo in ufficio?
Giorni a settimana fuori4
Spesa media a pranzo9 €
Spesa stimata al mese
156 €
Esempio: con 4 giorni a circa 3 € a porzione (listino) la spesa stimata sarebbe 52 € al mese. Sostituisce un pasto nel contesto di una dieta ipocalorica.
Ricevi il conto completo
FitMeal · costo pranzo
Quante gocce, quanto dura?
Gocce a sessione3
Sessioni a settimana5
Flacone10 ml
Durata stimata del flacone
13 sett.
Stima: 1 ml ≈ 20 gocce. Uso secondo etichetta: acqua, 3 gocce, 30-60 minuti, stanza arieggiata. Mai puri sulla pelle, mai ingeriti.
Ricevi la routine
AromaVita · gocce
Prompt · Claude Code

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.
M08.L06 · Lezione 6 di 7

Pubblica e collega

Obiettivo: tutto online su Railway, ogni contatto nel CRM con il tag source giusto e una sequenza dedicata.

Cosa dici a Claude · scheda Code

Da GitHub a Railway

dietro le quinte: git add · git commit · git push · permesso → Consenti versione registrata · 6 file · repository privato nm-os aggiornato
permesso "Claude vuole usare Railway: imposta variabili" → Consenti 2 variabili impostate nel servizio web · REF_SALT: Railway → Variables → incolla → Deploy (stringa casuale lunga, mai a schermo)
Build in corso · Deploy OK https://[dominio]/quiz · /scan · /ref · /calc
Collegare al sistema

Quattro fili, uno per strumento

  1. Tag source su ogni contattoquiz · facescan · referral · calcolatore. Il CRM lo mostra in colonna.
  2. Agente che legge le risposteAggiorna system.txt: "se risposte.profilo esiste, citalo nel motivo del punteggio".
  3. Una sequenza dedicata su Resend3 email sul risultato: "la tua routine Serale lenta", "il tuo conto del pranzo". Parte dal tag source.
  4. Eventi Pixel e GA4 per ogni completamentoQuizComplete, ScanComplete, CalcComplete + Lead deduplicato con event_id.
  5. Referral ovunquequiz.html e calc.html leggono ?ref e il cookie: il codice arriva in referral_code.
Demo a schermo

Ora lo facciamo davvero rec

«carica su GitHub»deploy Railwaysequenze su Resendtest dal telefono

Economico vs completo

Due strade, stessi strumenti

FunzioneEconomicoCompleto
CostruzioneClaude Pro + Claude Code, pagine singole nella tua cartella 20 €/meseClaude Max + Claude Code oppure Lovable Pro con editor visuale da 100 €/mese · Lovable 25 $/mese
HostingRailway Hobby, attivo dal Modulo 3 5 $/meseun servizio, quattro pagineRailway Pro + Postgres + un dominio per pagina 20 $/mesees. quiz.[dominio]
Face scanQuestionario, nessuna camera 0 €zero rischio biometricoMediaPipe nel browser + CSP + questionario di riserva 0 €eventuale parere legale, una volta, 150-300 €
ReferralCodici in data/referrals.json, card generata nel browser 0 €Postgres + card Canva Pro con modello e connettore ≈ 12 €/mese
Sequenze dedicateResend Free · Automations 0 €Resend Pro + invio via API con instradamento per source 20 $/mese
Totale indicativo≈ 25 €/mese≈ 175-200 €/mese
M08.L07 · Lezione 7 di 7 · SFIDA

Tre strumenti online

Obiettivo: tre indirizzi pubblici che funzionano dal telefono, con i contatti nel CRM. Postali nella community.

Checklist della sfida

Prima di postare

Fine modulo

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
M08
completato