Setup & Installation
npx skills add https://github.com/openai/skills --skill figma-create-design-system-rules
https://github.com/openai/skills/tree/main/skills/.curated/figma-create-design-system-rules
View on GitHubWhat This Skill Does
Generates project-specific design system rules for AI coding agents like Claude Code, Cursor, and Codex CLI. Analyzes your codebase to encode component locations, styling conventions, and token usage into a rule file that agents load automatically. Works with Figma MCP server to standardize how designs get translated to code.
Instead of re-explaining your component structure and token conventions in every prompt, you write the rules once and the agent applies them automatically across all Figma implementation tasks.
When to use it
- Setting up CLAUDE.md rules before starting a Figma-to-React implementation sprint
- Onboarding a new AI agent to an existing codebase with established component patterns
- Replacing repeated prompts about token usage with a permanent rule file
- Configuring Cursor rules for a Vue project that uses CSS modules and custom design tokens
- Updating design system conventions after a major refactor to keep agent output consistent