What is the figma-create-design-system-rules skill?
The figma-create-design-system-rules skill generates project rules for Figma to code work. The agent calls the Figma MCP tool create_design_system_rules, analyzes your components, styling and tokens, writes rules for your stack, and saves them to the rule file your agent reads, such as AGENTS.md or a Cursor rules file.
The figma-create-design-system-rules skill sits in the curated folder of OpenAI's skills catalog. It helps an agent write the unwritten knowledge of your codebase into rules, so later Figma implementation tasks follow your conventions without repeated prompting.
The first step is a call to create_design_system_rules on the Figma MCP server. It takes your project languages and framework and returns a prompt and template that the skill then fills in from your actual code.
What changes in your agent's output
- Rules name where UI components live, how files are named and which layout primitives to reuse.
- Colors, spacing and type come from your tokens. The sample rules say never to hardcode a hex color.
- Figma output, usually React with Tailwind, is treated as a design reference to translate, not as final code style.
- Assets from the Figma MCP server are used directly, with no new icon packages added.
What the generated rules cover
- Component rules: the folder to use, naming convention and export pattern.
- Styling rules: the CSS approach, where tokens are defined, and the spacing and type scales.
- A required Figma flow: get_design_context first, get_metadata if the response is too large, then get_screenshot, then implementation and a final check against Figma.
- Asset handling and project conventions such as testing, accessibility and performance notes.
Who the figma-create-design-system-rules skill is for
Best for
- Teams starting a project that will be built from Figma designs.
- Codebases with established patterns that an agent keeps ignoring.
- Standardizing a Figma to code workflow across several developers who each use an AI agent.
Not for
- Implementing a specific screen. This skill writes rules once and does not build UI. Related: figma-mcp.
- Projects with no Figma MCP server, since SKILL.md says it requires one.
- Writing a design token file from scratch. Related: create-design-md.
Use it with UiChemy
These rules shape code that your agent writes in a project. UiChemy goes a different way: Figma to WordPress converts a Figma file into editable WordPress pages. Click Get Started on uichemy.com. Related: design-md.
How to install Figma Create Design System Rules Skill: Set Up Agent Rules
$skill-installer figma-create-design-system-rulesRun the skill installer
The repository README says curated skills install by name with the skill-installer inside Codex. Run
$skill-installer figma-create-design-system-rules.Restart your agent
The README says to restart Codex after installing so it picks up new skills.
Connect the Figma MCP server
SKILL.md says the skill requires a Figma MCP server connection, because step one calls a tool on that server.
Install by hand instead
Run
git clone https://github.com/openai/skills.gitand copy the skills/.curated/figma-create-design-system-rules folder to where your agent loads skills.
Check that it loaded
Ask the agent to create design system rules for your project. It should call create_design_system_rules, scan your components and styles, and propose a rules file before saving it.
Key features
- Rules tool callStep one calls create_design_system_rules with clientLanguages, such as typescript and javascript, and clientFrameworks, such as react, vue, svelte, angular or unknown.
- Codebase analysisBefore writing, the agent checks where components live, which styling approach is used, where design tokens are defined, naming conventions and how routing and state are handled.
- Component and styling rulesGenerated rules state which component path to prefer, where new components go, and that colors come from tokens rather than hardcoded values.
- Figma MCP integration rulesA required flow runs get_design_context, then get_screenshot, and only then downloads assets and implements, with a final check against the Figma screenshot.
- Asset handling rulesIf the Figma MCP server returns a localhost source for an image or SVG, the rules say to use it directly and not to add placeholders or new icon packages.
- Rule file per agentSKILL.md maps each supported agent to its own rule file, such as AGENTS.md for Codex CLI and a .mdc file under .cursor/rules for Cursor, with a note to append when AGENTS.md exists.
- Cursor frontmatterFor Cursor the rules get YAML frontmatter with description, globs and alwaysApply, and the globs should match the folders where Figma derived code lives.
- Rule prioritiesRules are grouped as essential, recommended and optional, from component discovery and token usage down to accessibility, performance and testing.
- Validate and iterateAfter saving, you test with a simple component, check the agent follows the rules, refine what fails, share with the team and update as the project changes.
Frequently asked questions
What is the figma-create-design-system-rules skill?
It is a skill in the openai/skills catalog that writes project specific design system rules for Figma to code work. The agent calls a Figma MCP tool for a template, analyzes your codebase, drafts rules and saves them where your agent reads its instructions.
How do I install figma-create-design-system-rules?
The README says curated skills install by name inside Codex, so run $skill-installer figma-create-design-system-rules and restart Codex. You can also clone the repository and copy the skills/.curated/figma-create-design-system-rules folder to wherever your agent loads skills from.
Which rule file does the skill write?
SKILL.md lists a rule file per agent. Codex CLI uses AGENTS.md in the project root, Claude Code uses CLAUDE.md or a modular file in .claude/rules, and Cursor uses .cursor/rules/figma-design-system.mdc with YAML frontmatter.
What example rules does it produce?
The examples cover component folders, token usage such as never hardcoding colors, a required flow of get_design_context then get_screenshot, and asset rules. Each example is a short markdown list that you adapt to your own paths and styling approach.
Is there a size limit for the rules file?
SKILL.md notes a 32 KiB combined size limit for AGENTS.md when you use Codex CLI, and says to append the Figma rules as a new section if that file already exists in your project root.
How is it different from the code connect skill?
This skill writes general conventions that guide every Figma to code task. Those rules cover which layout primitives and components to use, where component files live, how components are named and how design tokens and styling are handled. Related: figma-mcp.
Does the skill need the Figma MCP server?
Yes. SKILL.md lists a connected Figma MCP server as a prerequisite and its first step calls create_design_system_rules on that server. Without the server the skill cannot fetch the template it builds on.
What license does the skill use?
GitHub shows no license for the repository itself. The README says each skill's license sits in a LICENSE.txt file inside that skill's folder, so read the file in the skill folder before you redistribute it.