skills.rest
Sacred-G
Sacred-GCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-create-design-system-rules

Generates design system rules from Figma MCP context for AI agents.

2|1|Updated Apr 2, 2026
Search Tags:#figma#mcp#codegen#guidelines#design-system#ai-agents
One-click install
npx skills add https://github.com/Sacred-G/oh-my-claw --skill figma-create-design-system-rules-sacred-g
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-create-design-system-rules
Source: https://github.com/Sacred-G/oh-my-claw/tree/main/secure-openclaw/skills-main/skills/.curated/figma-create-design-system-rules
Command: npx skills add https://github.com/Sacred-G/oh-my-claw --skill figma-create-design-system-rules-sacred-g

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps teams codify their Figma-to-code conventions into a repeatable set of rules, ensuring AI coding agents follow project-specific guidelines and maintain consistency across designs.

Core Features & Use Cases

  • Generates tailored design system rules based on the user's codebase and conventions.
  • Integrates with the Figma MCP server to fetch project context, tokens, and design mappings.
  • Provides templates and guidance for multiple AI agents and workflows to ensure consistent implementations.

Quick Start

Run the Create Design System Rules tool with your client languages and frameworks, then save the generated rules to the appropriate agent rule file.

Frequently Asked Questions about figma-create-design-system-rules

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Figma design system rules for AI coding agents?▼

To generate Figma design system rules, run the Create Design System Rules tool with your client languages and frameworks. It integrates with the Figma MCP server to fetch project context and produces agent-ready rule templates.

How does the Figma MCP server help maintain code generation consistency?▼

The Figma MCP server provides project context, tokens, and design mappings to codify Figma-to-code conventions. This ensures AI coding agents follow project-specific guidelines and maintain consistent implementations across designs.

Can I use this to codify Figma-to-code conventions for multiple AI agent workflows?▼

Yes, you can codify Figma-to-code conventions for multiple AI agent workflows. The skill provides templates and guidance for various agents, saving generated rules to standard agent rule files for consistent implementations.

Do I need to specify client languages and frameworks to create Figma design rules?▼

Yes, you need to specify client languages and frameworks when running the Create Design System Rules tool. This allows the skill to generate tailored design system rules based on your specific codebase and conventions.

What's the best way to save generated Figma design rules for AI agents?▼

The best way to save generated Figma design rules is to write them to the appropriate agent rule file. This ensures the AI coding agents can automatically access and apply the project-specific guidelines during code generation.

Why do my AI coding agents ignore project-specific Figma design tokens?▼

AI coding agents ignore Figma design tokens when project-specific guidelines are not codified into a repeatable set of rules. Generating agent-ready rule templates from the Figma MCP context enforces consistent implementations.

Related Skills

Explore More Software Engineering Skills→
MercurykzMercurykz

figma-implement-design

Translates Figma URLs or node IDs into project-conformant code with WCAG-compliant output using Figma MCP workflow.

Community
Advanced
DevPelumiDevPelumi

figma-create-design-system-rules

Generate design system rule files for Claude Code, Cursor, and Codex CLI.

Community
Intermediate
89jobrien89jobrien

figma-create-design-system-rules

Generate project-specific Figma-to-code design system rules from codebase and token analysis.

Community
Advanced
raphaelmansraphaelmans

create-design-system-rules

Generate project-specific design system rules for Figma-to-code implementations.

Community
Advanced