home/categories/design/natdexterra-generate-design-system-skill-md
designcontent-media

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.

natdexterra
maintainer
natdexterra
更新於 4/6/2026
星標
30
分支
2
quick start

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.

安裝
$ install --globalskills.sh
使用

安裝後,您可以透過在終端機執行以下指令來使用此技能:

skills use generate-design-system