🎯

create-design-system-rules

🎯Skill

from figma/mcp-server-guide

What it does

Generates custom design system rules tailored to your project for Figma-to-code workflows, creating project-level instructions that encode component patterns, naming conventions, and architectural decisions for Claude Code, Codex, and Cursor.

📦

Same repository

figma/mcp-server-guide(13 items)

create-design-system-rules

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add figma/mcp-server-guide --skill create-design-system-rules

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add figma/mcp-server-guide --skill create-design-system-rules

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/create-design-system-rules/SKILL.md

SKILL.md

1,323Installs

215

Last UpdatedDec 16, 2025

View on GitHub Back to Skills

More from this repository10

🎯

implement-design🎯Skill

Guide for the official Figma MCP server that brings Figma design context to AI agents, enabling code generation from selected frames and design data extraction.

🎯

figma-implement-design🎯Skill

Official Figma skill that generates code from selected Figma frames, providing design information and context to AI agents via the Figma MCP server.

🎯

figma-use🎯Skill

Mandatory prerequisite skill for the `use_figma` MCP tool — documents Figma Plugin API critical rules (use `return`, no `figma.closePlugin()`, no `figma.notify()`, `getSharedPluginData` only, 0–1 color range, always `loadFontAsync` before text, clone-modify-reassign for read-only fills/strokes, work incrementally) to prevent common hard-to-debug failures.

🎯

figma-generate-design🎯Skill

Official Figma skill that creates and modifies native Figma content on the canvas, enabling AI agents to write directly to Figma files via the MCP server.

🎯

figma-create-design-system-rules🎯Skill

Official Figma skill that creates design system rules from Figma files, bridging design tokens and development workflows via the Figma MCP server.

🎯

figma-generate-library🎯Skill

Figma MCP Server skill for generating component libraries from Figma designs, bringing design information and context to AI agents.

🎯

figma-create-new-file🎯Skill

Figma MCP Server skill for creating new Figma design files programmatically through AI agents using the MCP server.

🎯

code-connect-components🎯Skill

Connect Figma design components to their code implementations using Figma's Code Connect feature, analyzing design structure, scanning codebase for matching components, and establishing design-code mappings.

🎯

figma-code-connect🎯Skill

Figma MCP server skill for connecting Figma components to code using Code Connect, so generated output reuses your actual components and stays consistent with your codebase and design system.

🎯

figma-code-connect-components🎯Skill

Figma MCP Server skill for implementing designs by connecting Figma components to code via Code Connect, ensuring generated code is consistent with your codebase.