102.3K+Download
Skip to the usage guide
Figma Create Design System Rulesby OpenAI

Figma Create Design System Rules Skill.

Replace vague instructions to follow the design system with concrete paths and conventions.

  • Figma
  • Design Systems
  • Agent Rules
Download OpenDesignView Usage Guide
Source Review · Figma Create Design System RulesSKILL.md
Task Figma Produces • A project-specific Figma implementation rules section or file • Concrete component, token and asset-location guidance • A small implementation check used to refine the rules Before You Start Figma MCP connection and access to the target codebase; the destination rule format depends on the coding host.
Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Turn Repository Conventions into Figma Implementation Rules

A repository-analysis workflow that writes and tests concrete agent rules for Figma implementation.

Source-based workflowNot an execution benchmark

The Working Approach

Figma Create Design System Rules produces project-specific guidance for future Figma-to-code work. It analyzes where components live, how styling is handled, where tokens are defined and which architectural conventions implementations must preserve. Its deliverable is a rules file, not a Figma component library or a redesigned screen.

The source supports rule formats for Claude Code, Codex and Cursor. Useful rules name real component paths and token sources instead of imposing a generic React or Tailwind pattern on every repository. The workflow ends by trying the rules on a small component and refining what did not work, because a written instruction is not proof that an agent will consistently follow it.

Expected Deliverables

  • A project-specific Figma implementation rules section or file
  • Concrete component, token and asset-location guidance
  • A small implementation check used to refine the rules
See the Example Brief

From Brief to Review

  1. 01
    Inspect Existing Conventions

    First obtain the foundational template from the Figma MCP create_design_system_rules tool. Then read component organization, styling, imports, routing and existing agent rules before drafting project-specific additions.

  2. 02
    Write Actionable Mappings

    Name the actual component and token files, describe the required Figma context and screenshot flow, and preserve the project's framework.

  3. 03
    Save and Test the Rules

    Use the appropriate host rule format without overwriting unrelated instructions. Test a small Figma implementation and remove conflicting or unhelpful guidance.

02 When to Use It

When to Use It

Figma MCP connection and access to the target codebase; the destination rule format depends on the coding host.

A Good Fit

  • Agent OnboardingUseful when new implementation sessions repeatedly duplicate components or hardcode values that already have tokens.
  • Team Convention CaptureFits a design-system team turning unwritten repository knowledge into reviewable guidance.

Limits to Check

  • Rules Are Not EnforcementA rule file can guide an agent but does not replace linting, tests or a visual comparison.
  • Existing Instructions Must SurviveAdding Figma guidance should not erase unrelated repository rules or introduce contradictory architecture requirements.

Bring These Inputs

  • Repository AccessProvide the actual project, including representative components and styling files.
  • Agent HostIdentify the rule format the team uses, such as AGENTS.md, CLAUDE.md or Cursor rules.
  • Known Team DecisionsSupply conventions that cannot be inferred reliably, including ownership and approved exceptions.

03 Decisions That Matter

Decisions That Matter

  1. Specific Paths Over Slogans

    A named Button component and token file are more actionable than a general request for consistency.

  2. Adapt to the Repository

    The source treats Figma's generated representation as design context to adapt into the repository's own framework and styles.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Use the curated skill with the project’s existing instruction mechanism. These Beta materials are governed by the Figma Developer Terms. Review rule-file changes for their effect on future agent behavior.

Upstream Source File
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-create-design-system-rules/SKILL.md

Figma MCP connection and access to the target codebase; the destination rule format depends on the coding host.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use figma-create-design-system-rules to document our existing Figma-to-code conventions. Inspect the repository first, preserve the current AGENTS.md, and add a focused section naming our component, token and asset paths. Do not introduce a new styling framework. Validate the guidance on one small component and flag any convention that requires a team decision.

Inspect the Result

Check the actual output against these observable criteria.

  • Every referenced component and token path exists.
  • The new rules do not contradict or replace existing project instructions.
  • A small implementation follows the intended reuse and styling conventions.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
OpenAI
Repository
openai/skills
Skill File
skills/.curated/figma-create-design-system-rules/SKILL.md
License
Figma terms
Reviewed Snapshot
2026-10-07 · 49f948faa925
Editorial Source Summary
A repository-analysis workflow that writes and tests concrete agent rules for Figma implementation.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does it create tokens inside Figma?

No. Its main output is agent-readable project guidance. Building variables and component libraries in Figma is a different Skill.

Must my project use React and Tailwind?

No. The source explicitly asks the agent to detect the repository's framework and styling approach and adapt the rules accordingly.

Should every convention become a rule?

The source recommends starting with the most important recurring issues and keeping guidance specific, rather than filling the context with rarely useful rules.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-create-design-system-rules/SKILL.md