figma-rule

Generate repository-specific Figma MCP rules from codebase conventions.

Updated Mar 9, 2026

Search Tags:#automation #code generation #implementation #design system #figma #rules

Ready to run

npx skills add https://github.com/Bigme2020/skills-collection --skill figma-rule

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-rule
Source: https://github.com/Bigme2020/skills-collection/tree/main/figma-rule
Command: npx skills add https://github.com/Bigme2020/skills-collection --skill figma-rule

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation and refinement of repository-specific rules for Figma-driven design implementation, ensuring consistency and adherence to established design systems and coding standards.

Core Features & Use Cases

Rule Generation: Creates CLAUDE.md, Cursor rules, or other agent instructions tailored to a specific repository's Figma workflow.
Codebase Auditing: Inspects repositories to extract design tokens, component paths, styling conventions, and asset handling rules.
Fidelity Enforcement: Helps prevent Figma-generated code from drifting from the codebase's design system, component usage, and fidelity expectations.
Use Case: When a team finds that Figma designs are consistently implemented with incorrect component usage or styling, this Skill can generate a set of clear, actionable rules to guide future Figma-to-code translations.

Quick Start

Use the figma-rule skill to create repo-specific rules for Figma MCP work based on the current codebase.

Frequently Asked Questions about figma-rule

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

FAQPage Schema

How do I enforce Figma design system rules during code implementation?▼

Figma design system rules are enforced by generating repository-specific instructions like CLAUDE.md or Cursor rules. These instructions guide Figma-to-code translations by auditing the codebase for design tokens, component paths, and styling conventions to prevent fidelity drift.

Why does Figma-generated code drift from my existing component library and styling conventions?▼

Figma-generated code drifts without explicit rules matching your codebase conventions. Generating agent instructions that inspect your repository for design tokens and asset handling rules ensures future Figma-to-code translations maintain consistency with your established design system.

How do I generate Cursor rules for Figma MCP work based on my codebase?▼

You generate Cursor rules for Figma MCP work by inspecting your repository to extract real UI conventions. The process analyzes codebase conventions for design tokens, component paths, and asset handling to write concise instructions that guide Figma-driven implementation.

Can I use CLAUDE.md to improve Figma-to-code translations for my specific repository?▼

Yes, you can use CLAUDE.md to improve Figma-to-code translations by defining repository-specific rules. It analyzes your codebase to extract design tokens, component paths, and asset handling rules, ensuring generated code adheres to your design system and fidelity expectations.

What is the best way to automate design system rule generation for Figma implementations?▼

The best way to automate design system rule generation is to inspect your codebase conventions for design tokens and asset handling. This extracts real UI conventions to write concise instructions like CLAUDE.md or Cursor rules that enforce Figma-driven implementation fidelity.

Does generating Figma implementation rules require manual inspection of my codebase?▼

Generating Figma implementation rules requires codebase inspection to extract real UI conventions, but the task itself is automated. It analyzes your repository for design tokens and component paths to automatically write concise instructions for Figma MCP work.