generate-design-system
Build or extend design systems in Figma — create components with proper variable bindings, validate token coverage, and enforce quality patterns following a structured phased workflow. Use when the user says 'create design system', 'build DS in Figma', 'generate component library', 'set up tokens in Figma', 'create variables and components', 'audit my design system', or wants to push a design system from code to Figma. Also use when creating components in a file that already has variables and text styles — the skill ensures proper binding, per-component validation, and spec documentation. Works from scratch, from an existing codebase, or by auditing and extending an existing Figma file. Does NOT implement Figma designs as code — use figma-implement-design for that. Does NOT create individual screens — use figma-generate-design for that.
Installation and usage
Build or extend design systems in Figma — create components with proper variable bindings, validate token coverage, and enforce quality patterns following a structured phased workflow. Use when the user says 'create design system', 'build DS in Figma', 'generate component library', 'set up tokens in Figma', 'create variables and components', 'audit my design system', or wants to push a design system from code to Figma. Also use when creating components in a file that already has variables and text styles — the skill ensures proper binding, per-component validation, and spec documentation. Works from scratch, from an existing codebase, or by auditing and extending an existing Figma file. Does NOT implement Figma designs as code — use figma-implement-design for that. Does NOT create individual screens — use figma-generate-design for that.
Once installed, you can use this skill by running the following command in your terminal:
skills use generate-design-system