implement-design
Zamień projekty z Figmy na gotowy kod z dokładnością pixel-perfect
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umiejętność, która automatycznie tłumaczy projekty z Figmy na kod produkcyjny z pełną wiernością wizualną. Wystarczy podać link do pliku Figmy, a narzędzie wyodrębni komponenty i wygeneruje kod gotowy do wdrożenia. Wymaga połączenia z serwerem MCP Figmy. Idealne dla deweloperów, którzy chcą zaoszczędzić czas na ręcznym przepisywaniu projektów w kod.
Jak używać
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.