AI Cursora potrafi pisać dużo kodu UI. Czego nie potrafi, to odczytać pliku Figma. Wklejasz zrzut ekranu i zgaduje — błędne odstępy, złe wartości kolorów, wymyślone nazwy komponentów. Problem nie leży w modelu. To brakujący ustrukturyzowany kontekst.

figmascope wypełnia tę lukę. Eksportuje plik Figma jako pakiet zip — tokeny projektu, drzewa układów per-ekran, referencyjne renderingi, inwentarz komponentów, ciągi UI — wszystko, czego model językowy potrzebuje, by generować dokładny kod zamiast plauzybnie wyglądającego kodu. Główna aplikacja działa całkowicie w przeglądarce bez backendu ani przesyłania plików.

Ta strona opisuje pełny przepływ pracy od URL Figma do generowania kodu w Cursor. Jeśli używasz Claude Code zamiast Cursora, zobacz Figma do Claude Code dla przepływu pracy specyficznego dla Claude. Szerszy przegląd tego, co sprawia, że przekazanie projektu jest gotowe dla agenta, znajdziesz w Przekazanie projektu AI.

Co zawiera pakiet kontekstu

Kiedy uruchomisz figmascope na pliku Figma, otrzymasz .zip zawierający:

Nic nie jest przesyłane. Twój Personal Access Token żyje wyłącznie w pamięci przeglądarki i jest wysyłany tylko do api.figma.com. Pakiet zip jest składany po stronie klienta i przekazywany do pobierania w przeglądarce.

Krok 1 — Uzyskaj Personal Access Token Figma

Przejdź do Figma → Ustawienia konta → Personal Access Tokens i utwórz token z zakresem Zawartość pliku: tylko do odczytu. To jest minimum wymagane.

Token nigdy nie opuszcza sesji przeglądarki; figmascope wysyła go w nagłówku X-Figma-Token w żądaniach do api.figma.com i nigdzie indziej. Zobacz Bezpieczeństwo PAT i figmascope po pełny model zagrożeń.

Krok 2 — Wyeksportuj pakiet kontekstu

  1. Otwórz figmascope.dev w przeglądarce.
  2. Wklej URL pliku Figma (np. https://www.figma.com/file/ABC123/MojProjekt).
  3. Wklej swój Personal Access Token.
  4. Kliknij Eksportuj pakiet kontekstu.
  5. Plik figmascope-<fileKey>.zip pobiera się na Twój komputer.

Rozpakuj go do projektu. Rozsądne miejsce to folder design/ w katalogu głównym repozytorium:

unzip figmascope-ABC123.zip -d design/
# → design/CONTEXT.md
# → design/tokens.json
# → design/screens/Home.json
# → design/screens/Home.png
# → design/components/inventory.json
# → design/strings.json
# → design/_meta.json

Krok 3 — Otwórz projekt w Cursor

Otwórz folder projektu w Cursor jak zwykle. Katalog design/ jest teraz częścią obszaru roboczego, a indekser Cursora go uwzględni.

Przed promptowaniem modelu przeczytaj raz design/CONTEXT.md samodzielnie. Powie Ci, które ramki zostały wyeksportowane, jaki jest schemat nazewnictwa tokenów i wymienia wszelkie ostrzeżenia emitowane podczas eksportu (np. layout-mode-none-inferred dla ramek, gdzie Figma nie zgłosiło auto-layoutu). Te ostrzeżenia są takie same, na jakie Twój agent napotka.

Krok 4 — Napisz skuteczny prompt do Cursor

Najprostszym punktem startowym jest referencyjny prompt, który możesz wkleić do Cursor Chat:

Przeczytaj najpierw design/CONTEXT.md, a następnie zaimplementuj ekran Home.

Użyj:
- design/tokens.json dla wszystkich wartości kolorów, odstępów i typografii
- design/screens/Home.json dla drzewa układu
- design/screens/Home.png jako wizualnego odniesienia
- design/strings.json dla całej treści (użyj kluczy zasobów jako identyfikatorów i18n)
- design/components/inventory.json do dopasowania nazw komponentów

Cel: React + Tailwind CSS. Mapuj wartości tokenów do wpisów konfiguracji Tailwind zamiast
kodowania na stałe wartości hex. Używaj nazw komponentów z inventory.json jako
nazw plików komponentów (PascalCase).

Composer Cursora będzie przestrzegał ograniczeń z CONTEXT.md, sprawdzi drzewo układu w Home.json, pobierze odstępy z tokens.json i wyprodukuje kod zgodny z systemem projektowym, a nie go przybliżający.

Model nie zna Twojego projektu. Zna to, co mu dajesz. Ustrukturyzowany JSON bije zrzut ekranu za każdym razem.

Krok 5 — Mapuj tokeny do konfiguracji frameworka

Wyeksportowany tokens.json używa zagnieżdżonej struktury zgodnej z W3C:

{
  "color": {
    "surface": { "$value": "#f6f2ea", "$type": "color" },
    "accent":  { "$value": "#d96a3a", "$type": "color" }
  },
  "spacing": {
    "4":  { "$value": "16px", "$type": "dimension" },
    "8":  { "$value": "32px", "$type": "dimension" }
  },
  "radius": {
    "sm": { "$value": "4px",  "$type": "dimension" },
    "md": { "$value": "8px",  "$type": "dimension" }
  },
  "typography": {
    "body": {
      "fontFamily": { "$value": "Inter",  "$type": "fontFamily" },
      "fontSize":   { "$value": "14px",   "$type": "dimension" },
      "fontWeight": { "$value": 400,       "$type": "number" }
    }
  }
}

Dla Tailwind poproś Cursor o wygenerowanie bloku theme.extend w tailwind.config.js bezpośrednio z tokens.json. Zobacz Eksport tokenów projektu dla agentów AI po dogłębną analizę formatu tokenów i wnioskowania z częstotliwości. Struktura tokenów jest wystarczająco płaska, by przeglądnąć ją w jednym skrypcie Node, jeśli chcesz to zautomatyzować:

// scripts/tokens-to-tailwind.js
const tokens = require('../design/tokens.json');

const colors = Object.fromEntries(
  Object.entries(tokens.color).map(([k, v]) => [k, v.$value])
);
const spacing = Object.fromEntries(
  Object.entries(tokens.spacing).map(([k, v]) => [k, v.$value])
);

module.exports = { colors, spacing };

Krok 6 — Obsługuj projekty wieloekranowe

Każda ramka w pliku Figma staje się screens/<NazwaRamki>.json i pasującym .png. W projekcie z tuzinem ekranów pracuj przez nie stopniowo. Cursor Composer dobrze radzi sobie z jednym ekranem na sesję; podaj mu JSON ekranu i PNG jako jawne odwołania @file:

@design/screens/Settings.json
@design/screens/Settings.png

Zaimplementuj ekran Ustawienia. Postępuj zgodnie z tą samą strukturą komponentów
co już zaimplementowany ekran Home. Używaj tokenów z design/tokens.json.

Inwentarz komponentów (design/components/inventory.json) pomaga uniknąć dryfu nazw między ekranami — każdy komponent odwoływany w JSON ekranu ma kanoniczne id i name w inwentarzu. Jeśli generujesz współdzieloną bibliotekę komponentów, użyj tych nazw jako źródła prawdy.

Jak wygląda IR w praktyce

JSON per-ekran używa rekurencyjnej struktury węzłów. Uproszczony przykład dla komponentu kart:

{
  "kind": "stack",
  "name": "ProductCard",
  "direction": "vertical",
  "gap": { "$ref": "spacing.4" },
  "padding": { "top": 16, "right": 16, "bottom": 16, "left": 16 },
  "background": { "$ref": "color.surface" },
  "radius": { "$ref": "radius.md" },
  "children": [
    {
      "kind": "leaf",
      "name": "ProductImage",
      "type": "image",
      "width": 320,
      "height": 200
    },
    {
      "kind": "leaf",
      "name": "ProductTitle",
      "type": "text",
      "text": { "$ref": "strings.product.card.title" },
      "style": { "$ref": "typography.heading.sm" }
    }
  ]
}

Odwołania do tokenów używają ciągów $ref, które pasują do kluczy w tokens.json. Model może je rozwiązać bez osobnego kroku wyszukiwania. Zobacz wyjaśnienie IR per-ekran po pełny schemat węzłów.

Utrzymywanie aktualności kontekstu

Pliki projektowe się zmieniają. Dobry nawyk: ponownie uruchom figmascope za każdym razem, gdy projekt ma znaczącą rewizję, zatwierdź zaktualizowany folder design/ i zanotuj wersję w opisie PR. Plik _meta.json zawiera znacznik czasu i pole lastModified pliku Figma, więc możesz porównać, kiedy pakiet był ostatnio regenerowany i kiedy plik był ostatnio dotykany.

// _meta.json
{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 12,
  "warnings": []
}

Jeśli warnings nie jest puste, zajmij się nimi przed przekazaniem kontekstu agentowi. Częste ostrzeżenia: strings-collision (dwa węzły z tym samym slugiem rozwiązały się do tego samego klucza) i layout-mode-none-inferred (kontener bez jawnego auto-layoutu, gdzie figmascope wywnioskowało układ z pozycji potomków).

Typowe przepływy pracy w Cursor

Aktualizacje oparte na różnicach

Gdy projekt ma drobną rewizję — powiedzmy, że wartość odstępu zmieniła się z spacing.4 na spacing.6 w komponencie karty — możesz poprosić Cursor, by zastosował tylko deltę zamiast regenerować cały ekran:

Plik design/tokens.json został zaktualizowany. spacing.4 to teraz 24px zamiast 16px.
Znajdź wszystkie komponenty używające spacing.4 i zaktualizuj je. Nie dotykaj niczego innego.

Działa to, ponieważ generowane komponenty odwołują się do nazw tokenów jako klas Tailwind (gap-spacing-4) zamiast surowych wartości pikseli. Zmiana tokenu to znajdź i zastąp, nie przeprojektowanie.

Dodawanie nowego ekranu do istniejącej bazy kodu

Gdy dodajesz ekran N do bazy kodu, która ma już zaimplementowane ekrany 1 do N-1, kluczowym uzupełnieniem promptu jest zakorzenienie agenta w istniejącej bibliotece komponentów:

@design/screens/Checkout.json
@design/screens/Checkout.png

Zaimplementuj ekran Checkout. Ponownie używaj istniejących komponentów z src/components/
wszędzie tam, gdzie nazwa komponentu pasuje do design/components/inventory.json.
Twórz nowe pliki komponentów tylko dla komponentów, które nie są jeszcze zaimplementowane.
Używaj design/tokens.json dla wszystkich wartości tokenów.

Inwentarz komponentów jest mostem między nazwą komponentu w projekcie a nazwą pliku w bazie kodu. Bez niego agent będzie wymyślał ścieżki importu i tworzy zduplikowane komponenty.

Generowanie bazowego systemu projektowania

Przed implementacją jakichkolwiek ekranów użyj pakietu kontekstu, by wygenerować bazowy system projektowania: konfigurację tokenów, komponent palety kolorów i bazowe style typograficzne. To zakotwicza wszystkie kolejne implementacje ekranów w tym samym fundamencie:

Przeczytaj design/tokens.json i design/CONTEXT.md.

Wygeneruj:
1. Blok theme.extend tailwind.config.ts ze wszystkich tokenów
2. src/styles/tokens.css z właściwościami niestandardowymi CSS dla tych samych tokenów
3. src/components/foundations/ColorPalette.tsx pokazujący wszystkie tokeny kolorów
4. src/styles/typography.css z klasami tokenów typografii

Nazwij wszystkie klasy i zmienne używając ścieżek kluczy tokenów
(np. --color-accent, text-ink, bg-surface).

Po ustanowieniu tej bazy każda implementacja ekranu może się do niej odwoływać. Agent nie będzie ponownie wyznaczać kolorów z projektu w każdej sesji — będzie używać już wygenerowanych klas.

Ograniczenia, które warto znać z góry

Pakiet kontekstu figmascope przechwytuje statyczną strukturę. Kilka rzeczy, których nie może przedstawić:

Plik CONTEXT.md zaznacza, które ramki zostały wykluczone i dlaczego, więc agent nie próbuje implementować czegoś, co było celowo poza zakresem.