figma-create-design-system-rules

This skill, curated by OpenAI, generates custom design system rules tailored to a project's codebase so that AI coding agents produce consistent code when implementing Figma designs. It solves the problem of repetitive prompting and inconsistent output by encoding a team's unwritten conventions (component locations, naming, styling approach, design tokens, and architectural patterns) into agent-readable rule files. It supports rule files for multiple agents: CLAUDE.md for Claude Code, AGENTS.md for Codex CLI, and a Cursor rules file.

The workflow requires a connected Figma MCP server. It first calls the Figma MCP create_design_system_rules tool with the project's languages and frameworks to fetch a foundational prompt and template, then analyzes the codebase to discover component organization, styling approach, token locations, naming conventions, and architecture decisions. Based on that analysis it generates project-specific rules across categories: general component rules, styling rules (never hardcode colors, use tokens), a required Figma MCP integration flow (get_design_context, optionally get_metadata, then get_screenshot before implementing, validating for 1:1 parity), and asset-handling rules that direct the agent to use the Figma MCP assets endpoint and localhost sources rather than adding icon packages or placeholders. Bundled resources include a rule-template skeleton, an OpenAI agent config, SVG assets, a LICENSE, and a helper shell script for checking an AGENTS.md file.

It targets frontend teams and design-system maintainers standardizing Figma-to-code workflows, onboarding AI agents to existing projects, or establishing conventions for new projects. Its guidance is defensive by nature (encouraging token usage and consistency) and involves no destructive or risky operations.