DESIGN.md · Consulenza WordPress e WooCommerce

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.65 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»

## Palette (token di DESIGN.md)
- Canvas bianco `#ffffff`, fasce alternate `#fafafa` (canvas-soft) con hairline `#ededed`.
- Testo `#171717` (ink), secondario `#707070` / `#9a9a9a`; bordi `#dfdfdf` e `#c7c7c7`.
- Unico colore: verde smeraldo `#3ecf8e` (hover `#4ade80`, pressed/bordo `#24b47e`), usato **solo** per i pulsanti di prenotazione e per piccoli punti d'accento. Il testo sul verde è near-black, mai bianco.
- Superfici scure `#1c1c1c` / `#202020` (canvas-night) per la card «featured» (ottimizzazione), i blocchi di codice, la citazione sull'AI e la CTA finale: come nel DESIGN.md, l'elemento in evidenza è scuro, non verde.
- Nessun accento viola, giallo o rosa, nessun gradiente atmosferico.

## Tipografia
- **Inter** 400/500 da Google Fonts (sostituto di Circular suggerito dal DESIGN.md). I titoli restano a 500, mai di più, con tracking negativo dalla scala: 64/-1.92, 48/-1.44, 36/-0.72, 28/-0.42.
- Monospace di sistema (`ui-monospace`, Menlo, Consolas) per terminale, blocchi di codice, eyebrow e numerazioni.
- Scala responsive: 64 → 48 (tablet) → 36 (mobile) per l'h1.

## Forme, spaziature, elevazione
- Pulsanti con raggio 6px (mai a pillola); card e foto 12px; CTA finale 16px; pill a 9999px solo per i tag.
- Spaziature sulla griglia da 8px; sezioni da 96px (64px su mobile); padding delle card 32px; container da 1280px.
- Ombre solo ai livelli 1 e 2 del DESIGN.md; il livello 2 è per i pannelli «mockup» sovrapposti.
- Regola «un pulsante verde per viewport»: nella nav il pulsante è scuro (button-on-dark), il verde resta alla CTA dell'hero e delle sezioni successive.

## Struttura delle sezioni
1. Nav sticky: marchio con punto verde, ancore e pulsante «Prenota una call».
2. Hero: pill «gratuita · 30 minuti · Google Meet», h1, CTA verde e mailto secondaria. A destra c'è la composizione in stile «UI compositata» del DESIGN.md: ritratto + pannello report «prima → dopo» + terminale WP-CLI con i plugin dimenticati. Su mobile resta un solo pannello.
3. Striscia di credenziali (solo dati del brief).
4. «Ti riconosci?»: i 5 problemi del brief in una griglia a hairline, con la card scura per le tre categorie di destinatari.
5. Servizi: 6 card, con l'ottimizzazione come card scura a due colonne e un blocco di codice.
6. Casi reali anonimi (utensileria B2B, farmaceutico) con mini diagrammi di flusso + «Diverse decine di e-commerce pubblicati con Mavida».
7. Metodo in 4 passi, citazione «l'AI accelera…» e foto del wireframe.
8. Prenotazione: i 4 passi, foto della videochiamata e un pannello finto (non interattivo, `aria-hidden`) con il campo «Di cosa vorresti parlare?».
9. Chi sono: foto alla scrivania + Mole di Torino, bio e pill dei fatti.
10. FAQ con `<details>` nativi (funzionano anche senza JS).
11. CTA finale scura + email.
12. Footer con i crediti delle foto di Unsplash.
- Su mobile, dopo l'hero, compare una CTA fissa in basso, che si nasconde vicino alla CTA finale.

## Scelte e ipotesi dichiarate
- Il DESIGN.md dice «niente fotografia», mentre il brief chiede foto vere: ha prevalso il brief. Le foto stanno in cornici da 12px con hairline, come i mockup, e sono usate con parsimonia (5 foto).
- I pannelli «report» e «terminale» sono illustrativi e **senza numeri**: il brief non fornisce misure reali, quindi riportano solo le etichette «prima/dopo».
- Il ritratto è usato solo per presentare Maurizio (hero, chi sono), mai per raccontare eventi.
- Nella foto `videochiamata.jpg` si vede una borraccia con un marchio; ho spostato il ritaglio a destra per ridurne la presenza, ma resta visibile.
- Nessun prezzo, testimonianza, logo o numero inventato; i testi del brief sono riscritti in prima persona dando del «tu».

## Cosa ho verificato e cosa no
- Verificato con screenshot di Chrome headless a 1440 px e a 360 px (dentro un iframe da 360 px, misurando che la pagina non abbia overflow orizzontale); con «reduced motion» forzato le animazioni sono disattivate.
- **Non verificato**: Safari/iOS e Firefox reali, la resa tablet oltre la prima schermata (controllata solo a 820 px sull’hero), il contrasto misurato con uno strumento, i lettori di schermo, il caricamento di Inter in rete (se manca, si usa Helvetica/Arial). Non ho verificato che la pagina di prenotazione esterna sia raggiungibile.