← Tutte le bozzeDemo delle skill di design
Impeccable · Consulenza WordPress e WooCommerce
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: 9.07 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 «Prenota una call» per consulenza e ottimizzazione WordPress e WooCommerce ## Chi la pubblica Maurizio Pelizzone, consulente WordPress e AI a Torino, co-fondatore della web agency Mavida (fondata nel 2001). Lavora con WordPress dal 2004, sviluppatore senior PHP. Speaker ai WordCamp italiani e al WordCamp Europe, organizza il WordPress Meetup Torino dal 2015. Autore della «Guida pratica a Claude Code», gratuita e in italiano. ## Obiettivo della pagina Una sola azione: **prenotare la call conoscitiva gratuita di trenta minuti su Google Meet**. Tutti i pulsanti portano a `https://maurizio.mavida.com/prenota-una-call/`. Azione secondaria: scrivere a maurizio@mavida.com. ## A chi si rivolge - Piccole e medie imprese con un sito WordPress o un e-commerce WooCommerce legato a sistemi aziendali. - Agenzie di comunicazione che cercano un partner tecnico per i progetti più complessi o una code review prima del rilascio. - Professionisti che vogliono far crescere il sito senza rifarlo da capo. ## Problemi in cui si riconoscono (da usare come aggancio) - Il sito è lento o ingestibile perché costruito con un page builder pesante. - Serve collegare il sito a un gestionale, un CRM o un servizio esterno; gli ordini vengono ricopiati a mano. - Un plugin fa quasi quello che serve, ma non esattamente. - Il negozio WooCommerce rallenta quando i prodotti passano da poche decine a qualche migliaio. - Ci sono plugin attivi che nessuno usa più, installati per una prova anni fa. ## Cosa offre (servizi) 1. **Ottimizzazione WordPress**: parte da una misura e finisce con una misura (Core Web Vitals, Lighthouse, tempi di risposta del server, query). Censimento dei plugin, cache, immagini in formati moderni, bonifica del database, login protetto. Report con i numeri prima e dopo. Spesso si tratta di togliere, non di aggiungere. 2. **Consulenza WooCommerce** nei quattro momenti di un negozio: aprire, crescere, collegare al gestionale, vendere B2B (listini per cliente, magazzini multipli, sconti per famiglia di prodotto, prezzi visibili solo ai clienti con account). 3. **Plugin e blocchi su misura** quando nessun plugin conosce le tue regole di business. 4. **Integrazioni** con gestionali, ERP e CRM tramite API, webhook o file di scambio pianificati. 5. **Migrazione dai page builder a Gutenberg**, verso l'editor a blocchi nativo. 6. **Manutenzione WordPress**: aggiornamenti, sicurezza e controllo dopo l'ottimizzazione. ## Come lavora (4 passi) 1. Call conoscitiva di trenta minuti, gratuita e senza impegno. 2. Proposta scritta con attività, tempi e costi chiari, inviata via email. 3. Sviluppo per piccoli rilasci verificabili in ambiente di test, codice versionato su Git. 4. Consegna documentata: il codice resta del cliente ed è manutenibile anche da altri sviluppatori. Usa strumenti di intelligenza artificiale come Claude Code per le parti ripetitive, ma ogni riga è progettata, rivista e testata da lui: «l'AI accelera, le scelte e la qualità restano mie». ## Come funziona la prenotazione Scegli il giorno, scegli l'orario, inserisci i dati e conferma (ricevi email e invito al calendario), ci si sente su Google Meet: non serve installare nulla. Nel modulo c'è il campo «Di cosa vorresti parlare?». ## Domande frequenti (testi reali, si possono accorciare) - **La call è gratuita?** Sì, gratuita e senza impegno: serve a conoscersi e capire se ha senso lavorare insieme, non a vendere un pacchetto preconfezionato. - **Devo preparare qualcosa?** Non è obbligatorio, ma due righe su progetto, strumenti usati, obiettivi e scadenze rendono la call molto più utile. - **Che cosa succede dopo?** Se il progetto è adatto arriva un riepilogo con una proposta (tempi, modalità, costi); se non è la persona giusta te lo dice chiaramente e, quando può, ti indica a chi rivolgerti. - **WooCommerce va bene anche per cataloghi grandi?** Sì, curando hosting, cache, indici del database ed estensioni: con migliaia di prodotti l'architettura conta più del tema grafico. - **Posso spostare l'appuntamento?** Sì, scrivendo a maurizio@mavida.com con qualche ora di anticipo. ## Prova sociale disponibile (solo questa, niente altro) - Diverse decine di e-commerce pubblicati con Mavida. - Casi reali anonimi: un'utensileria B2B con più di venti listini nel gestionale, dove ogni cliente loggato vede il suo prezzo; un'azienda del settore farmaceutico con ordini, DDT e bolle che viaggiano verso un operatore logistico e si riallineano da soli. - Parla in pubblico di WordPress dal 2010; speaker ai WordCamp italiani e al WordCamp Europe 2016 a Vienna; WordPress dal 2004. ## Tono Prima persona, diretto, competente e un filo ironico; si dà del «tu». Niente slogan da agenzia, niente promesse di ranking. ## 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 «Prenota una call» ## Come ho lavorato - **Nessuna intervista, nessuna domanda**: come chiesto, PRODUCT.md è ricavato solo da BRIEF.md (le ipotesi sono marcate *[ipotesi]*). Dove la skill avrebbe aperto una pagina di scelta tra direzioni, ho scelto io. - **Modalità**: Persuade. Unica azione primaria: la call gratuita; tutti i pulsanti di prenotazione puntano a `https://maurizio.mavida.com/prenota-una-call/`, l'email è l'azione secondaria (hero, FAQ, chiusura, footer). - **Percorso di costruzione**: code-led (è il default registrato in `.impeccable/config.json`; non c'è generazione di immagini su questa macchina, quindi nessun comp). ## La scelta della direzione («Bolder hand») Ho scritto sette direzioni radicate nel mondo del pubblico (PMI torinesi, agenzie, professionisti), ordinate per risonanza: 1. Scheda di collaudo dell'industria torinese (misura prima/dopo) 2. Manifesti Olivetti (modernismo industriale italiano) 3. Segnaletica dei tram GTT 4. **Cassettiera da ferramenta/utensileria** 5. Foglio di montaggio con esploso 6. Tabellone partenze di Porta Nuova 7. git log / terminale (la «divisa» del settore: tenuta come una sola candidata) Lo script `concept-seed` della skill ha estratto la **4**, la cassettiera, e ho costruito quella. La mia preferita sarebbe stata la 1 (collaudo), più prevedibile. Perché la cassettiera regge: il brief dice «spesso si tratta di togliere, non di aggiungere» e parla di censimento dei plugin. Una parete di cassetti etichettati, alcuni da svuotare, rende questa idea fisica e familiare a chi ha un'azienda (e c'è perfino un'utensileria B2B tra i casi reali). Sfidanti proposti dallo script e verdetto (tutti **declinati** perché meno vicini al pubblico italiano e meno chiari sul prodotto), con la disciplina che ho preso da ciascuno: - *Archivio di scatole di sneaker* → la griglia del cartellino (portaetichetta + nome) governa ogni etichetta. - *Città notturna sotto la pioggia* → declinato senza prestiti oltre la foto di Torino a tutta pagina in chiusura. - *Serigrafia a inchiostri sovrapposti* / *rivista tech anni '90 in bicromia* → impegno totale degli inchiostri: tutte le foto Unsplash sono stampate in bicromia blu/bianco, così sei fotografi diversi sembrano un solo servizio. - *Valvola numerica dietro rete* → tutte le opzioni presenti insieme, la scelta «estratta» in avanti (sezione problemi). - *Display a sette segmenti* → l'assenza disegnata quanto la presenza: gli slot vuoti con timbro «Tolto». ## Palette (strategia «Committed», colore a campo pieno) | Ruolo | Colore | |---|---| | Lamiera blu genziana, terreno principale | `#123F94` (scuro `#0A2662`, notte `#071A45`) | | Giallo segnale, frontali dei cassetti e CTA | `#F5B400` | | Rosso segnale, solo per ciò che si toglie | `#D32F1E` | | Zinco, zone di lettura | `#E3E6E4` | | Cartellino | `#FBFBF8` | Il blu possiede intere sezioni (hero, servizi, chi sono, chiusura), il giallo pieno una (casi reali). Niente crema, niente dark-mode da sviluppatore. ## Font **Archivo** (Google Fonts, variabile su larghezza e peso), una sola famiglia usata come un sistema: larghezza 120–125 per i titoli espansi, 68–75 in maiuscolo spaziato per le etichette dei cassetti, 100 per il testo. Numeri tabulari negli anni e nei passi. ## Struttura delle sezioni 1. **Hero** (blu): titolo «Spesso si tratta di *togliere*, non di aggiungere.», sottotitolo, CTA gialla + email. A destra una cassettiera: il cassetto grande a finestra con il ritratto (etichetta A1), sei cassetti del censimento; «Plugin mai usati» e «Page builder pesante» scorrono fuori e lasciano slot vuoti, barrati e timbrati «Tolto». 2. **Problemi** (zinco): i cinque problemi del brief come cassetti; ne apri uno e vedi come lo affronta. 3. **Servizi** (blu): parete di cassetti di misure diverse; ottimizzazione e WooCommerce i più grandi. 4. **Banda foto** con la citazione «L'AI accelera, le scelte e la qualità restano mie». 5. **Casi reali** (giallo): «Diverse decine di e-commerce pubblicati con Mavida» + i due casi anonimi. 6. **Metodo**: i quattro passi appesi a una guida metallica, più la nota per le agenzie. 7. **Chi sono** (blu): foto alla scrivania e registro degli anni presenti nel brief (2001, 2004, 2015, 2016) e della guida. 8. **Prenotazione**: i quattro passi del modulo, la domanda del modulo «Di cosa vorresti parlare?» citata in una frase (non c'è un campo finto), CTA. 9. **FAQ**: le cinque domande del brief, leggermente accorciate. 10. **Chiusura** sulla Mole al tramonto in bicromia + footer con i crediti Unsplash. Foto usate: `maurizio-ritratto.jpg` e `maurizio-scrivania.jpg` (solo per presentarlo, a colori), `postazione-sviluppo.jpg`, `wireframe-carta.jpg`, `videochiamata.jpg`, `torino-mole-tramonto.jpg` (in bicromia). Non usate: `lezione-codice-proiettato.jpg` (non è Maurizio e suggerirebbe un evento), le altre di Torino e codice per non ripetere. ## Linguaggio dei cassetti (dopo la revisione) - **Inchiostro piatto**: frontali gialli pieni, cassettiera e slot blu notte piatti, maniglie come barre piene, nessuna ombra né sfumatura (le uniche sfumature sono i veli sopra le foto). È grafica stampata, non un finto oggetto 3D. - **Cartellino codice | nome**: ogni etichetta ha una cella scura con un codice di posizione (WP, A1–D2, P1–P5, S1–S6, K1–K2) e il nome. Nei servizi il cartellino *è* il titolo del cassetto. I codici sono posizioni nella cassettiera, non numeri inventati. - **Rosso solo per ciò che si toglie**: il timbro «Tolto» e la barratura dei due cassetti rimossi. - Le foto di Maurizio restano a colori; le foto Unsplash sono in bicromia. ## Revisione finale (revisore indipendente della skill) 1. Primo esito **rebuild**: i cassetti erano disegnati con sfumature, smussature e manopole che imitavano il materiale. C'erano inoltre il badge sul ritratto, un'uscita con dissolvenza invece che su guida, etichette-«kicker» sopra i titoli e un campo del modulo finto con cursore lampeggiante. Ho rifatto tutto il sistema in inchiostro piatto. Ora i cassetti scorrono fuori lateralmente e il campo finto è diventato una frase che cita la domanda del modulo. 2. Secondo esito **fix**: tre ritocchi (la freccia doppia nel caso K2, il «+» isolato nel caso K1, la leggibilità delle etichette barrate), tutti segnati come risolti. 3. Esito finale **ship**, che vale per quelle tre correzioni sopra la revisione completa precedente. Restano come rifinitura facoltativa: il cassetto dei problemi aperto scorre di lato invece di venire avanti; c'è spazio giallo vuoto sotto il cassetto S1 a 1440 px; il fondo grigio caldo del ritratto è fuori palette (è la foto stessa). 4. DESIGN.md e `.impeccable/design.json` sono generati dal codice consegnato. 5. Avvisi del detector silenziati solo per `index.html`, con il motivo scritto in `.impeccable/config.json`: card annidate (cassettiera > slot > cassetto è voluto), padding stretto (falso positivo), interlinea dei titoli display. Il quarto, side-tab, era stato messo per la smussatura dei cassetti, che con il rebuild non esiste più. ## Ipotesi e testi scritti da me - Titoli di sezione e microcopy («Quale cassetto non si chiude più?», «Prenotare richiede meno di questo paragrafo.», «Trenta minuti per capire cosa togliere.») sono miei, nel tono del brief; i fatti vengono tutti dal brief. - Nel registro «Chi sono» la guida a Claude Code è segnata «Oggi» perché il brief non dà un anno. - Le etichette dei cassetti dell'hero (cache, immagini moderne, database, login protetto, plugin mai usati, page builder pesante) vengono dall'elenco del servizio di ottimizzazione: sono un'illustrazione, non il report di un cliente. ## Movimento e accessibilità - Un solo momento animato: i due cassetti che escono dall'hero (circa 1,1 s dopo il caricamento). Poi solo interazioni: i cassetti dei problemi si estraggono, quelli dei servizi si sollevano al passaggio, le FAQ si aprono. - `prefers-reduced-motion`: niente animazioni né transizioni, gli slot appaiono già vuoti. - Focus visibile giallo/blu, selezione del testo e scrollbar nei colori della palette, alt text sulle foto informative. ## Cosa non ho potuto verificare - Ho controllato solo con Chrome headless su Windows; niente Safari/Firefox né dispositivi veri. - La pagina di prenotazione esterna e il rendering dei Google Fonts offline. - La pagina non è stata pubblicata, quindi non ci sono misure Lighthouse o Core Web Vitals; le foto sono i JPEG originali, non ricompressi. - Screenshot a 360, 390 e 1440 px (360 e 390 dentro un iframe, perché Chrome headless non scende sotto una certa larghezza di finestra). Animazione verificata solo nello stato finale e dal codice, non vista mentre si muove. - Le 11 foto di `assets/` non hanno la provenienza incorporata nei metadati (lo scan della skill le segnala). Non ho modificato i tuoi file: la provenienza è già in `assets/README.md`. ## Passata «bolder» (foto e colore con più coraggio) Ho tenuto testi, fatti e ordine delle sezioni. Non ho aggiunto né colori né font: ho usato più forte quello che il sistema aveva già. - **Foto al vivo, metà schermo, fino al bordo della finestra** (nuovo schema «taglio»: foto a filo del bordo, testo allineato alla griglia): - *Metodo*: il wireframe esce a sinistra fino al bordo; accanto, la frase «Niente pacchetti preconfezionati…» è ora un titolo vero (Archivo 800, larghezza 112). - *Chi sono*: la foto di Maurizio alla scrivania, a colori, occupa metà sezione per tutta l'altezza; il registro degli anni sta sul blu pieno accanto. - *Prenotazione*: la videochiamata in bicromia arriva al bordo destro. - **Colore pieno**: la sezione di prenotazione passa da zinco a **giallo pieno**, così l'azione principale ha un campo di colore suo. Ora la pagina alterna blu (hero), zinco (problemi), blu (servizi), foto (AI), giallo (casi), zinco più foto (metodo), blu più foto (chi sono), giallo più foto (prenota), zinco (FAQ), foto (chiusura). - **Finestra nel cassetto S1**: `codice-schermo.jpg` in bicromia dentro il cassetto «Ottimizzazione WordPress». Riempie anche lo spazio giallo vuoto che il revisore aveva segnalato. Nel footer ho aggiunto il credito a Mohammad Rahmani. - **Banda «L'AI accelera…»** più alta (fino a 48rem). - **Etichette dei cassetti dell'hero** portate da 10,9 a 11,5 px (il detector le segnalava sotto la soglia di 11 px). - Sotto i 900 px le parti con foto al vivo si impilano: prima la foto (4:3; quadrata per il ritratto), poi il testo. Verificato con screenshot a 1440, 390 e 360 px (Chrome headless). Non verificato: altri browser, dispositivi veri. Il detector ora segnala scostamenti tra il codice e la scala tipografica e i colori registrati in DESIGN.md: dimensioni come .95rem o 1.15rem e due grigio-blu del footer. Erano già nel codice prima di questa passata, quindi non li ho corretti. DESIGN.md non registra ancora lo schema «taglio»: lo può aggiornare `/impeccable document`, oppure la passata polish prevista dopo. ## Passata «polish» (finale prima della consegna) Ho usato uno script Playwright con Chrome (in una cartella temporanea, fuori dal progetto), per guidare davvero la pagina invece di guardare solo le catture. **Corretto** - **Focus da tastiera sui cassetti dei problemi**: era invisibile, perché il vano del cassetto taglia ciò che esce dai suoi bordi, compreso il contorno di focus. Ora il contorno blu notte da 3 px è disegnato all'interno del cassetto (offset negativo). - **Hover delle FAQ**: lo sfondo bianco al passaggio creava una fascia di colore diverso sopra la risposta aperta. Ora l'hover sottolinea la domanda in giallo e schiarisce l'icona. Anche qui il focus è disegnato all'interno. - **Banda «L'AI accelera…»**: velo sulla foto più scuro e più esteso (dal 5% al 92%). Su mobile «L'AI accelera» in bianco poggiava su un azzurro chiaro. **Verificato, senza bisogno di modifiche** - Nessuno scroll orizzontale a 1440, 1280, 1024, 768, 390 e 360 px. - Contrasto calcolato su tutto il testo renderizzato, a 1440 e a 390 px: nessun elemento sotto WCAG AA (4,5:1 per il testo normale, 3:1 per il grande). Il testo sopra le foto l'ho controllato a vista. - Tab: l'ordine è logico (marchio, menu, CTA, email, cinque cassetti dei problemi, CTA di prenotazione, FAQ, link email) e il focus è sempre visibile: giallo sul blu, blu notte su giallo e zinco. - Cassetti dei problemi: se ne apre uno alla volta, `aria-expanded` e `hidden` restano allineati. - FAQ: si aprono più risposte insieme, l'icona passa da + a −. - `prefers-reduced-motion`: i due cassetti dell'hero sono già fuori al caricamento, con transizioni a 0 e scroll non animato. - Senza JavaScript tutte e cinque le risposte dei problemi sono visibili, quindi il contenuto non va perso. In quel caso i pulsanti non fanno nulla, perché non c'è il JS che li governa. - Nessun errore in console. Tutte le immagini si caricano (con il caricamento differito si caricano scorrendo). - Le immagini hanno larghezza e altezza dichiarate (nessuno spostamento del layout) e il testo alternativo è su quelle informative; quelle decorative hanno `alt=""`. **Lasciato com'è, di proposito** - Nei cassetti S2–S4 resta spazio giallo a 1440 px. Sono cassetti di una parete e la loro altezza segue il cassetto più alto della riga. - I fattori di scala tipografica fuori da DESIGN.md e lo schema «taglio» non ancora documentato restano come segnalazione per `/impeccable document`. Non li ho toccati in questa passata. **Non verificato**: Safari e Firefox, dispositivi touch veri, screen reader reale (ho controllato solo nomi e attributi ARIA dal codice), connessione lenta.