Budowanie UI z projektów w Cursorze

Poziom 2 Poradnik Zaktualizowano 2026-09-26

Cursor buduje interfejs z projektów, gdy jego agent dostaje trzy rzeczy: sam projekt (ramkę z Figmy przez serwer MCP Figmy albo przycięty zrzut ekranu), regułę projektu, która przypina tokeny i komponenty design systemu, oraz pętlę kontroli. Zrzuty porównywane przez Playwright, skan dostępności axe i kompilator TypeScriptu dowodzą potem, że wynik pasuje.

Ta strona jest dla frontend developera, który zamienia projekty w komponenty, oraz dla tech leada odpowiedzialnego za bibliotekę komponentów. Designer przekazuje ci 15 ekranów dashboardu SaaS. Pierwsza próba agenta wygląda dobrze przy szerokości 1440 pikseli, rozsypuje się przy 375, używa trzech kolorów hex spoza twojej palety i pisze nowy przycisk zamiast zaimportować twój. Możesz to wyłapać, czytając każdą linię JSX, albo sprawić, że wyłapią to testy.

Szczegóły dotyczące Cursora sprawdziliśmy 26.09.2026 w README serwera MCP Figmy i w @cursor/sdk 1.0.32; etykiety w interfejsie mogą się różnić w twojej wersji.

Co zyskujesz dzięki temu workflow

Plik .cursor/mcp.json, który łączy agenta Cursora z Figmą i z prawdziwą przeglądarką.
Regułę design systemu, dzięki której agent używa twoich tokenów i komponentów, zamiast wymyślać nowe.
Test Playwright, który sprawdza każdy komponent w trzech szerokościach, w trybie jasnym i ciemnym, ze skanem dostępności.
Trzy prompty do skopiowania: implementacja ramki z Figmy, implementacja ze zrzutu ekranu i domykanie różnic wizualnych w pętli.
Podział odpowiedzialności: designer raz zatwierdza zrzuty, a CI pilnuje ich od tej pory.

Jakie wejście projektowe dać agentowi?

Od wejścia zależy, ile agent zgaduje. Daj mu najdokładniejsze źródło, jakie masz.

Wejście	Co dostaje agent	Kiedy go użyć	Ograniczenie
Zdalny serwer MCP Figmy (`https://mcp.figma.com/mcp`)	Layout, zmienne, komponenty, mapowania Code Connect i wyrenderowany zrzut ramki	Projekt jest w Figmie, a ty masz licencję (seat) Dev albo Full	Plan Starter oraz licencje View i Collab na płatnych planach mają limit do 6 wywołań narzędzi miesięcznie (README Figmy, sprawdzone 26.09.2026)
Społecznościowy `figma-developer-mcp` 0.13.2 (GLips/Figma-Context-MCP)	Dane o layoucie i stylach tylko do odczytu, przez osobisty klucz API Figmy	Nie masz licencji Dev, ale możesz utworzyć klucz API	Tylko odczyt; kluczem zarządzasz sam (konfiguracja w kroku 2 poniżej)
Przycięty zrzut ekranu dołączony do czatu	Same piksele; odstępy i kolory są szacunkiem	Projekt to PNG, strona konkurencji albo zdjęcie tablicy	Podaj wartości, których obraz nie przekaże: promień, cień, grubość fontu

Agent Cursora przyjmuje obrazy razem z promptem: typ wiadomości użytkownika w @cursor/sdk 1.0.32 ma pole images. Zrzut i tak gubi to, co serwer MCP zwraca jako dane, więc traktuj zrzuty jako wyjście awaryjne.

Połącz Cursora z Figmą i przeglądarką

Agent potrzebuje dwóch serwerów: Figmy, żeby czytać projekt, i Playwright, żeby obejrzeć to, co zbudował. Pełną konfigurację MCP, łącznie z sekretami i rozwiązywaniem problemów, opisuje strona jak skonfigurować serwery MCP w Cursorze.

Zainstaluj plugin Figmy. README Figmy go zaleca, bo łączy konfigurację serwera MCP ze skillami do implementowania projektów i do Code Connect. Wpisz w czacie agenta Cursora:
```
/add-plugin figma
```
Jeśli twój zespół nie może instalować pluginów, dodaj serwer ręcznie. Otwórz Cursor Settings, przejdź do zakładki MCP, wybierz Add new global MCP server i zapisz {"mcpServers": {"figma": {"url": "https://mcp.figma.com/mcp"}}}. Serwer używa OAuth, więc przy pierwszym połączeniu zalogujesz się do Figmy. Do pliku nie trafia żaden klucz.
Dodaj Playwright MCP do projektu. Utwórz lub rozszerz .cursor/mcp.json w katalogu głównym repozytorium i zacommituj go:
```
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@0.0.83", "--isolated"]
    }
  }
}
```
@playwright/mcp to serwer Microsoftu (0.0.83 w npm, sprawdzone 26.09.2026). Wersja jest przypięta, bo ten zacommitowany plik uruchamia cały zespół: podbijaj ją świadomie w pull requeście, a nie po cichu przez @latest. Flaga --isolated trzyma profil przeglądarki w pamięci, więc równoległe sesje agentów nie blokują się nawzajem na jednym trwałym profilu (README Playwright MCP: „a persistent profile can only be used by one browser instance at a time”).

Jeśli nie masz licencji Dev ani Full, dodaj do tego samego pliku społecznościowy serwer Figmy zamiast oficjalnego. Wpis przekazuje klucz przez opcję env serwera, zgodnie z README GLips/Figma-Context-MCP. Sam klucz nigdy nie trafia do pliku: Cursor podstawia odwołania ${env:NAZWA} w mcp.json (według fragmentu dokumentacji MCP Cursora – źródło wtórne, niezweryfikowane 26.09.2026). Sprawdź to w swojej wersji. Jeśli serwer zgłasza brak klucza, wyeksportuj FIGMA_API_KEY w powłoce przed uruchomieniem Cursora:
```
{
  "mcpServers": {
    "framelink-figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp@0.13.2", "--stdio"],
      "env": { "FIGMA_API_KEY": "${env:FIGMA_API_KEY}" }
    }
  }
}
```
Klucz czyta każdy plik, do którego ma dostęp twoje konto Figmy, więc traktuj go jak każdy inny token; kompromisy opisuje przewodnik po MCP Figmy.
Sprawdź, czy serwery są na liście. Jeśli nowe serwery nie pojawiają się w Cursor Settings → MCP, zamknij Cursora całkowicie i uruchom go ponownie.
Sprawdź, że oba serwery odpowiadają. Wklej to do czatu agenta:
```
List every tool you can call from the figma and playwright MCP servers, one line each.
Then call the playwright navigate tool on http://localhost:3000 and tell me the page title.
Do not guess: if a server is missing, say which one.
```
Poprawna odpowiedź wymienia narzędzia takie jak get_design_context i get_screenshot z Figmy oraz browser_navigate z Playwright i podaje prawdziwy tytuł strony z twojego serwera deweloperskiego.

Claude Code i Codex łączą się z tym samym serwerem Figmy własnymi poleceniami; wszystkie trzy warianty znajdziesz w przewodniku po MCP Figmy.

Przypnij design system w regule projektu

Bez reguły każdy wygenerowany komponent dobiera własne odstępy i kolory. Reguła powinna wskazywać pliki z tokenami, a nie kopiować ich wartości. Skopiowane kolory hex rozjadą się przy pierwszej zmianie palety przez designera i wtedy reguła zaprzeczy kodowi.

Zapisz to jako .cursor/rules/design-system.mdc. Klucze frontmattera (description, globs, alwaysApply) odpowiadają regule dla Cursora z README serwera MCP Figmy. Reguła używa jednego globu, bo składnia listy globów w plikach .mdc nie jest zweryfikowana. Po zapisaniu reguły sprawdź, czy się dołącza, testem kanarka ze strony reguły projektu w Cursorze.

---
description: Design-system tokens, components and UI conventions for React code
globs: src/**/*.tsx
alwaysApply: false
---
- Tokens live in src/styles/tokens.css (CSS variables) and tailwind.config.ts. Use only those.
  Never write a raw hex, rgb() or px value in a component. If a value is missing, stop and ask.
- Reuse components from src/components/ui (Button, Card, Input, Dialog, Table, Skeleton)
  before writing new markup. Never create a second button or card.
- Every interactive element has a visible focus state and an accessible name.
- Every color class works in light and dark mode.
- Mobile first: base classes target 375px, then md: and lg: add layout.
- When the Figma MCP server returns a localhost URL for an image or SVG, use it directly.
  Do not add icon packages and do not create placeholders.
- Never run Playwright with --update-snapshots. A changed screenshot is reported, not accepted.

README Figmy zawiera równoważną regułę obsługi zasobów graficznych; plugin z kroku 1 instaluje ją za ciebie. Ostatnia linia chroni twoje testy, które przygotujesz w następnej sekcji. Uzasadnienie znajdziesz na stronie jak nie pozwolić agentom edytować wyroczni.

Napisz test wizualny przed komponentem

Najpierw napisz kryterium akceptacji, żeby „gotowe” znaczyło „test przechodzi”, a nie „agent twierdzi, że pasuje”. Wyrenderuj komponent na osobnej trasie testowej (fixture) albo w story Storybooka ze stałymi danymi, sprawdź go w trzech szerokościach i obu schematach kolorów, a każdą szerokość i każdy schemat przepuść przez skan axe.

Zainstaluj oba pakiety raz (w terminalu):

npm install -D @playwright/test @axe-core/playwright
npx playwright install chromium

Zapisz to jako tests/visual/resource-table.visual.spec.ts. Test zakłada, że baseURL w playwright.config.ts wskazuje twój serwer deweloperski.

import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

const viewports = [
  { name: 'mobile', width: 375, height: 812 },
  { name: 'tablet', width: 768, height: 1024 },
  { name: 'desktop', width: 1280, height: 800 },
];

for (const vp of viewports) {
  for (const scheme of ['light', 'dark'] as const) {
    test(`resource table: ${vp.name}, ${scheme}`, async ({ page }) => {
      await page.setViewportSize({ width: vp.width, height: vp.height });
      await page.emulateMedia({ colorScheme: scheme });
      await page.goto('/dev/fixtures/resource-table');
      await expect(page.getByRole('table')).toBeVisible();

      await expect(page).toHaveScreenshot(`resource-table-${vp.name}-${scheme}.png`, {
        animations: 'disabled',
        mask: [page.getByTestId('relative-time')],
        maxDiffPixelRatio: 0.01,
      });

      const { violations } = await new AxeBuilder({ page })
        .withTags(['wcag2a', 'wcag2aa'])
        .analyze();
      expect(violations).toEqual([]);
    });
  }
}

Kod sprawdziliśmy kompilatorem TypeScriptu z @playwright/test 1.63.0 i @axe-core/playwright 4.13.0 (26.09.2026). emulateMedia przełącza schemat kolorów tylko wtedy, gdy tryb ciemny Tailwinda opiera się na media query; przy strategii klasowej dodaj w fixturze klasę dark do <html>.

Test zrzutów nie ma wzorca przy pierwszym uruchomieniu. Ten pierwszy zestaw obrazów to moment, w którym człowiek ocenia zgodność: designer porównuje sześć plików PNG z ramkami w Figmie i zatwierdza je w pull requeście. Od tej chwili CI odrzuca każde odchylenie powyżej 1% pikseli i nikt nie musi patrzeć ponownie, dopóki projekt się nie zmieni.

Zaimplementuj ramkę z Figmy agentem

Gdy serwery, reguła i test są na miejscu, prompt może być krótki i konkretny. Skopiuj link do ramki z Figmy przy zaznaczonej ramce, żeby URL zawierał node-id.

Implement this Figma frame as src/components/resource-table.tsx:
https://www.figma.com/design/FILE_KEY/Dashboard?node-id=456-789

1. Call get_design_context and get_screenshot for that node before writing code.
2. Map every color, spacing and font value to a token from src/styles/tokens.css or
   tailwind.config.ts. List any value with no matching token and stop; do not invent one.
3. Reuse Table, Skeleton and Button from src/components/ui. Do not write new primitives.
4. Props: columns, rows (generic), sort state, onSortChange, onRowClick.
   States: loading (skeleton rows), empty (message and a "Create resource" button), error.
5. Mobile (375px): horizontal scroll with the first column sticky.
6. Add the fixture route /dev/fixtures/resource-table with 8 fixed rows and one
   element with data-testid="relative-time".
7. Run: npx tsc --noEmit, then npx playwright test tests/visual/resource-table.visual.spec.ts.
   Report the results. Do not update snapshots.

Zamień FILE_KEY i node-id na wartości z linku do twojej ramki. Jedna ramka na prompt działa lepiej niż cała strona: odpowiedź MCP dla pełnego ekranu jest duża, a uwaga agenta się rozprasza.

Przy całym ekranie zacznij w Plan Mode Cursora, który tworzy plan implementacji przed napisaniem kodu. Poproś najpierw o podział na komponenty, a potem implementuj ramki po kolei.

Zaimplementuj UI ze zrzutu, gdy nie ma pliku Figmy

Zrzut ekranu nie pokaże układu mobilnego, który istnieje tylko w głowie designera, więc zachowanie responsywne zapisz w prompcie.

The attached image is the desktop design of our dashboard shell. Build it as
src/app/dashboard/layout.tsx.

- lg (1024px and up): fixed sidebar on the left, width token w-64 (256px), content on the right.
- md (768-1023px): the sidebar becomes a sheet that slides in from the left over the content.
- below md: no sidebar; a bottom navigation bar with five icon buttons.
- Sidebar: logo, navigation links with icons, user avatar and name pinned to the bottom.
  The active link has a left border and a background highlight.
- Top bar: breadcrumbs, search input, notification button, user menu.
- The content area scrolls independently of the sidebar.

Values the image does not show: card radius is the token radius-lg, card shadow is shadow-sm,
headings use font-semibold. Follow .cursor/rules/design-system.mdc. Before you finish, open
http://localhost:3000/dashboard with the playwright MCP server at 375, 768 and 1280 wide,
take a screenshot at each width, and describe anything that overlaps, truncates or scrolls
horizontally.

Domknij ostatnie różnice wizualne w pętli

Pierwszy render jest zwykle blisko, ale nie idealnie. Zamiast samemu opisywać każdą różnicę, pozwól agentowi porównać projekt z działającą stroną.

Compare the Figma frame https://www.figma.com/design/FILE_KEY/Dashboard?node-id=456-789
with http://localhost:3000/dev/fixtures/resource-table at 1280px wide.

1. Get the frame with get_screenshot and the page with the playwright MCP server.
2. List every difference in spacing, color, radius, shadow, typography and alignment,
   with the token the design uses and the class the code uses.
3. Fix the differences in src/components/resource-table.tsx only, using tokens.
4. Repeat steps 1-3 at most three times, then run the visual test and report which
   screenshots differ. Do not update snapshots; I review the images.

Limit trzech rund ma znaczenie: bez niego agent poprawia różnice subpikselowe, które próg 1% i tak toleruje. Przy zmianie jednej klasy szybciej jest zaznaczyć JSX i opisać zmianę; zobacz strategie edycji inline.

Skąd wiesz, że UI jest gotowe, bez czytania każdej linii?

Komponent jest gotowy, gdy przechodzą poniższe kontrole, a recenzent czyta ich wynik, nie markup:

Kontrola	Co wyłapuje	Gdzie działa	Kto zatwierdza
`npx tsc --noEmit`	Złe typy propsów, brakujące stany w unii	Pętla agenta i CI	CI
Twój linter z regułami `jsx-a11y`	Brakujące etykiety, handlery kliknięć na nieinteraktywnych elementach	Pętla agenta i CI	CI
`rg -n '#[0-9a-fA-F]{3,8}\b' src/components; test $? -eq 1` (przechodzi tylko kod wyjścia 1 rg, czyli „brak trafień”, więc trafienie albo błąd narzędzia, np. brak binarki `rg`, wywraca build)	Surowe kolory hex z pominięciem tokenów	CI	CI
Playwright `toHaveScreenshot`, 3 szerokości × 2 schematy	Przesunięcia layoutu, zepsute breakpointy, regresje trybu ciemnego	CI	Designer raz zatwierdza wzorzec; CI go egzekwuje
Skan axe (`wcag2a`, `wcag2aa`)	Kontrast, role, nazwy dostępne	CI	CI; świadomy wyjątek wymaga wskazanego recenzenta
Testy komponentu dla stanów	Zachowanie przy ładowaniu, pustych danych i błędzie	CI	Developer pisze przypadki przed promptem

W pull requeście recenzent ogląda różnicę zrzutów dołączoną do raportu HTML Playwright, wynik axe i listę zmienionych plików. Pull request, który zmienia wzorcowy PNG, wymaga zgody designera; wymuś to wpisem w CODEOWNERS dla katalogu ze zrzutami. Szerzej tę praktykę opisuje strona dowody zamiast czytania kodu, a akceptacja wizualna przed implementacją przesuwa kontrolę designera jeszcze wcześniej.

Co się psuje, gdy Cursor buduje UI z projektów?

Agent wpisuje surowe kolory hex albo nowe odstępy. Reguła się nie załadowała, zwykle dlatego, że glob nie pasuje do edytowanego pliku. Naprawa: dodaj do reguły linię-kanarka i sprawdź, czy agent ją powtarza, jak na stronie reguły projektu w Cursorze. Zostaw kontrolę rg w CI, żeby pominięta reguła wywracała build, zamiast trafiać na produkcję.

Agent buduje drugi przycisk zamiast zaimportować twój. Nie wiedział, że komponent istnieje. Naprawa: wymień komponenty w regule i w prompcie. Jeśli twój zespół używa Figma Code Connect, zmapuj komponenty z Figmy na komponenty w kodzie, żeby get_design_context zwracał import.

Wywołania Figmy ustają po kilku zapytaniach. Plan Starter oraz licencje View i Collab na płatnych planach mają limit sześciu wywołań narzędzi miesięcznie. Naprawa: implementuj ze zrzutu ramki albo daj implementującej osobie licencję Dev; alternatywą tylko do odczytu jest społecznościowy serwer figma-developer-mcp z kroku 2.

Ikony zamieniają się w nowy pakiet ikon albo szare placeholdery. Agent zignorował adresy zasobów zwrócone przez serwer Figmy. Naprawa: upewnij się, że reguła Figmy dotycząca zasobów jest zainstalowana (dodaje ją plugin), i odrzucaj w pull requestach z UI każdą zmianę package.json, o którą nie prosiłeś.

Testy zrzutów przechodzą lokalnie, a padają w CI. Fonty i antyaliasing różnią się między macOS a linuksowym runnerem. Naprawa: generuj i porównuj wzorce w tym samym obrazie kontenera, którego używa CI, zostaw animations: 'disabled' i maskuj znaczniki czasu, awatary oraz inne dane na żywo.

Agent „naprawia” padający test zrzutu, aktualizując wzorzec. Wzorzec jest wyrocznią, a agent go zmienił. Naprawa: przywróć PNG, zostaw w regule linię zakazującą aktualizacji i chroń katalog ze zrzutami przez CODEOWNERS, żeby zmiana wzorca zawsze trafiała do designera.

Layout psuje się między breakpointami. Projekt pokazywał tylko 1440 pikseli, a resztę agent zgadł. Naprawa: poproś o ramkę mobilną albo zapisz zachowanie dla każdego breakpointu w prompcie, jak w prompcie ze zrzutem powyżej. Jeśli projekt używa niestandardowego breakpointu, dodaj go raz do tailwind.config.ts, zamiast używać wartości arbitralnych.

Kontrola hex wywraca build na czymś, co nie jest kolorem. Wzorzec jest celowo szeroki, bo musi łapać wartości arbitralne Tailwinda, takie jak bg-[#1a2b3c], więc trafia też w link do fragmentu złożony z samych liter hex (href="#add") i w numer zgłoszenia w komentarzu (#123). Naprawa: nadaj identyfikatorowi fragmentu pierwszą literę spoza hex (#new-row), a do zgłoszeń linkuj pełnym adresem URL zamiast #123. Nie zawężaj wzorca tak, żeby przestał widzieć [#.

Komponent rośnie ponad 300 linii. Jeden prompt prosił naraz o layout, dane, sortowanie i stan. Naprawa: poproś agenta o wydzielenie nagłówka, wiersza i logiki sortowania do hooka oraz o utrzymanie zielonego testu wizualnego po każdym wydzieleniu.

Co dalej z pracą nad UI w Cursorze

MCP Figmy i projekt do kodu Code Connect, limity licencji i ten sam workflow w Claude Code i Codeksie.

Playwright MCP czy Playwright CLI Wybierz narzędzie przeglądarkowe dla agenta i zamień błąd UI w padający test E2E.

Testowanie dostępności Więcej niż skan axe: ścieżki klawiaturowe, czytniki ekranu i raporty WCAG.

Najlepsze skille do frontendu Skille agentów, które poprawiają generowane UI, zanim ruszą testy.

TDD w Cursorze Najpierw testy komponentu dla stanów ładowania, pustych danych i błędu.

Przepisy React Wzorce na poziomie frameworka dla generowanych komponentów.