Figma Create Design System Rules
This skill creates project-specific design system rules that encode your team's component patterns, naming conventions, and architectural decisions. By analyzing your codebase and generating rules for your AI coding agent, it ensures consistent, high-quality code output when translating Figma designs. Rules are saved to the appropriate file format for Claude Code, Codex CLI, or Cursor.
Figma Create Design System Rules generates custom design system rules tailored to your project's codebase and conventions.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-14
Figma Create Design System Rules generates custom design system rules tailored to your project's codebase and conventions. This skill creates project-specific design system rules that encode your team's component patterns, naming conventions, and architectural decisions. By analyzing your codebase and generating rules for your AI coding agent, it ensures consistent, high-quality code output when translating Figma designs. Rules are saved to the appropriate file format for Claude Code, Codex CLI, or Cursor.
Use it when
- When setting up design system rules in Figma Create Design System Rules, include your team's component patterns, naming conventions.
- Yes, Figma Create Design System Rules is designed to set up design system guidelines and standards for your project.
Install
openai/skills/figma-create-design-system-rules · repository language: Python
generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create design system rules in Figma?
Figma Create Design System Rules generates project-specific design system rules that encode your team's component patterns, naming conventions, and architectural decisions. The skill analyzes your codebase and creates rules for your AI coding agent, ensuring consistent, high-quality code output when translating Figma designs to code. Rules are saved in the appropriate format for Claude Code, Codex CLI, or Cursor.
What should I include when setting up design system rules Figma?
When setting up design system rules in Figma Create Design System Rules, include your team's component patterns, naming conventions, and architectural decisions. The skill helps you document design system best practices and organize components with design system rules, ensuring your AI coding agent understands your standards and produces consistent output aligned with your project's requirements.
Can Figma Create Design System Rules establish design system guidelines?
Yes, Figma Create Design System Rules is designed to set up design system guidelines and standards for your project. It creates rules that document your design system best practices and component organization, making it easier for your team to maintain consistency across code generation from Figma designs.
How to make design system Figma with this skill?
Figma Create Design System Rules helps you create a design system from scratch by analyzing your codebase and generating comprehensive rules. These rules capture your component patterns, naming conventions, and architectural decisions, then save them in the format compatible with your AI coding agent—Claude Code, Codex CLI, or Cursor.
What file formats does Figma Create Design System Rules support?
Figma Create Design System Rules saves design system rules in formats compatible with major AI coding agents: Claude Code, Codex CLI, and Cursor. This ensures your design system rules and tokens are properly configured for your chosen development workflow and AI assistant.
Why document design system best practices in Figma?
Documenting design system best practices with Figma Create Design System Rules ensures your team's component patterns, naming conventions, and architectural decisions are consistently applied. This creates a shared reference for code generation, improves collaboration, and guarantees that your AI coding agent produces output that aligns with your project standards.
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create and establish design system rules in Figma”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill guides you through translating Figma mockups into production-ready SwiftUI Views using Figma MCP tools to extract design data, variables, and screenshots. It covers design analysis, codebase alignment, smart component decomposition, and validation against the original design to ensure pixel-accurate implementations.
This skill systematically processes Figma files to produce implementation-ready design specifications. It extracts design tokens, component hierarchies, and visual properties while classifying elements according to Atomic Design methodology, then generates comprehensive documentation for developers.
Figma MCP Server bridges AI coding agents and Figma designs through the Model Context Protocol, enabling automated code generation from frames, design token extraction, and canvas writing. Agents can pull variables and layout data, reference actual component implementations via Code Connect, and create or modify Figma content directly.
Figma Swiftui bridges design and development by translating between Figma files and SwiftUI code in both directions. Route design-to-code requests to build iOS interfaces from Figma frames, or code-to-design to push SwiftUI views and tokens back into Figma, preserving semantic colors, SF Symbols, and iOS patterns throughout.
This skill transforms Figma designs into production-ready application code by extracting design context, visual references, and assets from Figma files, then translating them into your project's framework and conventions. It ensures 1:1 visual fidelity while reusing existing components and design tokens.
Figma MCP connects your design files directly to code generation, letting you pull design context, screenshots, and assets, then translate them into production-ready implementations. Follow a structured workflow to fetch design data, validate visuals, and reuse your project's components and design tokens for consistency.
More skills figma-implement-design (Apache-2.0) · Figma Implement Design (NOASSERTION) · figma (MIT) · Figma (NOASSERTION) · customize (MIT)