Skill frontend-design od Anthropic: co jest w SKILL.md i jak go używać

Skill frontend-design to plik SKILL.md w repozytorium anthropics/skills, który uczy Claude'a projektować interfejsy tak, żeby nie wyglądały jak kolejna strona wygenerowana przez AI. Nie ma w nim palet ani gotowych komponentów. Jest lista pięciu typowych cech designu z AI, proces pracy w dwóch przejściach i zasady pisania tekstów w interfejsie.

TL;DR

• Plik leży w skills/frontend-design/SKILL.md w repozytorium anthropics/skills (187 751 gwiazdek, listopad 2026), licencja Apache 2.0.
• Najcenniejsza część to lista pięciu „klastrów”, po których rozpoznasz design z AI: od kremowego tła z terakotą po zestaw identycznych kart SaaS.
• Proces: najpierw plan (4 do 6 kolorów hex, fonty, układ, zasady), potem przegląd planu względem briefu, dopiero na końcu kod.
• Skill nie zawiera bazy palet ani fontów. Jeśli tego szukasz, sięgnij po UI/UX Pro Max.
• Działa też jako brief dla projektanta, który nie używa Claude Code.

Gdzie leży plik i jak go zainstalować

Repozytorium anthropics/skills to publiczny zbiór skilli od Anthropic. W katalogu skills/ są między innymi canvas-design, theme-factory, web-artifacts-builder, skill-creator i właśnie frontend-design. Sam skill to plik SKILL.md o rozmiarze około 9,4 KB oraz LICENSE.txt z licencją Apache 2.0. Treść należy do Anthropic, ja ją tu tylko streszczam i cytuję krótkie fragmenty.

W Claude Code repozytorium rejestrujesz jako marketplace:

/plugin marketplace add anthropics/skills

Potem wybierasz Browse and install plugins, marketplace anthropic-agent-skills i zestaw do instalacji. README repozytorium podaje dwa zestawy: document-skills i example-skills. Skille dokumentowe to docx, pdf, pptx i xlsx, więc frontend-design szukaj w zestawie przykładowym:

/plugin install example-skills@anthropic-agent-skills

Jeśli nie chcesz całego zestawu, skopiuj sam folder. Wersja osobista trafia do ~/.claude/skills/frontend-design/SKILL.md, wersja projektowa do .claude/skills/frontend-design/SKILL.md w repozytorium, gdzie możesz ją zacommitować dla zespołu. Claude Code obserwuje te katalogi i łapie zmiany bez restartu. Szczegóły instalacji skilli opisałem w artykule Skille do Claude: czym są i jak je zainstalować.

Co jest w SKILL.md, sekcja po sekcji

Frontmatter i opis

Pole description brzmi: „Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one.” Dalej opis mówi o kierunku estetycznym, typografii i wyborach, które nie wyglądają jak szablon. Ten opis decyduje, kiedy Claude sam sięgnie po skill, więc zadziała przy budowie nowego UI i przy przebudowie istniejącego.

Persona: projektant, któremu klient odrzucił szablony

Pierwszy akapit ustawia rolę. Claude ma działać jak lider projektowy studia, a klient według Anthropic „has already rejected proposals that felt cliché or templated”. To sprytny chwyt: model dostaje od razu informację, że bezpieczna, przeciętna propozycja jest porażką, a nie wynikiem.

Osadź projekt w temacie

Jeśli brief nie mówi, czym jest produkt, Claude ma to ustalić sam i potwierdzić z klientem. Wyróżniające się decyzje wizualne mają wynikać z branży, materiałów i języka danego świata. Strona sklepu z zabawkami i panel dla analityków finansowych mają wyglądać zupełnie inaczej. Projekt ma powstawać na prawdziwej treści z briefu.

Zasady projektowe

Ta sekcja jest najgęstsza. Najważniejsze punkty:

• Hero ma pokazywać najbardziej charakterystyczną rzecz z tego świata. Anthropic wprost nazywa domyślny schemat: „a big number with a small label, supporting stats, and a gradient accent is the default treatment”. Używasz go tylko wtedy, gdy naprawdę jest najlepszy.
• Typografia niesie charakter strony. Jedna albo dwie rodziny fontów, a jeśli dwie, to wyraźnie różne. Skala typograficzna według The Elements of Typographic Style.
• Długość linii poniżej 80 znaków.
• Unikaj akcentowania jednego słowa w nagłówku (kursywą, pogrubieniem albo kolorem), wersalików w etykietach i zbędnych etykiet nad treścią.
• Struktura to informacja. Numeracja 01 / 02 / 03 tylko wtedy, gdy treść naprawdę jest sekwencją, na przykład krokami procesu.
• Ruch oszczędnie. Jeden zaplanowany moment zamiast animacji wjazdu przy każdej sekcji.

Pięć cech designu z AI i co robić zamiast

To fragment, dla którego warto otworzyć ten plik. Anthropic opisuje pięć klastrów, wokół których skupia się dziś design generowany przez AI. Tabela poniżej to moje streszczenie, kolumna z alternatywą wynika z reszty zasad w SKILL.md.

Cecha z listy Anthropic	Jak ją rozpoznać	Co zrobić zamiast
1. Kremowe tło z terakotą	Tło w okolicy #F4F1EA, kontrastowy krój szeryfowy, akcent w okolicy #D97757 (według SKILL.md to akcent samego Claude)	Wyprowadź paletę z materiałów i branży produktu
2. Prawie czarne tło z jednym akcentem	Ciemne tło i jeden jaskrawy kwasowo zielony albo cynobrowy kolor	Ciemny motyw tylko wtedy, gdy wynika z tematu, nie z przyzwyczajenia
3. Układ gazetowy	Cienkie linie, zerowe zaokrąglenia, gęste kolumny jak w dzienniku	Struktura, która koduje informację o treści, a nie dekoruje
4. Zestaw kart SaaS	Identyczne zaokrąglone karty, ten sam cień rgba(0,0,0,.1), gradienty jako ozdoba	Hierarchia: różne elementy wyglądają różnie, gdy różnią się wagą
5. Szablonowe ozdobniki	Etykiety WERSALIKAMI nad każdym nagłówkiem, meta z kropkami „A · B · C”, półpauzy w etykietach, #0B0B0B lub #111 zamiast czerni, monospace w małych etykietach, strzałka doklejona do linków	Zdejmij dodatki, które pojawiają się niezależnie od tematu

Ważne zastrzeżenie z samego pliku: „All traits are legitimate for some briefs, but they are defaults rather than choices”. Jeśli brief wprost prosi o jeden z tych stylów, brief wygrywa. Skill nie zakazuje kremowego tła. Zakazuje wybierania go z rozpędu, gdy brief zostawia wolną rękę.

Proces w dwóch przejściach

Druga rzecz, którą przenoszę do własnej pracy, to kolejność. Skill każe najpierw zrobić krótki plan w formie systemu tokenów:

1. Kolor: paleta bazowa jako 4 do 6 nazwanych wartości hex.
2. Typ: kroje pisma i ich role.
3. Układ: koncepcja w zdaniach i szkicach ASCII, z decyzją o wyrównaniu treści.
4. Zasady: co sprawia, że ta strona jest wyjątkowa.

Potem przychodzi drugie przejście: przegląd planu względem briefu. Jeśli któraś część wygląda jak domyślna odpowiedź na podobny prompt, Claude ma ją zmienić i powiedzieć, co zmienił i dlaczego. Dopiero wtedy pisze kod. Jest tam też praktyczna uwaga techniczna o specyficzności selektorów CSS, bo klasy łatwo się wzajemnie znoszą, szczególnie przy odstępach między sekcjami.

Sekcja o powściągliwości zaczyna się od zdania „Spend your boldness in one place.” Jeden element ma być zapamiętywalny, reszta spokojna. Próg jakości obowiązuje bez ogłaszania go: responsywność do telefonu, widoczny fokus klawiatury, respektowanie prefers-reduced-motion, dostępny kontrast. Na koniec rada Chanel: przed wyjściem spójrz w lustro i zdejmij jeden dodatek.

Zasady pisania w interfejsie

Ostatnia sekcja dotyczy tekstów, i to ona najczęściej umyka przy rozmowach o tym skillu. Słowa w designie są treścią, nie ozdobą. Najważniejsze reguły:

• Pisz z perspektywy użytkownika i nazywaj rzeczy tak, jak on je rozumie, a nie tak, jak zbudowano system.
• Strona czynna. Przycisk mówi, co się stanie: „Save changes”, a nie „Submit”.
• Akcja ma tę samą nazwę w całym przepływie: przycisk „Publish” daje komunikat „Published”.
• Błąd wyjaśnia, co poszło nie tak i jak to naprawić. W oryginale: „Errors don't apologize, and they are never vague about what happened.”
• Pusty ekran to zaproszenie do działania.

Czego frontend-design nie robi

Nie ma w nim bazy palet, par fontów, wytycznych dla konkretnych frameworków ani wyszukiwarki. To czysty tekst o sposobie myślenia. Kiedy potrzebuję konkretnych wartości, sięgam po UI/UX Pro Max, który ma 192 palety i 74 pary fontów w plikach CSV oraz generator systemu designu. Te dwa skille się uzupełniają: frontend-design mówi, czego unikać i jak pracować, UI/UX Pro Max podsuwa gotowe wartości. Test UI/UX Pro Max i audyt jego skryptów opisałem w artykule UI/UX Pro Max: instalacja, test na trzech projektach i bezpieczeństwo.

Jak użyć go jako briefu bez Claude Code

Projektant, który nie pisze kodu, też ma z tego pliku pożytek. Masz dwie drogi.

Pierwsza to Claude.ai. README repozytorium podaje, że przykładowe skille są już dostępne na płatnych planach. Potrzebujesz włączonego wykonywania kodu w ustawieniach, a skille włączasz w Customize > Skills.

Druga droga nie wymaga żadnego narzędzia. Otwórz SKILL.md na GitHubie i traktuj go jak checklistę. Przed oddaniem projektu przejdź listę pięciu cech i sprawdź, czy któraś trafiła do Twojej makiety z przyzwyczajenia. Zanim zaczniesz rysować, zapisz plan: 4 do 6 kolorów z nazwami, fonty z rolami, szkic układu i jedno zdanie o tym, co ma być zapamiętywalne. Ten sam plan możesz wkleić do dowolnego czatu z modelem jako brief.

Bezpieczeństwo

Dokumentacja Anthropic mówi wprost: „Use Skills only from trusted sources: those you created yourself or obtained from Anthropic.” To nie jest przesadna ostrożność. Snyk w raporcie ToxicSkills z lutego 2026 przeskanował 3 984 skille z ClawHub i skills.sh i znalazł co najmniej jedną lukę bezpieczeństwa w 1 467 z nich (36,82%) oraz 76 potwierdzonych złośliwych payloadów. Frontend-design pochodzi od Anthropic, więc mieści się w definicji zaufanego źródła. Przeczytałem SKILL.md w całości i to wyłącznie instrukcje, bez poleceń uruchamiania skryptów. Mimo to zasada zostaje ta sama dla każdego skilla: przeczytaj SKILL.md i wszystkie dołączone pliki przed instalacją, a przy aktualizacji sprawdź, co się zmieniło. Szerzej piszę o tym w poradniku o pisaniu dobrego SKILL.md.

FAQ

Gdzie leży skill frontend-design od Anthropic?
W publicznym repozytorium anthropics/skills na GitHubie, w katalogu skills/frontend-design. Najważniejszy jest plik SKILL.md (około 9,4 KB), obok leży LICENSE.txt z licencją Apache 2.0.

Jak zainstalować frontend-design w Claude Code?
Dodaj repozytorium jako marketplace poleceniem /plugin marketplace add anthropics/skills i zainstaluj zestaw przez Browse and install plugins. Możesz też skopiować folder frontend-design do ~/.claude/skills/ (dla siebie) albo do .claude/skills/ w repozytorium (dla zespołu).

Czy frontend-design ma bazę palet i fontów?
Nie. To sam tekst instrukcji: sposób myślenia, lista typowych cech designu z AI i proces pracy. Gotowych palet, par fontów ani wyszukiwarki w nim nie ma. To robi na przykład UI/UX Pro Max.

Czy mogę użyć frontend-design bez Claude Code?
Tak. Skille z repozytorium Anthropic są dostępne w Claude.ai na płatnych planach przy włączonym wykonywaniu kodu. Treść SKILL.md możesz też przeczytać jak zwykły brief i stosować ją ręcznie przy własnym projekcie.

Czy frontend-design jest bezpieczny?
Pochodzi od Anthropic, czyli z jednego z dwóch źródeł, które dokumentacja Anthropic uznaje za zaufane. Mimo to przeczytaj SKILL.md przed instalacją. W wersji, którą czytałem, to wyłącznie instrukcje, bez skryptów do uruchomienia.

Powiązane artykuły

Pełne porównanie skilli do projektowania znajdziesz w przewodniku Claude Skills do projektowania UI, a szerszą listę w zestawieniu najlepszych skilli do Claude Code w 2026. Pod artykułem możesz pobrać darmową paczkę dwóch skilli do pracy z UX: Laws of UX i szablon design systemu.