Chi ha chiesto almeno una volta a un assistente AI di creare la pagina web di presentazione di un prodotto (la cosiddetta landing page) conosce già il risultato. Titolo enorme e centrato, una piccola etichetta in maiuscolo sopra ogni sezione, sfumatura dal viola al blu, tre riquadri con un’icona emoji e, in fondo, il modulo per iscriversi alla newsletter. La pagina funziona, ma si capisce subito che l’ha fatta un’AI. Hallmark nasce per evitare questo risultato. È una skill di design open source con licenza MIT, firmata da Hassan El Mghari (noto come Nutlope) con la società statunitense Together AI, che si aggiunge a Claude Code, Codex CLI, Cursor e OpenCode e cambia il modo in cui l’agente progetta una pagina web.
Una skill è un pacchetto di istruzioni che l’agente legge prima di mettersi al lavoro. Nel caso di Hallmark il pacchetto comprende anche piccoli programmi in Node.js, e le sue regole obbligano l’agente a chiedere foto, numeri e testi reali, a partire da uno fra cinquanta temi grafici e ad aprire la pagina in un browser per controllarla prima di consegnarla. La versione 2, aggiornata a fine ottobre 2026, ha aggiunto anche 755 fotografie con licenza aperta e sloplint, un linter, cioè un programma che segnala gli errori in automatico. In questa guida trovi l’installazione sui principali agenti, il funzionamento passo per passo e un trucco per usare sloplint da solo.
Prima di iniziare, ribadiamo il campo d’azione. Hallmark eccelle sulle pagine singole, come landing page, schede prodotto, documentazione e portfolio, e produce HTML e CSS. Non genera temi completi per WordPress o per altri CMS.
Perché le pagine create dall’AI si somigliano tutte
Nel gergo di chi sviluppa con l’AI, l’AI slop indica il materiale che i modelli sfornano in serie: funziona, ma nessuno l’ha pensato per quel cliente o per quel pubblico. Nel design web, quindi, Il difetto non sta nel codice, che spesso è scritto bene, ma nel fatto che i siti generati si somigliano tutti, chiunque li abbia commissionati. Un modello linguistico, cioè il motore che genera testo e codice, tende sempre a scegliere la soluzione più comune fra quelle viste durante l’addestramento.
Per una pagina moderna questo significa i template, cioè pagine già pronte, costruiti con Tailwind e shadcn/ui, due strumenti molto diffusi per creare interfacce web. Di conseguenza il sito di una pasticceria, quello di un servizio di pagamenti online e il portfolio di un architetto finiscono per avere la stessa disposizione delle sezioni, cambiando soltanto i colori.
Hallmark affronta la questione con un approccio che trovo intelligente, perché non tratta tutte le regole allo stesso modo. Le divide in tre livelli, dal più severo al più permissivo.
- Floor. Il minimo sotto cui non si scende: sedici vincoli che non si possono mai aggirare, dal contrasto del testo al riquadro che evidenzia il pulsante selezionato quando si naviga con il tasto Tab, fino al layout corretto su smartphone.
- Reflex. Le abitudini in cui un modello cade da solo, come l’etichetta sopra ogni titolo o il modulo di iscrizione in chiusura; l’agente può ignorarle, ma deve scrivere il motivo nel file CSS, cioè il foglio che definisce l’aspetto della pagina.
- Finish. I dettagli di rifinitura, che vengono discussi nella revisione finale.
Il livello Floor contiene le regole più interessanti. Vieta i gradienti dal viola al blu (molto comuni), i riquadri annidati l’uno nell’altro, le icone emoji e le finte finestre del browser disegnate attorno agli screenshot. Impone che titolo, frase di apertura e pulsante principale siano visibili senza scorrere su uno schermo da 1280×800 pixel, come quello di un portatile piccolo. Il titolo non deve superare le sette parole e ogni schermata deve contenere al massimo un’ottantina di vocaboli.
Inoltre ogni animazione deve avere un’alternativa per chi attiva la riduzione del movimento, l’opzione di accessibilità del sistema operativo che limita gli effetti animati, e il contenuto deve restare leggibile anche con JavaScript disattivato.
A mio avviso, però, la regola che da sola giustifica l’installazione è che Hallmark vieta di inventare numeri, testimonianze, loghi di aziende e conteggi di progetti riusciti. Chiunque abbia generato una pagina con un agente ha visto comparire dal nulla “oltre 10.000 clienti soddisfatti” e citazioni di persone inesistenti. Su un sito di prova è un dettaglio fastidioso, mentre su quello di un’attività vera diventa pubblicità ingannevole. Su questo punto la skill è rigida: se il dato manca, la pagina mostra un segnaposto dichiarato, cioè un riquadro che indica chiaramente il dato da inserire, oppure rinuncia a quella sezione.
Installare Hallmark su Claude Code, Codex, Cursor e OpenCode
L’unico requisito obbligatorio è Node.js 18 o successivo, un ambiente gratuito per eseguire programmi JavaScript sul computer, disponibile su nodejs.org, insieme ad almeno uno degli agenti supportati. L’installazione passa dallo strumento skills: il comando npx lo scarica e lo avvia al volo, quindi copia i file nella cartella giusta per ciascun agente trovato sul sistema.
# installazione globale, valida per tutti i progetti e tutti gli agenti presenti
npx skills add nutlope/hallmark -g
# installazione limitata al progetto aperto nella cartella corrente
npx skills add nutlope/hallmark
# installazione per un solo agente (valori ammessi: claude-code, codex, opencode, cursor, github-copilot)
npx skills add nutlope/hallmark -g --agent claude-code
Per aggiornare la skill basta rilanciare lo stesso comando. Chi usa Claude Code può anche installarla come plugin, digitando nella sessione queste due righe. In questo caso si richiama con /hallmark:hallmark.
/plugin marketplace add nutlope/hallmark
/plugin install hallmark@hallmark
Anche la sintassi di avvio cambia leggermente a seconda dell’agente.
| Agente | Cartella della skill | Come si avvia |
|---|---|---|
| Claude Code | ~/.claude/skills/hallmark | /hallmark <richiesta> |
| Codex CLI | ~/.agents/skills/hallmark | $hallmark <richiesta> |
| Cursor | usa le cartelle di Claude Code e Codex | /hallmark <richiesta> |
| OpenCode | ~/.config/opencode/skills, più quelle di Claude Code e Codex | /hallmark <richiesta> |
Su Windows il simbolo ~ indica la tua cartella personale, quindi il percorso di Claude Code diventa %USERPROFILE%\.claude\skills\hallmark, per esempio C:\Users\Mario\.claude\skills\hallmark. I controlli nel browser sono facoltativi ma, secondo me, irrinunciabili, perché senza di essi sloplint legge soltanto il codice e non vede come la pagina appare sullo schermo. Servono Chrome e puppeteer-core, una libreria che permette a un programma di comandare il browser.
npm i -g puppeteer-core
Su Claude Code esiste poi un’opzione che consiglio di attivare. Lo script install-hook.mjs registra sloplint come hook, cioè un controllo eseguito in automatico ogni volta che l’agente scrive un file. Se la modifica viola una regola Floor, l’agente riceve subito la segnalazione, anche quando stai facendo un piccolo ritocco senza richiamare Hallmark.
node ~/.claude/skills/hallmark/scripts/install-hook.mjs
Dal prompt alla pagina, il percorso che segue l’agente
La differenza rispetto a un agente senza Hallmark si vede già prima di qualsiasi riga di codice. Hallmark parte da un controllo preliminare, chiamato pre-flight come le verifiche del pilota prima del decollo, in cui legge il progetto esistente. Cerca un eventuale file design.md in cui colori, caratteri e spaziature sono già stati decisi, e che in quel caso ha la precedenza su tutto.
Poi esamina i font, la palette, il framework (la base su cui è costruito il sito, come React o Vue) e i token CSS, cioè le variabili che fissano colori e misure in tutte le pagine. Se gli indichi un indirizzo web, la versione di prova che gira sul tuo computer o un’applicazione, con lo script capture.mjs può anche avviarla e catturare da solo le schermate del prodotto.
Subito dopo arriva un unico messaggio con quattro domande. La prima riguarda il materiale, cioè fotografie, schermate, numeri reali, citazioni con nome e cognome e loghi che hai il diritto di usare. Le altre chiedono il pubblico, l’azione principale che la pagina deve favorire e il tono, scelto fra stili ben distinti come editorial, brutalist, soft, utilitarian, luxury, playful, technical e austere, con l’aggiunta facoltativa di una descrizione in poche parole e di un colore di riferimento. Puoi anche rispondere semplicemente “procedi”. In quel caso Hallmark deduce le risposte mancanti e le dichiara in una riga, ma non inventa mai prezzi, statistiche o testimonianze.
A quel punto entrano in gioco gli script. Il comando theme.mjs deal propone tre temi compatibili con la richiesta, pescati da un catalogo di cinquanta divisi in quattro famiglie (venti editorial, dodici modern minimal, nove atmospheric e nove playful). Il comando draw decide invece l’anatomia della pagina, cioè l’ordine e la forma delle sezioni, in base a ciò che il visitatore deve fare (prenotare, comprare, iscriversi). Stabilisce come si presenta la parte alta, il tipo di menu, il piè di pagina, il blocco che segue l’apertura e la posizione del pulsante d’azione.
Un registro nel file .hallmark/log.json conserva le combinazioni già usate, così due pagine consecutive non escono con le sezioni disposte allo stesso modo. Prima di costruire, l’agente mostra un riepilogo delle scelte, il blocco Picks. È il momento giusto per chiedere modifiche, perché cambiare tema adesso costa pochi secondi.
Il risultato è un insieme di file HTML e CSS che funzionano da soli, senza librerie esterne, accompagnati da tokens.css e base.css e da un commento iniziale che annota tema, struttura ed eventuali regole ignorate con il relativo motivo. Ecco un esempio di richiesta ben formulata.
/hallmark landing page per un laboratorio di ceramica a Deruta che organizza corsi nel fine settimana. Le foto sono nella cartella ./foto, prezzi e date in ./corsi.txt.
Tono editorial, caldo e artigianale. Azione principale: prenotare un posto al corso.
Esistono poi tre varianti utili. Scrivendo “custom” Hallmark abbandona i temi del catalogo e crea uno stile su misura, sempre soggetto agli stessi controlli. Con l’opzione --fast, o con parole come “prototipo”, salta le domande e la rifinitura finale, ma rispetta comunque le regole Floor. Se invece chiedi una dashboard, cioè un pannello con numeri e grafici, o una schermata di amministrazione, la skill smette di applicare le regole pensate per le pagine promozionali. In compenso pretende che ogni area con dati abbia un aspetto previsto per quattro situazioni: durante il caricamento, in assenza di dati, in caso di errore e quando i dati sono presenti.
Il controllo qualità sloplint
sloplint è un normale script Node.js, quindi può analizzare qualsiasi pagina HTML, sia essa scritta a mano, generata da un altro agente o esportata da un costruttore di siti. Ti basta scaricare il progetto da GitHub con git clone e indicare a sloplint un file o una cartella.
git clone https://github.com/Nutlope/hallmark.git
cd hallmark
# solo controlli statici su HTML e CSS
node skills/hallmark/scripts/sloplint.mjs ../mio-sito/index.html
# controlli completi nel browser, su otto larghezze di schermo diverse
node skills/hallmark/scripts/sloplint.mjs ../mio-sito --render
# pagina servita da un server di sviluppo locale
node skills/hallmark/scripts/sloplint.mjs ../mio-sito --render --url http://localhost:3000/
Se hai già installato la skill non serve nemmeno questo passaggio, perché lo script si trova nella cartella scripts di Hallmark. Esistono anche opzioni più specifiche, come --scope app per le schermate applicative, --scope component per un singolo elemento e --genre per applicare le eccezioni previste per una famiglia di temi. Con --render, inoltre, sloplint salva le immagini catturate, utili per vedere subito dove la pagina si deforma o esce dai bordi su uno smartphone.
Il report distingue le violazioni bloccanti, marcate FAIL, da quelle di tipo REFLEX. Le prime riguardano in buona parte problemi misurabili, come un contrasto insufficiente, una pagina che su smartphone scorre di lato o un pulsante che non si evidenzia quando lo selezioni con il tasto Tab, e conviene correggerle sempre. Le seconde esprimono invece il gusto degli autori, per esempio il divieto di etichette in maiuscolo sopra i titoli, e vanno valutate caso per caso. Sono indicazioni sensate, ma seguirle tutte alla lettera, su ogni sito, porterebbe di nuovo a pagine che si somigliano, solo con un aspetto diverso.
Lo stesso linter lavora anche dietro i due comandi pensati per i siti esistenti. Con /hallmark audit ./sito ottieni un elenco ordinato dei problemi, senza alcuna modifica ai file. Con /hallmark redesign ./sito l’agente rifà la grafica conservando testi, collegamenti e moduli. In questo caso sloplint, con le opzioni --before e --kept, annota prima ogni link, campo e titolo della pagina originale e poi blocca il lavoro se uno di questi elementi è sparito. Chiedendo “keep the layout” cambi colori e caratteri lasciando le sezioni dove sono, mentre “polish” corregge soltanto i difetti segnalati.
Prima di un redesign, comunque, crea un ramo Git, cioè una copia di lavoro separata del progetto che ti permette di tornare indietro in qualsiasi momento.
Landing page di qualità alla portata di tutti
Tra le skill di design oggi disponibili per gli agenti di programmazione, Hallmark è una delle più complete, perché rispetto a quelle fatte solo di istruzioni, come frontend-design di Anthropic, aggiunge un controllo automatico nel browser e un registro che impedisce di riproporre la stessa impostazione da una pagina all’altra.
Se lavori come freelance e costruisci siti per piccole attività, se devi pubblicare in fretta la pagina di un progetto open source o se vuoi capire perché i tuoi prototipi hanno tutti la stessa faccia, procedi per gradi. Comincia con /hallmark audit su una pagina che hai già, così vedi il metodo in azione senza toccare nulla. Poi prepara una cartella con fotografie, prezzi e contenuti di testo e chiedi la prima pagina, rispondendo alle quattro domande. Così Hallmark diventa uno strumento che ti aiuta a decidere cosa mettere nella pagina, e non l’ennesimo stampo da cui escono siti tutti uguali.
