Claude Code i Figma MCP Server – AI jako pomost między designem a kodem #EN226

Notatki z webinaru Figma Live pt. „Shipping designs with AI at Anthropic” z udziałem Megan Choi, Product Design Lead w Anthropic oraz Akbara, Developer Advocate w Figma. Wszystkie przedstawione przemyślenia, obserwacje i wnioski pochodzą od prelegentów.

TL;DR

Claude Code to narzędzie agentic coding działające przez terminal z dostępem do całego code base’u
Figma MCP Server dostarcza kontekst projektowy bezpośrednio do AI agenta poprzez komponenty, zmienne i adnotacje
Eksperci wyróżniają trzy główne scenariusze zastosowania: eksplorację projektową, implementację w code base oraz zrozumienie architektury
Pliki Claude.md personalizują zachowanie AI według potrzeb designera i standardów zespołu
AI osiąga około 70% pożądanego rezultatu, jednak pozostałe 30% wymaga współpracy z deweloperem
Narzędzia wzmacniają istniejącą współpracę design-dev zamiast zastępować role
MCP Server umożliwia precyzyjne debugowanie różnic między projektem a implementacją

Rewolucja w współpracy design-dev

Megan Choi z Anthropic podkreśla, że narzędzia AI development nie tylko wspierają deweloperów w tworzeniu nowych workflow. Jednocześnie kształtują sposób pracy designerów. Podczas prezentacji ekspertka zaprezentowała praktyczne zastosowanie Claude Code w połączeniu z Figma MCP Server.

Według Choi, te rozwiązania funkcjonują jak inteligentny pomost między dyscyplinami. Z jednej strony designerzy zyskują możliwość głębszego uczestnictwa w procesie implementacji. Z drugiej strony deweloperzy otrzymują lepszy kontekst projektowy do swojej pracy.

Claude Code – narzędzie agentic coding dla wszystkich

Megan Choi charakteryzuje Claude Code jako „jedną z najcieńszych otoček wokół modeli AI”. Narzędzie funkcjonuje poprzez terminal lub command line interface, jednak ma bezpośredni dostęp do całego lokalnego code base’u użytkownika.

Cztery fundamentalne zalety systemu:

✅ Głębokie rozumienie kodu
→ AI operuje bezpośrednio w code base i rozumie systemy bez dodatkowego treningu

✅ Dostęp do narzędzi deweloperskich
→ Pełna integracja z git, kubernetes, bazami danych i wszystkimi zasobami komputera

✅ Elastyczność uruchamiania
→ Możliwość pracy w terminalu, IDE i różnych środowiskach bez przerywania workflow

✅ Wysokie standardy bezpieczeństwa
→ Zapytania przesyłane bezpośrednio przez API Anthropic bez pośrednich systemów przechowywania

Architektura i integracje

Claude Code składa się z dwóch głównych komponentów. Terminal product stanowi front-end dostępny lokalnie na komputerze użytkownika. Natomiast SDK umożliwia budowanie własnych agentic workflows dostosowanych do specyficznych potrzeb.

Rozwiązanie oferuje dedykowane rozszerzenia dla popularnych środowisk: VS Code, Cursor oraz JetBrains. Dzięki temu użytkownicy mogą wykorzystać kontekst aktualnie oglądanych plików. Ponadto w czasie rzeczywistym wyświetlane są diff’y oraz zmiany wprowadzane przez AI.

Dostępne modele obejmują: Sonnet 4 do większości zadań designerskich oraz Opus 4 do bardziej złożonych wyzwań programistycznych. Claude Code funkcjonuje również w monorepos, gdzie można tworzyć multiple pliki Claude.md na różnych poziomach architektury.

Figma MCP Server – projektowy kontekst dla AI

Akbar z Figma wyjaśnia ewolucję narzędzi AI w kontekście tworzenia interfejsów. Początkowo potrafiły one generować jedynie podstawowy, funkcjonalny kod. Następnie zyskały dostęp do kontekstu całej bazy kodu. Teraz, dzięki Model Context Protocol (MCP), otrzymują trzeci, kluczowy element: kontekst projektowy.

MCP stanowi otwarty standard wprowadzony przez Anthropic, który umożliwia bezpieczne połączenia między AI a już wykorzystywanymi narzędziami. Działa jak most, dostarczając AI danych bezpośrednio z pliku w Figmie.

Figma MCP Server dostarcza siedem kluczowych funkcjonalności: Get Code dla reprezentacji kodu, Variable Definitions obejmujące zmienne i style, Code Connect Map mapujący komponenty, Get Image do screenshotów, Annotations zawierające komentarze, Create Design System Rules oraz Team Context z informacjami o strukturze.

Demonstracja praktycznego zastosowania

Podczas prezentacji na żywo Megan Choi zaprezentowała standardowy workflow. Proces rozpoczyna się od wyboru frame’u w Figma w trybie deweloperskim. Następnie Claude Code otrzymuje polecenie implementacji aktualnej selekcji. W rezultacie AI analizuje wszystkie pliki i metadane, po czym implementuje komponenty zgodnie z design systemem.

Efekt końcowy znacząco różni się od statycznego projektu. Kod uwzględnia design tokens i prezentuje rzeczywisty wygląd w trybie ciemnym. Dodatkowo obsługuje stany oraz interakcje niewidocznych w mockupach.

W demonstracji możliwe było przełączanie między opcjami monthly/yearly pricing oraz wybieranie różnych kart cenowych. AI wygenerowało w pełni interaktywny prototyp zamiast statycznej kopii designu. „Koszt alternatywny pomysłu wynosi teraz zero” – jak podsumowuje Choi możliwości szybkiego prototypowania.

Trzy kluczowe scenariusze zastosowania

Megan Choi systematyzuje zastosowania narzędzi AI development w trzech głównych kategoriach:

🚀 Scenariusz 1: Eksploracja zero-to-one

Optymalne zastosowania:

Szybkie prototypowanie innowacyjnych koncepcji
Testowanie mikrointerakcji oraz animacji
Eksperymenty niezależne od zaangażowania deweloperów

Ekspertka wykorzystuje to podejście głównie do animacji przełączników. Testuje różne sposoby animowania elementów interfejsu. W tym scenariuszu koszt alternatywny każdego pomysłu rzeczywiście spada do zera.

💻 Scenariusz 2: Bezpośrednia implementacja w code base

Kluczowe zastosowania:

Realizacja funkcjonalności bezpośrednio w środowisku produkcyjnym
Wdrażanie kodu do środowisk staging oraz production
Iteracyjna współpraca z inżynierami nad działającym kodem

Choi opisuje implementację nowej struktury uprawnień w API developer tool. AI pomogło osiągnąć 70% pożądanej funkcjonalności. Jednak pozostałe 30% wymagało współpracy z inżynierem. To spełnienie marzeń wielu designerów – możliwość wdrożenia linii kodu bezpośrednio do produkcji.

🔍 Scenariusz 3: Pogłębione zrozumienie architektury

Zastosowania (najważniejsze i najczęściej używane!):

Analiza sposobów implementacji istniejących funkcji
Zadawanie pytań o edge case’y, role oraz uprawnienia
Podejmowanie świadomych decyzji projektowych w oparciu o techniczny kontekst

Według prelegentki jest to obecnie najważniejsze i najczęściej wykorzystywane zastosowanie. Zamiast pytać inżyniera, projektant może zapytać AI o istniejące stany danego komponentu, o przypadki brzeżne konkretnej funkcji czy o analizę promptu systemowego używanego w innej części aplikacji.

Megan Choi wykorzystuje to podejście do projektowania samego Claude Code. Zadaje pytania o stany ostrzeżeń oraz sposoby kategoryzacji błędów. Dzięki temu otrzymuje architekturalną wiedzę potrzebną do podejmowania designerskich decyzji w ciągu tygodni zamiast miesięcy. Posiadanie tej wiedzy na wczesnym etapie pozwala podejmować znacznie bardziej świadome decyzje projektowe.

Wskazówka dla aplikacji AI: Można poprosić o system prompt używany przez zespół, następnie go modyfikować i testować różne rezultaty.

Konfiguracja Claude Code dla designerów

Wymagania wstępne:

☐ Dostęp do GitHub/GitLab z odpowiednimi uprawnieniami do repozytorium zespołu
☐ Figma Desktop App (niezbędne dla poprawnego działania MCP Server)
☐ Terminal (domyślny na Mac/Windows) lub zaawansowany iTerm2
☐ VS Code lub JetBrains IDE (opcjonalnie, dla lepszej integracji funkcjonalnej)

Etapy konfiguracji początkowej:

☐ Instalacja Claude Code (kompatybilne z systemami Mac oraz Windows)
☐ Konfiguracja Figma MCP Server (jednym kliknięciem w Claude Desktop)
☐ Utworzenie personalnego pliku Claude.md z instrukcjami dla designera
☐ Skonfigurowanie zespołowego pliku Claude.md z zasadami code base’u
☐ Test workflow: npm run dev → uruchomienie Claude → /mcp dla weryfikacji

Praktyczne wskazówki oraz konfiguracja zaawansowana

Pliki Claude.md jako system instrukcji

Choi zaleca tworzenie plików Claude.md na różnych poziomach organizacyjnych. Funkcjonują one jak memory files lub subsystem prompts. W efekcie personalizują zachowanie AI według potrzeb designera oraz standardów zespołowych.

Przykład personalnego pliku Claude.md ekspertki zawiera proste wytyczne: jestem product designerem, nie posiadam doświadczenia w programowaniu, zapewnij bardziej szczegółowe wyjaśnienia, podziel zmiany na mniejsze części.

Zespoły mogą natomiast tworzyć pliki Claude.md dla całego code base’u. Zawierają one reguły nazewnictwa, standardy testowania oraz sposoby tworzenia pull requestów. W rezultacie AI automatycznie przestrzega ustalonych zasad projektowych.

Kluczowe strategie dla projektantów

Aby w pełni wykorzystać potencjał opisywanych narzędzi, Megan Choi zasugerowała kilka praktycznych strategii:

Przejęcie odpowiedzialności za „ostatnie 2%” – Sztuczna inteligencja umożliwia samodzielne wdrażanie drobnych poprawek wizualnych, takich jak odstępy, kolory czy rozmiary czcionek. Są to detale, które znacząco podnoszą jakość produktu, a dzięki AI nie muszą już czekać w kolejce zadań deweloperskich.

Zaczynanie od pytań, nie od generowania – Zanim wyda się polecenie stworzenia czegoś nowego, warto wykorzystać AI do zrozumienia istniejącego systemu. Jest to najszybszy sposób na zdobycie kontekstu technicznego.

Skróty klawiszowe oraz tryby pracy

Claude Code oferuje szereg funkcjonalnych skrótów oraz trybów:

Shift + Tab    → Automatyczne akceptowanie edycji (przyspieszona praca)
Control + V    → Wklejanie obrazów oraz screenshotów bezpośrednio do interfejsu  
Escape         → Anulowanie aktualnie wykonywanej operacji
/memory        → Bezpośrednia edycja pliku Claude.md

Ekspertka szczególnie docenia Plan mode – tryb dyskusji o implementacji bez faktycznego pisania kodu. Dzięki temu AI proponuje alternatywne rozwiązania przed rozpoczęciem właściwej implementacji.

Współpraca zamiast zastępowania ról

Na pytanie dotyczące przesuwania odpowiedzialności za kod na designerów, Megan Choi odpowiada jednoznacznie. Celem nie jest zastąpienie żadnej z ról. AI stanowi dodatkowe narzędzie w zestawie designera.

Podobnie jak inżynierowie powinni rozumieć proces projektowy w Figma, tak designerzy mogą skuteczniej współpracować dzięki zrozumieniu kodu. To kontinuum możliwości – każdy wybiera odpowiednią dla siebie głębokość zaangażowania.

Lekcja o właściwym balance

Ekspertka dzieli się istotnym spostrzeżeniem dotyczącym równowagi w pracy. Jeden z jej inżynierów powiedział jej niedawno: „musisz się uspokoić, wiemy że umiesz programować, ale ja zrobiłbym to w 2 minuty, a tobie zajęło 2 dni”.

Jak przyznaje Choi, była to niewłaściwa decyzja priorytetowa z jej strony. Designerzy muszą nauczyć się nowej umiejętności: kiedy sięgać po kod, a kiedy po narzędzia projektowe. Podobnie jak wszyscy umieją tworzyć high-fidelity mockupy, jednak czasem low-fidelity mockup stanowi lepszy wybór.

Jonathan z komentarzy zauważa jednak przeciwny efekt do zgłaszanych obaw. Narzędzia AI pomagają mu głębiej zagłębiać się w user experience. Może lepiej wyjaśniać decyzje projektowe w kontekście code base’u.

Choi dodaje filozoficzne spostrzeżenie: design stanowi proxy dla kodu. Istnieje warstwa translacji między designem a kodem. Obecnie większość odpowiedzialności za tę translację spoczywa na inżynierach. Może jednak stać się to wspólną odpowiedzialnością obu stron. Ostateczny cel: design oraz experience przekładają się płynnie na kod, a w rezultacie na lepsze doświadczenie użytkowników końcowych.

Debugowanie niedopasowań design vs kod

Na pytanie o usuwanie błędów w niedopasowaniach między designem a kodem, ekspertka proponuje dwupoziomowe podejście.

Poziom podstawowy: wykorzystanie Figma MCP Server dostarcza rzeczywiste klasy Tailwind oraz kod komponentów. Modele lepiej rozumieją kod niż obrazy. Można dodatkowo dodać słowo „ultrathink” do poleceń – w efekcie model przeprowadza głębszą analizę problemu.

Poziom zaawansowany: nauka podstaw programowania, szczególnie klas Tailwind. Umożliwia to precyzyjne dostrajanie szczegółów implementacji. To punkt, w którym granica między designem a inżynierią oprogramowania zaciera się.

Dostępność oraz wsparcie dla różnych frameworków

Claude Code może testować dostępność poprzez przeszukiwanie sieci. Sprawdza zgodność z konkretnymi standardami dostępności. Można podać specific URL do dokumentacji. Modele są dobrze wytrenowane w tym obszarze.

Figma MCP Server wspiera różne frameworki poprzez Code Connect: React, SwiftUI, Jetpack Compose oraz języki oparte na HTML. Konfiguracja jest bardzo prosta – instalacja jednym kliknięciem w Claude Desktop według przewodnika Figma. Kontekst projektowy trafia do AI, jednak generowanie kodu zależy od agenta oraz sposobu formułowania poleceń przez użytkownika.

Biblioteka poleceń z webinaru

Megan Choi podzieliła się konkretnymi przykładami formułowania poleceń dla Claude Code. Jak przyznaje, preferuje „over-prompt” ponieważ uważa, że pomaga to modelowi lepiej zrozumieć intencję.

🎨 Implementacja projektów

Polecenie: "Implement our current Figma selection"
Kiedy stosować: Podstawowa implementacja wybranego frame’u z Figma
Wymagania: Figma MCP Server + tryb deweloperski + zaznaczony element

Polecenie: "Current site doesn't quite match my designs. The background color, the header, the cards for items and the item counter are a bit off. Can you get them to match my designs?"
Kiedy stosować: Debugowanie różnic między implementacją a projektem
Wskazówka: Wymień konkretne elementy, które wymagają poprawy

🔍 Planowanie projektów

Polecenie: "How hard is it to implement this? How long do you think it would take a human to do this?"
Kiedy stosować: Oszacowanie złożoności przed rozmową z deweloperami
Kontynuacja: "Can you break this down? If we only had one week, what would the scope be?"

🧠 Analiza architektury

Polecenie: "How is this feature implemented? What are the edge cases for this?"
Kiedy stosować: Poznawanie istniejących funkcji przed projektowaniem nowych
Wskazówka dla AI apps: Dodaj: "Can you show me the system prompt our team is using?"

🐛 Debugowanie oraz poprawki

Polecenie: "The counter is cut off. Can you help fix that?"
Kiedy stosować: Precyzyjne poprawki konkretnych problemów interfejsu
Wzmocnienie: Dodaj słowo "ultrathink" dla przeprowadzenia głębszej analizy

♿ Testowanie dostępności

Polecenie: "Is this accessible?"
Kiedy stosować: Sprawdzenie podstawowej dostępności rozwiązania
Rozszerzenie: Można podać konkretne standardy (WCAG, Section 508)

📁 Przeszukiwanie w code base

Polecenie: "Find our Q3 sales presentation"
Kiedy stosować: Lokalizowanie dokumentów oraz plików w repozytorium
Kontekst: Funkcjonuje z narzędziami wewnętrznymi jak Google Drive search

Kluczowa zasada od Megan: Czasem wystarczy proste "Can you get them to match my designs?" jednak szczegółowe formułowanie poleceń zwykle przynosi lepsze rezultaty.

Kluczowy insight

Pytaj, zamiast generować

Standardowo myślimy: Że główną wartością AI dla projektanta jest szybkie generowanie kodu z gotowego projektu – zamiana wizji w działający prototyp.

W praktyce okazuje się, że: Największą przewagę daje odwrócenie tego procesu: użycie AI do zadawania pytań o istniejący kod zanim projekt zostanie w pełni zdefiniowany. Najpierw zrozumienie technicznych realiów, potem projektowanie. Jak przyznaje Megan Choi: „zadaję najbardziej podstawowe pytania w Claude code” – pytania typu „jak utworzyć branch?”, „co to robi?”, „jak to podejrzeć lokalnie?”.

Dlaczego to jest istotne: Takie podejście przesuwa rozwiązywanie problemów technicznych na sam początek procesu, co prowadzi do tworzenia bardziej realistycznych i łatwiejszych do wdrożenia projektów. W rezultacie redukuje to liczbę iteracji i potencjalnych frustracji po stronie deweloperów.

Test na jutro: Następnym razem gdy będziesz projektować nową funkcję, zamiast od razu otwierać Figmę, spróbuj najpierw zapytać AI o istniejącą implementację: „Jakie są wszystkie stany komponentu X?”, „Pokaż mi, jak zaimplementowano podobną logikę w funkcji Y?”. Sprawdź, jak ta wiedza wpłynie na Twoje pierwsze szkice i decyzje projektowe.

Ten wpis stanowi część kolekcji notatek z wartościowych webinarów oraz prezentacji branżowych. Oryginalny webinar Figma Live: Shipping designs with AI at Anthropic był dostępny w ramach transmisji na żywo.