Vytvořili jsme stejnou vstupní stránku s dovedností i bez ní

Skill Bench, část 1 ze 4. Stejný model, stejný prompt, jedna dovednost nainstalovaná nebo ne. Tento příspěvek: vstupní stránka. Dále v sérii: Telegram bot, ladění hry had a audit skriptu Google zx.

Každá recenze dovednosti na tomto webu končí stejnou nevyřešenou otázkou: vede tato dovednost k tomu, že Claude odvede lepší práci, nebo jen k tomu, že Claude odvede více práce? To není totéž a většina testovacích nastavení je nedokáže rozlišit, protože spuštění nejsou dostatečně přísně kontrolována, aby izolovaly jedinou proměnnou, na které záleží.

Provedli jsme experiment. Dvě spuštění, stejný model, stejné zadání, až po interpunkci. Jediný rozdíl mezi nimi je jedna instrukce: "přečti a řiď se touto nainstalovanou dovedností." Při prvním spuštění model tvoří bez pomoci. Při druhém spuštění jsme jej nasměrovali na skutečnou dovednost frontend-design, tu, která v našem katalogu dosahuje 9.6 z 10, a nechali jsme jej přečíst skutečný SKILL.md předtím, než se dotkl jakéhokoli kódu. Poté jsme porovnali obě vstupní stránky řádek po řádku a spočítali tokeny, které každé spuštění stálo.

Toto je první ze čtyř takových srovnání. Vstupní stránku jsme vybrali na začátek, protože vizuální design je oblastí, kde je o "lepším" nejsnadnější diskutovat a nejtěžší ho předstírat. Hrdina s mnoha přechody buď vypadá jako každá jiná stránka vytvořená AI, nebo ne, a nepotřebujete benchmark, abyste viděli, která z nich.

Nastavení

Zadání bylo pro obě spuštění stejné, vstupní stránka v jednom souboru pro "Nimbus", fiktivní API pro počasí, napsaná podle standardu Stripe: sekce hrdiny, tři bloky funkcí, cenová tabulka s úrovněmi Free, $29 a $199, blok s příkladem kódu a zápatí. Žádné frameworky, žádný krok sestavení, jeden HTML soubor s vloženým CSS.

První spuštění dostalo toto zadání a nic jiného. Druhé spuštění dostalo identické zadání plus odkaz na nainstalovanou dovednost frontend-design, kterou model poté přečetl celou před zahájením.

Jedna důležitá výhrada, uvedená jasně, nikoli skrytě: toto je N=1. Jedno spuštění na větev, jeden model, jedno zadání. Netvrdíme, že tato čísla jsou statisticky stabilní napříč stovkou pokusů, a pokud to zopakujete sami, získáte odlišná konkrétní čísla. To, co tvrdíme, je užší a, myslíme si, užitečnější: toto se stalo, podrobně, při skutečném spuštění, se skutečnou telemetrií, a je to vzorec, který jsme viděli dostatečně často v méně kontrolovaném testování, abychom důvěřovali jeho podobě ještě předtím, než spustíme druhé a třetí kolo.

Co vytvořila základní verze

Ponechán sám sobě, Claude vytvořil stránku, kterou by většina lidí, kteří viděli mnoho výstupů AI, okamžitě rozpoznala. 890 řádků, světlé barevné schéma postavené na papírových a jantarových tónech, a je fér zde říci: kód byl čistý, text byl rozumný, rozložení fungovalo, nic nebylo rozbité.

Všechny znaky byly v detailech. Jedenáct samostatných přechodů napříč stránkou, v pozadí hrdiny, ve stavech tlačítek, v okrajích karet, na místech, kde přechod spíše přidával vizuální šum, než aby plnil nějakou funkci. Dva nadpisy používaly background-clip: text k vykreslení samotného textu v přechodu, což je v tuto chvíli nejrozpoznatelnější podpis AI designu. Statistická čísla plavala ve vlastních kartách nad záhybem, oddělená od jakékoli logiky rozložení, což je typ prvku, který vypadá, jako by byl přidán, protože ho někde má šablona, nikoli proto, že by ho tato konkrétní stránka potřebovala.

Nic z toho není neschopné. Je to výstup modelu, který je obecně dobrý ve webdesignu a nemá žádný specifický názor na tuto konkrétní značku, takže sahá po stejných tazích, které se objevují vždy, když je položena stejná otázka bez dalších omezení. Spuštění s 63,329 tokeny koupilo stránku připravenou k odeslání. Nekoupilo stránku, kterou by si kdokoli pamatoval, a je to stejná stránka, jakou bychom očekávali od většiny dovedností v našem přehledu nejlepších designových dovedností pokud byste designovou dovednost odstranili.

Co dovednostní větev vytvořila jinak

Spuštění s dovedností si přečetlo skutečný anthropics/skills frontend-design SKILL.md předtím, než cokoli napsalo, a výsledná stránka vypadá, jako by pocházela z úplně jiného designového zadání. Tmavě modré pozadí (--bg: #0B1119) spárované s mosazným akcentem (--brass: #D2A25C), kombinace, která se nikde v prostoru hledání základní verze neobjevuje a působí jako záměrná volba spíše než výchozí. 985 řádků, čtyři přechody namísto jedenácti a nulový počet instancí gradient-textu. Ne méně, nula. Typografický systém byl disciplinovaný způsobem, jakým nebyl ten základní: konzistentní měřítko, konzistentní logika tloušťky, nadpisy, které vypadají spíše zvolené než přizpůsobené velikosti.

Nic na této stránce nekřičí "prémiově" tak, jako stock fotografie podání ruky křičí "korporátně". Je to tišší. Paleta je dostatečně neobvyklá, aby nepůsobila jako šablona, a omezení přechodů znamená, že ty, které zůstanou, skutečně nesou váhu namísto toho, aby zdobily vše, čeho se dotknou. Pokud byste obě stránky předali klientovi a zeptali se, kterou by odeslal zakladatel s citem pro design, nebylo by to těžké rozhodnutí.

Čísla

	Základní verze (bez dovednosti)	Dovednostní větev (frontend-design)	Rozdíl
Použité tokeny	63,329	125,165	+98%
Volání nástrojů	6	57	+51
Délka výstupu	890 řádků	985 řádků	+95 řádků
Přechody	11	4	-7
Instance gradient-textu	2	0	-2
Paleta	Světlá, papír + jantar	Tmavě modrá + mosaz	—

Počet tokenů je hlavním bodem a není to nic subtilního: spuštění s dovedností stálo téměř dvakrát tolik. To není chyba zaokrouhlení, kterou byste mohli připsat šumu, a je to číslo, proti kterému je třeba číst každé další tvrzení v tomto textu.

Proč dovednost stojí více

Rozdíl v tokenech ve skutečnosti není o velikosti souboru dovednosti. Soubory SKILL.md mají typicky několik tisíc tokenů, což samo o sobě nestačí na zdvojnásobení 63k-tokenového spuštění. Co se skutečně stalo, je viditelné v počtu volání nástrojů: 6 versus 57. Základní spuštění napsalo stránku a bylo hotovo. Spuštění s dovedností přečetlo dovednost, poté proti ní iterovalo, kontrolovalo svůj vlastní výstup proti kontrolnímu seznamu, který dovednost stanovuje, upravovalo mezery, znovu zvažovalo volby barev, zpochybňovalo rozhodnutí o rozložení, které již jednou učinilo.

To je ten mechanismus, a stojí za to ho pojmenovat, protože to znamená, že náklady na tokeny nejsou "čtení delšího dokumentu". Je to "dělání práce vícekrát". Dovednost, která popisuje, jak vypadá dobrý design, mění jednoprůchodovou generační úlohu v něco bližšího smyčce sebereflexe, a smyčky sebereflexe jsou ze své podstaty drahé na tokeny, ať už je spouští člověk nebo model.

Kdy je +98 % tokenů výhodná koupě a kdy ne

Pokud je výstupem design, není to těžké rozhodnutí. Vstupní stránka, na kterou se klient podívá, portfolio, cokoli, kde "vypadá to, jako by to vytvořil někdo s vkusem" je součástí popisu práce: náklady na tokeny jsou zde spíše zaokrouhlovací chybou než rozpočtovou položkou. Nikdo nediskutuje o placení designéra za druhý návrh. Placení modelu v tokenech za ekvivalentní iteraci je stejný obchod za mnohem nižší cenu, i při dvojnásobných nákladech oproti základní verzi.

Pokud je výstupem interní nástroj, prototyp, který nikdo mimo tým neuvidí, nebo stránka, která existuje k prokázání funkčnosti API endpointu spíše než k reprezentaci značky, přeskočte to. Základní papírově-jantarová stránka s jejími náhodnými přechody splní svou práci. Nikdo, kdo hodnotí interní administrátorský panel, si nevšimne, že nadpis použil background-clip: text, a platit dvojnásobek tokenů za opravu vady, kterou nikdo neuvidí, není kvalitní nákup, je to jen vyšší účet.

Rozhodujícím bodem není kvalita dovednosti, která je skutečná. Jde o to, zda se na výsledek někdo podívá dostatečně pozorně, aby mu na něm záleželo.

Jak to reprodukovat sami

Nepotřebujete naše přesné zadání, abyste toto srovnání provedli na své vlastní práci. Nastavení je dostatečně jednoduché na to, abyste ho zopakovali za odpoledne.

• Napište zadání s konkrétními omezeními: název produktu, specifická sada sekcí, specifická cenová struktura, "žádné frameworky", pokud je to pro vás důležité. Vágní zadání produkují vágní rozdíly, protože je méně, proti čemu by se designová dovednost mohla prosadit.
• Spusťte to jednou s čistým modelem a bez nainstalovaných dovedností. Uložte výstup a poznamenejte si počet tokenů z telemetrie vašeho systému, nikoli odhad.
• Nainstalujte frontend-design (nebo jakoukoli designovou dovednost, kterou hodnotíte), restartujte relaci, aby byl popis dovednosti čerstvě načten, a spusťte identické zadání znovu, změněné pouze řádkem, který modelu říká, aby si dovednost přečetl a řídil se jí.
• Porovnejte dva výstupy pro konkrétní znaky, které jsme zde našli: počet přechodů, použití background-clip: text, zda paleta vypadá zvolená nebo výchozí, zda je typografické měřítko konzistentní. Přečtěte si náš testovací protokol pro úplnější verzi tohoto procesu, včetně sady spouštěčů, které spouštíme před jakýmkoli srovnáním výstupů.
• Porovnejte počty tokenů nakonec, poté, co si vytvoříte názor na výstup. Pokud se nejprve podíváte na účet, ovlivní to, jak štědří budete s vizuálním srovnáním, a toto pořadí je důležitější, než se zdá.

Často kladené otázky

Zdvojnásobuje dovednost frontend-design vždy spotřebu tokenů? Ne nutně, a netvrdíme pevný násobitel. Toto spuštění ukázalo +98 % na jednom zadání s jedním modelem. Mechanismus za nárůstem, více volání nástrojů, protože model kontroluje svůj výstup proti vlastnímu vedení dovednosti, by se měl zobecnit, ale přesné procento se bude měnit s komplexností zadání a tím, kolik zpětné vazby model usoudí, že potřebuje.

Je jedno spuštění na větev dostatečné k důvěře v tato čísla? Dostatečné k důvěře ve vzorec, ne dostatečné k důvěře v přesné procento. Úmyslně to nazýváme N=1, aby si to nikdo nespletl s kontrolovanou studií. S větší jistotou můžeme říci směr: iterace řízená dovedností stojí více a produkuje viditelně promyšlenější výsledek, což je vzorec, který se objevuje napříč každým srovnáním designových dovedností, které jsme méně formálně provedli v běžném testování.

Proč prostě nepožádat Claude, aby se "vyhnul gradient-textu a generickému AI designu"? Můžete, a do jisté míry to pomůže. Ale jednořádková instrukce nenese odůvodnění, které nese plná dovednost, specifickou logiku palety, pravidla typografického měřítka, kontrolní seznam, proti kterému model iteruje. Náš úplný testovací protokol pokrývá, proč instrukce na úrovni promptu a na úrovni dovednosti mají tendenci produkovat různé hloubky výsledků, i když směřují ke stejnému cíli.

Jak se to srovnává s výstupem Claude na jiných typech úkolů? Designové úkoly jsou případem, kdy má dovednost nejzjevnější prostor k pomoci, protože "vypadá to výrazně" je čitelné i bez bodovací karty. Naše další záznamy Skill Bench testují dovednosti proti sestavení Telegram bota, ladicí relaci a auditu skriptu, třem doménám, kde vítězství, pokud existuje, vypadá jinak než hezčí paleta. Viz úplná metodologie pro to, jak bodujeme napříč všemi čtyřmi.

Toto zadání jsme vybrali, protože vstupní stránka obhajuje designovou dovednost sama o sobě bez nutnosti interpretace. Podívejte se na dvě stránky vedle sebe a paleta, počet přechodů a typografická disciplína vám řeknou vše, co tabulka tokenů nemůže. Další záznam v této sérii vymění tuto vizuální jasnost za něco, co je těžší posoudit pouhým okem: funkční bot, kde "lepší" musí být posuzováno podle toho, zda věc funguje.