🎯

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(3 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

945Installs

215

Last UpdatedDec 16, 2025

View on GitHub Back to Skills

More from this repository2

🎯

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.

🎯

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.