DESIGN.md · Sviluppare progetti WordPress con l'AI

Un file di awesome-design-md copiato nella cartella del progetto. Modello claude-opus-5-5, Claude Code 2.1.317 in modalità headless, 3 novembre 2026, VoltAgent/awesome-design-md@fcc7028.

Il prompt

Realizza la landing page descritta in BRIEF.md seguendo il linguaggio visivo descritto in DESIGN.md: usa i suoi token (colori, tipografia, raggi, spaziature) e rispetta i Do e Don't. Il DESIGN.md descrive un altro sito: prendi solo lo stile, non il nome, i testi o i contenuti. Segui le regole di consegna che trovi in fondo al brief.

Costo stimato a listino dal log di Claude Code: 1.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 di design — landing «Sviluppare progetti WordPress con l'AI»

Consegna: un solo `index.html` (CSS e JS inline, Google Fonts), immagini da `assets/` con percorsi relativi.

## Dal DESIGN.md ho preso solo lo stile
Nome, testi e contenuti del sito descritto nel DESIGN.md non sono stati usati. Tutti i token sono dichiarati come
custom properties in `:root` con gli stessi valori del file.

### Palette
- **Hero e CTA finale** su `brand-navy` `#0a1530`, decorati con quadratini colorati in stile post-it (giallo, rosa,
  teal, arancio, verde, lavanda) e linee curve a reticolo in SVG inline.
- **Viola `primary` `#5645d4`** usato solo per i pulsanti di prenotazione, con `primary-pressed`/`primary-deep` per
  hover e click; compare anche nel badge della CTA finale e nell'anello di focus. Mai per il testo o per i fondi grandi.
- **`link-blue` `#0075de`** solo per i link nel testo (promo banner, FAQ), mai insieme al viola nello stesso ruolo.
- **Tinte pastello** (peach, rose, sky, lavender, mint, yellow) per le card dei problemi e dei sei moduli;
  **`card-tint-yellow-bold`** per il banner ad alta enfasi della «promessa»; cream e lavender per i box secondari.
- Neutri: `canvas`, `surface`, `surface-soft`, i tre `hairline`, e i testi `ink` / `charcoal` / `slate` / `steel`.
- Per contrasto ho scurito il testo di due tag rispetto ai token: verde `#0f6b22` (invece di `brand-green` su mint)
  e blu `#004a8c` sulla tinta sky.

### Tipografia
- Il DESIGN.md richiede **Notion Sans**, che è proprietario e non si può caricare. Uso **Inter** da Google Fonts, cioè
  la base dichiarata di quel carattere, con l'asse `opsz` (taglio display sui titoli grandi) e le alternative
  OpenType `cv11`, `ss01`, `ss03` per avvicinarmi al carattere originale e non usare l'Inter standard.
  Questo resta una deviazione dichiarata dal Don't «non sostituire con un Inter generico».
- Scala dei token: hero 80px / 1.05 / -2px (con clamp fino a 36px sotto i 480px), display 56, h1 48, h2 36,
  h4 22, h5 18, subtitle 18, body 16/1.55, pulsanti 14/500. Titoli a 600, testo a 400.
- **JetBrains Mono** solo per il mockup del terminale e per le etichette «Modulo 0X»: è un'aggiunta mia, non è nel DESIGN.md.

### Forme, spaziature, profondità
- Pulsanti rettangolari con raggio di 8px (mai a pillola); card a 12px; banner della promessa a 16px; pillole
  (`full`) solo sui badge.
- Spaziature sulla griglia dei token (4 → 120px): sezioni a 96px (64px su mobile), hero a 120px, contenitore da 1280px
  con margini laterali di 32px (16px sotto i 480px).
- Ombre: livello 3 solo sul mockup dell'hero e sulla card della call; le card piatte hanno solo il bordo
  `hairline`, con un'ombra di livello 1 in hover.

## Struttura delle sezioni
1. Promo banner sopra la nav (surface): prima edizione in preparazione + link alla prenotazione.
2. Nav sticky bianca: le sezioni, il pulsante viola «Prenota la call», menu a tendina sotto i 1024px.
3. **Hero navy centrato**: titolo, sottotitolo, CTA viola + pulsante secondario su fondo scuro, poi una
   **card con il mockup di uno spazio di lavoro** che esce dalla fascia: file del progetto, piano in Plan Mode con
   tag colorati, terminale con controlli di sicurezza e phpcs. È un'illustrazione, non uno screenshot reale.
4. **Il problema**: 6 card pastello e un blocco navy con «senza metodo accelera anche gli errori» e una CTA.
5. **La promessa**: banner giallo con «esecutore di codice → regista di soluzioni» e la foto del wireframe su carta.
6. **A chi si rivolge**: checklist «fa per te» e un box «non fa per te», con la foto della postazione.
7. **I moduli**: le 6 card pastello prese dal brief, più una fascia con la foto del codice e la nota sul materiale in italiano.
8. **Il formato («così sarà strutturato»)**: 4 card (lezioni registrate, live mensile, progetto vero, spazio di
   discussione), la foto della videochiamata e un box «Learning by doing». Nessun numero di lezioni, ore o mesi.
9. **Cosa ottieni**: fascia stat-row su surface con i 4 risultati.
10. **Chi sono**: il ritratto, la bio in prima persona, 4 card con la prova sociale ammessa dal brief e la card
    della guida gratuita con il link.
11. **FAQ**: accordion `<details>` con le 5 domande del brief, testi invariati.
12. **CTA finale navy**: elenco dei vantaggi, CTA viola e card «call» (30 minuti, gratuita) con la foto alla scrivania.
13. Footer chiaro con link e crediti delle foto Unsplash usate.

Tutti i pulsanti di prenotazione puntano a `https://maurizio.mavida.com/prenota-una-call/`; i link alla guida a
`https://maurizio.mavida.com/guida-claude-code/`. Non ci sono prezzi, date di partenza, testimonianze, loghi o
numeri inventati.
I ritratti di Maurizio compaiono solo per presentarlo (bio e card della call), mai per raccontare eventi.
La foto della lezione proiettata non è usata, perché ritrae un'altra persona e potrebbe sembrare un evento di Maurizio.

## Movimento e accessibilità
- Le sezioni compaiono con un fade al primo scroll (IntersectionObserver); i post-it fluttuano piano e il cursore
  del terminale lampeggia. Con `prefers-reduced-motion: reduce` animazioni, transizioni e smooth scroll sono disattivati
  e i contenuti sono subito visibili.
- Link «Vai al contenuto», focus visibile in viola, `aria-expanded` sul menu, mockup marcato come `role="img"`
  con una descrizione, alt sulle foto di contenuto.

## Verificato
- Render con Chrome headless a 1440px e in un iframe largo 360px: niente scroll orizzontale (gli unici elementi oltre
  il bordo sono gli SVG decorativi, tagliati da `overflow:hidden`). Corretto un problema di proporzioni della foto
  nella card della call e il testo a capo del pulsante nella nav a 360px.

## Non verificato
- Larghezze intermedie (480–1023px) solo a ragionamento sui breakpoint, non renderizzate una per una.
- Browser diversi da Chrome (Safari, Firefox) e dispositivi reali con touch.
- Caricamento effettivo di Google Fonts in produzione (in locale c'è il fallback di sistema) e resa delle feature
  OpenType di Inter.
- Contrasto WCAG misurato con uno strumento: i colori sono scelti per avere un buon contrasto, ma non li ho misurati.
- Che i due URL esterni (prenotazione e guida) siano attivi.