What does this skill do, and when should you use it?
This skill analyzes a codebase and generates design system rules for Figma-driven implementation work. It requires an accessible Figma MCP server and uses that server to obtain foundational guidance and a template. The resulting rules can be saved for Claude Code, Codex CLI, or Cursor. It is intended for teams that need consistent component structure, styling, token usage, asset handling, and Figma validation.
Calls the Figma MCP server's create_design_system_rules tool with the project's languages and framework; analyzes component locations, styling methods, design tokens, naming conventions, routing, state management, imports, and other codebase patterns; generates rules covering components, styling, Figma MCP integration, assets, and project-specific conventions; saves the rules to CLAUDE.md, AGENTS.md, or .cursor/rules/figma-design-system.mdc based on the coding agent; and recommends validating and refining the rules with a simple Figma component implementation.
- A team is starting a frontend project with Figma designs and needs initial component and styling conventions.
- An existing codebase is being onboarded to an AI coding agent that must follow established project patterns.
- A team wants one documented workflow for component reuse, token mapping, asset handling, and visual validation across Figma implementations.
- Existing design system guidance needs to be refreshed after the codebase's architecture or conventions change.
- A project uses Claude Code, Codex CLI, or Cursor and needs Figma implementation rules stored in the agent's native rule file.
How do you install this skill?
- The core function depends on the external Figma MCP service; verify service availability, network reachability, and the scope of project data sent to it.
- The workflow does not clearly require confirmation before saving rules and provides no explicit overwrite, rollback, or recovery procedure.
- The repository is marked deprecated; verify the skill's license, maintenance ownership, and future update path before adoption.
- Examples contain many placeholders, so generated rules require human review and should not be treated as directly applicable to every codebase.
- Local filesystem
- MCP Server
Figma MCP server
This is a curated skill in the openai/skills repository. The README says curated skills can be installed in Codex with $skill-installer; for this skill, use: $skill-installer figma-create-design-system-rules. Restart Codex after installation so it loads the skill. The supplied material does not identify a separate license for this skill; the README says an individual skill's license should be in its directory's LICENSE.txt file.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/openai/skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/.curated/figma-create-design-system-rules" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- Create design system rules for my React project
- Set up Figma guidelines for my Vue app.
Connect an accessible Figma MCP server and provide access to the project codebase. Trigger it with a request such as “Create design system rules for my React project” or “Set up Figma guidelines for my Vue app.” The workflow first calls create_design_system_rules, then analyzes the codebase and generates rules. If the target coding agent is unclear, inspect existing rule files or ask the user.
What are this skill's strengths and limitations?
- Covers component organization, styling, design tokens, Figma MCP workflow, asset handling, and project conventions.
- Provides output targets for Claude Code, Codex CLI, and Cursor.
- Defines a concrete sequence involving design context, screenshots, asset handling, implementation, and validation.
- Emphasizes reuse of existing components, token-based styling, and visual parity checks.
- Requires an accessible Figma MCP server.
- Requires access to the target project's codebase for analysis.
- The source provides no automated validation tool or test suite for the generated rules.
- AGENTS.md has a stated 32 KiB combined size limit, and Cursor requires an appropriate globs configuration.
- The repository README marks the repository as deprecated and directs users to the OpenAI Plugins repository for current examples.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Figma Design System Rules Builder this page ✓ OpenAI · Official | 50 · Use with care | ★ 28k | 4mo ago | — |
| Figma Design Implementer ✓ OpenAI · Official | 53 · Use with care | ★ 28k | 4mo ago | — |
| Stitch Frontend Design Extractor | 42 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| AnyDesign | 58 · Recommended | ★ 219 | 1mo ago | MIT |
| Design Auditor Skill | 53 · Use with care | ★ 86 | 5mo ago | — |
How did FollowSkills review this skill?
The documentation requires codebase access and a Figma MCP connection, constrains asset handling, and says not to add icon packages, providing some scope control. It does not document sensitive-data handling, data flows, confirmation before external effects or file writes, least-privilege permissions, rollback, or adequate risks for the external Figma dependency, so points are deducted.
The ordered workflow, parameters, and oversized or truncated-response path are specified, and a small AGENTS.md check script is included. However, MCP availability is not verified in the files, and failure feedback for agent detection, saving, unavailable tools, and conflicting rules is thin. Testing is requested but not evidenced; the score is conservatively limited by static calibration.
Trigger phrases, scenarios, supported agents, and inputs are reasonably clear. The core function depends entirely on Figma MCP, with no evidence of mainland-China network reachability, limited non-fit boundaries for missing Figma or unsupported agents, and no declared Chinese-language support, so points are deducted.
The skill has readable layering, prerequisites, templates, examples, limitations, and troubleshooting guidance. The individual license is unknown, the repository README says the repository is deprecated, and versioning, changelog, maintenance ownership, and update path are unclear. Placeholder-based rules also require substantial customization, so points are deducted.
The stated task—generate and save project-specific design rules—has a plausible workflow and usable examples. Static files do not demonstrate successful MCP calls, rule persistence, or final validation; the output still requires codebase analysis, review, and iteration, so the score is capped at the static maximum of 7.
The SKILL.md, configuration, template, and script are auditable primary materials, with links to Figma documentation. There is no committed test suite, CI coverage, or third-party execution evidence for the key paths, so independent reproduction is limited and the score remains low.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →