Skill di design per AI messe alla prova

Il mio lavoro è scrivere codice e da più di vent’anni sviluppo in PHP e faccio parlare WordPress con gestionali e CRM, ma la parte grafica di un sito l’ho sempre lasciata a chi la sa fare. Per anni le bozze le hanno disegnate altri professionisti, grafici e web designer con cui collaboro, e quando mancavano tempo o budget, tutt’al più, personalizzavo qualche template. Adesso che gli agenti AI scrivono interfacce mi sono chiesto se le skill di design, i file di istruzioni che promettono di dare gusto a un agente, possano preparare quella prima bozza, e farla meglio di un template.

Ne ho messe alla prova tre, taste-skill, Impeccable e awesome-design-md, con lo stesso brief e lo stesso modello. Trovi prompt, screenshot, una demo online da sfogliare e uno zip con tutto il materiale.

Un programmatore davanti a una bozza

Chi sviluppa e non disegna ha due strade per la prima bozza: affidarla a un grafico oppure partire da un template già fatto e sostituire i testi.

Quando il progetto lo permette, la bozza la disegna un grafico o un web designer, ed è ancora la scelta migliore. Quando invece mancano tempo o budget, la mia scorciatoia ha un nome preciso: gli starter site di Blocksy, il tema che usiamo in molti progetti di Mavida. Si sceglie quello più vicino al settore del cliente, si importa, si cambiano colori, logo e testi. Funziona, ma ha un prezzo che chi lavora da freelance conosce bene: il sito somiglia a migliaia di altri siti fatti con lo stesso template.

Guarda bene la griglia: i numeri tondi con il più («500+», «8K+»), la persona sorridente, le tre icone in fila. Sono gli stessi tic delle pagine generate dall’AI, e il motivo è lo stesso. Il README di Impeccable lo dice in una frase, ogni modello è stato addestrato sugli stessi template SaaS («Every model trained on the same SaaS templates»): senza una guida ottieni la media di quello che ha visto. Per chi ha poca dimestichezza con la grafica resta da capire se una skill di design dà una bozza migliore del template, senza dover diventare un art director.

Che cosa fa una skill di design

Una skill di design è un file di istruzioni, in genere un SKILL.md con qualche script accanto, che l’agente carica per lavorare con le regole e i controlli di un art director al posto delle sue abitudini.

Una skill di design da sola non genera nulla: restringe il campo delle risposte possibili, dice che cosa evitare, che cosa decidere prima di scrivere codice e che cosa controllare alla fine. taste-skill pesca una direzione estetica da una libreria e la fa rispettare con un ispettore nel browser, Impeccable è un processo completo con 24 comandi e un rilevatore di difetti, awesome-design-md è una raccolta di file DESIGN.md che descrivono lo stile di siti esistenti. Impeccable stesso racconta di essere partito dalla skill frontend-design di Anthropic.

Sono progetti che corrono: da metà ottobre taste-skill è passata da tredici skill a una sola e Impeccable è arrivato a 62 regole, con oltre centomila stelle su GitHub ciascuno. Una skill caricata occupa contesto e tempo, come racconto nell’articolo sugli harness degli agenti AI; se non ne hai mai installata una, la guida pratica a Claude Code spiega come funzionano.

Il banco di prova: due landing, un brief

Per confrontare le skill di design serviva una prova ripetibile: stesso brief, stesse foto, stesso modello, e una pagina fatta senza skill come metro di paragone.

La prima landing porta alla call conoscitiva per consulenza WordPress, WooCommerce e ottimizzazione, con i testi delle pagine del blog. La seconda presenta un percorso su come sviluppare progetti WordPress con l’AI, che oggi è solo un’idea: niente prezzi né date, lezioni registrate con una live al mese e i moduli presi dalla guida e dal workshop sul vibe coding. Nel brief c’è una regola che consiglio a chiunque: non inventare testimonianze, loghi, numeri, prezzi o date.

Al primo giro avevo vietato anche le immagini, e le pagine erano eleganti ma fatte quasi solo di testo. Al secondo ho dato a tutte le prove la stessa cartella di foto: nove immagini gratuite di Unsplash e due miei ritratti generati con Nano Banana da mie foto. Con le foto vere un agente fa un altro mestiere, e per un freelance è la cosa più facile da applicare.

I prompt sono volutamente brevi, perché il lavoro lo deve fare la skill di design. Impeccable è l’unica con più passate, come suggerisce la sua documentazione:

# Senza skill
Realizza la landing page descritta in BRIEF.md. Segui le regole di consegna che trovi in fondo al brief.

# taste-skill
Usa la skill design-taste-frontend per realizzare la landing page descritta in BRIEF.md. [...] dove la skill
ti chiederebbe di scegliere tra più direzioni, scegli tu quella più adatta al soggetto e spiega il perché in NOTE.md.

# Impeccable, tre passate nella stessa sessione
/impeccable Realizza la landing page descritta in BRIEF.md. È una pagina che deve convincere a prenotare
(modalità Persuade): scegli la direzione con la «Bolder hand», con foto vere prese da assets/ [...]
/impeccable bolder index.html: dai più presenza visiva alla pagina [...]
/impeccable polish index.html: passata finale prima della consegna [...]

# DESIGN.md
Realizza la landing page descritta in BRIEF.md seguendo il linguaggio visivo descritto in DESIGN.md: usa i suoi
token e rispetta i Do e Don't. Il DESIGN.md descrive un altro sito: prendi solo lo stile, non il nome o i testi.

Ogni prova è girata in una cartella vuota con Claude Code in modalità headless, il modello Opus 5.5 e nessuna delle mie impostazioni personali, così ogni differenza dipende dalla skill e non da Claud.ia. In tutto otto pagine; cliccando sulle immagini le vedi ingrandite.

Senza skill: il punto di partenza

Senza nessuna skill di design, Opus 5.5 non fa più la pagina viola con le tre card, e la bozza è già presentabile.

In circa cinque minuti per pagina sono uscite due landing ordinate, con un titolo in serif elegante, il mio ritratto alla scrivania nel primo schermo e una chiusura sulla Mole al tramonto. Per un cliente che si aspetta una bozza è già più di quanto ottenevo con un template.

Il difetto si vede solo mettendole una accanto all’altra: sono sorelle. Fondo color crema, serif con il corsivo, pulsante arancione, la piccola etichetta in maiuscoletto sopra ogni titolo e le card numerate da 01 a 06. Il modello ha smesso di produrre il cliché di due anni fa e ne ha uno nuovo, più raffinato ma riconoscibile: due clienti diversi riceverebbero la stessa bozza con parole diverse.

taste-skill: tre direzioni a sorte

taste-skill toglie all’agente la scelta dello stile: uno script pesca tre direzioni da una libreria di venti, l’agente ne sceglie una e poi la verifica in un browser vero.

La versione di oggi si presenta come «tasteskill v2», distillata secondo la descrizione dallo studio di 247 siti premiati. Lo script propone tre direzioni con tipografia, palette e composizione delle sezioni, l’agente cerca un’idea presa dal soggetto e un ispettore in Chrome controlla le regole della casa, tra cui il divieto delle etichette sopra i titoli, proprio quelle della baseline.

Per la consulenza ha avuto un’idea che a me non sarebbe mai venuta: i trenta minuti della call diventano un quadrante d’orologio con la metà destra arancione, e la stessa mezza luna torna nei pulsanti e nella chiusura, «Mezz’ora, poi decidi tu». Nella sezione gialla spunti i problemi in cui ti riconosci e la pagina scrive per te le due righe da incollare nel modulo di prenotazione.

Per la formazione ha scelto la direzione in cui la frase è l’impaginazione: «WordPress [foto] con l’AI», con il mio ritratto incastonato nel titolo, perché tra WordPress e l’AI c’è una persona che dirige. Dentro c’è un selettore che mostra la stessa funzione di un plugin «incollata dal chatbot» e «fatta con metodo», e spiega il corso meglio di un paragrafo. Le pagine però sono lunghissime, oltre i diecimila pixel, e vanno sfoltite prima di mostrarle.

Impeccable: un’idea per tutta la pagina

Impeccable è la skill di design più metodica: scrive prima PRODUCT.md con la verità del prodotto, sceglie la modalità della pagina e costruisce tutto attorno a un’idea, controllata da un rilevatore a ogni modifica.

Si installa con npx impeccable install, che aggiunge anche un hook con 62 regole deterministiche, senza modello e senza chiave API. Al primo giro, con un prompt asciutto e senza foto, aveva prodotto pagine curate ma minimali, quasi da documentazione tecnica. Così ho riletto la documentazione e l’ho usata come suggerisce: modalità Persuade, la «Bolder hand» nella scelta della direzione, poi una passata di bolder e una di polish. Le composizioni più audaci, dice la stessa pagina, arrivano con il percorso mockup first, che però richiede uno strumento per generare immagini, come Codex, Cursor o una chiave OpenAI, che Claude Code da solo non ha.

Per la consulenza ha elencato sette mondi visivi presi dal lavoro del pubblico ed estratto a sorte la cassettiera da ferramenta: blu genziana e giallo segnale, i servizi come cassetti etichettati, i plugin inutili in cassetti vuoti con il timbro rosso «Tolto» e tutte le foto in bicromia blu, così sei fotografi diversi sembrano un solo servizio. È la pagina che più di tutte sembra disegnata da qualcuno.

Per la formazione ha scelto un circuito di neon: «Da esecutore di codice» è un tubo spento, «a regista di soluzioni» si accende, e lo stesso tubo scende lungo la pagina, gira attorno a ogni modulo e si illumina mentre scorri. È anche la prova più lenta, più di mezz’ora per pagina, e restano da valutare un programma scaricato al primo avvio, hook che girano anche quando neghi i comandi al modello e una telemetria anonima da spegnere con DO_NOT_TRACK.

Un DESIGN.md preso in prestito

awesome-design-md non è una skill di design vera e propria: sono 84 file DESIGN.md che descrivono lo stile di siti noti, da copiare nel progetto come riferimento.

Un DESIGN.md unisce un blocco di token in YAML, cioè colori, tipografia, raggi e spaziature esatti, e un corpo in Markdown con le ragioni e i Do e Don’t. Il formato è nato in Google Stitch e la specifica vive in un repository di Google. Per la consulenza ho scelto il file di Supabase, bianco, quasi nero e un solo verde smeraldo; per la formazione quello di Notion, più colorato e amichevole.

È la strada più veloce dopo la baseline e la più prevedibile in senso buono: sai prima che cosa otterrai, perché il riferimento l’hai scelto tu. Il pulsante della formazione, poi, è viola. Non l’ha scelto l’AI, è il colore primario scritto nel file di Notion. Copiare lo stile di un marchio famoso ti dà un sito che somiglia a quel marchio: il file va usato come modello del formato, per scriverne uno tuo.

Otto landing page a confronto

Messe tutte insieme, le otto pagine raccontano che le skill di design non servono a evitare il brutto, che il modello ormai evita da solo, ma a evitare l’uguale.

Nella griglia si vede che per la consulenza la baseline e il DESIGN.md hanno scelto lo stesso titolo, «Il tuo sito WordPress può fare di più.». Il file cambia lo stile, ma i testi restano quelli che il modello sceglierebbe comunque. I costi sono stimati a listino dal log di Claude Code: con un abbonamento non li paghi a consumo, ma consumano la quota.

Se lavori da freelance e il design non è il tuo forte, per prima cosa dai all’agente foto vere, perché valgono più di qualunque skill. Per la bozza del giorno dopo bastano la baseline o un DESIGN.md scelto bene; quando vuoi una pagina che il cliente si ricordi, taste-skill e Impeccable ti danno idee che da solo non avresti avuto, al prezzo di più tempo e di pagine da sfoltire.

Un blocco da incollare nel CLAUDE.md

Le idee migliori delle skill di design stanno in poche righe, e puoi incollarle nel CLAUDE.md di un progetto anche senza installare niente.

È una mia sintesi di ciò che ho letto nei repository e visto nelle prove: pesa poche righe, la capisci tutta e la modifichi quando vuoi. Se il progetto ha già un linguaggio visivo, affiancale un DESIGN.md con i token del cliente.

## Design (regole per l'interfaccia)

- Prima del codice scrivi una riga: «Leggo questa pagina come: <tipo> per <pubblico>, con un linguaggio <stile>».
- Fai un inventario di 8-12 cose che appartengono solo a questo cliente e costruisci la pagina attorno a una di esse.
- Usa le foto della cartella assets/ e non inventarne altre.
- Il brief vince sempre sul tuo gusto. Se rifinisci, conserva identità, testi e comportamento. Se ridisegni, sostituisci davvero.
- Evita le etichette in maiuscoletto sopra i titoli, le card numerate 01-06, le tre card uguali affiancate e i gradienti viola.
- Non inventare testimonianze, loghi, numeri, prezzi o date: se un dato manca, lascia lo spazio e segnalalo.
- Testo con contrasto di almeno 4,5:1. Definisci hover, errore, caricamento e stato vuoto.
- Alla fine elenca in NOTE.md le scelte fatte e ciò che non hai verificato.

Il viola lo lascio ai tramonti

Le skill di design non trasformano un programmatore in un grafico: gli danno una bozza migliore del template e qualche idea che da solo non avrebbe avuto.

Il modello da solo ormai fa pagine pulite, e le skill di design servono a farle diverse, ognuna con un’idea che viene dal cliente e non dalla media di internet. Il viola, intanto, lo lascio ai tramonti, e al DESIGN.md di Notion.

Anche senza skill i risultati personalmente non li trovo male: per una prima bozza vanno già bene. In questo test, in cui magari i miei prompt erano sbagliati o poco definiti, l’unica che secondo me ha prodotto davvero il risultato migliore è DESIGN.md: pagine pulite, coerenti e veloci da ottenere, perché lo stile lo decide un file scritto da qualcuno che il design lo sa fare. taste-skill e Impeccable hanno avuto le idee più originali, ma anche le pagine più da sfoltire.

Prima che i miei amici grafici smettano di salutarmi: queste skill non sostituiscono un designer, come il correttore automatico non ha mai sostituito un editor. Per me sono un grande aiuto, perché arrivo dal cliente con qualcosa di concreto invece che con un template e tante scuse. Per alcuni clienti possono perfino bastare: sono quelli che si sarebbero accontentati di un template, o che un professionista per questo lavoro non se lo possono permettere. Per tutti gli altri il grafico resta la persona da chiamare, solo che adesso gli porto una bozza da smontare.

Domande frequenti