implement-design
Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions \
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions \
How to use
Upewnij się, że serwer MCP Figmy jest włączony i dostępny w Twoim kliencie MCP. Jeśli narzędzia Figmy (np. get_design_context) nie są widoczne, włącz serwer MCP Figmy dołączony do wtyczki i uruchom ponownie klienta.
Przygotuj link do projektu Figmy w formacie https://figma.com/design/:fileKey/:fileName?node-id=1-2, gdzie fileKey to identyfikator pliku, a node-id to identyfikator konkretnego komponentu lub ramki do wdrożenia.
Podaj link do projektu Figmy, używając polecenia "implementuj projekt", "wygeneruj kod", "zbuduj komponent" lub bezpośrednio wklej adres URL. Umiejętność automatycznie wyodrębni klucz pliku i identyfikator węzła.
Narzędzie połączy się z serwerem MCP Figmy, pobierze kontekst projektowy i przeanalizuje komponenty z pliku.
Otrzymasz kod produkcyjny z pełną wiernością wizualną względem projektu. Kod będzie zgodny z tokenami projektowymi i systemem komponentów, jeśli istnieje w Twoim projekcie.
Zintegruj wygenerowany kod ze swoim projektem. Jeśli potrzebujesz modyfikacji, podaj szczegóły zmian, a umiejętność dostosuje kod na podstawie projektu Figmy.