← Tutte le bozzeDemo delle skill di design
taste-skill · Sviluppare progetti WordPress con l'AI
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: 2.75 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» Consegna: `index.html` (CSS e JS inline, nessun framework), immagini da `assets/` con percorsi relativi. ## Direzione scelta e perché Lo script della skill mi ha proposto tre direzioni (seed 1107658153, settore *education*): - **loud-flat-poster**: colori saturi, testo urlato, foto ritagliate e inclinate. L'ho scartata: è troppo chiassosa per un consulente senior che deve sembrare affidabile e che promette metodo, non adrenalina. - **borrowed-category**: vestire il percorso da un'altra categoria. L'ho scartata: avrebbe chiesto un travestimento (per esempio un programma di cinema per richiamare il «regista»). Si rischiava il kitsch e un tono meno diretto. - **sentence-as-layout** ✅: la frase *è* l'impaginazione, con una foto dentro la riga al posto di una parola. L'ho scelta perché il brief ruota tutto attorno a una frase («da esecutore di codice a regista di soluzioni»). Il tono è in prima persona e diretto, e una sola frase grande con dentro la persona racconta esattamente la promessa. **L'idea.** Sulla pagina, *Maurizio alla sua scrivania* diventa *la foto incastonata nel titolo*: «WordPress [Maurizio] con l'AI». Tra WordPress e l'AI c'è una persona che dirige, ed è lui. La stessa grammatica torna più in piccolo nella frase sul copia e incolla, con due miniature dentro la riga. **La cosa interattiva.** Il blocco «Stessa richiesta, due plugin» parte da una richiesta reale («aggiungi al profilo utente un campo Telefono e salvalo») e mostra il codice in due versioni da alternare con due pulsanti: *Incollato dal chatbot* e *Fatto con metodo*. Nella seconda le righe aggiunte (nonce, controllo dei permessi, sanitizzazione, escape, prefisso) sono evidenziate e spiegate. È la prova concreta del modulo 3 «Codice che regge» e della frase del brief «senza metodo l'AI accelera anche gli errori». Senza JavaScript le due versioni compaiono una sotto l'altra. Si usa da tastiera e i blocchi di codice scorrono in orizzontale sul telefono. ## Ridisegni (redraw) - **Carattere, 2 volte.** Il primo carattere proposto, General Sans, si carica da Fontshare, ma il brief consente solo Google Fonts. Il secondo, Anton, esiste solo in maiuscolo, mentre la direzione vuole frasi in minuscolo. Ho tenuto il terzo, **Barlow Condensed 700** per i titoli e **Barlow 400/500** per i testi, tutti e due su Google Fonts. Essendo condensato, permette di tenere «WordPress con l'AI» su una riga anche con la foto dentro. ## Palette («Sheet and biro») | Ruolo | Colore | |---|---| | Fondo | `#ffffff` | | Superficie (blocchi di codice, fondo delle FAQ) | `#f4f4f4` | | Inchiostro | `#111111` | | Grigio secondario | `#6b6b6b` | | Accento (pulsanti, link, ultimo gradino, footer) | `#1a4be0` | | Campo scuro (chiusura) | `#111111` | Carta bianca e biro blu: si addice a chi scrive codice e manuali, e il blu richiama WordPress senza copiarne il marchio. Non ci sono sfumature, ombre né linee sottili: le superfici si distinguono solo per un piccolo salto di tono. I pulsanti sono rettangolari, senza angoli arrotondati. ## Struttura delle sezioni 1. **Hero.** Il titolo «WordPress [foto] con l'AI» su una riga (su telefono va su due righe con la foto in mezzo). Sotto, una frase di supporto e il pulsante «Prenota la call gratuita». 2. **Il copia e incolla ha un limite.** Il problema in una frase con due miniature, poi la demo del codice a due versioni. 3. **Il programma, dall'idea al rilascio.** I sei moduli come tabella spostata a destra, divisi in due gruppi di tre, con la foto dei post-it a sinistra. 4. **Come funziona.** Quattro frasi in scala che scende in diagonale: lezioni registrate, una live al mese, il progetto vero, lo spazio di discussione. La didascalia «Così sarà strutturata la prima edizione» chiarisce che il formato è una proposta. 5. **Chi tiene il percorso.** La biografia con il ritratto inserito nel testo come una lettera iniziale grande, tre fatti a lato (Torino e Mavida, WordPress dal 2004, formazione AI dal 2023) e la foto del Po a Torino. 6. **Cosa ti porti a casa.** I quattro risultati del brief, ciascuno con una foto a margine di misura diversa. 7. **Domande frequenti.** Sei domande, tutte aperte, su fondo grigio chiaro. Ho aggiunto «A chi si rivolge?» per dare spazio al pubblico descritto nel brief. 8. **Chiusura.** Su fondo nero, «Trenta minuti, / ne parliamo?» con due scelte: prenotare la call oppure scaricare la guida. 9. **Footer blu.** «Prenota una call» in grande, poi i crediti delle foto. Tutti i pulsanti di prenotazione puntano a `https://maurizio.mavida.com/prenota-una-call/`. La guida punta a `https://maurizio.mavida.com/guida-claude-code/`. **Movimento.** Alla prima apertura la foto del titolo si apre da sinistra a destra. Titoli, testi e immagini entrano scaglionati mentre si scorre, e la foto del Po si muove lentamente. Pulsanti e link reagiscono al passaggio del mouse e al clic. Con `prefers-reduced-motion` resta tutto fermo e visibile. ## Immagini usate - **Ritratti generati di Maurizio**: `maurizio-scrivania.jpg` nel titolo e `maurizio-ritratto.jpg` nella biografia. Li ho usati solo per presentarlo, mai per raccontare eventi. - **Unsplash**, con i crediti nel footer: - Rahmani (codice-schermo) - Compagnons (wireframe-carta) - Pakata Goh (postazione-sviluppo) - NEW DATA SERVICES (wireframe-postit) - LinkedIn Sales Solutions (videochiamata) - Kolosov (Po e Gran Madre) - Wonderlane (lezione con il codice proiettato, didascalia neutra, non presentata come Maurizio) - Liuft (Mole di giorno) - `torino-mole-tramonto.jpg` è rimasta inutilizzata. ## Cosa non ho inventato Nella pagina non ci sono prezzi, date di partenza, numero di lezioni, ore o mesi, testimonianze, loghi né numeri oltre a quelli del brief (2004, 2010, 2015, 2016, 2023, 2026, 14 novembre, oltre 300 pagine, 17 capitoli, sei moduli, trenta minuti). Il codice PHP della demo l'ho scritto io come esempio didattico: va riletto da Maurizio prima della pubblicazione. ## Verifiche fatte - `lint.mjs`: nessun pattern vietato. - `inspect.mjs` a 1440, 768 e 390 px: **0 FAIL, 2 WARN**, entrambi motivati: - *3 famiglie di caratteri*: la terza è il monospace dei veri blocchi `<pre><code>` della demo, l'unico uso consentito; - *nessun video*: il brief vieta di caricare o generare altre immagini e in `assets/` non ci sono filmati. - Ho guardato tutti gli screenshot dopo l'ultima modifica. - Ho provato a parte il cambio di versione nella demo su telefono (390 px): funziona e la pagina non scorre in orizzontale. **Critica finale (round 2).** Design 7,5 · usabilità 8 · creatività 7,5 · contenuto 8 → **7,7**. Restano tre punti deboli: - in «Cosa ti porti a casa» le colonne a sinistra restano vuote per scelta del layout e su desktop la sezione è un po' rada; - l'hero ha molto bianco sotto la frase di supporto; - i due fondi pieni di fila (chiusura nera, footer blu) sono molto pesanti. ## Cosa non ho potuto verificare - Il caricamento reale di Google Fonts su reti lente o bloccate (c'è un carattere di riserva, ma l'impaginazione condensata cambierebbe). - Browser diversi da Chromium (Safari, Firefox) e dispositivi fisici: i test sono solo in Chrome headless. - Un controllo completo con lettore di schermo (ho verificato solo struttura dei titoli, testi alternativi, `aria-pressed` e uso da tastiera nel codice). - Che le pagine di destinazione (prenotazione call e guida) esistano e funzionino. - La correttezza del codice PHP della demo su un'installazione WordPress reale.