figma-integration
Guides design-to-code workflow using Figma integration. Helps extract designs, analyze components, and generate implementation specs. Auto-activates when users mention Figma URLs, design implementation, component conversion, or design-to-code workflows. Works with
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Guides design-to-code workflow using Figma integration. Helps extract designs, analyze components, and generate implementation specs. Auto-activates when users mention Figma URLs, design implementation, component conversion, or design-to-code workflows. Works with /ccpm:planning:design-ui, design-approve, design-refine, and /ccpm:utils:figma-refresh commands.
How to use
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.