Implementacja UI z projektów za pomocą Cursora

Designer właśnie przekazał ci plik Figma z 15 ekranami dla dashboardu SaaS. Jest nawigacja boczna, tabela danych z sortowaniem i filtrowaniem, komponent wykresu, strona ustawień z zagnieżdżonymi zakładkami i flow modala do tworzenia nowych zasobów. Projekty wyglądają dopracowane — siatka odstępów 8px, spójne tokeny kolorów, breakpointy responsywne dla mobile i tablet. Twoim zadaniem jest przekształcenie tych pikseli w produkcyjne komponenty React, które dokładnie pasują do projektów, obsługują stany ładowania, zarządzają walidacją formularzy i działają na ekranie telefonu szerokości 320px.

Cursor może widzieć obrazy. To fundamentalnie zmienia workflow tworzenia frontendu — zamiast ręcznego mierzenia wartości paddingu i zgadywania kolorów hex, wklejasz screenshot do czatu Agenta, a AI generuje komponenty, które dokładnie pasują do projektu. Poniższa technika pokazuje, jak przejść od eksportu Figma do komponentu produkcyjnego w ułamku czasu.

Co wyniesiesz

• Workflow używania screenshotów jako kontekstu w Cursor Agent do generowania komponentów dokładnych co do piksela
• Prompt systemu projektowego, który ustanawia spójne tokeny (kolory, odstępy, typografię) we wszystkich generowanych komponentach
• Technikę implementacji responsywnej używającą breakpointów Tailwind, które Agent automatycznie utrzymuje
• Prompt obsługi formularzy, który generuje walidację Zod, stany błędów i wskaźniki ładowania w jednym podejściu
• Iteracyjny proces udoskonalania do zamykania luki między UI wygenerowanym przez AI a finalnym projektem

Workflow

Krok 1: Ustanów system projektowy w swoich regułach

Zanim wygenerujesz jakiekolwiek komponenty, zakoduj swoje tokeny projektowe, aby każdy prompt produkował spójny wynik. To najbardziej wpływowy krok dla tworzenia frontendu wspomaganego AI.

Wskazówka

Prompt do skopiowania i wklejenia — Reguły systemu projektowego:

Utwórz .cursor/rules/design-system.mdc z:

---

description: Tokeny systemu projektowego i konwencje UI globs: [“src/components/”, “src/app/“]

System projektowy

Kolory

• Primary: #2563EB (blue-600), hover: #1D4ED8 (blue-700)
• Secondary: #6B7280 (gray-500)
• Background: #FFFFFF (light), #111827 (dark)
• Surface: #F9FAFB (gray-50), dark: #1F2937 (gray-800)
• Border: #E5E7EB (gray-200), dark: #374151 (gray-700)
• Error: #DC2626 (red-600)
• Success: #059669 (emerald-600)

Odstępy

• Użyj skali odstępów Tailwind. Jednostka bazowa: 4px.
• Padding komponentów: p-4 (16px) dla kart, p-6 (24px) dla sekcji strony
• Odstępy stosu: space-y-4 między polami formularza, space-y-6 między sekcjami

Typografia

• Nagłówki: font-semibold. Tytuł strony: text-2xl. Sekcja: text-lg. Label: text-sm.
• Treść: text-sm text-gray-600 dark:text-gray-400
• Użyj rodziny czcionek Inter

Komponenty

• Przyciski: rounded-lg, focus:ring-2, disabled:opacity-50
• Karty: rounded-xl border shadow-sm
• Inputy: rounded-md border border-gray-300 focus:border-blue-500 focus:ring-1
• Wszystkie elementy interaktywne potrzebują stanów focus-visible dla dostępności
• Wszystkie komponenty muszą wspierać tryb ciemny przez prefix Tailwind dark:

Ten plik reguł będzie automatycznie uwzględniany, gdy Agent edytuje pliki w src/components/ lub src/app/, zapewniając, że każdy wygenerowany komponent używa tych samych tokenów.

Krok 2: Generuj komponenty ze screenshotów

Cursor wspiera wejście obrazów w czacie Agenta. Zrób screenshot konkretnej sekcji swojego projektu Figma (nie całej strony — jednego komponentu na raz) i wklej go bezpośrednio do czatu.

[wklej screenshot tabeli danych z Figma]

Zaimplementuj ten komponent tabeli danych w src/components/data-table.tsx:

1. Dopasuj projekt dokładnie -- nagłówki kolumn, stylowanie wierszy, stany hover, zebra striping
2. Propsy: columns (konfigurowalne), data (typ generyczny), onSort, onRowClick
3. Dodaj sortowalne nagłówki kolumn ze wskaźnikami rosnąco/malejąco
4. Stan ładowania: szkieletowe wiersze pasujące do szerokości kolumn
5. Stan pusty: wycentrowana wiadomość z ikoną
6. Responsywne: przewijanie poziome na mobile z pierwszą kolumną sticky
7. Użyj naszych tokenów systemu projektowego z .cursor/rules

To jest domyślnie React Server Component. Jeśli potrzebna jest interaktywność
(sortowanie, kliknięcia wierszy), wyodrębnij tylko interaktywne części do komponentu klienta.

Notatka

Dla najlepszych rezultatów rób screenshoty pojedynczych komponentów, a nie całych stron. Screenshot tylko tabeli danych daje AI lepszy szczegół wizualny niż screenshot całego dashboardu w mniejszym rozmiarze. Zawsze możesz skomponować komponenty później.

Krok 3: Obsługuj formularze z walidacją

Formularze to miejsce, gdzie kod wygenerowany przez AI oszczędza najwięcej czasu — boilerplate schematów walidacji, komunikatów błędów, stanów ładowania i typów pól jest żmudny, ale mechaniczny.

Wskazówka

Prompt do skopiowania i wklejenia — Generowanie formularzy:

@src/db/schema.ts

[wklej screenshot formularza “Create Resource” z Figma]

Zbuduj ten formularz w src/components/create-resource-form.tsx:

1. Dopasuj projekt: układ pól, labele, tekst pomocniczy, pozycjonowanie komunikatów błędów
2. Utwórz schemat walidacji Zod, który pasuje do ograniczeń bazy danych:
   • Name: wymagane, 3-100 znaków
   • Description: opcjonalne, max 500 znaków
   • Type: wymagane, jeden z [“api”, “database”, “storage”]
   • Region: wymagane, wypełnione ze statycznej listy
3. Użyj react-hook-form z resolverem Zod
4. Pokaż błędy walidacji inline poniżej każdego pola po blur, nie po submit
5. Wyłącz przycisk submit podczas wysyłania, pokaż spinner w środku
6. Po sukcesie: zamknij modal, pokaż toast, unieważnij cache listy zasobów
7. Po błędzie: pokaż komunikat błędu serwera nad formularzem, zachowaj wartości pól

Użyj server actions do wysyłania formularza. Tylko TypeScript — typ wartości formularza ze schematu Zod.

Krok 4: Buduj responsywne layouty z Tailwind

Dla layoutów pełnych stron podaj screenshot i określ zachowanie responsywne explicite, ponieważ AI nie może wywnioskować twojego projektu mobile ze screenshotu desktop.

[wklej screenshot layoutu dashboardu z Figma]

Zbuduj layout dashboardu w src/app/dashboard/layout.tsx:

1. Desktop (lg+): stały sidebar (w-64) po lewej, główny obszar treści po prawej
2. Tablet (md): zwijany sidebar, który nakłada się na treść jako sheet z lewej
3. Mobile (sm): brak sidebara, dolny pasek nawigacji z 5 przyciskami ikon
4. Sidebar ma: obszar logo, linki nawigacyjne z ikonami, awatar użytkownika + nazwa na dole
5. Główny obszar treści ma górny pasek z: breadcrumbs, input wyszukiwania, dzwonek powiadomień, menu użytkownika
6. Obszar treści przewija się niezależnie od sidebara
7. Aktywny link sidebara ma wskaźnik lewej krawędzi i podświetlenie tła

Użyj responsywnych prefiksów Tailwind konsekwentnie. Przetestuj, że layout nie
psuje się przy breakpointach 768px i 1024px konkretnie.

Krok 5: Udoskonalaj edycjami inline

Gdy początkowy komponent jest wygenerowany, użyj Cmd+K (edycja inline) do udoskonaleń wizualnych. To szybsze niż tryb Agent dla małych zmian CSS, ponieważ pętla feedbacku jest natychmiastowa.

Zaznacz konkretny JSX, który chcesz dostosować, naciśnij Cmd+K i opisz zmianę:

Luka między nagłówkiem tabeli a pierwszym wierszem jest zbyt duża. Zmniejsz ją z
py-4 do py-2 na komórkach thead i zmień tło nagłówka z gray-100
na gray-50, aby było bardziej subtelne.

Dla rozbieżności wizualnych, które są trudne do opisania słowami, zrób screenshot side-by-side projektu Figma i swojej implementacji, wklej go do czatu Agenta i zapytaj:

[wklej obraz porównania side-by-side]

Lewa strona to projekt Figma. Prawa strona to moja obecna implementacja.
Napraw różnice -- odstępy między kartami są zbyt duże, cień jest
zbyt mocny, a border radius powinien być większy.

Krok 6: Dodaj stany interakcji i animacje

Warstwa finałowego polotu często jest pomijana pod presją deadline’u, ale robi ogromną różnicę w postrzeganej jakości.

Wskazówka

Prompt do skopiowania i wklejenia — Polerowanie interakcji:

@src/components/data-table.tsx @src/components/create-resource-form.tsx

Dodaj te stany interakcji do komponentów dashboardu:

1. Wiersze tabeli danych: podświetlenie przy hover (bg-gray-50), subtelna skala przy kliknięciu, płynna animacja zmiany kolejności wierszy
2. Nawigacja sidebar: przejście aktywnego linku (150ms ease), stan hover na nieaktywnych linkach
3. Pola formularza: płynne przejście focus ring, animacja shake przy błędzie walidacji
4. Modale: animacja fade-in tła + slide-up treści (200ms)
5. Przyciski: subtelny efekt naciśnięcia (scale-95 przy active), przejście spinnera ładowania
6. Powiadomienia toast: wsunięcie z prawego górnego rogu, auto-dismiss z paskiem postępu
7. Szkielet ładowania: animacja pulse z właściwymi szerokościami pasującymi do treści, którą zastępują

Użyj narzędzi transition i animate Tailwind. Brak zewnętrznych bibliotek animacji. Respektuj prefers-reduced-motion dla dostępności.

Używanie serwera MCP Figma

Jeśli twój zespół intensywnie używa Figmy, serwer MCP Figma pozwala Cursorowi czytać pliki projektowe bezpośrednio zamiast polegać na screenshotach. Skonfiguruj to w .cursor/mcp.json:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp"],
      "env": {
        "FIGMA_API_KEY": "twoj-klucz-api-figma"
      }
    }
  }
}

Z serwerem MCP możesz odwoływać się do frame’ów Figma przez URL:

Używając MCP Figma, przeczytaj komponent pod tym URL-em:
https://www.figma.com/file/abc123/Dashboard?node-id=456

Zaimplementuj go jako komponent React zgodnie z naszymi regułami systemu projektowego.
Wyodrębnij dokładne wartości kolorów, odstępów i rozmiarów czcionek z pliku projektowego.

To eliminuje krok screenshota i daje Agentowi dostęp do dokładnych wartości pikseli, tokenów kolorów i odstępów, które screenshoty aproksymują.

Gdy to się psuje

Wygenerowane komponenty wyglądają podobnie, ale nie dokładnie. Screenshoty tracą drobne szczegóły przy niższych rozdzielczościach. Przytnij ciasno wokół konkretnego komponentu, użyj screenshotów Retina/2x, jeśli możliwe, i explicite określ wartości, których screenshot nie przekazuje jasno: “Border radius to 12px, cień to shadow-md, font weight to 500.”

Agent używa CSS-in-JS zamiast Tailwind. Jeśli wygenerowany kod zawiera style inline lub styled-components, twoja reguła systemu projektowego nie jest podnoszona. Zweryfikuj, że pole globs w twoim .cursor/rules/design-system.mdc pasuje do ścieżki pliku. Dodaj explicytną instrukcję: “Używaj wyłącznie klas Tailwind CSS. Bez stylów inline.”

Tryb ciemny jest zepsuty. AI czasami generuje style trybu ciemnego, które konfliktują z trybem jasnym. Używaj strategii prefiksu dark: Tailwind konsekwentnie. Dodaj regułę: “Każda klasa koloru musi mieć odpowiedni wariant dark:.” Testuj oba tryby, przełączając motyw systemowy.

Layout responsywny psuje się przy konkretnych breakpointach. AI wybiera standardowe breakpointy Tailwind (sm, md, lg), ale twój projekt może mieć niestandardowe breakpointy. Określ dokładne wartości pikseli: “Sidebar zwija się przy 1024px, nie przy domyślnym lg Tailwind (1024px jest tym samym, ale określ wymaganie explicite).” Dla nietypowych breakpointów dodaj niestandardowe wartości do tailwind.config.ts.

Komponenty są zbyt duże i robią zbyt wiele. Agent czasami generuje 300-liniowe komponenty z całą logiką inline. Odrzuć: “Ten komponent jest zbyt duży. Wyodrębnij nagłówek tabeli do osobnego komponentu, wiersz do innego, a logikę sortowania do niestandardowego hooka.”

Co dalej

Test-Driven Development Dodaj testy komponentów i testy regresji wizualnej do swojego nowego UI.

Optymalizacja wydajności Profiluj wydajność renderowania i eliminuj niepotrzebne re-rendery.

Generowanie dokumentacji Auto-generuj bibliotekę komponentów z przykładami użycia i dokumentacją propsów.