skilld
All skills
openai avatar

/figma-create-design-system-rules

@0e7823c official
by openaiopenai/skills28k stars
1,891

Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.

Ask your Agent

Use this Skill: https://skilld.dev/gh/openai/skills/figma-create-design-system-rules

This session only. Nothing lands on disk.

referencesrule-template.md

≈84 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Rule Template Skeleton

Figma MCP Integration Rules

  • Required flow (get_design_context -> get_screenshot)
  • Implementation conventions for this repo
  • Asset handling
  • Validation requirements

Project-Specific Conventions

  • Components path(s)
  • Token source(s)
  • Styling system
  • Testing and accessibility expectations

Source: SKILL.md on GitHub

Third-party checks

No alerts16d4 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    This skill facilitates the generation of design system rules by analyzing a project's codebase and integrating with Figma. It utilizes a remote MCP server and includes a script to verify project configuration. These features are standard for the skill's purpose and no security concerns were identified.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • ZeroLeaks5mo

    1 finding · Score: 86/100

Provenance

Signed by skilld at 0e7823c. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 months ago.

Activeupdated 6 months ago

Topics

  • MCP
  • figma
  • design-system
  • component-patterns
  • code-generation
  • styling
  • design-tokens
  • workflow

README badge

README badge for openai/skills/figma-create-design-system-rules

What it does

Generates custom design system rules that guide AI coding agents to implement Figma designs consistently with your project's conventions, component patterns, and styling approach. The skill creates agent-specific rule files (CLAUDE.md, AGENTS.md, or .cursor/rules/) that encode component organization, design tokens, naming conventions, and the required Figma MCP workflow for your codebase.

Generated from the current SKILL.md.

Frequently asked

Does this skill work with all AI coding agents?
It supports Claude Code, Codex CLI, and Cursor. Each agent requires saving rules to a different file: CLAUDE.md, AGENTS.md, or .cursor/rules/figma-design-system.mdc respectively.
What happens if I don't have a Figma MCP server connected?
The skill requires a Figma MCP server connection to function. You must set up and connect the server before using this skill.
Can I use this skill with an existing project that already has design conventions?
Yes. The skill is designed to analyze your existing codebase patterns and generate rules that match your established conventions, or to refine and standardize rules you already have in place.
What frameworks and languages does this skill support?
It accepts any combination of client languages (TypeScript, JavaScript, Python, etc.) and frameworks (React, Vue, Svelte, Angular, etc.) as input parameters to tailor the generated rules.
How large can the generated rule files be?
For Codex CLI (AGENTS.md), there is a 32 KiB combined size limit. Claude Code and Cursor have no stated size restrictions.

Generated from the current SKILL.md. These answers refresh after source changes.