← Tutte le bozzeDemo delle skill di design
Senza skill · Consulenza WordPress e WooCommerce
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.3 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» ## Direzione Il registro è da studio artigiano e tecnico, non da agenzia. Carta calda, inchiostro blu notte e un solo colore d'accento. Il tono del brief (diretto, un filo ironico) è nei titoli («Spesso togliendo qualcosa», «Un plugin fa quasi quello che serve. Quasi.») e in un dettaglio da sviluppatore: l'etichetta `wp plugin list --status=inactive` sulla foto hero. ## Palette | Ruolo | Colore | |---|---| | Fondo carta | `#f6f1e9` / variante `#efe7da` | | Card | `#fffdf9` | | Inchiostro (testo, sezioni scure) | `#14213a`, blu notte ripreso dalla camicia nella foto alla scrivania | | Testo secondario | `#3b4660`, `#5f6779` | | Accento (CTA) | `#c4501f` terracotta, come i tetti di Torino e il pennarello del wireframe; hover `#9e3c12` | | Accento su scuro | `#f29a6b` | I pulsanti di prenotazione sono gli unici elementi pieni in terracotta, così la CTA si riconosce subito. Il testo bianco su `#c4501f` ha un contrasto di circa 4,6:1 (AA). ## Font (Google Fonts) - **Fraunces** (600, corsivo nell'hero) per i titoli: un serif con carattere, caldo ma autorevole. - **IBM Plex Sans** per il testo. - **IBM Plex Mono** per eyebrow, numerazioni ed etichette tecniche: richiama il codice senza fare «effetto hacker». ## Struttura delle sezioni 1. **Header sticky**: nome, ancore e CTA «Prenota una call». Su mobile restano solo il nome e la CTA fissa in basso. 2. **Hero**: titolo, presentazione in prima persona, CTA primaria e email secondaria, tre micro-rassicurazioni (30 minuti, Google Meet, gratuita) e la foto alla scrivania con il badge «WordPress dal 2004 · Mavida, 2001». 3. **Ti riconosci?**: i cinque problemi del brief più il caso «agenzia / code review», in forma di checklist (le spunte si animano). 4. **Cosa faccio**: i sei servizi. L'ottimizzazione è in evidenza («misura → togli → misura»), WooCommerce mostra i 4 momenti e le regole B2B. 5. **Casi reali, nomi riservati**: i due casi anonimi del brief, poi una barra di prova sociale (diverse decine di e-commerce, dal 2004, dal 2010, WordCamp Europe 2016 a Vienna). 6. **Come lavoro**: i 4 passi in timeline e un riquadro sull'uso dell'AI con la citazione «L'AI accelera, le scelte e la qualità restano mie». 7. **Chi sono**: ritratto, bio, Meetup Torino dal 2015 e la «Guida pratica a Claude Code». 8. **Come si prenota**: i 4 passi della prenotazione e un'anteprima illustrativa del modulo con il campo «Di cosa vorresti parlare?». 9. **FAQ**: le cinque domande, con `<details>` nativi (funzionano anche senza JavaScript). 10. **CTA finale** sulla foto della Mole al tramonto («Da Torino, su Google Meet»). 11. **Footer**: contatti e crediti Unsplash, solo per le foto usate. Tutti i pulsanti di prenotazione (8 link) puntano a `https://maurizio.mavida.com/prenota-una-call/`, l'azione secondaria è `mailto:maurizio@mavida.com`. ## Immagini usate - `maurizio-scrivania.jpg` (hero) e `maurizio-ritratto.jpg` (Chi sono): usate solo per presentarlo, mai per eventi. - `postazione-sviluppo.jpg` e `codice-schermo.jpg`: immagini di contesto per i due casi. Non sono foto dei progetti reali. - `wireframe-carta.jpg` (metodo) e `torino-mole-tramonto.jpg` (CTA finale). - Non usate: `videochiamata.jpg` (mostra un'altra persona e poteva sembrare Maurizio in call), `lezione-codice-proiettato.jpg` (un'altra persona in aula: sarebbe stata letta come un suo talk), e le altre foto di Torino e dei wireframe, per non ripetere. ## Motion e accessibilità - Comparsa leggera delle sezioni con IntersectionObserver. Con `prefers-reduced-motion: reduce` animazioni, transizioni e smooth scroll sono disattivati e tutto è visibile subito. Senza JS il contenuto è visibile (classe `no-js`). - Skip link, focus visibile, `alt` descrittivi, landmark e titoli in ordine. L'anteprima del modulo è `aria-hidden` perché è decorativa. ## Ipotesi dichiarate - Ho aggiunto «Sei un'agenzia e ti serve una code review…» tra i problemi: viene dal paragrafo «A chi si rivolge». - L'anteprima del calendario non mostra date né orari reali (segnaposto `··:··`) e lo dice esplicitamente, per non inventarli. - Alcune frasi ironiche di raccordo («Niente asterischi», «Nessun ostaggio», «senza telefonate per chiedere…») sono riformulazioni di tono. Non aggiungono fatti, numeri o promesse. ## Verifiche fatte - Rendering con Chromium (Playwright) a 360, 390, 768, 1024 e 1440 px: nessun overflow orizzontale (`scrollWidth = clientWidth`). - Controllo visivo a 360 e 1440 px. Barra CTA mobile: nascosta in cima, visibile dopo l'hero, nascosta sulla CTA finale. ## Cosa non ho potuto verificare - Safari/iOS e Firefox, e dispositivi reali (testato solo Chromium). - Il caricamento effettivo dei Google Fonts in produzione e il loro impatto sulle performance (nessun test Lighthouse). - Che la pagina `prenota-una-call/` esista e funzioni, e che la «Guida pratica a Claude Code» abbia un URL da linkare (nel brief non c'è, quindi non è linkata). - Il contrasto di tutti gli stati è stato stimato, non misurato con uno strumento dedicato. - L'autorizzazione d'uso dei ritratti generati oltre a quanto scritto in `assets/README.md`.