Abbiamo Costruito la Stessa Landing Page Con e Senza Skill

Il banco di prova delle Skill, parte 1 di 4. Stesso modello, stesso prompt, una skill installata o meno. Questa voce: una landing page. Anche nella serie: un bot Telegram, il debug di un gioco snake e l'audit di uno script Google zx.

Ogni recensione di skill su questo sito si conclude con la stessa domanda irrisolta: questa skill fa sì che Claude svolga un lavoro migliore, o semplicemente che svolga più lavoro? Non sono la stessa cosa, e la maggior parte delle configurazioni di test non riesce a distinguerle perché le esecuzioni non sono controllate abbastanza rigorosamente da isolare l'unica variabile che conta.

Abbiamo quindi condotto un esperimento. Due esecuzioni, stesso modello, stesso brief, fino alla punteggiatura. L'unica differenza tra loro è un'istruzione: "leggi e segui questa skill installata". Nella prima esecuzione, il modello costruisce senza aiuto. Nella seconda esecuzione, lo indirizziamo alla skill frontend-design effettiva, quella che si trova a 9.6 su 10 nel nostro catalogo, e gli facciamo leggere il vero SKILL.md prima di toccare qualsiasi codice. Poi confrontiamo le due landing page riga per riga e contiamo i token che ogni esecuzione ha richiesto.

Questo è il primo di quattro confronti di questo tipo. Abbiamo scelto una landing page per iniziare perché il design visivo è il dominio in cui "migliore" è più facile da discutere e più difficile da falsificare. Un hero con molti gradienti o assomiglia a ogni altra pagina costruita dall'IA o no, e non hai bisogno di un benchmark per vedere quale.

La configurazione

Il brief era lo stesso per entrambe le esecuzioni, una landing page a file singolo per "Nimbus", una API meteorologica fittizia, scritta secondo uno standard di calibro Stripe: sezione hero, tre blocchi di funzionalità, una tabella dei prezzi con livelli Free, $29 e $199, un blocco di esempio di codice e un footer. Nessun framework, nessun passaggio di build, un file HTML con CSS incorporato.

La prima esecuzione ha ricevuto quel brief e nient'altro. La seconda esecuzione ha ricevuto il brief identico più un puntatore alla skill frontend-design installata, che il modello ha poi letto per intero prima di iniziare.

Un'avvertenza importante, dichiarata chiaramente piuttosto che nascosta: questo è N=1. Una esecuzione per braccio, un modello, un brief. Non stiamo affermando che questi numeri siano statisticamente stabili su cento prove, e se lo rifai tu stesso otterrai numeri specifici diversi. Ciò che stiamo affermando è più ristretto e, pensiamo, più utile: questo è ciò che è accaduto, in dettaglio, in un'esecuzione reale, con telemetria reale, ed è un modello che abbiamo visto abbastanza spesso in test meno controllati da fidarci della sua forma anche prima di eseguire il secondo e il terzo round.

Cosa ha costruito la baseline

Lasciato a sé stesso, Claude ha prodotto una pagina che la maggior parte delle persone che hanno esaminato molti output di IA riconoscerebbe immediatamente. 890 righe, una combinazione di colori chiara basata su toni carta e ambra, ed è giusto essere onesti qui: il codice era pulito, il testo era ragionevole, il layout funzionava, nulla era rotto.

Gli indizi erano tutti nei dettagli. Undici gradienti separati in tutta la pagina, nello sfondo dell'hero, negli stati dei pulsanti, nei bordi delle schede, in luoghi in cui un gradiente aggiungeva rumore visivo piuttosto che svolgere una funzione. Due titoli utilizzavano background-clip: text per colorare il testo stesso con un gradiente, la firma di design AI più riconoscibile a questo punto. I numeri delle statistiche fluttuavano nelle proprie schede sopra la piega, staccati da qualsiasi logica di layout, il tipo di elemento che sembra essere stato aggiunto perché un template da qualche parte ne ha uno, non perché questa particolare pagina ne avesse bisogno.

Niente di tutto questo è incompetente. È l'output di un modello che è bravo nel web design in generale e non ha un punto di vista specifico su questo particolare brand, quindi ricorre alle stesse mosse che compaiono ogni volta che la stessa domanda viene posta senza ulteriori vincoli. Un'esecuzione da 63,329 token ha prodotto una pagina consegnabile. Non ha prodotto una pagina che qualcuno avrebbe ricordato, ed è la stessa pagina che ci aspetteremmo dalla maggior parte delle skill nel nostro riepilogo delle migliori skill di design se si rimuovesse la skill di design.

Cosa ha costruito diversamente il braccio skill

L'esecuzione guidata dalla skill ha letto l'effettivo anthropics/skills frontend-design SKILL.md prima di scrivere qualsiasi cosa, e la pagina risultante sembra provenire da un brief di design completamente diverso. Sfondo blu scuro (--bg: #0B1119) abbinato a un accento ottone (--brass: #D2A25C), una combinazione che non compare da nessuna parte nello spazio di ricerca della baseline e si legge come una scelta deliberata piuttosto che un'impostazione predefinita. 985 righe, quattro gradienti invece di undici e zero istanze di gradient-text. Non meno, zero. Il sistema tipografico era disciplinato in un modo che quello della baseline non lo era: scala coerente, logica del peso coerente, titoli che sembrano scelti piuttosto che dimensionati per adattarsi.

Niente di questa pagina urla "premium" come una foto stock di una stretta di mano urla "corporate". È più discreta di così. La palette è abbastanza insolita da non sembrare un template, e la moderazione sui gradienti significa che quelli che rimangono hanno effettivamente un peso invece di decorare tutto ciò che toccano. Se consegnassi entrambe le pagine a un cliente e chiedessi quale un fondatore attento al design spedirebbe, questa non è una scelta difficile.

I numeri

	Baseline (senza skill)	Braccio skill (frontend-design)	Delta
Token utilizzati	63,329	125,165	+98%
Chiamate a tool	6	57	+51
Lunghezza output	890 righe	985 righe	+95 righe
Gradienti	11	4	-7
Istanze di gradient-text	2	0	-2
Palette	Chiara, carta + ambra	Blu scuro + ottone	—

Il numero di token è il dato principale e non è sottile: l'esecuzione con skill è costata quasi il doppio. Non è un errore di arrotondamento che si può attribuire al rumore, ed è il numero rispetto al quale ogni altra affermazione in questo articolo deve essere letta.

Perché la skill costa di più

Il divario di token non riguarda realmente la dimensione del file della skill. I file SKILL.md sono tipicamente di qualche migliaio di token, non abbastanza da soli per raddoppiare un'esecuzione da 63k token. Ciò che è realmente accaduto è visibile nel conteggio delle chiamate a tool: 6 contro 57. L'esecuzione baseline ha scritto la pagina e ha finito. L'esecuzione con skill ha letto la skill, poi ha iterato su di essa, controllando il proprio output rispetto a una checklist che la skill stabilisce, regolando la spaziatura, rivedendo le scelte di colore, riconsiderando una decisione di layout che aveva già preso una volta.

Questo è il meccanismo, e vale la pena nominarlo perché significa che il costo in token non è "leggere un documento più lungo". È "fare il lavoro più di una volta". Una skill che descrive come dovrebbe essere un buon design trasforma un compito di generazione a passaggio singolo in qualcosa di più simile a un ciclo di auto-revisione, e i cicli di auto-revisione sono costosi in token per natura, sia che a eseguirli sia un essere umano o un modello.

Quando il +98% di token è un affare, e quando non lo è

Se il deliverable è il design, questa non è una decisione difficile. Una landing page che un cliente guarderà, un pezzo per il portfolio, qualsiasi cosa in cui "sembra fatto da qualcuno con gusto" fa parte della descrizione del lavoro: il costo in token qui è più vicino a un errore di arrotondamento che a una voce di bilancio. Nessuno discute di pagare un designer per una seconda bozza. Pagare un modello in token per l'iterazione equivalente è lo stesso scambio a un prezzo molto più basso, anche al doppio del costo della baseline.

Se il deliverable è uno strumento interno, un prototipo che nessuno al di fuori del team vedrà, o una pagina che esiste per dimostrare che un endpoint API funziona piuttosto che per rappresentare un brand, saltalo. La pagina carta e ambra della baseline con i suoi gradienti sparsi fa il suo lavoro. Nessuno che valuti un pannello di amministrazione interno noterà che il titolo ha usato background-clip: text, e pagare il doppio dei token per correggere un difetto che nessuno vedrà non è un acquisto di qualità, è solo una fattura più alta.

Il punto decisionale non è la qualità della skill, che è reale. È se qualcuno guarderà il risultato abbastanza da vicino da preoccuparsene.

Come riprodurlo tu stesso

Non hai bisogno del nostro brief esatto per eseguire questo confronto sul tuo lavoro. La configurazione è abbastanza semplice da rifare in un pomeriggio.

• Scrivi un brief con vincoli concreti: un nome di prodotto, un set specifico di sezioni, una struttura di prezzi specifica, "no frameworks" se questo ti interessa. I brief vaghi producono delta vaghi, perché c'è meno contro cui una skill di design possa spingere.
• Eseguilo una volta con un modello pulito e senza skill installate. Salva l'output e annota il conteggio dei token dalla telemetria del tuo harness, non una stima.
• Installa frontend-design (o qualsiasi skill di design tu stia valutando), riavvia la tua sessione in modo che la descrizione della skill sia appena caricata, ed esegui di nuovo il brief identico, modificato solo da una riga che dice al modello di leggere e seguire la skill.
• Confronta i due output per gli specifici indizi che abbiamo trovato qui: conteggio dei gradienti, uso di background-clip: text, se la palette sembra scelta o predefinita, se la scala tipografica è coerente. Leggi il nostro protocollo di test per la versione più completa di questo processo, inclusa la batteria di trigger che eseguiamo prima di qualsiasi confronto dell'output.
• Confronta i conteggi dei token per ultimi, dopo aver formato un'opinione sull'output. Se guardi prima il conto, questo influenza quanto sei generoso con il confronto visivo, e quell'ordine conta più di quanto sembri.

FAQ

La skill frontend-design raddoppia sempre l'utilizzo dei token? Non necessariamente, e non stiamo affermando un moltiplicatore fisso. Questa esecuzione ha mostrato un +98% su un brief con un modello. Il meccanismo alla base dell'aumento, più chiamate a tool perché il modello controlla il suo output rispetto alla guida della skill stessa, dovrebbe generalizzare, ma la percentuale esatta varierà con la complessità del brief e quanto avanti e indietro il modello decide di aver bisogno.

È sufficiente una sola esecuzione per braccio per fidarsi di questi numeri? Abbastanza per fidarsi del pattern, non abbastanza per fidarsi della percentuale precisa. Stiamo chiamando questo N=1 deliberatamente in modo che nessuno lo scambi per uno studio controllato. Ciò che possiamo dire con maggiore fiducia è la direzione: l'iterazione guidata dalla skill costa di più e produce un risultato visibilmente più ponderato, un pattern che si manifesta in ogni confronto tra skill di design che abbiamo eseguito meno formalmente nei test normali.

Perché non chiedere semplicemente a Claude di "evitare gradient-text e design AI generico"? Puoi farlo, e aiuterà in parte. Ma un'istruzione di una sola riga non porta il ragionamento che una skill completa fa, la logica specifica della palette, le regole della scala tipografica, la checklist contro cui il modello itera. Il nostro protocollo di test completo spiega perché le istruzioni a livello di prompt e quelle a livello di skill tendono a produrre diverse profondità di risultato anche quando puntano allo stesso obiettivo.

Come si confronta questo con l'output di Claude su altri tipi di compiti? I compiti di design sono il caso in cui una skill ha il margine più ovvio per aiutare, perché "sembra distintivo" è leggibile anche senza una scorecard. Le altre voci del nostro Skill Bench testano le skill rispetto alla costruzione di un bot Telegram, una sessione di debug e un audit di script, tre domini in cui la vittoria, se c'è, appare diversa da una palette più gradevole. Vedi la metodologia completa per come valutiamo tutti e quattro.

Abbiamo scelto questo brief perché una landing page dimostra l'utilità di una skill di design senza richiedere alcuna interpretazione. Guarda le due pagine affiancate e la palette, il conteggio dei gradienti e la disciplina tipografica ti diranno tutto ciò che la tabella dei token non può. La prossima voce di questa serie scambia quella chiarezza visiva con qualcosa di più difficile da valutare a occhio: un bot funzionante, dove "migliore" deve essere giudicato dal fatto che la cosa funzioni.