Figma MCP: od projektu do kodu w 2026 roku

Serwer Figma MCP to oficjalny zdalny serwer Figmy pod adresem https://mcp.figma.com/mcp: przekazuje Claude Code, Codeksowi i Cursorowi układ ramki, zmienne, zrzut ekranu i mapowania Code Connect, a w wersji beta potrafi też pisać na kanwę. Wygenerowany kod niezawodnie używa komponentów zespołu, gdy istnieją mapowania Code Connect albo prompt je wskazuje, a zgodność potwierdza test zrzutów ekranu.

Projektantka przesyła ci link do nowej strony profilu w Figmie. Agent buduje ją w cztery minuty, a pull request dodaje ręcznie sklejony przycisk w kolorze #4F86F7, kartę z rounded-[10px] i awatar, który ignoruje utrzymywany przez zespół <Avatar />. Nic nie jest zepsute. Twój design system właśnie się rozgałęził i nikt tego nie zauważy, dopóki na produkcję nie trafi trzeci odcień niebieskiego.

Ta strona jest dla programistów, którzy implementują projekty z Figmy przy pomocy agenta, i dla tech leadów, którzy chcą, żeby te implementacje używały design systemu i przechodziły bramkę wizualną, zamiast polegać na recenzencie mrużącym oczy nad pikselami.

Co daje ci działająca konfiguracja Figma MCP

Serwer Figmy zainstalowany w Claude Code, Codeksie i Cursorze, jako plugin ze skillami albo jako sam serwer MCP, razem z limitami miejsc (seatów), które musisz znać na starcie.
Prompt do skopiowania, który implementuje ramkę z użyciem istniejących komponentów Button i Card.
Czterokrokową synchronizację design systemu: tokeny, mapowania Code Connect, generowanie komponentów i wizualną kontrolę w Playwright.
Bramkę weryfikacyjną, która dowodzi zgodności bez czytania wygenerowanego markupu linijka po linijce.
Pułapki, które prowadzą do wiarygodnie wyglądających, ale błędnych konfiguracji, oraz sposób wyjścia z każdej awarii.

Co potrafi serwer Figma MCP we wrześniu 2026

Serwer czyta dane projektowe, a tylko w wersji zdalnej także je zapisuje. Poniższe narzędzia wystawiał serwer podłączony 26 września 2026 r.; pełną, aktualną listę prowadzi Figma na stronie tools and prompts.

Narzędzie	Co zwraca albo robi	Do czego go używać
`get_design_context`	Ustrukturyzowaną reprezentację węzła w React + Tailwind oraz kontekst projektu	Główne wejście do implementacji; przetłumacz je na swój stos
`get_metadata`	Oszczędną mapę warstw: ID, nazwy, typy, pozycje i rozmiary	Duże ramki: znajdź węzeł potomny przed pełnym pobraniem
`get_screenshot`	Obraz węzła	Wzorzec wizualny i punkt odniesienia dla kontroli zgodności
`get_variable_defs`	Zmienne i style użyte w zaznaczeniu (kolory, odstępy, typografia)	Nazwy tokenów zamiast surowych wartości hex
`get_code_connect_map` · `add_code_connect_map`	Które komponenty Figmy odpowiadają którym komponentom w kodzie	Użycie twoich komponentów zamiast generowania nowych
`use_figma` · `generate_figma_design`	Tworzenie i edycja ramek, komponentów, zmiennych i auto layoutu	Praca kod → projekt (zapis na kanwę, beta)

Trzy fakty od dostawcy przesądzają, czy to zadziała w twoim zespole (Figma, README figma/mcp-server-guide, odczyt 26.09.2026):

Limity zależą od rodzaju miejsca. Użytkownicy planu Starter oraz miejsc View i Collab w planach płatnych mają limit „up to 6 tool calls per month”. Miejsca Dev i Full w planach Professional, Organization i Enterprise mają limity minutowe zgodne z Tier 1 REST API Figmy. Niektóre narzędzia, na przykład te zapisujące do plików Figmy, są z limitów wyłączone.
Zapis na kanwę jest w becie. Jest darmowy „during the beta period” i „will eventually be a usage-based paid feature”. Nie opieraj procesu zespołu na jego obecnej cenie.
Code Connect wymaga planu Organization albo Enterprise. README Code Connect (@figma/code-connect 2.0.1) mówi, że funkcja „requires a full Design or Dev Mode seat”. Na planie Starter lub Professional dostajesz kontekst projektu, ale bez mapowań komponentów.

Plugin czy sam serwer MCP?

Figma dostarcza serwer na dwa sposoby. Plugin łączy zdalny serwer z 14 skillami (Agent Skills, Beta), wśród nich figma-design-to-code, figma-code-connect, figma-generate-library i figma-use, który sam serwer oznacza jako obowiązkowy przed każdym zapisem na kanwę przez use_figma. Sam serwer to tylko połączenie MCP.

	Plugin Figmy	Sam serwer MCP
Co dostajesz	Zdalny serwer i 14 skilli, które ustalają kolejność narzędzi	Tylko narzędzia; kolejność zapisujesz w promptach lub regułach
Stały koszt kontekstu	ok. 2133 tokenów na sesję w Claude Code (`claude plugin details`, 26.09.2026)	Tylko schematy narzędzi, ładowane na żądanie przez wyszukiwanie narzędzi (tool search)
Wybierz, gdy	Projekty implementuje kilka osób albo piszesz na kanwę	Tylko czytasz ramki albo listą serwerów MCP zarządzasz centralnie

To skille zapobiegają najczęstszemu błędowi: agent pisze z pamięci pliki Code Connect w formacie parsera .figma.tsx, podczas gdy aktualny format to szablon .figma.ts (zobacz pułapki).

Instalacja serwera Figma MCP w Claude Code, Codeksie i Cursorze

Serwer jest identyczny we wszystkich trzech narzędziach. Różni się tylko rejestracja, a wszystkie trzy uwierzytelniają się przez OAuth w przeglądarce, więc żaden token nie trafia do commitowanego pliku.

Dopiero zaczynasz z MCP? Zacznij od przeglądu MCP i strony konfiguracji MCP dla swojego narzędzia (Claude Code, Codex, Cursor).

Plugin ze skillami (zalecany przez dostawcę; claude plugin install sprawdzone w Claude Code 2.1.283):

claude plugin install figma@claude-plugins-official

Sam serwer, współdzielony z zespołem przez .mcp.json (przetestowane w 2.1.283; zapisuje wpis "type": "http"):

claude mcp add --scope project --transport http figma https://mcp.figma.com/mcp

Potem uruchom sesję, wpisz /mcp, wybierz figma i dokończ logowanie OAuth.

Plugin ze skillami, z kuratorowanego marketplace’u OpenAI:

codex plugin add figma@openai-curated

Logujesz się kluczem API zamiast kontem ChatGPT? Wtedy marketplace nazywa się openai-api-curated: codex plugin add figma@openai-api-curated (codex-cli 0.157.1). Polecenie codex plugin list pokaże, który masz.

Sam serwer (przetestowane w codex-cli 0.157.1; zapisuje [mcp_servers.figma] z url = "https://mcp.figma.com/mcp" do ~/.codex/config.toml), a potem logowanie OAuth:

codex mcp add figma --url https://mcp.figma.com/mcp
codex mcp login figma

Plugin ze skillami: wpisz to w czacie agenta Cursora (README Figmy):

/add-plugin figma

Sam serwer: otwórz Cursor Settings, przejdź do zakładki MCP, wybierz Add new global MCP server i zapisz tę konfigurację (kształt z README Figmy; nie testowane w binarce Cursora):

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Żeby sprawdzić połączenie, zapytaj agenta: „List the Figma MCP tools you can call.” W odpowiedzi powinny pojawić się get_design_context i get_screenshot. Jeśli lista jest pusta, zajrzyj do problemów z połączeniem serwerów MCP.

Implementacja ramki z Figmy z istniejącymi komponentami Button i Card

W serwerze zdalnym domyślny jest tryb oparty na linku. Skopiuj link do samej ramki, a nie do całego pliku, żeby URL zawierał node-id. Agent nie otwiera tego adresu; serwer korzysta z klucza pliku i ID węzła zapisanych w URL-u.

Implement this Figma frame as src/features/profile/ProfileSummary.tsx:
https://www.figma.com/design/FILE_KEY/Profile?node-id=1204-3381

Order of work:
1. Call get_design_context for the node, then get_screenshot. If the context is
   truncated, call get_metadata and re-fetch only the child nodes you need.
2. Call get_code_connect_map. Every mapped node must be rendered with the mapped
   component and its real import path.
3. Use Button and Card from src/components/ui for every button and card surface,
   even where no mapping exists. Read their props before you use them.
4. Translate the Tailwind in the design context to our CSS variables in
   src/styles/tokens.css. No raw hex values, no arbitrary Tailwind values such
   as rounded-[10px] or p-[18px].
5. If the design needs a variant that Button or Card does not support, stop and
   list the gap instead of creating a new component.
Finish by running npm run typecheck and listing which Figma nodes mapped to
which components.

Zastąp FILE_KEY i ID węzła wartościami ze skopiowanego linku. Czego się spodziewać: agent wywołuje get_design_context i get_screenshot, importuje Button i Card z src/components/ui i kończy listą mapowań w rodzaju „Primary CTA (1204:3399) → <Button variant="primary">”. Nowy plik ProfileButton.tsx w diffie oznacza, że krok 5 nie zadziałał; odrzuć taką zmianę.

Krok 5 jest najważniejszy. Bez niego agent, który trafi na brakujący wariant, napisze komponent-sobowtóra, czyli dokładnie to rozgałęzienie, któremu ta strona ma zapobiec.

Synchronizacja design systemu: tokeny, Code Connect, komponenty, kontrola wizualna

Pojedyncza ramka to zadanie. Design system to pętla, którą uruchamiasz raz przy konfiguracji, a potem przy każdej zmianie projektu. Kolejność ma znaczenie: tokeny przed mapowaniami, mapowania przed generowaniem, generowanie przed bramką wizualną.

Tokeny. get_variable_defs zwraca zmienne użyte w zaznaczonym węźle, a nie eksport całego pliku. Wskaż mu ramkę dokumentacji tokenów w design systemie, czyli tę, która pokazuje wszystkie kolory, odstępy, promienie i style tekstu, i poproś agenta o zapisanie źródła tokenów, które build zamieni na zmienne CSS. Style Dictionary (style-dictionary 5.5.5 w npm, 26.09.2026) czyta JSON tokenów w formacie W3C z $value i $type i generuje z jednego pliku CSS oraz JavaScript.
Prompt do skopiowania: synchronizacja tokenów
Call get_variable_defs on this Figma node, which is our token documentation frame: https://www.figma.com/design/FILE_KEY/Design-System?node-id=12-4 Write tokens/tokens.json in W3C design-token format ($value, $type), keeping the Figma variable names as the token paths. Set up style-dictionary so that npm run tokens builds src/styles/tokens.css (CSS custom properties) and src/styles/tokens.js. Do not round, rename or invent values. Then diff the new tokens.css against the current one and list every changed, added and removed variable.
Diff na końcu to artefakt do przeglądu: projektantka zatwierdzi „--color-primary zmienione z #2563EB na #1D4ED8” w kilka sekund.
Mapowania Code Connect. Mapowanie mówi get_code_connect_map, że komponent Figmy Button to <Button /> z src/components/ui/Button.tsx, a jego warianty odpowiadają konkretnym propsom. Aktualny format to plik szablonu .figma.ts; format parsera Reacta (.figma.tsx z figma.connect()) nie dostaje już aktualizacji (README Code Connect, 2.0.1). Szablony pisze skill figma-code-connect z pluginu i działa on wyłącznie z komponentami opublikowanymi w bibliotece zespołu.
Prompt do skopiowania: mapowanie podstawowych komponentów
Use the figma-code-connect skill. For the published Button, Card, Input and Avatar components in this file: https://www.figma.com/design/FILE_KEY/Design-System?node-id=0-1 find the matching components in src/components/ui, show me the match and the prop correspondence for each before writing anything, then write one .figma.ts template per component next to it. Map every Figma variant and boolean property to a real prop; omit a property rather than invent a prop. Run npx figma connect publish --dry-run and show me the output.
Publikuj naprawdę dopiero po czystym przebiegu próbnym. CLI Code Connect (npx figma connect publish) czyta FIGMA_ACCESS_TOKEN albo --token; w CI dodaj --exit-on-unreadable-files, żeby nieparsowalny szablon zatrzymał job zamiast zostać pominięty (flagi sprawdzone w @figma/code-connect 2.0.1). Zacznij od komponentów, które pojawiają się niemal w każdej ramce: przycisków, pól formularza, kart i awatarów.
Generowanie komponentów. Gdy tokeny i mapowania są na miejscu, uruchom prompt z poprzedniej sekcji. Lista mapowań na końcu odpowiedzi agenta staje się teraz dowodem: każdy zmapowany węzeł powinien wskazywać komponent z src/components/ui.
Kontrola wizualna w Playwright. Wyrenderuj nowy komponent w izolacji i porównaj go ze zrzutem z Figmy, najpierw interaktywnie, a potem jako stały test. Do kontroli interaktywnej dodaj serwer Playwright MCP (@playwright/mcp 0.0.82, npm, 26.09.2026):
Okno terminala
```
claude mcp add playwright -- npx @playwright/mcp@latest --isolated   # Claude Code
codex mcp add playwright -- npx @playwright/mcp@latest --isolated   # Codex
```
W Cursorze dodaj wpis serwera z "command": "npx" i "args": ["@playwright/mcp@latest", "--isolated"]. Flaga --isolated daje każdemu agentowi profil przeglądarki w pamięci, czego potrzebują agenci równoległi w osobnych worktree. Szczegóły konfiguracji są na stronie o Playwright MCP.
Prompt do skopiowania: raport zgodności z projektem
Start Storybook, open the ProfileSummary default story with the Playwright MCP server at a 1280x800 viewport and take a screenshot of the story root. Call get_screenshot for Figma node 1204-3381 in the same file. Compare the two and list every difference in spacing, color, font size, font weight, radius and alignment. For each one, name the token or component prop the code should use. Do not change any code yet.
Gdy raport jest czysty, projektantka zatwierdza wyrenderowany zrzut, a ten obraz staje się commitowanym wzorcem dla testu Playwright (poniżej). Od tej chwili CI wyłapuje rozjazdy bez otwierania Figmy.

Jak udowodnić, że kod zgadza się z projektem, bez czytania każdej linijki?

Zapewnienie agenta, że „zgadza się z projektem”, nie jest dowodem. Dowodem są te bramki, a żadna z nich nie wymaga, żeby człowiek czytał wygenerowany markup:

Bramka	Co wyłapuje	Gdzie działa
`npm run typecheck`	Błędne propsy `Button` lub `Card`, zepsute importy zmapowanych komponentów	Pętla agenta i CI
Kontrola surowych wartości (poniżej)	Surowe wartości hex i dowolne wartości Tailwinda z pominięciem tokenów	Pre-commit i CI
Playwright `toHaveScreenshot`	Rozjazd wizualny względem wzorca zatwierdzonego przez projektantkę	CI
`npx figma connect publish --dry-run --exit-on-unreadable-files`	Szablony Code Connect, które po refaktoryzacji przestały się parsować	CI
Lista mapowań w opisie PR	Zmapowane węzły wyrenderowane podróbką zamiast komponentem	Recenzent, jednym spojrzeniem

Kontrola surowych wartości to jedno polecenie. Jest toporna i wystarcza, żeby „używaj tokenów” było wymaganiem, a nie prośbą:

rg -n '#[0-9a-fA-F]{3,8}\b|-\[[0-9.]+(px|rem)\]' src/features src/components --glob '*.tsx'

Każde trafienie oblewa kontrolę; wyjątki dopuszczaj jawnie, zamiast osłabiać wzorzec. Test wizualny przypina zatwierdzony wzorzec. Ustaw use.baseURL na adres Storybooka (na przykład http://localhost:6006) i uruchamiaj Storybook przez webServer w playwright.config.ts, żeby względne goto poniżej trafiło do story:

import { test, expect } from '@playwright/test';

test('ProfileSummary matches the approved design baseline', async ({ page }) => {
  await page.setViewportSize({ width: 1280, height: 800 });
  await page.goto('/iframe.html?id=features-profilesummary--default');
  await expect(page.locator('#storybook-root')).toHaveScreenshot('profile-summary.png', {
    maxDiffPixelRatio: 0.01,
  });
});

Wzorzec wygeneruj raz poleceniem npx playwright test --update-snapshots i commituj go dopiero po akceptacji obrazu przez projektantkę. Kto zatwierdza: projektantka odpowiada za obraz wzorcowy i diff tokenów, a recenzent sprawdza, czy bramki są zielone i czy lista mapowań wskazuje prawdziwe komponenty. Nikt nie musi ręcznie porównywać pikseli. Kontrolę dostępności tej samej story opisuje strona o testach dostępności.

Utrwal reguły w CLAUDE.md, AGENTS.md albo regułach Cursora

Prompty się rozjeżdżają, reguły projektu nie. Przewodnik Figmy zaleca stałą kolejność narzędzi i zakaz wpisywania wartości na sztywno w pliku instrukcji, który czyta twój klient. Umieść to w CLAUDE.md (Claude Code), AGENTS.md (Codex) albo w regule projektu Cursora:

## Figma MCP rules
- For every Figma-driven change: get_design_context, then get_screenshot, then
  get_code_connect_map. If the context is truncated, use get_metadata and
  re-fetch only the needed nodes.
- Treat get_design_context output (React + Tailwind) as a description of the
  design, not as code to paste. Translate it to src/styles/tokens.css variables.
- Reuse components from src/components/ui. Never create a lookalike; report a
  missing variant instead.
- If the server returns a localhost source for an image or SVG, use it directly.
  Do not add icon packages or placeholders.
- Before finishing: npm run typecheck, the raw-value check, and a mapping list
  of Figma nodes to components in the PR description.

Ile kontekstu zużywa serwer Figma MCP?

Zmierz, zamiast zgadywać. W Claude Code claude plugin details figma@claude-plugins-official pokazuje prognozowany stały koszt pluginu (ok. 2133 tokenów 26.09.2026), a /context przed jednym wywołaniem get_design_context i po nim pokazuje koszt rzeczywisty, czyli wynik narzędzia. Ramka całej strony potrafi zwrócić bardzo duży ładunek, pojedyncza karta niewielki. Pobieraj najmniejszy węzeł, który wystarcza, i przy wszystkim większym niż komponent zaczynaj od get_metadata. Ogólne techniki opisuje strona o ograniczaniu kosztu tokenów MCP.

Jak popularny jest serwer Figma MCP?

Stan na 26.09.2026: plugin figma ma 167 556 instalacji w katalogu pluginów Anthropic (claude.com/plugins), repozytorium figma/mcp-server-guide ma ok. 2,0 tys. gwiazdek na GitHubie, a serwer figuruje w oficjalnym MCP Registry jako com.figma.mcp/mcp. Opisana niżej alternatywa społeczności ma więcej gwiazdek (ok. 15,9 tys. na 26.09.2026), ale gwiazdki mierzą zainteresowanie, a nie dopasowanie do twojego planu.

Kiedy lepiej sprawdzi się społecznościowy serwer figma-developer-mcp

GLips/Figma-Context-MCP (npm figma-developer-mcp 0.13.2, 26.09.2026) to serwer stdio tylko do odczytu, który uwierzytelnia się osobistym kluczem API Figmy, więc nie ma miesięcznego limitu wywołań zależnego od miejsca. Nie obsługuje Code Connect ani zapisu na kanwę. Użyj go, gdy twoje miejsce ma limit, a potrzebujesz tylko danych o układzie i stylach.

Utwórz osobisty token dostępu w ustawieniach konta Figmy i zapisz go w magazynie sekretów albo menedżerze haseł. Wyeksportuj go do powłoki, z której uruchamiasz agenta, na przykład przez CLI menedżera haseł, a potem zarejestruj serwer z odwołaniem do zmiennej zamiast jej wartości:

export FIGMA_API_KEY="$(your-secret-cli read figma-api-key)"   # odczyt z magazynu sekretów
claude mcp add --scope project framelink -e 'FIGMA_API_KEY=${FIGMA_API_KEY}' -- npx -y figma-developer-mcp --stdio

Pojedyncze cudzysłowy powstrzymują powłokę przed rozwinięciem zmiennej, więc .mcp.json przechowuje dosłowne odwołanie ${FIGMA_API_KEY} (sprawdzone w Claude Code 2.1.283), a Claude Code rozwija je ze środowiska przy uruchamianiu serwera. Sam klucz nigdy nie trafia do konfiguracji ani do historii powłoki. To serwer firmy trzeciej z tokenem, który może czytać każdy plik dostępny dla twojego konta, więc najpierw sprawdź go pod kątem swojej polityki bezpieczeństwa MCP.

Które instrukcje Figma MCP są błędne lub nieaktualne?

@figma/mcp nie istnieje w npm (E404). Oficjalny serwer działa zdalnie pod https://mcp.figma.com/mcp; pakiet npm, który krąży w poradnikach, to społecznościowy figma-developer-mcp.
claude mcp add figma https://mcp.figma.com/mcp bez --transport http zapisuje wpis stdio, którego poleceniem jest URL (Claude Code 2.1.283). Serwer nigdy się nie uruchomi.
Transport HTTP+SSE jest formalnie przestarzały w specyfikacji MCP 2026-07-28. Rejestruj adres Streamable HTTP zakończony na /mcp.
figma-implement-design to stara nazwa skilla. Aktualny skill to figma-design-to-code.
.figma.tsx z figma.connect() to format Code Connect oparty na parserze, który nie dostaje już aktualizacji. Nowe mapowania to szablony .figma.ts.
„Figma MCP tylko czyta projekty”. Zdalny serwer wystawia też narzędzia zapisu na kanwę (use_figma, generate_figma_design, beta), widoczne na działającym serwerze 26.09.2026.
„get_variable_defs eksportuje cały plik”. Zwraca zmienne użyte w zaznaczonym węźle.

Gdy Figma MCP i pętla od projektu do kodu się psują

Agent twierdzi, że nie może połączyć się z Figmą, albo każde wywołanie kończy się błędem uwierzytelnienia. Logowanie OAuth nie zostało dokończone albo wygasło. W Claude Code wpisz /mcp, wybierz figma i zaloguj się ponownie; w Codeksie uruchom codex mcp login figma. Potem jeszcze raz poproś agenta o listę narzędzi Figmy.

Wywołania przestają działać w połowie miesiąca. Wyczerpałeś limit „up to 6 tool calls per month” miejsca Starter, View lub Collab. Przenieś osobę implementującą na miejsce Dev lub Full albo do czasu odnowienia limitu używaj figma-developer-mcp do pracy tylko na odczyt.

get_design_context zwraca ucięty albo rozlany wynik. Węzeł jest za duży. Wywołaj get_metadata, wybierz ramki potomne (nagłówek, listę kart, stopkę) i implementuj je po kolei.

Kod używa surowych hexów i jednorazowych promieni mimo pliku tokenów. Agent wkleił Tailwinda z get_design_context, zamiast go przetłumaczyć. Kontrola surowych wartości zatrzyma commit; uruchom zadanie ponownie z regułą „tłumacz na zmienne z tokens.css” w pliku instrukcji projektu, nie tylko w prompcie.

get_code_connect_map nic nie zwraca. Albo twój plan nie obejmuje Code Connect (wymaga Organization lub Enterprise), albo nie opublikowano żadnych szablonów. Najpierw sprawdź plan, potem uruchom npx figma connect publish --dry-run, żeby zobaczyć, czy CLI znajduje jakikolwiek szablon.

Skill Code Connect odrzuca komponent. Code Connect działa tylko z komponentami opublikowanymi w bibliotece zespołu. Poproś projektantkę o publikację komponentu i uruchom prompt mapujący ponownie.

get_variable_defs zwraca prawie nic. Projektantka użyła lokalnych stylów lub surowych wartości zamiast zmiennych albo zaznaczyłeś węzeł, który używa ich niewiele. Zaznacz ramkę dokumentacji tokenów; jeśli plik w ogóle nie ma zmiennych, uzgodnij nazwy tokenów z projektantką i raz napisz tokens.json ręcznie.

Test zrzutów w CI pada przy każdym uruchomieniu na drobnych różnicach. Renderowanie fontów różni się między maszyną, na której powstał wzorzec, a runnerem CI. Generuj wzorce w tym samym obrazie kontenera, którego używa CI, i trzymaj maxDiffPixelRatio nisko, zamiast podnosić go, aż test przejdzie.

Dokąd dalej z agentami, którzy zamieniają projekt na kod

Playwright MCP Skonfiguruj serwer przeglądarki, który renderuje komponent i robi zrzut do kontroli zgodności.

Akceptacja wizualna przed implementacją frontendu Ustal, jak wygląda „gotowe”, zanim agent napisze pierwszy komponent.

shadcn/ui MCP Generuj na bazie istniejących prymitywów, gdy twój design system stoi na shadcn/ui.

Najlepsze pluginy Porównaj plugin Figmy z innymi pluginami dostawców i ich kosztem kontekstu.

Czteroetapowy proces od projektu do kodu pokazuje, gdzie pętla z tej strony mieści się w pełnym procesie budowy funkcji, a Mobbin MCP opisuje szukanie wzorców projektowych, zanim powstanie ramka. Porównanie Playwrighta z innymi serwerami przeglądarki do kroku renderowania i zrzutu znajdziesz na stronie o automatyzacji przeglądarki dla agentów.