Back to skills

figma-create-design-system-rules

design

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

Setup & Installation

npx skills add https://github.com/openai/figma-create-design-system-rules --skill figma-create-design-system-rules
or paste the link and ask your coding assistant to install it
https://github.com/openai/figma-create-design-system-rules
View on GitHub

What 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

  • Working with figma create design system rules functionality
  • Implementing figma create design system rules features
  • Debugging figma create design system rules related issues