Impeccable · Sviluppare progetti WordPress con l'AI

Impeccable 4.8.0 installato con npx impeccable install; costruzione più due passate, bolder e polish. Modello claude-opus-5-5, Claude Code 2.1.317 in modalità headless, 3 novembre 2026, pbakaus/impeccable@9fadc41.

Il prompt

/impeccable Realizza la landing page descritta in BRIEF.md. È una pagina che deve convincere a prenotare (modalità Persuade): scegli la direzione con la «Bolder hand», con foto vere prese da assets/, tipografia espressiva e colore pieno, non una pagina minimale. Il file PRODUCT.md non esiste ancora: ricavalo solo dal contenuto di BRIEF.md, senza intervista, poi crea la pagina. Segui le regole di consegna in fondo al brief: lavora senza fare domande e, dove la skill ti chiederebbe di scegliere tra più direzioni, scegli tu e spiega il perché in NOTE.md.

Le passate successive

Nella stessa sessione, con claude -p --continue, come suggerisce la documentazione di Impeccable.

/impeccable bolder index.html: dai più presenza visiva alla pagina, usa le foto di assets/ con più coraggio (grandi, ritagliate, a tutta larghezza dove serve) e il colore pieno nelle sezioni chiave. Conserva testi, fatti e struttura. Aggiorna NOTE.md.

/impeccable polish index.html: passata finale prima della consegna, controlla desktop e mobile, stati, contrasti e prefers-reduced-motion. Aggiorna NOTE.md con quello che hai cambiato.

Costo stimato a listino dal log di Claude Code: 11.46 dollari.

Il risultato

A sinistra la pagina intera a 1280 pixel, a destra a 390.

Il brief

Uguale per tutte le prove, insieme alla cartella delle foto.

# Brief: landing page del percorso «Sviluppare progetti WordPress con l'AI»

## Premessa

Il percorso è un'idea in preparazione: la pagina serve a raccogliere interesse per la **prima edizione**.
Non ci sono prezzi né date: non inventarli. L'azione principale è **prenotare una call conoscitiva gratuita di trenta
minuti** per capire se il percorso fa al caso tuo ed entrare nella lista delle persone da avvisare all'apertura.
Tutti i pulsanti portano a `https://maurizio.mavida.com/prenota-una-call/`.

## Chi lo tiene

Maurizio Pelizzone, sviluppatore senior PHP e WordPress dal 2004, co-fondatore della web agency Mavida a Torino,
consulente WordPress e AI. Dal 2023 fa formazione su prompt engineering, vibe coding e Claude Code a team di sviluppo,
redazioni e professionisti. Autore della «Guida pratica a Claude Code» (gratuita, in italiano, oltre 300 pagine,
17 capitoli, licenza CC BY-SA 4.0). Al WordCamp Torino 2026 ha tenuto il workshop «Vibe Coding fatto bene: come creare
un plugin WordPress (anche se non sei un senior dev)», con la sala piena e gente seduta per terra.
Al WordCamp Pisa 2026 (14 novembre) porta il talk «Ideas are Cheap, Execution is Cheaper».

## A chi si rivolge

Freelance e piccoli team che costruiscono siti WordPress: web designer, sviluppatori junior e intermedi, chi usa già
un chatbot per scrivere codice ma ottiene risultati che si rompono al primo aggiornamento. Non serve essere senior dev.
Non è un corso per chi non ha mai visto WordPress.

## Il problema

Copiare e incollare codice da un chatbot funziona finché non funziona più: plugin che non rispettano gli standard,
nessun controllo di sicurezza, nessun test, contesto perso a metà progetto, e la sensazione di non sapere più che cosa
fa il proprio sito. L'AI accelera, ma senza metodo accelera anche gli errori.

## La promessa

Passare da «esecutore di codice» a «regista di soluzioni»: un metodo professionale per portare un'idea a un plugin o
a un progetto WordPress solido, sicuro e manutenibile, usando Claude Code come compagno di lavoro.

## Formato proposto (ispirato ai percorsi con live mensili e community, da presentare come «così sarà strutturato»)

- **Lezioni registrate** da seguire con i tuoi tempi, divise in moduli.
- **Una live di gruppo al mese** per domande, revisione dei progetti e casi reali (registrata).
- **Un progetto vero da portare a termine**: ogni partecipante sviluppa un plugin o una funzione per un sito reale.
- **Uno spazio di discussione** riservato ai partecipanti per non restare bloccati tra una live e l'altra.
- Principio del «learning by doing»: ogni concetto si applica subito a un esercizio, con feedback lungo il percorso.

Non scrivere numeri di lezioni, di ore o di mesi: non sono ancora decisi.

## Moduli (dai capitoli della guida e dal workshop)

1. **Le basi**: che cos'è un agente di coding, installazione di Claude Code, il primo plugin WordPress completo.
2. **Il metodo**: Plan Mode, prompt engineering, il file CLAUDE.md come memoria del progetto, gestione del contesto.
3. **Codice che regge**: WordPress Coding Standards, struttura dei file, sicurezza (nonce, sanitizzazione, escape), debug guidato.
4. **Sicurezza dell'agente**: permessi, guardrail e sandbox per un agente che esegue comandi sul tuo computer.
5. **Le estensioni**: skill, server MCP, subagent e hook, con esempi da copiare.
6. **Dal prototipo al rilascio**: Git, test, revisione del codice generato, consegna documentata al cliente.

## Cosa ottieni

- Un flusso di lavoro ripetibile per i tuoi progetti WordPress con l'AI.
- Un plugin o un progetto realizzato durante il percorso, da mostrare ai clienti.
- La capacità di capire e rivedere il codice che l'AI scrive per te.
- Materiale in italiano, con i termini tecnici in inglese spiegati la prima volta.

## Domande frequenti

- **Quando parte?** La prima edizione è in preparazione: chi prenota la call viene avvisato per primo.
- **Quanto costa?** Il prezzo non è ancora definito; nella call ne parliamo senza impegno.
- **Devo essere uno sviluppatore senior?** No: serve conoscere WordPress e aver voglia di mettere le mani sul codice.
- **Serve un abbonamento a Claude?** Per usare Claude Code serve un piano a pagamento di Anthropic o una chiave API; nella call vediamo quale conviene.
- **Posso iniziare dalla guida gratuita?** Sì, la Guida pratica a Claude Code si scarica gratis da https://maurizio.mavida.com/guida-claude-code/ ed è un ottimo primo passo.

## Prova sociale disponibile (solo questa, niente altro)

- WordPress dal 2004, parla in pubblico di WordPress dal 2010 (WordCamp italiani, WordCamp Europe 2016 a Vienna), organizzatore del WordPress Meetup Torino dal 2015.
- Workshop al WordCamp Torino 2026 con la sala piena.
- Guida gratuita di oltre 300 pagine.

## Tono

Prima persona, diretto, incoraggiante e un filo ironico; si dà del «tu». Niente promesse di guadagno o di «diventare esperto in 30 giorni».

## Regole di consegna (uguali per tutte le prove)

- Lavora in autonomia, **senza fare domande**: se qualcosa non è chiaro dichiara l'ipotesi e procedi.
- Consegna **un solo file `index.html`** in questa cartella, con CSS e JavaScript inline. Puoi usare Google Fonts.
- Niente framework da compilare. Per le immagini usa quelle della cartella `assets/`, descritte in `assets/README.md`,
  con percorsi relativi: una landing con foto vere è più credibile di una fatta solo di testo. Non caricare immagini da siti
  esterni e non generarne altre; per il resto puoi usare SVG inline e CSS.
- Testi in italiano, presi dal brief. **Non inventare** testimonianze, nomi di clienti, loghi, numeri, anni di
  esperienza, prezzi o date che nel brief non ci sono.
- Tutti i pulsanti di prenotazione puntano a `https://maurizio.mavida.com/prenota-una-call/`.
- La pagina deve funzionare bene da 360 a 1440 px di larghezza e rispettare `prefers-reduced-motion`.
- Alla fine scrivi in `NOTE.md` le scelte di design fatte (palette, font, struttura delle sezioni) e ciò che non hai potuto verificare.

Le note dell'agente

Il file NOTE.md, così come l'ha scritto.

# NOTE — landing «Sviluppare progetti WordPress con l'AI»

## Come ho lavorato

- **Nessuna intervista.** Come richiesto, `PRODUCT.md` è ricavato solo da `BRIEF.md`; i fatti sono quelli del brief e lo stack (un solo `index.html` statico) viene dalle regole di consegna.
- **Modalità:** Persuade. L'azione è una sola: prenotare la call gratuita di 30 minuti. Tutti i pulsanti puntano a `https://maurizio.mavida.com/prenota-una-call/`. L'azione secondaria è la guida gratuita.
- **Percorso di costruzione:** code-first (è quello registrato in `.impeccable/config.json`; su questa macchina non c'è generazione di immagini). Quindi non c'è un comp: l'ambizione è scritta nel contratto di direzione (`.impeccable/surfaces/index-html.md`).

## Le scelte che la skill mi avrebbe chiesto, e perché

1. **Primo sorteggio → «Bolder hand».** Il primo sorteggio assegnava una direzione «programma del WordCamp», presa dalla mia lista di idee legate al mondo del pubblico. Come hai chiesto, ho rilanciato con il registro *bolder*: solo forme estranee alla categoria, portate fino in fondo.
2. **Dalla mano bolder ho scelto il leader: «circuito di neon piegato a mano».** Perché:
   - ha la stessa forma della promessa del brief. Un tubo di neon è un'unica linea continua, che si accende solo se è stata piegata, sigillata e caricata con metodo. «Esecutore di codice» diventa un tubo spento, «regista di soluzioni» un tubo acceso;
   - ha radici in Torino, che di sera è una città di luci, e regge le foto vere della città;
   - lascia colore pieno e tipografia espressiva senza scivolare nel classico «sito dark con terminale».
3. **Le altre carte della mano:**
   - *Quiz da rivista anni '90* — **competitivo**. Sulla chiarezza del prodotto era forte: il quiz «fa al caso tuo?» coincide con lo scopo della call. Però rischia di sembrare poco serio per un pubblico che vuole codice solido. Resta l'alternativa più credibile se vuoi una versione più giocosa.
   - *Gru di origami*, *drum machine*, *mappa dello zoo*, *portale WebGL* — **scartate**. Da ognuna ho preso una disciplina, non l'aspetto:
     - origami → colonna di numeri rigorosa per i sei moduli;
     - drum machine → una sola linea che mostra sempre «dove sei adesso» (il circuito che si accende con lo scroll);
     - mappa dello zoo → colore pieno a campiture intere, foto mai virate;
     - WebGL → contrasto di scala estremo fra titoli e piccole etichette.
   - Scartate anche le carte del primo sorteggio (insegna di bottega a Tokyo, display a sette segmenti, ecc.): non erano nella mano bolder.

## Palette

| Ruolo | Colore | Uso |
|---|---|---|
| Parete (indaco) | `#12164F` / `#0B0E36` | fondo principale, la stanza della bottega di sera |
| Vetro spento | `rgba(214,222,255,.26)` | tubo non acceso, cornici delle foto, binari |
| Argon (gas acceso) | nucleo `#E9EDFF`, alone `#4D6BFF` | parole e tratti «accesi» |
| Neon rosso-arancio | `#FF4A1C` | pulsanti di prenotazione e due sezioni intere a colore pieno (promessa, chiusura) |
| Cobalto | `#2B3FE0` | sezione «Che cosa ti porti a casa» a colore pieno |
| Elettrodo | `#E0261B` | capi del tubo |

Il bagliore (glow) compare solo sugli elementi «tubo acceso». Pulsanti e riquadri usano ombre neutre con offset. Il detector segnalava `dark-glow`: l'ho silenziato solo per `index.html`, con la motivazione registrata in `.impeccable/config.json`.

## Font (Google Fonts)

- **Big Shoulders Display** 600/800/900: titoli, grotesk condensato da insegna.
- **Tilt Neon**: le parole «di tubo» (accese o spente), il numero dei moduli e il principio «learning by doing».
- **Schibsted Grotesk**: testo corrente.

## Struttura delle sezioni

1. **Header fisso:** nome del percorso, ancore, «Prenota la call».
2. **Hero:**
   - H1 è la trasformazione: «Da esecutore di codice» (tubo spento, sfarfalla) / «a regista di soluzioni» (si accende);
   - subito sotto, in grande, il nome del percorso «Sviluppare progetti WordPress con l'AI»;
   - dal fondo di «soluzioni» parte il tubo di neon, con un elettrodo metallico;
   - promessa, CTA, link alla guida, stato «Prima edizione in preparazione»;
   - foto della Mole al tramonto in una finestra ad arco.
3. **Il problema:** i cinque guasti del copia-incolla come tubi crepati, foto del codice, la frase «L'AI accelera, ma senza metodo accelera anche gli errori».
4. **La promessa** (campitura neon): il metodo, poi «Fa per te se» / «Non fa per te se».
5. **Sei moduli, un solo circuito:** lo stesso tubo, partito dall'hero e sceso lungo il margine sinistro, piega verso ogni numero, gli gira attorno e torna sul margine. Si accende con lo scroll (interazione firma) e finisce in un elettrodo. Dopo i moduli c'è una CTA intermedia.
6. **Così sarà strutturato:** live mensile (foto videochiamata), lezioni registrate, spazio di discussione, progetto vero (foto post-it), learning by doing. Dice chiaramente che numeri e durata non sono decisi.
7. **Che cosa ti porti a casa** (campitura cobalto): i quattro risultati e la foto della postazione.
8. **Chi ti accompagna:**
   - ritratto e bio in prima persona;
   - la guida gratuita (oltre 300 pagine, 17 capitoli, CC BY-SA 4.0);
   - un pulsante «Prenota una call con me»;
   - una linea del tempo solo con i fatti del brief (2004, 2010, 2015, 2016, 2023, 2026, 14 novembre WordCamp Pisa).
9. **Domande frequenti:** i cinque `<details>` del brief, con un interruttore che si accende quando una risposta è aperta.
10. **Chiusura** (campitura neon): «Trenta minuti, gratis, senza impegno.», CTA, foto del Po e della Gran Madre.
11. **Footer:** crediti Unsplash con i nomi degli autori delle foto usate.

**Movimento:**
- accensione dell'insegna;
- sfarfallio dei tubi guasti e della parola spenta;
- circuito dei moduli legato allo scroll.

Con `prefers-reduced-motion` le animazioni sono spente, il circuito è tutto acceso e lo scroll è istantaneo.

## Revisione finale

La pagina è stata rivista da un revisore separato (subagent senza il contesto della costruzione). Primo verdetto: **fix**. Correzioni applicate in un'unica tornata:
- tubo continuo dalla prima schermata al circuito;
- gerarchia dell'hero invertita (la trasformazione è il titolo);
- circuito piegato a mano, reso come vetro, con elettrodi metallici;
- numeri dei moduli centrati;
- due CTA in più a metà pagina;
- righe semivuote riempite a tutta larghezza;
- foto di «Che cosa ti porti a casa» al vivo;
- data completa «14 nov 2026».

Seconda tornata, sui punti rimasti parziali o nuovi:
- titolo trasformazione più grande e h2 ridotti;
- riga «learning by doing» e riga «progetto vero» riempite;
- foto al vivo fino al bordo;
- tubo su mobile spostato a 10 px, con un bagliore più stretto.

Verdetto finale: **ship**. Il ship copre le otto correzioni valutate, non è una nuova revisione completa della pagina. `DESIGN.md` e `.impeccable/design.json` sono stati generati dalla pagina costruita.

**Punto aperto:** la prima riga del titolo («Da esecutore di codice», tubo spento) è un contorno al 42% di opacità. È testo grande e resta leggibile, ma è il punto più debole per il contrasto: se serve, alzare l'opacità del contorno.

## Fatti e testi

- Nessun prezzo, nessuna data di partenza, nessun numero di lezioni, ore o mesi, nessuna testimonianza.
- I ritratti servono solo a presentare Maurizio. La foto della videochiamata illustra il formato «live» senza dire chi sia la persona. Non ho usato la foto della lezione proiettata (non è Maurizio).
- Frasi mie, nel tono del brief: «Smetti di eseguire. Inizia a dirigere.», «Sei moduli, un solo circuito.», «Cerchi chi ti prometta di diventare esperto in 30 giorni. Non sono io.». Sono testo di pagina, non affermazioni di fatto.
- Il titolo della linea del tempo è «WordPress dal 2004, in pubblico dal 2010»: solo anni presenti nel brief, nessun conteggio di anni d'esperienza.

## Che cosa ho verificato e che cosa no

- **Verificato** con Chrome headless, movimento ridotto forzato: 1440×900 (prima schermata), pagina intera a 1440 e pagina intera a 390 (catturata dentro un iframe di 390 px, perché Chrome headless su Windows non scende sotto ~500 px di finestra).
- **Non verificato:**
  - le animazioni reali (accensione, sfarfallio, circuito che si accende con lo scroll) in un browser con il movimento attivo;
  - la larghezza esatta di 360 px (verificati solo 390 e 1440);
  - Safari e Firefox;
  - il caricamento effettivo dei Google Fonts in rete lenta;
  - che le pagine `prenota-una-call` e `guida-claude-code` rispondano;
  - lettori di schermo reali.


## Passata «bolder» — foto più coraggiose e colore pieno

Ho cambiato solo il trattamento delle foto e delle campiture. Testi, fatti, ordine delle sezioni, pulsanti e il tubo di neon sono rimasti uguali. Non ho aggiunto colori né font.

**Desktop:**
- **Hero:** la Mole al tramonto ora è una finestra a tutta altezza, al vivo sul bordo destro. Prima era un arco di circa 300 px di larghezza, ora va da 340 a 560 px. Ha un solo grande angolo ad arco verso il testo. L'hero occupa l'altezza dello schermo, tra 640 e 940 px.
- **Il problema:** la foto del codice è appesa al bordo alto della sezione ed esce a destra, alta quanto titolo e lista. Ha un angolo ad arco in basso a sinistra; la didascalia è un'etichetta sulla foto.
- **Così sarà strutturato:**
  - la videochiamata (live di gruppo) diventa una fascia a tutta larghezza, alta circa il 60% dello schermo;
  - la didascalia «Una live di gruppo al mese» è un cartello sovrapposto e più grande;
  - lezioni registrate e spazio di discussione ora stanno affiancati sotto la fascia;
  - i post-it escono dal bordo sinistro, in verticale, con un angolo ad arco.
- **Che cosa ti porti a casa:** la postazione riempie la metà destra del campo cobalto, da bordo a bordo e senza margini.
- **Chi ti accompagna:** il ritratto è più grande (6 colonne su 12) e sta su una campitura arancio neon che esce dal bordo sinistro. È colore pieno in una sezione chiave.
- **Chiusura:** il Po con la Gran Madre occupa tutta l'altezza della metà sinistra, al vivo, con un angolo ad arco verso il testo.

**Mobile (sotto 900 px):** le foto vanno da bordo a bordo. Hero e chiusura hanno la sommità ad arco.

**Coerenza del sistema:** ho aggiornato la descrizione delle forme e delle foto in `DESIGN.md` e in `.impeccable/design.json`. Il «taglio al vivo» è un arco tagliato dal bordo della pagina, quindi la stessa famiglia di forme.

**Verificato:** Chrome headless a 1440 (prima schermata e pagina intera), a 1024 (prima schermata) e a 390 px. A 1024 il tubo dell'hero toccava il paragrafo: ora la colonna del testo lascia una corsia libera di 3,5rem per il tubo, e il nome del percorso va a capo in modo bilanciato. Ho controllato che le foto arrivino davvero al bordo campionando i pixel a x=0.

**Non verificato:**
- le larghezze tra 901 e 1000 px, dove la finestra dell'hero è al minimo (340 px) e il titolo va su tre righe;
- questa passata non è stata rivista dal revisore indipendente: il passo successivo previsto è `/impeccable polish`;
- 360 px esatti;
- le animazioni con il movimento attivo;
- Safari e Firefox.

**Note del detector:** segnala valori di font-size, raggi e due colori (`#F6F7FF`, il nucleo di «regista») che non risultano in `DESIGN.md`. Sono presenti dalla prima versione, non vengono da questa passata. Li ho lasciati come sono: si allineano con `/impeccable document` o `/impeccable polish`.

## Passata «polish» — rifinitura finale

Ho controllato desktop (1440 e 1024), mobile (390), gli stati (focus da tastiera, FAQ aperte, hover), i contrasti e `prefers-reduced-motion`. Ho cambiato solo dettagli: testi, fatti, struttura e direzione visiva sono rimasti uguali.

**Correzioni:**
- **Fine pagina:** il disegno SVG del tubo aveva l'altezza del documento al momento del calcolo. Se la pagina poi si accorciava (font caricati in ritardo), lasciava una fascia vuota sotto il footer. Ora finisce dove finisce il tubo.
- **Tubo dopo il caricamento:** si ricalcola anche quando l'altezza della pagina cambia (immagini, font), non solo al ridimensionamento della finestra.
- **Movimento ridotto in tempo reale:** se l'utente attiva `prefers-reduced-motion` con la pagina aperta, il circuito si accende subito tutto senza ricaricare.
- **Header fisso:** con le ancore del menu e con il focus da tastiera i contenuti non finiscono più sotto l'header (`scroll-padding-top`).
- **Focus su arancio:** nelle sezioni arancio neon (promessa e chiusura) il contorno di focus ora è indaco. Il bianco-azzurro non si distingueva abbastanza dal fondo.
- **Contrasto del tubo spento:** la riga «Da esecutore di codice» passa da un contorno al 42% a uno al 60%, leggermente più spesso. Resta «spenta», ma si legge meglio. Questo chiude il punto aperto della prima consegna.
- **Colori di sistema:** «regista», il gas del tubo e l'hover del pulsante indaco ora usano solo colori già in `DESIGN.md`. Ho tolto `#FFE9E1`, `#F6F7FF` e `#1C2270`.
- **Testi piccoli:** sottotitolo del marchio, voci di menu, stato «Prima edizione», didascalie delle foto ora usano la dimensione `caption` di sistema (0,9rem). Prima erano quattro dimensioni diverse.
- **Pulizia:** rimosse le regole CSS superate dalla passata bolder (vecchi raggi delle vetrine dell'hero su mobile, `.hero-tube`, `.sr-only` non usato).

**Verificato e a posto:**
- tutti e 5 i pulsanti di prenotazione puntano a `/prenota-una-call/`;
- il link della guida punta a `/guida-claude-code/`;
- le FAQ si aprono con mouse e tastiera e l'interruttore passa ad arancio neon (controllato sullo stile calcolato);
- con movimento ridotto non ci sono animazioni, il circuito è tutto acceso e lo scroll è istantaneo;
- nessuna sovrapposizione fra tubo e testo a 1440, 1024 e 390.

**Lasciato com'è:** il detector segnala ancora 10 dimensioni di titoli fluide (`clamp`) e un raggio di 28px (l'anello del ritratto) che non risultano nella scala di `DESIGN.md`. Sono le misure dei titoli display delle singole sezioni. Non ho uniformato le dimensioni per non cambiare la gerarchia a ridosso della consegna. Se si vuole chiudere il disallineamento, basta rigenerare `DESIGN.md` con `/impeccable document`.

**Non verificato:**
- Safari e Firefox;
- 360 px esatti;
- lettori di schermo reali;
- le animazioni sul dispositivo vero (solo headless);
- che i link esterni rispondano.