Claude Code + Figma MCP

Co zyskujesz po konfiguracji?

• Generujesz UI w Claude Code → jednym zdaniem wysyłasz do Figmy
• Edytujesz wizualnie w Figmie (odstępy, warianty, kolory, typografia)
• Wysyłasz poprawiony design z powrotem do Claude’a → kod się aktualizuje
• Iterujesz błyskawicznie pomiędzy kodem a designem

Wymagania wstępne

• Zainstalowany Node.js (najnowsza LTS, pobierz z nodejs.org)
• Figma Desktop (nie przeglądarkowa wersja – MCP działa lokalnie)
• Konto Claude (Pro / Team / Console API – dowolne)
• Konto Figma z włączonym Dev Mode (najlepiej Figma Professional / Organization)

Krok 1 – Instalacja Claude CodeOtwórz terminal i zainstaluj globalnie:

npm install -g @anthropic-ai/claude-code

Sprawdź, czy działa:

claude

Powinien uruchomić się interfejs CLI i zapytać o logowanie.
Zaloguj się przez przeglądarkę (wybierz „Claude Pro / Team” lub „Anthropic Console API” – w zależności od Twojego konta).

Krok 2 – Włącz MCP Server w Figmie (lokalny)To najważniejszy krok – bez niego nic nie zadziała.

1. Otwórz aplikację Figma Desktop
2. Wejdź w Preferences / Ustawienia → sekcja Dev Mode
3. Włącz opcję Dev Mode MCP Server (czasami nazywa się „Enable MCP Server”)
   • Po włączeniu Figma uruchomi lokalny serwer na http://127.0.0.1:3845/sse

Gotowe – Figmma jest teraz gotowa przyjmować połączenia.

Krok 3 – Połącz Claude Code z Figma MCPW terminalu uruchom Claude Code (jeśli nie jest uruchomiony):

claude

Teraz dodaj Figma MCP jednym poleceniem (najnowsza zalecana metoda w lutym 2026):

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

Alternatywnie (jeśli chcesz wersję remote / stabilniejszą):

claude mcp add --transport http figma

W Claude Code wpisz:

/mcp

Na liście pojawi się „figma” (lub „figma-dev-mode-mcp-server”).
Kliknij → Authenticate → zaloguj się do Figmy w przeglądarce i autoryzuj.

Krok 4 – Sprawdź, czy wszystko działaW Claude Code wpisz:

/figma

Jeśli widzisz listę dostępnych narzędzi (m.in. generate_figma_design, send to Figma itp.) – sukces! Połączenie jest aktywne.

Krok 5 – Jak używać w praktyce (najlepszy flow)

1. W Claude Code budujesz projekt jak zwykle
   („Stwórz responsywny dashboard z sidebar i kartą statystyk…”)
2. Kiedy masz działający interfejs w przeglądarce (Claude uruchamia lokalny dev server):Powiedz po prostu:
   Wyślij ten projekt do Figmy

   albo

   Send this to Figma

3. Claude prześle bieżący stan przeglądarki → w Figmie pojawi się nowy frame z edytowalnymi warstwami
4. Edytujesz w Figmie → kopiujesz link do frame’a
5. Wracasz do Claude Code i piszesz np.:
   Zaktualizuj kod na podstawie zmian w tym frame’ie Figmy: [wklej link]

I lecisz dalej.

Najczęstsze problemy i rozwiązania

• „Nie widzę Figma w /mcp” → upewnij się, że MCP Server jest włączony w Figmie Desktop i nie jest zablokowany przez firewall
• „Błąd autoryzacji” → wyloguj się i zaloguj ponownie w Figmie + w Claude
• Chcesz wersję remote zamiast lokalnej? → sprawdź dokumentację Figma MCP → https://help.figma.com/hc/en-us/articles/32132100833559
• Działa tylko w przeglądarce → tak, funkcja łapie bieżący stan widoku w przeglądarce (localhost / staging / production)

Dlaczego warto już dziś?

• Nazwa: PeakBrew Travel
• Cena: 349 zł (promocja launch: 289 zł)
• Kluczowe cechy: składany silikon + stal nierdzewna, termiczny kubek 450 ml, kompatybilny z kapsułkami Nespresso / saszetkami drip, filtr wielokrotnego użytku, BPA-free, waga 380 g
• Grupa docelowa: nomadzi cyfrowi, kempingowcy, osoby dojeżdżające do pracy, miłośnicy specialty coffee

Krok po kroku – pełny flow w Claude Code + Figma

1. Uruchamiasz Claude Code i dajesz szczegółowy prompt startowy (copy-paste gotowy do użycia):
   Stwórz konwertującą landing page dla fizycznego produktu: PeakBrew Travel – przenośny ekspres do kawy na kapsułki i drip.
   
   Tech stack: Next.js 15 + Tailwind CSS + shadcn/ui + Framer Motion (subtelne animacje wejścia).
   
   Struktura strony (single-page, mobile-first, bardzo dużo zdjęć produktu):
   
   1. Hero section (full-width, wysokość ~100vh)
      - Główny nagłówek: „Twoja idealna kawa – gdziekolwiek jesteś”
      - Podtytuł: „Składany ekspres PeakBrew Travel. Kapsułki, drip, french press w jednym urządzeniu. 380 g. Kubek termiczny w zestawie.”
      - 2 CTA: „Kup teraz – tylko 289 zł (zamiast 349 zł)” + „Zobacz, jak działa (wideo 45 s)”
      - Tło: lifestyle zdjęcia – kawa na szczycie góry, w pociągu, w biurze + duży produkt centralnie (360° obracany mockup lub kilka ujęć)
   
   2. Sekcja „Dlaczego PeakBrew?” (3–4 karty w gridzie)
      - Ultra-kompaktowy – mieści się w plecaku 20 l
      - 3 w 1: kapsułki / saszetki drip / sypana kawa
      - Gorąca kawa przez 4–6 godzin (podwójna ścianka termiczna)
      - Łatwe czyszczenie – wszystko można myć w zmywarce
   
   3. Sekcja „Jak to działa” (3–4 kroki z numerami + animowanymi GIF-ami / zdjęciami)
      1. Rozłóż w 8 sekund
      2. Włóż kapsułkę / saszetkę / zmieloną kawę
      3. Zalej wodą z termosu
      4. Ciesz się kawą specialty
   
   4. Sekcja galerii zdjęć / 360° (duże zdjęcia produktu z różnych kątów + zoom)
   
   5. Sekcja Opinie / Social proof
      - 4–5 fikcyjnych recenzji z gwiazdkami („Najlepsza kawa w trasie od roku – 5/5”)
      - Zdjęcia użytkowników + loga „Polecają: Outdoor Mag, Coffee Geek PL”
   
   6. Sekcja „Co jest w zestawie”
      - Lista bullet points + zdjęcie unboxingu
   
   7. Pricing + CTA duży (limited stock – „Tylko 120 szt. w promocji”)
      - Cena przekreślona 349 zł → 289 zł
      - Darmowa wysyłka powyżej 200 zł
      - 30 dni zwrotu
   
   8. FAQ accordion (6 pytań: kompatybilność, czyszczenie, gwarancja itp.)
   
   9. Footer + finalny CTA
   
   Paleta: primary #4F46E5 (indigo), accent #F59E0B (amber), neutral slate-50/900.
   Fonty: Inter + Satoshi (nagłówki).
   Dodaj parallax / fade-in na scroll + hover efekty na zdjęciach.
   Zrób bardzo mocny nacisk na zdjęcia produktu – minimum tekstu, maksimum wizualizacji.
   Uruchom dev server i otwórz preview w przeglądarce.

   Claude generuje stronę → masz działający localhost:3000 w ~3–5 minut.

2. Sprawdzasz podgląd
   → Hero super, ale zdjęcia produktu są za małe na desktopie, kroki są za ciasno, przycisk CTA za niski kontrast na mobile, brakuje animacji rozkładania ekspresu.
3. W Claude Code wpisujesz:
   Wyślij tę stronę do Figmy

   → W Figmie pojawia się frame „PeakBrew Travel – Landing v1” z edytowalnymi warstwami (zdjęcia jako komponenty, auto-layout sekcji, variables kolorów).

4. W Figmie poprawiasz i tworzysz warianty (10–20 minut):
   • Wariant A: większy produkt w hero (scale 1.4×), neonowy outline wokół kubka
   • Wariant B: hero z wideo loop (placeholder 10 s rozkładania ekspresu)
   • Wariant C: ciemny motyw (black friday vibe) + pomarańczowe akcenty
   • Wariant D: minimalistyczny – tylko 3 zdjęcia + duży zegar „promocja kończy się za 48 h”
   • Poprawiasz: padding 16→32 px, większe zdjęcia (min-width 600 px na mobile), nowe ikony w krokach, shadow pod kartami „Dlaczego PeakBrew”

   Kopiujesz link do najlepszego wariantu (np. v2 – ten z wideo + większym produktem).

5. Wracasz do Claude i prosisz o aktualizację:
   Zaktualizuj landing page PeakBrew na podstawie Figmy.
   Najlepsza wersja: https://www.figma.com/file/abc987/PeakBrew-Landing?node-id=56:2345
   
   Zachowaj strukturę Next.js i całą logikę,
   ale wprowadź zmiany:
   - hero: produkt 1.4× większy + centralny + wideo background placeholder
   - zwiększ padding sekcji do 48–64 px
   - ciemniejszy motyw z akcentem amber #F59E0B
   - większe zdjęcia w galerii + zoom on hover
   - animacja rozkładania ekspresu (prosty Framer Motion sequence)
   - przyciski CTA wyższe (h-14 → h-16), text-lg → text-xl
   - dodaj countdown timer w sekcji pricing (statyczny na razie: 48 h)
   
   Wygeneruj nowy kod i odśwież preview.

   Claude aktualizuje → strona wygląda znacznie bardziej premium i konwertująco.

Co zyskujesz w tym fizycznym produkcie

• W 45–90 minut masz 4–5 żywych wariantów landing page z prawdziwymi zdjęciami produktu
• Możesz porównywać wersje w Figmie obok siebie (np. jasny vs ciemny motyw)
• Zmiany wizualne (rozmiar zdjęć, kolory, animacje) nie rozwalają kodu HTML/JS
• Od razu wrzucasz preview na Instagram / TikTok / Allegro Ads i testujesz CTR