← Tutte le bozzeDemo delle skill di design
taste-skill · Consulenza WordPress e WooCommerce
Skill design-taste-frontend v2.1.5, copiata in .claude/skills. Modello claude-opus-5-5, Claude Code 2.1.317 in modalità headless, 3 novembre 2026, Leonxlnx/taste-skill@12af471.
Il prompt
Usa la skill design-taste-frontend per realizzare la landing page descritta in BRIEF.md. Segui le regole di consegna che trovi in fondo al brief: lavora senza fare domande e, dove la skill ti chiederebbe di scegliere tra più direzioni, scegli tu quella più adatta al soggetto e spiega il perché in NOTE.md.
Costo stimato a listino dal log di Claude Code: 3.92 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 di design — landing «Prenota una call» Consegna: `index.html` (un solo file, CSS e JS inline, Google Fonts) con le immagini di `assets/` richiamate con percorsi relativi. ## Direzione scelta (skill design-taste-frontend) `draw.mjs` ha distribuito tre direzioni (settore `agency`, seed **1865433599**): - **dense-tiles**, «The well-kept board»: una bacheca di tessere incastrate; - **contact-sheet**: decine di piccole foto in righe, come un provino fotografico; - **colour-chapters**, «Colour chapters»: ogni sezione è un capitolo a tutto schermo, ciascuno con il suo colore pieno. **Scelta.** Perché questa: - La pagina deve accompagnare una persona attraverso *i suoi* problemi, uno alla volta, fino alla call. È la struttura di una conversazione di trenta minuti: un argomento per volta, in ordine. I capitoli di colore rendono proprio questo. - *contact-sheet* ha bisogno di decine di foto del lavoro, e qui non ci sono: i casi sono anonimi e non esistono screenshot dei progetti. - *dense-tiles* avrebbe spezzettato in tessere i testi lunghi del brief (servizi, FAQ). Il brief chiede di dirli per intero. Nessun redraw: palette, tipografia e blueprint sono quelli distribuiti. ## L'idea > In questa pagina **i trenta minuti della call** diventano **la grande forma ritagliata dell'hero**: un quadrante d'orologio con la metà destra arancione, cioè mezz'ora, e la lancetta che al caricamento ruota fino alle sei. Il titolo («Mezz'ora per il tuo WordPress»), la forma dei pulsanti (lato sinistro squadrato, destro tondo, cioè mezzo disco), il ritratto ritagliato in un cerchio e la chiusura («Mezz'ora, poi decidi tu») riprendono tutti la stessa idea. **L'elemento interattivo: «Le tue due righe».** Nella sezione gialla «Ti suona familiare?» il visitatore sceglie i problemi in cui si riconosce. Sono i cinque del brief più il caso dell'agenzia. La pagina compone il testo da incollare nel campo «Di cosa vorresti parlare?» del modulo di prenotazione, con lo spazio già pronto per strumenti, obiettivi e scadenze (è il suggerimento della FAQ «Devo preparare qualcosa?»). - Il testo si può modificare a mano. Le scelte aggiungono o tolgono solo la propria frase, senza cancellare quello che hai scritto. - C'è un pulsante «Copia il testo» e un link mailto con lo stesso testo nel corpo dell'email. - Senza JavaScript resta un campo di testo modificabile con il modello vuoto. ## Palette («Report blocks», distribuita) | Ruolo | Colore | |---|---| | Fondo | `#ffffff` | | Inchiostro | `#000000` | | Accento, solo sui pulsanti e sulla metà «mezz'ora» del quadrante | arancione `#fe7141` | | Campi pieni | salvia `#d1ddd3`, giallo acido `#f0ff1c`, nero | Ho aggiunto una sola famiglia di verdi scuri, tinte piatte della salvia: `#1f2b24`, `#3d5446`, `#7f9a87`, `#b5c8ba`. Servono alla fisarmonica «Come lavoro», che il blueprint vuole dal più scuro al più chiaro, e al pannello «Chi sono». Niente gradienti, ombre, filetti o viola. Il fondo è bianco, non crema. ## Font **Albert Sans**, una sola famiglia, pesi 400, 500 e 600, da Google Fonts. - Titoli in 600, interlinea 1.0, tracking −0.035em. - Testo a 17–19px, interlinea 1.5. - Scala fluida: small, body, lead, head, display, più un «giant» per la chiusura e il marchio a blocchi del footer. ## Struttura delle sezioni (nell'ordine dell'argomentazione) 1. **Hero** (bianco). - h1 «Mezz'ora per il tuo WordPress». - Frase: chi è, cosa fa, call gratuita su Google Meet. - Pulsante di prenotazione, link email e il quadrante grande ritagliato dal bordo. 2. **Ti suona familiare?** (giallo). I problemi del brief come pulsanti da attivare, più il riquadro «Le tue due righe». 3. **Spesso si tratta di togliere** (salvia). I sei servizi in righe appese a un asse comune. Ogni riga ha a destra una foto oppure un elenco concreto: i quattro momenti WooCommerce, API/webhook/file di scambio, cosa comprende la manutenzione. 4. **Casi reali**: tre capitoli a tutto schermo che crescono da un riquadro rientrato. - Nero: utensileria B2B con più di venti listini. - Arancione: farmaceutico, DDT e bolle che si riallineano. - Verde scuro: «diverse decine di e-commerce» con Mavida, con la foto di Torino al tramonto che si apre a otturatore (la mossa principale). - Nei primi due capitoli c'è un disegno SVG piatto (un listino, una pila di bolle). Non sono screenshot di clienti. 5. **Come lavoro** (bianco). - La frase sull'AI («l'AI accelera, le scelte e la qualità restano mie»). - Una fisarmonica orizzontale con i quattro passi, dal verde scuro al chiaro. Su telefono diventa verticale. 6. **Lavoro con WordPress dal 2004**: pannello verde scuro con il ritratto ritagliato in un cerchio e tre blocchi (Mavida 2001 e PHP; WordCamp, WordCamp Europe 2016 Vienna, Meetup Torino dal 2015; la Guida pratica a Claude Code). 7. **Prima di prenotare** (salvia). - Le FAQ come fisarmonica `<details name>`: ne resta aperta una alla volta, colorata d'arancione. - A sinistra, titolo fisso e foto del Po. - Ho aggiunto «Come si prenota?» e «Usi l'intelligenza artificiale?», con testi presi dal brief. 8. **Chiusura** (nero): «Mezz'ora, poi decidi tu», frase, email, pulsante. 9. **Footer** (giallo): il nome «Maurizio» costruito a blocchi in SVG, link, contatti, crediti foto. Tutti i pulsanti di prenotazione puntano a `https://maurizio.mavida.com/prenota-una-call/`. L'azione secondaria è `mailto:maurizio@mavida.com`. **Motion:** - Lancetta e metà arancione che ruotano al caricamento. - Ingressi sfalsati per ogni sezione. - Capitoli che crescono a tutto schermo, foto di Torino a otturatore con una lenta deriva, blocchi del footer che salgono. - Feedback su hover e pressione di tutti i controlli. Con `prefers-reduced-motion` tutto resta visibile e fermo. Nelle sezioni dopo i casi le entrate muovono solo la posizione: il testo non è mai invisibile. ## Immagini usate - **Foto Unsplash:** - `codice-schermo` (Mohammad Rahmani) - `postazione-sviluppo` (Pakata Goh) - `wireframe-carta` (Compagnons) - `torino-mole-tramonto` (Massimiliano Morosinotto) - `videochiamata` (LinkedIn Sales Solutions) - `wireframe-postit` (NEW DATA SERVICES) - `torino-po-gran-madre` (Nikolai Kolosov) - Il credito è nel footer. - **Ritratto:** `maurizio-ritratto` solo nella sezione che lo presenta. - **Non usate:** - `maurizio-scrivania` - `torino-mole-giorno` - `lezione-codice-proiettato`, perché non è Maurizio e farebbe pensare a un suo talk. - **Disegni in SVG** che sostituiscono le foto: il quadrante dell'hero, il listino del caso B2B, la pila di bolle del caso farmaceutico, il marchio a blocchi. ## Ipotesi dichiarate - «Mezz'ora» = «trenta minuti» del brief. - Il link a Mavida punta a `https://www.mavida.com/`: è un'ipotesi, l'URL non è nel brief. - La Guida a Claude Code è citata senza link, perché il brief non dà l'indirizzo. - I testi delle FAQ sono quelli del brief, leggermente accorciati e portati in prima persona. - Non ho inventato numeri, clienti, testimonianze, prezzi o date. ## Verifiche fatte - **`lint.mjs`:** 0 FAIL, 0 WARN. - **`inspect.mjs`** a 1440, 768 e 390 px: 0 FAIL, 2 WARN. - *no-footage*: nessun video. Ho cercato su Wikimedia Commons, Internet Archive e NASA («Turin Po river», «Turin»): solo calcio e cantieri, nulla di onesto per il soggetto. - *size-count* a 768 e 390: sono le dimensioni intermedie della scala fluida (`clamp`), non nuove taglie. - Ho guardato tutti gli screenshot, a ogni larghezza, dopo l'ultima modifica. - Ho provato in un Chrome headless: - il compositore delle «due righe» (aggiunta e rimozione delle frasi, mailto aggiornato); - la fisarmonica dei passi; - l'apertura da `file://`. Durante il controllo: - Ho corretto un errore di JavaScript che bloccava tutti gli ingressi. - Ho tolto le didascalie delle foto dei servizi, che su telefono sembravano «eyebrow» sopra il titolo successivo. - Ho ridotto la pagina, che era lunga 14 schermate: l'inspector ne percorre al massimo 12. **Critica, ultimo giro:** - Punteggi indicativi: design 7 · usabilità 7.5 · creatività 7 · contenuto 8 → **7.4**. - Cosa resta debole: - la sezione servizi è lunga e ritmicamente uniforme; - i titoli dei capitoli dei casi sono piccoli rispetto al campo colore; - su telefono c'è parecchio vuoto tra il pulsante e il ritratto nel pannello «Chi sono». ## Cosa non ho potuto verificare - La prenotazione: non ho aperto `maurizio.mavida.com/prenota-una-call/`. Non so se il campo «Di cosa vorresti parlare?» accetti testo su più righe come quello composto dalla pagina. - La copia negli appunti dipende dal browser: `navigator.clipboard` richiede https o localhost; da `file://` interviene il fallback `execCommand`. Non l'ho provata su Safari iOS. - Nessun test con lettori di schermo reali né su dispositivi fisici: solo Chrome headless con viewport emulate. - Il font viene da Google Fonts: offline la pagina usa il fallback `system-ui`.