Figma AI działa tylko tak dobrze, jak instrukcje, które mu przekazujesz. Niejasne polecenia generują ogólnikowe układy, które musisz przebudować od podstaw. Konkretne polecenia — z typem ekranu, sekcjami, komponentami, rozmiarem ramki i odstępami — rutynowo produkują wyniki gotowe do produkcji w 70–85% za jednym razem. Te 15 szablonów jest dostosowanych do stosu AI Figma 2026: Design Agent, Figma Make, Skills i darmowych funkcji (auto layout, zmiana nazw warstw, zamiana treści), które kosztują zero kredytów.

Skopiuj dowolny szablon, zamień nawiasowe symbole zastępcze na swój produkt i przepuść przez darmowy Optimizer Poleceń, jeśli chcesz ściślejsze ograniczenia. Aby uzyskać optymalizację jednym kliknięciem w ChatGPT, Claude i Gemini podczas tworzenia instrukcji agenta, TresPrompt dodaje strukturę w stylu ICCSSE do twojego panelu bocznego.

Kluczowy wniosek

Każde mocne polecenie Figma AI nazywa cztery rzeczy: jaki ekran budujesz, które opublikowane komponenty użyć, rozmiar ramki i zasady odstępów. Dodaj negatywne ograniczenia („nie używaj nienazwanych ramek", „bez lorem ipsum"), a agent przestanie zgadywać. Skills kodują te wzorce, więc nie musisz ich przepisywać w każdej sesji.

Szablony Design Agent (Ekrany na płótnie)

1 Mobilna strona ustawień
Stwórz mobilną stronę ustawień (390×844) z: 1. Konto — awatar, nazwa, email, przyciski edycji 2. Powiadomienia — przełączniki dla email, push, SMS 3. Wygląd — przełącznik trybu ciemnego, selektor rozmiaru czcionki 4. Bezpieczeństwo — zmiana hasła, przełącznik 2FA 5. Stopka — destruktywny przycisk wylogowania, tekst wersji aplikacji Używaj tylko opublikowanych komponentów. Auto layout: 16px odstęp między elementami, 32px między sekcjami. Komponent Section Header dla etykiet grup.
2 Przegląd pulpitu (desktop)
Stwórz desktopowy pulpit analityczny (1440×900) z: - Górna nawigacja: logo, wyszukiwanie, menu użytkownika - Lewy pasek boczny: 5 elementów nawigacji, aktywny stan na "Przegląd" - Główna część: 4 karty KPI w rzędzie, wykres liniowy poniżej, tabela ostatniej aktywności (5 wierszy) Używaj zmiennych systemu projektowego dla koloru i odstępów. Komponent Card dla KPI. Komponent Table dla aktywności. Nie używaj etykiet danych wykresu zastępczego jak "Seria 1."
3 Przepływ wdrażania (3 ramki)
Stwórz 3 mobilne ekrany wdrażania (390×844), od lewej do prawej: 1. Powitanie — nagłówek, podnagłówek, główny CTA "Rozpocznij" 2. Uprawnienia — lista powiadomień + lokalizacja z przełącznikami 3. Sukces — obszar ilustracji znacznika wyboru, CTA "Wszystko gotowe" Używaj komponentów Primary Button i Secondary Button. Wskaźnik postępu pokazujący krok 1/3, 2/3, 3/3. Spójne 24px padding poziomy na wszystkich ramkach.
4 Stan pusty + stan błędu
Stwórz dwie mobilne ramki (390×844): Ramka A — Puste wyniki wyszukiwania: obszar ikony, nagłówek "Brak wyników", tekst treści, drugorzędny przycisk "Wyczyść filtry" Ramka B — Błąd: ikona ostrzeżenia, "Coś poszło nie tak", główny "Spróbuj ponownie", trzeciorzędny "Skontaktuj się z pomocą" Używaj opublikowanych komponentów Empty State i Alert jeśli dostępne. Treść wyśrodkowana, maksymalna szerokość 280px dla bloku tekstu.
5 Dostępne ustawienia (agent + a11y)
Stwórz mobilną stronę ustawień (390×844) z wymaganiami dostępności: - Elementy interaktywne minimum 44×44px cele dotykowe - Kontrast tekstu minimum 4.5:1 (używaj kolorów tekstu systemu projektowego) - Hierarchia nagłówków H1 → H2, bez pomijanych poziomów - Przełączniki zawierają widoczne etykiety tekstowe (nie tylko ikony) - Stany błędów używają koloru ORAZ tekstu (nie tylko koloru) Używaj opublikowanych komponentów. Auto layout 16px / 32px odstępy.

📬 Czerpiesz z tego korzyści?

Jeden praktyczny wgląd AI tygodniowo. Plus darmowy pakiet poleceń po subskrypcji.

Subskrybuj za darmo →

Szablony Figma Make (Prototyp / Kod)

6 Landing marketingowy (Make)
Zbuduj jednostronicową stronę marketingową z tej ramki Figma: - Hero: nagłówek, podnagłówek, przechwytywanie email + CTA - 3 kolumny funkcji z ikonami - Rząd logo dowodów społecznych - Stopka z linkami Dopasuj odstępy i kolory z wybranej ramki. Responsywny mobilnie. Brak zewnętrznych bibliotek chyba że określono w notatkach ramki.
7 Interaktywny prototyp (Make)
Stwórz klikalny prototyp z ramek [lista nazw ramek]: - Kliknięcie "Zarejestruj się" nawiguje do ramki formularza rejestracji - Przesłanie pokazuje stan toast sukcesu - "Wstecz" wraca do poprzedniego ekranu Używaj komponentów z pliku. Zachowaj stany hover na głównych przyciskach. Nie dodawaj nowych ekranów nieobecnych w pliku projektowym.

Szablony Skills (Instrukcje agenta wielokrotnego użytku)

Zapisz je jako pliki markdown Skills, aby agent przestrzegał konwencji zespołu za każdym razem.

8 Skill: /settings-page
Podczas tworzenia ekranów ustawień: - Zawsze używaj wzorca Section Header + pogrupowana lista - Włącz stopkę z wersją aplikacji (styl caption) i destruktywnym wylogowaniem - Mobilny domyślnie 390×844 chyba że użytkownik określi desktop - Używaj komponentu Toggle dla ustawień boolean, nigdy niestandardowych checkboxów - Odstępy: 16px w grupach, 32px między grupami, 24px padding ekranu
9 Skill: /data-table
Podczas tworzenia tabel: - Używaj komponentów Table/Header i Table/Row - Włącz kolumnę ikony sortowania tylko jeśli użytkownik poprosi - Wysokość wiersza minimum 48px dla dotyku - Skracaj długi tekst z wielokropkiem, nigdy nie zawijaj więcej niż 2 linie w komórkach - Stan pusty poniżej tabeli jeśli zero wierszy

Darmowe funkcje (Zero kredytów)

10 Zamień treść (wsadowo)
Zamień wszystkie lorem ipsum w wybranej ramce na realistyczną treść [B2B SaaS / e-commerce / opieka zdrowotna]. Nazwy: różnorodne, prawdopodobne. Adresy: format US. Nazwy produktów: fikcyjne ale profesjonalne. Zachowaj podobną liczbę znaków do symboli zastępczych, aby układ się nie zepsuł.
11 Zmień nazwy warstw (przygotowanie do przekazania)
Zmień nazwy wszystkich warstw na tej stronie używając wzorca: [Sekcja]/[Komponent]/[Stan] Przykład: Settings/NotificationRow/Default Nie zmieniaj nazw zablokowanych ramek tła. Pomiń ukryte warstwy.

Polecenia MCP + przekazanie kodu (Claude Code / Cursor)

12 React z ramki Figma
Odczytaj wybraną ramkę Figma przez MCP. Wygeneruj komponent React używając [Tailwind / naszej biblioteki Shadcn]: - Dopasuj odstępy i kolory z tokenów projektowych w pliku - Używaj semantycznego HTML (nav, main, section) - Włącz responsywne punkty przerwania na 768px i 1024px - Eksportuj jako SettingsPage.tsx z typowanymi props dla danych użytkownika Nie koduj na stałe wartości hex — używaj nazw tokenów ze zmiennych Figma.

Szablony eksploracji i porównania

13 Trzy kierunki układu
Wygeneruj 3 różne podejścia układu dla [typ ekranu] na desktop 1440×900: A — nawigacja boczna B — nawigacja górnych zakładek C — hub oparty na kartach Ta sama treść we wszystkich trzech. Używaj opublikowanych komponentów. Umieść ramki obok siebie z 80px odstępem. Oznacz każdą ramkę "Kierunek A/B/C" małym tekstem caption.
14 Polecenie audytu systemu projektowego
Przejrzyj wybraną stronę i wymień: - Komponenty nie z opublikowanej biblioteki (oznacz jako "odłączone") - Kolory nie używające zmiennych - Tekst nie używający stylów tekstowych - Odstępy auto layout które nie są 4/8/16/24/32 Wyjście jako lista kontrolna w notatkach ramki. Nie naprawiaj automatycznie — tylko raportuj.
15 Przejście udoskonalające (drugie polecenie)
Na wygenerowanej ramce zastosuj tylko te poprawki: 1. Zwiększ pionowe odstępy między sekcjami do 32px 2. Zamień główny przycisk na wariant Button/Primary/Large 3. Dodaj tekst pomocniczy pod polem email: "Nigdy nie udostępnimy twojego emaila" 4. Wyrównaj wszystkie ikony do 24×24 w wierszach listy Nie restrukturyzuj układu. Nie dodawaj nowych sekcji.

Jak łączyć szablony w łańcuch

Przepływ produkcyjny: Szablon 13 (eksploruj) → wybierz kierunek → Szablon 1 lub 2 (pełny ekran) → Szablon 15 (udoskonal) → Szablon 11 (zmień nazwy) → Szablon 12 (MCP do kodu). Każdy krok używa skoncentrowanego polecenia zamiast jednej gigantycznej instrukcji, która myli agenta.

Dla pełnego ekosystemu Figma AI (Agent, Make, MCP, Skills, Sites), zobacz nasz kompletny przewodnik 2026. Dla instrukcji konfiguracji agenta krok po kroku, zobacz jak używać Design Agent. Dla budżetowania kredytów, zobacz kredyty Figma AI wyjaśnione.

Często zadawane pytania

Czy te działają na darmowym planie Figma?

Szablony 10–11 (Zamień treść, zmień nazwy) działają na darmowych planach. Design Agent i Make wymagają płatnych planów i dostępu beta. MCP działa z każdym planem, który może włączyć Dev Mode / MCP dla twojego miejsca.

Czy powinienem wkleić cały szablon czy skrócić go?

Zacznij od pełnego szablonu. Gdy zobaczysz, które linie agent ignoruje, skróć. Krótsze polecenia działają tylko po tym, jak wiesz, które ograniczenia twój system projektowy rzeczywiście potrzebuje.

Czy mogę używać tego samego polecenia dla Make i Design Agent?

Nie — Make oczekuje języka budowania/prototypowania i zużywa kredyty inaczej. Używaj szablonów Design Agent dla warstw płótna i szablonów Make dla wyjścia interaktywnego. Mieszanie ich produkuje mylące rezultaty.

Jak zapisać polecenia jako Skills?

Skopiuj szablony 8–9 do plików markdown Skills w bibliotece Skills twojego zespołu. Wywołuj z /nazwa-skill w panelu agenta. Aktualizuj Skills gdy nazwy twoich komponentów się zmieniają — zobacz nasz przewodnik Skills.

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.