$ ~/registry/skill/openai-curated-figma-create-design-system-rules

SKILL

figma-create-design-system-rules

Name: figma-create-design-system-rules
Author: OpenAI

Generate custom design system rules for your codebase and Figma-to-code workflow.

Stars

★ 23,132

Source

GitHub

Updated

2026-07-15

// securityLow risk

Prompt only, no code
Open source
Community-trusted· 22.0k

Summary

This skill is an open-source, prompt-only/document-style skill with no required secrets and no declared remote endpoints, so its intrinsic risk is low. The main caveat is that it directs a connected Figma MCP server and codebase-analysis workflow, so real access and write boundaries depend on the host agent and connected tools.

CredentialsLow risk

The materials explicitly state that no keys or environment variables are required. The skill itself does not request API tokens, account credentials, or other sensitive secrets, and no direct credential exposure or abuse path is evident.

Network egressLow risk

No remote endpoints are declared, and the skill itself is not a network client. The README only mentions requiring a Figma MCP server connection, with no evidence that this skill independently sends user data to unknown or unrelated hosts.

Code executionLow risk

This item is marked as prompt-only and does not include executable install steps, scripts, or local process-launch behavior. It may instruct an agent to call an external Figma MCP tool, but it does not itself provide code-execution capability.

Data accessLow risk

The skill description calls for analyzing the project codebase and generating rule files, but this is indirect guidance to the host agent/connected tools rather than evidence that the skill itself has file read/write permissions. No excessive access request beyond the stated purpose is shown.

Supply chainLow risk

The source is the open-source openai/skills GitHub repository with strong community adoption (about 22k stars), providing good auditability and source credibility. While the license and maintenance status are not explicitly stated, there are no red flags such as closed-source distribution, abandonment indicators, or suspicious packaging.

Recommendations

Use it only within a trusted host agent, and separately review the permission scope of the connected Figma MCP server.
Apply least-privilege controls to codebase read scope and rule-file write paths to avoid overwriting sensitive documentation.
Manually review generated rule content before applying it so inaccurate project conventions are not baked into AGENTS.md, CLAUDE.md, or .cursor/rules.

Audited by: gpt-5.4 · 2026-06-16

// install

Copy the install command and let the AI configure it · recommended for beginners

Please install the "figma-create-design-system-rules" skill from askskill:
1. Download https://raw.githubusercontent.com/openai/skills/main/skills/.curated/figma-create-design-system-rules/SKILL.md
2. Save it as ~/.claude/skills/figma-create-design-system-rules/SKILL.md
3. Reload skills and tell me it's ready

// download

Download SKILL.mdInstall manifest ↗

// docs

Create Design System Rules

Overview

This skill helps you generate custom design system rules tailored to your project's specific needs. These rules guide AI coding agents to produce consistent, high-quality code when implementing Figma designs, ensuring that your team's conventions, component patterns, and architectural decisions are followed automatically.

Supported Rule Files

Agent	Rule File
Claude Code	`CLAUDE.md`
Codex CLI	`AGENTS.md`
Cursor	`.cursor/rules/figma-design-system.mdc`

What Are Design System Rules?

Design system rules are project-level instructions that encode the "unwritten knowledge" of your codebase - the kind of expertise that experienced developers know and would pass on to new team members:

Which layout primitives and components to use
Where component files should be located
How components should be named and structured
What should never be hardcoded
How to handle design tokens and styling
Project-specific architectural patterns

Once defined, these rules dramatically reduce repetitive prompting and ensure consistent output across all Figma implementation tasks.

Prerequisites

Figma MCP server must be connected and accessible
Access to the project codebase for analysis
Understanding of your team's component conventions (or willingness to establish them)

When to Use This Skill

Use this skill when:

Starting a new project that will use Figma designs
Onboarding an AI coding agent to an existing project with established patterns
Standardizing Figma-to-code workflows across your team
Updating or refining existing design system conventions
Users explicitly request: "create design system rules", "set up Figma guidelines", "customize rules for my project"

Required Workflow

Follow these steps in order. Do not skip steps.

Step 1: Run the Create Design System Rules Tool

Call the Figma MCP server's create_design_system_rules tool to get the foundational prompt and template.

Parameters:

clientLanguages: Comma-separated list of languages used in the project (e.g., "typescript,javascript", "python", "javascript")
clientFrameworks: Framework being used (e.g., "react", "vue", "svelte", "angular", "unknown")

This tool returns guidance and a template for creating design system rules.

Structure your design system rules following the template format provided in the tool's response.

Step 2: Analyze the Codebase

Before finalizing rules, analyze the project to understand existing patterns:

Component Organization:

Where are UI components located? (e.g., src/components/, app/ui/, lib/components/)
Is there a dedicated design system directory?
How are components organized? (by feature, by type, flat structure)

Styling Approach:

What CSS framework or approach is used? (Tailwind, CSS Modules, styled-components, etc.)
Where are design tokens defined? (CSS variables, theme files, config files)
Are there existing color, typography, or spacing tokens?

Component Patterns:

What naming conventions are used? (PascalCase, kebab-case, prefixes)
How are component props typically structured?
Are there common composition patterns?

Architecture Decisions:

How is state management handled?
What routing system is used?
Are there specific import patterns or path aliases?

Step 3: Generate Project-Specific Rules

Based on your codebase analysis, create a comprehensive set of rules. Include:

General Component Rules

- IMPORTANT: Always use components from `[YOUR_PATH]` when possible
- Place new UI components in `[COMPONENT_DIRECTORY]`
- Follow `[NAMING_CONVENTION]` for component names
- Components must export as `[EXPORT_PATTERN]`

Styling Rules

- Use `[CSS_FRAMEWORK/APPROACH]` for styling
- Design tokens are defined in `[TOKEN_LOCATION]`
- IMPORTANT: Never hardcode colors - always use tokens from `[TOKEN_FILE]`

…

View full docs ↗