figma-create-design-system-rules
Generates project-specific design system rules for AI coding agents to follow when implementing Figma designs.
Setup & Installation
What This Skill Does
Generates project-specific design system rules for AI coding agents to follow when implementing Figma designs. It analyzes the codebase and produces rule files for Claude Code, Cursor, or Codex CLI that encode component conventions, naming patterns, token handling, and Figma MCP tool usage.
Writing these rules manually requires auditing the codebase, knowing every agent tool's behavior, and maintaining the file as conventions change — this skill does the audit and generates a structured, ready-to-use rule file in one pass.
When to use it
- Writing CLAUDE.md rules that tell agents which layout components to use instead of raw divs
- Documenting where component files live so agents place new components in the right directories
- Specifying which values must never be hardcoded and should reference design tokens instead
- Setting up Cursor rules for a new project before the first Figma-to-code sprint
- Encoding naming conventions for a design system that hasn't been written down anywhere
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.