Vibe-coding dla designerów #1: Setup GitHub, Cursor i FigmaMCP #EN294

TL;DR

• Nowa era designu: Tradycyjny przepływ pracy Figma → developer → kod ewoluuje w kierunku bezpośredniego tworzenia prototypów przez designerów
• Vibe-coding revolution: Tworzenie prawdziwie działających prototypów opartych na kodzie, a nie tylko klikalnych makiet
• Trzy filary procesu: Figma (projekt), GitHub (zarządzanie kodem) i Cursor (środowisko deweloperskie zintegrowane z AI)
• FigmaMCP jako klucz: Model Context Protocol umożliwia Cursorowi „rozumienie” struktury projektu w Figmie
• Context is king: Funkcja „Add context” w Cursor jako kluczowy element skutecznego komunikowania się z AI
• Iteracyjny proces: Pierwszy wynik rzadko jest idealny – z AI należy komunikować się jak z kolegą z zespołu programistów
• Struktura ponad perfekcję: Czysta struktura Figma (auto layout, zmienne) ważniejsza niż wizualna perfekcja

Designerzy stoją u progu rewolucji w swoim przepływie pracy. Prezenter wyjaśnia, jak tradycyjny proces „pomysł → Figma → developer → kod” transformuje się w coś znacznie bardziej bezpośredniego. To pierwszy odcinek z serii przeznaczonej dla każdego – również dla osób, które nigdy wcześniej nie miały styczności z Git. Początkowe odcinki mogą wydawać się podstawowe dla zaawansowanych użytkowników, jednak stanowią fundament pod bardziej wyrafinowane metody.

✅ Checklist kompletnej konfiguracji

Konfiguracja GitHub

• Utworzenie konta GitHub
• Stworzenie nowego repozytorium (najlepiej prywatne)
• Ustawienie widoczności projektu
• Sklonowanie repo do Cursor

Konfiguracja Cursor

• Pobranie i instalacja Cursor z oficjalnej strony
• Połączenie z GitHub repository poprzez „Clone from GitHub”
• Konfiguracja API keys (opcjonalnie dla własnych tokenów)
• Test podstawowych funkcji

Konfiguracja FigmaMCP

• Włączenie „Local MCP Server” w ustawieniach Figma desktop
• Dodanie kodu konfiguracyjnego do Cursor z dokumentacji Figmy
• Weryfikacja połączenia (zielone kółko = sukces)
• Test z przykładowym komponentem

Trzystopniowa ewolucja procesu designerskiego

Prezenter przedstawia fundamentalne zmiany, jakie przechodzi branża designu. Pierwszy poziom obejmuje narzędzia takie jak V0, Lovable czy Replit, które pozwalają na błyskawiczne prototypowanie i wdrażanie pomysłów bezpośrednio w kodzie bez znajomości programowania.

Drugi poziom wprowadza Cursor i Claude Code, które umożliwiają designerom pracę z prawdziwym kodem. To tutaj realizuje się koncepcja „vibe-coding” – tworzenia prawdziwie działających prototypów opartych na kodzie, nawet jeśli nie trafią one od razu do produkcji.

Najbardziej zaawansowany, trzeci poziom pozwala designerom na pracę z kodem produkcyjnym i jego wdrażanie. Jednak prezenter zaznacza, że to podejście jest ryzykowne i nie wszyscy je akceptują. W perspektywie pojawiają się także agentic workflows – zautomatyzowane procesy łączące development i design.

Cursor – Figma dla programistów

Prezenter definiuje Cursor jako zintegrowane środowisko programistyczne – „Figmę dla programistów”. Zawiera edytor kodu, compiler, debugger oraz narzędzia automatyzacji. Kluczową różnicą jest wbudowana integracja z modelami AI, co pozwala generować i edytować kod za pomocą poleceń w języku naturalnym.

Narzędzie łączy się z popularnymi aplikacjami jak Linear, jednocześnie pozwalając na zmianę modeli w zależności od potrzeb. Najważniejsza funkcjonalność to możliwość „proszenia” Cursor o wykonanie zadań zamiast samodzielnego kodowania.

Strategia ekonomiczna korzystania z tokenów

Prezenter wyjaśnia praktyczne aspekty używania Cursor. Subskrypcja Cursor Pro oferuje określoną liczbę tokenów, lecz gdy się wyczerpią, można dodać własne API keys. W ustawieniach wklejasz klucz z Anthropic czy OpenAI, nazywasz go (przykładowo „YouTube”) i od tego momentu korzystasz z własnej subskrypcji zamiast limitowanych tokenów Cursor.

Podstawy pracy z GitHub

GitHub staje się centralnym miejscem na wszystkie pliki projektu, ułatwiając śledzenie zmian i współpracę. Proces obejmuje tworzenie konta, nowego repozytorium z nazwą projektu i opisem, następnie ustawienie widoczności. Domyślnie prezenter zaleca opcję private, chyba że chcemy udostępnić coś użytecznego publicznie.

Mimo że GitHub oferuje opcje wiersza poleceń, na początku prezenter używa graficznego interfejsu użytkownika. Jego celem jest zapewnienie pełnego zrozumienia procesów przed przejściem do bardziej zaawansowanych metod.

Magiczne połączenie – FigmaMCP

Model Context Protocol dla Figma stanowi przełom w procesie design-to-code. Prezenter przeciwstawia to staremu podejściu dodawania screenshotów do folderów, nazywając je metodą „z lat 90.”

Kluczowym elementem jest to, że MCP pozwala Cursorowi „rozumieć” strukturę projektu w Figmie, odczytując informacje o:

• Stylach i zmiennych Figma
• Ustawieniach Auto Layout
• Wszystkich właściwościach komponentów
• Metadanych struktury designu

Konfiguracja wymaga dwóch kroków: włączenia local MCP server w preferencjach Figma desktop oraz dodania oficjalnego kodu z dokumentacji Figmy. Po poprawnej konfiguracji pojawi się zielone kółko potwierdzające aktywne połączenie.

Dobre praktyki w pracy z Cursorem

Prezenter zwraca uwagę na kilka kluczowych zasad usprawniających pracę z AI:

Zawsze dodawaj kontekst: Używaj przycisku Add Context (@), aby wskazać AI konkretne pliki lub foldery. Prezenter podkreśla, że jest to „naprawdę ważne” dla precyzji działania.

Jedno zadanie = jeden czat: Dla każdego nowego zadania otwieraj nowy czat. Taka praktyka pomaga utrzymać porządek i dokładność w komunikacji z AI.

Komunikuj się jak z zespołem: Z AI należy „rozmawiać jak z kolegą z zespołu programistów” – precyzyjnie opisywać, co nie działa i czego oczekujemy.

Demonstracja przepływu pracy w praktyce

Prezenter pokazuje kompletny proces na przykładzie komponentu filtra z dwoma stanami. Po skopiowaniu linku komponentu używa prostego promptu: „proszę stwórz klikalny prototyp dla tego komponentu filtra”.

Cursor automatycznie wykorzystuje FigmaMCP, pobierając kod i screenshot z Figma. Jeśli w trakcie generowania pojawiają się komunikaty „get code” lub „get screenshot”, to potwierdzenie, że integracja MCP działa poprawnie.

Jednak prezenter podkreśla kluczową prawdę: pierwszy wynik rzadko jest idealny. Dlatego kluczowy staje się drugi etap – iteracja. Dzięki informacji zwrotnej w języku naturalnym – „użyj font awesome dla ikon. Stan nieaktywny ma przycisk plus. Stan aktywny ma ikonę X” – udało się wprowadzić niezbędne dostosowania.

Znaczenie strukturalnej czystości designu

Prezenter podkreśla, że jakość generowanego kodu jest wprost proporcjonalna do porządku w pliku Figmy. Kluczowe elementy to:

• Auto layout – fundamentalna struktura
• Figma variables – spójność w tokenach designu
• Odpowiednie nazewnictwo – choć eksperymentował z narzędziami AI do automatycznego nazywania warstw
• Czysta struktura – najważniejszy element dla jakości rezultatów

Co ciekawe, przejrzysta struktura okazuje się ważniejsza niż perfekcyjne nazewnictwo każdej warstwy. Dodatkowo zauważa, że różne modele AI dają różne rezultaty – warto eksperymentować z różnymi modelami.

Wizja jednego polecenia

Cel całej serii to stworzenie powtarzalnego procesu z rozwiązaniem jednego polecenia. Końcowa wizja zakłada przejście od pracy w Figma do interaktywnej jednostronicówki jednym promptem. Ma ona prezentować komponent w różnych rozmiarach i stanach z automatycznie załączonymi referencjami do design tokenów.

Prezenter zaznacza, że to dopiero pierwszy krok. Kolejne odcinki wprowadzą lepsze sposoby komunikacji z Cursor i innymi narzędziami AI.

💬 Biblioteka promptów z demonstracji

Prompt do tworzenia podstawowego prototypu

"proszę stwórz klikalny prototyp dla tego komponentu filtra"

Kiedy stosować: Po dodaniu linku Figma jako context. Podstawowy prompt do szybkiego stworzenia pierwszej wersji.

Dlaczego działa: Prosty cel + FigmaMCP automatycznie dostarcza kontekst z designu.

Prompt do iteracyjnych poprawek

"użyj font awesome dla ikon. Stan nieaktywny ma przycisk plus. Stan aktywny ma ikonę X. Dostosuj logikę."

Kiedy stosować: Gdy pierwszy prototyp wymaga dostosowań w logice, ikonach lub stanach.

Dlaczego działa: Jasno definiuje zmiany + konkretnie opisuje oczekiwane zachowanie.

Prompt do organizacji projektu

"Stwórz nowy folder o nazwie filter"

Kiedy stosować: Na początku pracy do organizacji struktury plików.

Dlaczego działa: Proste zadanie organizacyjne pomagające w utrzymaniu porządku.

Zasady promptowania według prezentacji:

• Focus na podstawowe prompty – lepsze struktury w kolejnych odcinkach
• Context przed promptem – zawsze dodaj odpowiedni kontekst
• Jeden chat = jedno zadanie – nowy chat dla każdego komponentu
• Komunikuj się precyzyjnie – opisuj dokładnie co nie działa i czego oczekujesz

Kluczowy insight

Projekt to początek, nie cel

Standardowo myślimy: Celem projektanta jest stworzenie w Figmie idealnego, finalnego projektu, który programista ma odtworzyć 1:1. Prototyp jest ostateczną specyfikacją, a każda zmiana w kodzie to problem.

W praktyce okazuje się, że: Projekt w Figmie jest jedynie punktem startowym do rozmowy z kodem. Jego prawdziwa wartość nie leży w wizualnej perfekcji, ale w strukturalnej czystości (Auto Layout, zmienne), która pozwala AI szybko wygenerować niedoskonałą pierwszą wersję kodu gotową do natychmiastowej iteracji.

Dlaczego to jest istotne: Taka zmiana przesuwa punkt ciężkości z tworzenia statycznego artefaktu na dynamiczny proces. W rezultacie, zamiast spędzać tygodnie na dopracowywaniu specyfikacji, możemy weryfikować pomysły w realnym kodzie w ciągu minut.

Test na jutro: Następnym razem gdy będziesz projektować komponent, zamiast dążyć do 100% wizualnej perfekcji w Figmie, skup się na perfekcyjnej strukturze i nazewnictwie. Następnie wygeneruj kod i przeznacz zaoszczędzony czas na iterowanie w dialogu z AI.

Ten wpis stanowi część mojej kolekcji notatek z ciekawych prezentacji, które uważam za wartościowe. Oryginalne źródło: Vibe-coding for designers #1 – Setup GitHub, Cursor and FigmaMCP