figma-integration
Zamień projekty z Figmy na gotowy kod – automatycznie ekstrahuj design i generuj specyfikacje implementacji.
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill integrujący Figmę z przepływem pracy design-to-code. Automatycznie wykrywa linki do projektów, analizuje komponenty, ekstrahuje tokeny designu (kolory, typografię, spacing) i generuje specyfikacje gotowe do implementacji. Aktywuje się gdy wspomniasz Figmę, komponenty lub design-to-code. Współpracuje z komendami /ccpm:planning:design-ui, design-approve, design-refine i /ccpm:utils:figma-refresh.
Jak używać
Utwórz lub zaktualizuj zadanie w Linear z opisem tego, co chcesz zaprojektować. Dołącz link do projektu Figmy w opisie zadania.
Uruchom komendę /ccpm:planning:design-ui TASK-ID (zastąp TASK-ID identyfikatorem Twojego zadania). Skill automatycznie wykryje link do Figmy i przeanalizuje plik designu.
Czekaj na wyniki analizy – skill wyodrębni metadane projektu, wykryje wszystkie ramki i komponenty, zbierze tokeny designu (paleta kolorów, rodziny czcionek, spacing) i utworzy opcje wizualne.
Przejrzyj wygenerowane opcje designu. Jeśli chcesz zmienić projekt, uruchom /ccpm:planning:design-refine aby ulepszyć design na podstawie Twoich uwag.
Gdy design będzie gotowy, uruchom /ccpm:planning:design-approve aby wygenerować specyfikacje implementacji. Skill przygotuje szczegółowe wytyczne dla programistów.
W razie potrzeby odśwież dane designu komendą /ccpm:utils:figma-refresh aby pobrać najnowsze zmiany z Figmy.