Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do integracji Figmy z kodem. Pobierz kontekst designu, zrzuty ekranu, zmienne i zasoby bezpośrednio z Figmy, a następnie przetłumacz węzły Figmy na kod produkcyjny. Aktywuj go, gdy pracujesz z linkami do Figmy, ID węzłów lub implementujesz design-to-code. Obsługuje także konfigurację i rozwiązywanie problemów z serwerem MCP.
Jak używać
Przygotuj dostęp do serwera Figma MCP — skonfiguruj zmienne środowiskowe i parametry połączenia zgodnie z dokumentacją w references/figma-mcp-config.md.
Gdy zaczniesz pracę nad zadaniem zawierającym URL Figmy lub ID węzła, uruchom get_design_context, aby pobrać strukturalną reprezentację konkretnego węzła lub węzłów, które chcesz zaimplementować.
Jeśli odpowiedź jest zbyt duża lub skrócona, użyj get_metadata, aby uzyskać mapę węzłów na wysokim poziomie, a następnie ponownie pobierz tylko potrzebne węzły za pomocą get_design_context.
Uruchom get_screenshot, aby uzyskać wizualny podgląd wariantu węzła, który implementujesz — to pomoże Ci zweryfikować dokładność.
Po zebraniu zarówno danych z get_design_context, jak i zrzutu ekranu, pobierz niezbędne zasoby (ikony, obrazy, czcionki) i zacznij implementację kodu, dostosowując wyjście (zwykle React + Tailwind) do konwencji, stylów i frameworka Twojego projektu.
Zweryfikuj wynik względem Figmy, aby upewnić się, że wygląd i zachowanie są identyczne, zanim oznaczysz zadanie jako ukończone.