skills.rest
raphaelmans
raphaelmansCOMMUNITY
Explore all skills by this author →
GitHub

create-design-system-rules

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

Updated Feb 28, 2026
Search Tags:#components#figma#mcp#guidelines#tokens#design-system
One-click install
npx skills add https://github.com/raphaelmans/agent-skills --skill create-design-system-rules-raphaelmans
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-design-system-rules
Source: https://github.com/raphaelmans/agent-skills/tree/main/create-design-system-rules
Command: npx skills add https://github.com/raphaelmans/agent-skills --skill create-design-system-rules-raphaelmans

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generates tailored design system rules to codify your project's conventions and ensure consistent Figma-to-code outputs across teams.

Core Features & Use Cases

  • Guides AI coding agents to implement project-specific conventions, component patterns, and architectural decisions automatically.
  • Helps onboard new projects by establishing a shared design system baseline and updating rules as the codebase evolves.
  • Supports integrating with Figma MCP workflows to maintain alignment between design and implementation.

Quick Start

Run the Create Design System Rules Tool to generate your project's design-system guidelines.

Frequently Asked Questions about create-design-system-rules

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

FAQPage Schema
How do I generate design system rules for Figma-to-code implementation?▼

To generate design system rules for Figma-to-code workflows, run the tool to analyze your codebase and produce actionable rule files codifying project-specific component patterns, tokens, and architectural conventions.

What are design system guidelines and why do I need them for AI coding agents?▼

Design system guidelines are codified conventions that instruct AI coding agents on your project's specific component patterns and architectural decisions, ensuring automated Figma-to-code outputs remain consistent with your established design system across teams.

How do I onboard an AI coding agent to my existing design system conventions?▼

You onboard an AI coding agent by generating project-specific design system rule files that map your Figma components and tokens to codebase conventions, providing the agent with a structured baseline for consistent implementation.

Do I need a Figma MCP server to generate project-specific design system rules?▼

Yes, Figma MCP server connectivity is a prerequisite for generating design system rules, enabling the tool to extract design tokens and component data needed to align Figma workflows with your codebase conventions.

Can I update design system tokens and component guidelines as my codebase evolves?▼

You can update design system rules by regenerating the actionable rule files to reflect evolving codebase conventions, ensuring your Figma-to-code implementation guidelines maintain alignment between design and implementation over time.

What's the best way to maintain alignment between Figma designs and codebase conventions?▼

The best way to maintain alignment between Figma and codebases is to generate project-specific design system rules that integrate with Figma MCP workflows, codifying tokens and component patterns into actionable rule files for automated implementation.

Related Skills

Explore More Design & Creative Skills→
figmafigma
1.9k

create-design-system-rules

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

Official
Intermediate
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
FaysilAlshareefFaysilAlshareef
4

api-docs

Enrich OpenAPI specifications with summaries, descriptions, and examples.

Community
Intermediate