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