figma-create-design-system-rules
Generates project-specific design system rules for AI coding agents like Claude Code, Cursor, and Codex CLI.
Setup & Installation
What This Skill Does
Generates project-specific design system rules for AI coding agents like Claude Code, Cursor, and Codex CLI. Analyzes your codebase to encode component locations, styling conventions, and token usage into a rule file that agents load automatically. Works with Figma MCP server to standardize how designs get translated to code.
Instead of re-explaining your component structure and token conventions in every prompt, you write the rules once and the agent applies them automatically across all Figma implementation tasks.
When to use it
- Setting up CLAUDE.md rules before starting a Figma-to-React implementation sprint
- Onboarding a new AI agent to an existing codebase with established component patterns
- Replacing repeated prompts about token usage with a permanent rule file
- Configuring Cursor rules for a Vue project that uses CSS modules and custom design tokens
- Updating design system conventions after a major refactor to keep agent output consistent
Similar Skills
gif-sticker-maker
Takes a photo of a person, pet, object, or logo and generates 4 animated GIF stickers in Funko Pop / Pop Mart figurine style.
wpds
Assists with building UI components and interfaces using the WordPress Design System (WPDS).
accessibility
Audits and improves web accessibility against WCAG 2.
algorithmic-art
Generates algorithmic and generative art using p5.