Zbudowaliśmy tę samą stronę docelową ze skillem i bez

Skill Bench, część 1 z 4. Ten sam model, ten sam prompt, jeden skill zainstalowany lub nie. Ten wpis: strona docelowa. Również w serii: bot Telegram, debugowanie gry w węża oraz audyt skryptu Google zx.

Każda recenzja skilla na tej stronie kończy się tym samym nierozwiązanym pytaniem: czy ten skill sprawia, że Claude wykonuje lepszą pracę, czy po prostu sprawia, że Claude wykonuje więcej pracy? To nie to samo, a większość konfiguracji testowych nie jest w stanie ich rozróżnić, ponieważ uruchomienia nie są wystarczająco ściśle kontrolowane, aby wyizolować jedną zmienną, która ma znaczenie.

Przeprowadziliśmy więc eksperyment. Dwa uruchomienia, ten sam model, ten sam brief, aż do interpunkcji. Jedyną różnicą między nimi jest jedna instrukcja: „przeczytaj i postępuj zgodnie z tym zainstalowanym skillem”. Uruchomienie pierwsze: model buduje bez pomocy. Uruchomienie drugie: wskazujemy mu rzeczywisty skill frontend-design, ten, który ma ocenę 9.6 na 10 w naszym katalogu, i pozwalamy mu przeczytać prawdziwy SKILL.md przed dotknięciem jakiegokolwiek kodu. Następnie porównujemy te dwie strony docelowe linia po linii i zliczamy tokeny, które kosztowało każde uruchomienie.

To pierwsze z czterech takich porównań. Wybraliśmy stronę docelową na początek, ponieważ projekt wizualny to dziedzina, w której o „lepsze” najłatwiej się spierać, a najtrudniej je udawać. Bohater z dużą ilością gradientów albo wygląda jak każda inna strona zbudowana przez AI, albo nie, i nie potrzebujesz benchmarku, aby zobaczyć, która.

Konfiguracja

Brief był taki sam dla obu uruchomień: jednostronicowa strona docelowa dla „Nimbus”, fikcyjnego API pogodowego, napisana zgodnie ze standardem Stripe: sekcja hero, trzy bloki funkcji, tabela cen z poziomami Free, $29 i $199, blok przykładu kodu i stopka. Bez frameworków, bez etapu kompilacji, jeden plik HTML z osadzonym CSS.

Uruchomienie pierwsze otrzymało ten brief i nic więcej. Uruchomienie drugie otrzymało identyczny brief plus wskaźnik do zainstalowanego skilla frontend-design, który model następnie przeczytał w całości przed rozpoczęciem.

Jedno ważne zastrzeżenie, jasno określone, a nie ukryte: to jest N=1. Jedno uruchomienie na ramię, jeden model, jeden brief. Nie twierdzimy, że te liczby są statystycznie stabilne w stu próbach, a jeśli sam to powtórzysz, otrzymasz inne konkretne liczby. To, co twierdzimy, jest węższe i, naszym zdaniem, bardziej użyteczne: to jest to, co wydarzyło się szczegółowo podczas rzeczywistego uruchomienia, z prawdziwą telemetrią, i jest to wzorzec, który widzieliśmy wystarczająco często w mniej kontrolowanych testach, aby ufać jego kształtowi, jeszcze zanim przeprowadzimy rundy drugą i trzecią.

Co zbudowała wersja bazowa

Pozostawiony sam sobie, Claude wygenerował stronę, którą większość ludzi, którzy widzieli wiele wyników AI, rozpoznałaby natychmiast. 890 linii, jasna kolorystyka zbudowana wokół odcieni papieru i bursztynu, i warto być tu sprawiedliwym: kod był czysty, tekst był rozsądny, układ działał, nic nie było zepsute.

Wszystkie wskazówki tkwiły w szczegółach. Jedenaście oddzielnych gradientów na stronie, w tle sekcji hero, w stanach przycisków, w obramowaniach kart, w miejscach, gdzie gradient dodawał szumu wizualnego, zamiast spełniać jakąś funkcję. Dwa nagłówki używały background-clip: text do malowania samego tekstu gradientem, co jest najbardziej rozpoznawalnym znakiem AI w projektowaniu w tym momencie. Liczby statystyk unosiły się w swoich własnych kartach powyżej linii zgięcia, oderwane od jakiejkolwiek logiki układu, rodzaj elementu, który wygląda, jakby został dodany, ponieważ jakiś szablon go zawierał, a nie dlatego, że ta konkretna strona go potrzebowała.

Nic z tego nie jest niekompetentne. To wynik modelu, który jest ogólnie dobry w projektowaniu stron internetowych i nie ma konkretnego punktu widzenia na temat tej marki, więc sięga po te same rozwiązania, które pojawiają się, gdy to samo pytanie jest zadawane bez większych ograniczeń. Uruchomienie za 63,329 tokenów kupiło stronę gotową do wysyłki. Nie kupiło strony, którą ktokolwiek by zapamiętał, i jest to ta sama strona, której spodziewalibyśmy się po większości skilli z naszego zestawienia najlepszych skilli projektowych, jeśli usuniesz skill projektowy.

Co ramię ze skillem zbudowało inaczej

Uruchomienie z użyciem skilla przeczytało rzeczywisty plik anthropics/skills frontend-design SKILL.md przed napisaniem czegokolwiek, a wynikowa strona wygląda, jakby pochodziła z zupełnie innego briefu projektowego. Ciemnogranatowe tło (--bg: #0B1119) połączone z mosiężnym akcentem (--brass: #D2A25C), kombinacja, która nie pojawia się nigdzie w przestrzeni wyszukiwania wersji bazowej i wygląda na celowy wybór, a nie domyślny. 985 linii, cztery gradienty zamiast jedenastu i zero wystąpień tekstu gradientowego. Nie mniej, zero. System typograficzny był zdyscyplinowany w sposób, w jaki nie był w wersji bazowej: spójna skala, spójna logika wagi, nagłówki, które wyglądają na wybrane, a nie dopasowane rozmiarem.

Nic na tej stronie nie krzyczy „premium” w sposób, w jaki zdjęcie uścisku dłoni krzyczy „korporacja”. Jest ciszej. Paleta jest na tyle niezwykła, że nie wygląda jak szablon, a powściągliwość w użyciu gradientów oznacza, że te, które pozostały, faktycznie niosą ze sobą wagę, zamiast ozdabiać wszystko, czego dotkną. Gdybyś przekazał obie strony klientowi i zapytał, którą z nich wysłałby założyciel świadomy designu, nie byłoby to trudne pytanie.

Liczby

	Wersja bazowa (bez skilla)	Ramię ze skillem (frontend-design)	Delta
Użyte tokeny	63,329	125,165	+98%
Wywołania narzędzi	6	57	+51
Długość wyjścia	890 linii	985 linii	+95 linii
Gradienty	11	4	-7
Wystąpienia tekstu gradientowego	2	0	-2
Paleta	Jasna, papier + bursztyn	Ciemnogranatowy + mosiądz	—

Liczba tokenów jest nagłówkiem i nie jest subtelna: uruchomienie ze skillem kosztowało prawie dwa razy więcej. To nie jest błąd zaokrąglenia, który można przypisać szumowi, i jest to liczba, w odniesieniu do której należy czytać każde inne twierdzenie w tym artykule.

Dlaczego skill kosztuje więcej

Różnica w tokenach nie wynika tak naprawdę z rozmiaru pliku skilla. Pliki SKILL.md zazwyczaj mają kilka tysięcy tokenów, co samo w sobie nie wystarczy, aby podwoić uruchomienie o wartości 63 tys. tokenów. To, co faktycznie się wydarzyło, jest widoczne w liczbie wywołań narzędzi: 6 kontra 57. Uruchomienie bazowe napisało stronę i zakończyło pracę. Uruchomienie ze skillem przeczytało skill, a następnie iterowało na jego podstawie, sprawdzając własne wyjście z listą kontrolną, którą skill przedstawia, dostosowując odstępy, ponownie analizując wybory kolorów, kwestionując decyzję o układzie, którą już raz podjęło.

Taki jest mechanizm i warto go nazwać, ponieważ oznacza to, że koszt tokenów to nie „czytanie dłuższego dokumentu”. To „wykonywanie pracy więcej niż raz”. Skill, który opisuje, jak wygląda dobry projekt, zamienia zadanie generowania jednoprzebiegowego w coś bliższego pętli samokontroli, a pętle samokontroli są z natury kosztowne w tokenach, niezależnie od tego, czy uruchamia je człowiek, czy model.

Kiedy +98% tokenów to okazja, a kiedy nie

Jeśli produktem końcowym jest projekt, to nie jest trudna decyzja. Strona docelowa, którą klient zobaczy, element portfolio, cokolwiek, gdzie „czy to wygląda, jakby zostało stworzone przez kogoś z gustem” jest częścią opisu stanowiska: koszt tokenów jest tu bliższy błędu zaokrąglenia niż pozycji budżetowej. Nikt nie dyskutuje o płaceniu projektantowi za drugą wersję. Płacenie modelowi w tokenach za równoważną iterację to ta sama transakcja po znacznie niższej cenie, nawet przy podwójnym koszcie bazowym.

Jeśli produktem końcowym jest narzędzie wewnętrzne, prototyp, którego nikt poza zespołem nie zobaczy, lub strona, która istnieje, aby udowodnić, że punkt końcowy API działa, a nie reprezentuje markę, pomiń to. Strona bazowa w kolorach papieru i bursztynu z jej przypadkowymi gradientami spełnia swoje zadanie. Nikt oceniający wewnętrzny panel administracyjny nie zauważy, że nagłówek używał background-clip: text, a płacenie podwójnych tokenów za naprawę wady, której nikt nie zobaczy, nie jest zakupem jakościowym, to po prostu większy rachunek.

Punkt decyzyjny nie dotyczy jakości skilla, która jest rzeczywista. Chodzi o to, czy ktoś przyjrzy się wynikowi wystarczająco dokładnie, aby się tym przejmować.

Jak to samodzielnie odtworzyć

Nie potrzebujesz naszego dokładnego briefu, aby przeprowadzić to porównanie na własnej pracy. Konfiguracja jest na tyle prosta, że można ją powtórzyć w jedno popołudnie.

• Napisz brief z konkretnymi ograniczeniami: nazwą produktu, określonym zestawem sekcji, konkretną strukturą cenową, „bez frameworków”, jeśli ma to dla Ciebie znaczenie. Nieprecyzyjne briefy generują nieprecyzyjne delty, ponieważ skill projektowy ma mniej punktów, na które może naciskać.
• Uruchom to raz z czystym modelem i bez zainstalowanych skilli. Zapisz wynik i zanotuj liczbę tokenów z telemetrii Twojego środowiska, a nie szacunkową.
• Zainstaluj frontend-design (lub dowolny skill projektowy, który oceniasz), zrestartuj sesję, aby opis skilla został świeżo załadowany, i uruchom ponownie identyczny brief, zmieniony tylko o linię nakazującą modelowi przeczytanie i postępowanie zgodnie ze skillem.
• Porównaj (diff) oba wyniki pod kątem konkretnych wskazówek, które tu znaleźliśmy: liczby gradientów, użycia background-clip: text, tego, czy paleta wygląda na wybraną czy domyślną, czy skala typograficzna jest spójna. Przeczytaj nasz protokół testowania, aby zapoznać się z pełniejszą wersją tego procesu, w tym z baterią wyzwalaczy, którą uruchamiamy przed jakimkolwiek porównaniem wyników.
• Porównaj liczbę tokenów na końcu, po tym, jak wyrobisz sobie opinię na temat wyniku. Jeśli najpierw spojrzysz na rachunek, wpłynie to na to, jak hojny będziesz w porównaniu wizualnym, a ta kolejność ma większe znaczenie, niż mogłoby się wydawać.

FAQ

Czy skill frontend-design zawsze podwaja zużycie tokenów?

Niekoniecznie, i nie twierdzimy, że jest to stały mnożnik. To uruchomienie wykazało +98% dla jednego briefu z jednym modelem. Mechanizm stojący za wzrostem, więcej wywołań narzędzi, ponieważ model sprawdza swoje wyjście z własnymi wskazówkami skilla, powinien się uogólniać, ale dokładny procent będzie się zmieniał w zależności od złożoności briefu i tego, ile interakcji model uzna za potrzebne.

Czy jedno uruchomienie na ramię wystarczy, aby ufać tym liczbom?

Wystarczająco, aby ufać wzorcowi, ale nie wystarczająco, aby ufać precyzyjnemu procentowi. Celowo nazywamy to N=1, aby nikt nie pomylił tego z kontrolowanym badaniem. To, co możemy powiedzieć z większą pewnością, to kierunek: iteracja prowadzona przez skill kosztuje więcej i daje widocznie bardziej przemyślany wynik, wzorzec, który pojawia się we wszystkich porównaniach skilli projektowych, które przeprowadzaliśmy mniej formalnie w normalnych testach.

Dlaczego po prostu nie poprosić Claude'a, aby „unikał tekstu gradientowego i ogólnego projektu AI”?

Możesz, i to trochę pomoże. Ale instrukcja jednowierszowa nie zawiera uzasadnienia, jakie ma pełny skill, specyficznej logiki palety, zasad skali typograficznej, listy kontrolnej, z którą model iteruje. Nasz pełny protokół testowy wyjaśnia, dlaczego instrukcje na poziomie promptu i na poziomie skilla mają tendencję do generowania wyników o różnej głębokości, nawet jeśli wskazują na ten sam cel.

Jak to się ma do wyników Claude'a w innych rodzajach zadań?

Zadania projektowe to przypadek, w którym skill ma najbardziej oczywiste pole do pomocy, ponieważ „czy to wygląda wyróżniająco” jest czytelne nawet bez karty wyników. Nasze inne wpisy Skill Bench testują skille w kontekście budowy bota Telegram, sesji debugowania i audytu skryptu, trzech dziedzin, gdzie zwycięstwo, jeśli takie jest, wygląda inaczej niż ładniejsza paleta. Zobacz pełną metodologię, aby dowiedzieć się, jak oceniamy we wszystkich czterech.

Wybraliśmy ten brief, ponieważ strona docelowa sama w sobie stanowi argument za skillem projektowym, bez konieczności interpretacji. Spójrz na dwie strony obok siebie, a paleta, liczba gradientów i dyscyplina typograficzna powiedzą Ci wszystko, czego nie może powiedzieć tabela tokenów. Następny wpis w tej serii zamienia tę wizualną klarowność na coś trudniejszego do oceny wzrokowej: działającego bota, gdzie „lepsze” musi być oceniane na podstawie tego, czy dana rzecz działa.