← Tutte le bozzeDemo delle skill di design
Senza skill · Sviluppare progetti WordPress con l'AI
Claude Code con il solo prompt, come metro di paragone. Modello claude-opus-5-5, Claude Code 2.1.317 in modalità headless, 3 novembre 2026.
Il prompt
Realizza la landing page descritta in BRIEF.md. Segui le regole di consegna che trovi in fondo al brief.
Costo stimato a listino dal log di Claude Code: 1.23 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 di design — landing «Sviluppare progetti WordPress con l'AI» ## Idea guida «Da esecutore di codice a regista di soluzioni»: una pagina calda e da artigiano (carta, inchiostro, pennarello arancione, come nella foto del wireframe) alternata a sezioni scure "da terminale" per i momenti tecnici o critici (problema, chi sono). ## Palette | Ruolo | Colore | |---|---| | Fondo carta | `#F6F1E8` (alternato a `#EDE5D6`) | | Inchiostro / testo | `#1A1D26`, secondario `#3F4452`, muted `#5E6371` | | Notte (sezioni scure, terminale) | `#161B2B` / `#212841` | | Accento arancio (pulsanti) | `#E8692E`, testo scuro sopra per il contrasto | | Arancio per testo su carta | `#B44A16` (più scuro, per un contrasto leggibile) | | Arancio su fondo scuro | `#F3A57C` | | Verde "check" | `#2F7A55` | ## Font (Google Fonts) - **Fraunces** per i titoli: un serif espressivo che dà un tono editoriale e umano. - **IBM Plex Sans** per il testo. - **JetBrains Mono** per eyebrow, etichette e terminale, per richiamare il codice. ## Struttura delle sezioni 1. Header fisso con navigazione verso le sezioni e CTA «Prenota la call». 2. Hero: badge «Prima edizione in preparazione», titolo, promessa, CTA principale e link ai moduli; foto di Maurizio alla scrivania con una finestra di terminale in CSS sovrapposta (prima il piano, CLAUDE.md, nonce/sanitize/escape, WPCS). 3. Fascia di credenziali (solo la prova sociale del brief). 4. Il problema (sezione scura): i punti critici come righe "ERR"; foto del codice e la frase «senza metodo accelera anche gli errori». 5. La promessa: da «esecutore» (barrato) a «regista», più solido / sicuro / manutenibile; foto del wireframe su carta. 6. A chi si rivolge: card «Fa per te se» e «Non fa per te se». 7. Formato «così sarà strutturato»: 4 card, foto della videochiamata e il blocco learning by doing. Nessun numero. 8. I 6 moduli, con gli argomenti mostrati come etichette. 9. Cosa ottieni: 4 punti. 10. Chi tiene il percorso (sezione scura): ritratto, bio e timeline con le sole date del brief. 11. Box della guida gratuita con il link a `/guida-claude-code/`. 12. FAQ con `<details>` (accessibili senza JavaScript). 13. CTA finale sopra la foto della Mole al tramonto: 3 passi della call. 14. Footer con i crediti delle foto Unsplash usate. Su mobile compare una CTA fissa in basso, nascosta nell'hero e nella CTA finale. Tutti i pulsanti di prenotazione puntano a `https://maurizio.mavida.com/prenota-una-call/`. ## Ipotesi e scelte - I ritratti di Maurizio sono usati solo per presentarlo (hero e «chi sono»), mai per raccontare eventi. - Non ho usato la foto della lezione proiettata, per non suggerire che sia un evento di Maurizio. - «Mavida» non è un link, perché nel brief non c'è l'URL dell'agenzia. Nel footer c'è un link a `maurizio.mavida.com`, ricavato dal dominio dei link del brief. - Le frasi di raccordo (es. «Niente vendita aggressiva, promesso», «se no, te lo dico») sono testi di tono, non fatti nuovi. - Animazioni: comparsa allo scroll, pulsazione del badge e cursore del terminale. Con `prefers-reduced-motion` sono tutte disattivate, e lo è anche lo scroll fluido. ## Verificato - Screenshot con Chrome headless a 1440 px e a 360 px (tramite iframe largo 360 px): nessuno scroll orizzontale, immagini ritagliate correttamente. ## Non verificato - Caricamento dei Google Fonts senza rete (i font di ripiego sono definiti). - Rendering in Safari/iOS e Firefox, in particolare `backdrop-filter` e `aspect-ratio`. - Le larghezze intermedie (768, 1024 px) sono state controllate solo leggendo il CSS, senza screenshot. - Contrasto WCAG calcolato a occhio, non con uno strumento. - Che i link esterni (prenotazione, guida) siano attivi.