Figma Skills to instrukcje oparte na markdown, które określają jak Agent Projektowania AI zachowuje się w Twoim konkretnym kontekście. Pomyśl o nich jak o wielokrotnego użytku niestandardowych promptach — piszesz je raz, a one kodują konwencje Twojego zespołu, reguły komponentów i standardy jakości, dzięki czemu agent automatycznie ich przestrzega za każdym razem.
Każdy może napisać skill. Nie wymaga kodu. Nie wymaga tworzenia wtyczek. Nie wymaga integracji API. Tylko tekst markdown opisujący co agent powinien robić i jak to robić. Skills to różnica między agentem generującym ogólny UI a agentem generującym UI TWOJEGO zespołu.
Kluczowy wniosek
Skills przekształcają Agenta Projektowania z ogólnego AI w AI TWOJEGO zespołu. Bez skills agent używa domyślnych konwencji i zgaduje Twoje preferencje. Ze skills przestrzega automatycznie Twojego systemu odstępów, reguł nazewnictwa komponentów, wymagań dostępności i wytycznych marki. 30 minut pisania 3-4 skills oszczędza godziny poprawek podczas tygodni używania agenta.
Co składa się na Figma Skill?
| Element Skill | Co robi | Przykład |
|---|---|---|
| Nazwa (z /) | Jak go wywołujesz | /create-settings-page |
| Cel | Co robi skill (jedno zdanie) | "Wygeneruj stronę ustawień zgodną z konwencjami naszego zespołu" |
| Kroki | Uporządkowane instrukcje, których agent przestrzega | "1. Użyj Section Header dla każdej grupy..." |
| Konwencje | Reguły, których agent musi przestrzegać | "Zawsze używaj siatki 8px, nigdy nie używaj pozycjonowania absolutnego" |
| Komponenty | Które opublikowane komponenty używać | "Użyj Toggle/Switch dla ustawień boolean" |
| Zmienne | Które tokeny projektowe zastosować | "Użyj color-surface-primary dla teł" |
| Czego unikać | Czego agent powinien unikać | "Nigdy nie używaj więcej niż 3 poziomów nagłówków na stronę" |
Figma wystartowała z 9 przykładowymi skills obejmującymi: budowanie bibliotek komponentów, generowanie nowych projektów z briefów, tworzenie specyfikacji dostępności, koordynowanie przepływów pracy wielu agentów i synchronizację tokenów projektowych z kodem. Sprawdź je na figma.com/community/skills. Podstawowy skill, /use-figma, daje agentowi wspólne zrozumienie jak Figma działa strukturalnie. Zespoły dostosowują go dalej.
Pisanie Twojego pierwszego Skill (z przykładem)
Zacznij od swojego najczęściej powtarzanego zadania projektowego. Jeśli tworzysz układy formularzy co tydzień, napisz skill /form-layout. Oto kompletny, prawdziwy przykład:
Ten skill mówi agentowi dokładnie jak Twój zespół buduje formularze. Bez niego agent używa domyślnych konwencji Figma. Z nim każdy formularz generowany przez agenta przestrzega Twoich konkretnych standardów — spójny między członkami zespołu, spójny między projektami.
📬 Czy to jest dla Ciebie wartościowe?
Jeden praktyczny wgląd w AI tygodniowo. Plus darmowy pakiet promptów gdy się zapiszesz.
Zapisz się za darmo →Jak Skills porównują się do innych niestandardowych instrukcji AI
Skills są koncepcyjnie podobne do systemów niestandardowych instrukcji w innych narzędziach AI:
| Narzędzie | Niestandardowe instrukcje | Tworzone przez | Udostępniane? |
|---|---|---|---|
| Figma Skills | Pliki markdown kierujące Agentem Projektowania | Ręcznie przez zespół | Tak (biblioteka społeczności) |
| ChatGPT Custom Instructions | Tekst kształtujący wszystkie odpowiedzi ChatGPT | Ręcznie przez użytkownika | Nie (tylko osobiste) |
| Claude Code CLAUDE.md | Instrukcje na poziomie projektu dla agenta kodującego | Ręcznie przez zespół | Tak (przez repo) |
| Hermes Agent Skills | Automatycznie generowane wzorce zadań wielokrotnego użytku | Automatycznie z użycia | Tak (biblioteka skills) |
Kluczowa różnica: Hermes Agent tworzy skills automatycznie z ukończonych zadań — ucząc się podczas pracy. Figma wymaga ręcznego tworzenia skills — uczysz go jawnie. Podejście Hermes skaluje się z użyciem; podejście Figma daje więcej kontroli ale wymaga początkowej inwestycji. Oba produkują lepsze wyjście AI niż używanie narzędzi bez niestandardowych instrukcji.
Podstawowa zasada jest taka sama we wszystkich tych systemach: AI działa lepiej z jawnym kontekstem o Twoich preferencjach, konwencjach i standardach. Czy piszesz Figma Skill, ChatGPT Custom Instructions, czy plik Claude CLAUDE.md, framework ICCSSE produkuje lepsze instrukcje. Darmowy Prompt Optimizer stosuje tę strukturę automatycznie — wklej szkic swojego skill, otrzymaj z powrotem jaśniejszą wersję.
4 niezbędne Skills potrzebne każdemu zespołowi projektowemu
1. /form-layout — Standaryzuje projektowanie formularzy w zespole. (Przykład powyżej.)
2. /page-layout — Definiuje konwencje struktury strony: umieszczenie nagłówka, szerokość paska bocznego, maksymalna szerokość treści, struktura stopki, wzorce nawigacji, responsywne punkty przerwania.
3. /component-variant — Mówi agentowi jak tworzyć nowe warianty komponentów pasujące do istniejącego systemu: konwencje nazewnictwa, definicje stanów (domyślny, hover, aktywny, wyłączony, błąd), skala rozmiarów (sm, md, lg) i wymagania dokumentacji.
4. /accessibility-check — Definiuje standardy dostępności: poziom WCAG (AA vs AAA), minimalne rozmiary celów dotykowych, współczynniki kontrastu, reguły hierarchii nagłówków, wymagane etykiety ARIA i format adnotacji czytnika ekranu. Zobacz nasz przewodnik po specyfikacjach dostępności po szczegóły.
📬 Chcesz więcej takich treści?
Jeden praktyczny wgląd w AI tygodniowo. Plus darmowy pakiet promptów gdy się zapiszesz.
Zapisz się za darmo →Często zadawane pytania
Ile skills powinienem stworzyć?
Zacznij od 3-4 obejmujących najczęstsze zadania projektowe: skill formularza, skill układu strony, skill wariantu komponentu i skill sprawdzania dostępności. Te pokrywają 80% codziennej pracy projektowej. Dodawaj więcej skills gdy zidentyfikujesz powtarzające się wzorce, które agent obsługuje niespójnie.
Czy skills mogą wywoływać inne skills?
Tak — skills mogą odwoływać się do innych skills, tworząc łańcuchowe przepływy pracy. Skill /new-feature może wywołać /form-layout dla sekcji input, następnie /accessibility-check dla przeglądu zgodności. To umożliwia złożone wieloetapowe przepływy pracy z pojedynczego wywołania.
Czy skills zużywają kredyty?
Sam skill (instrukcje markdown) nie zużywa kredytów. Akcje agenta wyzwalane przez skill (generowanie projektów, edytowanie komponentów) zużywają kredyty w normalnym tempie. Dobrze napisany skill może faktycznie oszczędzać kredyty produkując lepsze wyjście za pierwszym razem — mniej iteracji oznacza mniej regeneracji zużywających kredyty.
Czy mogę udostępniać skills społeczności Figma?
Tak — biblioteka skills społeczności Figma pozwala publikować i przeglądać skills. To oznacza, że możesz używać skills napisanych przez inne zespoły projektowe dla wspólnych wzorców (układy dashboardu, przepływy onboarding, strony ustawień) bez pisania ich od zera.
Gdzie przechowywane są skills?
Skills są powiązane z Twoją organizacją Figma lub kontem osobistym. Skills na poziomie zespołu są dostępne dla wszystkich członków zespołu; skills osobiste są dostępne tylko dla Ciebie. Przechowuj najważniejsze skills na poziomie zespołu, żeby wszyscy projektanci korzystali z tych samych konwencji.
Ujawnienie: Niektóre linki w tym artykule to linki partnerskie. Polecamy tylko narzędzia, które osobiście testowaliśmy i regularnie używamy. Zobacz nasze pełne zasady ujawniania.