Sign in
Explore
Skills · SkillWeb & UIReviewed

figma-create-design-system-rules

Generate project-specific design system rules for Figma-to-code work. Needs the Figma MCP server connected.

Kind
Skill
Works with
Codex, Claude Code
Source
openai/skills @ 49f948faa925
Path
skills/.curated/figma-create-design-system-rules/SKILL.md
License
Apache-2.0
Jobs
UI/UX work, Guardrails
InstallCopy it from the source repository, or sign in and let the assistant adapt it for your project.
# Create Design System Rules

## Overview

This skill helps you generate custom design system rules tailored to your project's specific needs. These rules guide AI coding agents to produce consistent, high-quality code when implementing Figma designs, ensuring that your team's conventions, component patterns, and architectural decisions are followed automatically.

### Supported Rule Files

| Agent | Rule File |
|-------|-----------|
| Claude Code | `CLAUDE.md` |
| Codex CLI | `AGENTS.md` |
| Cursor | `.cursor/rules/figma-design-system.mdc` |

## What Are Design System Rules?

Design system rules are project-level instructions that encode the "unwritten knowledge" of your codebase - the kind of expertise that experienced developers know and would pass on to new team members:

- Which layout primitives and components to use
- Where component files should be located
- How components should be named and structured
- What should never be hardcoded
- How to handle design tokens and styling
- Project-specific architectural patterns

Once defined, these rules dramatically reduce repetitive prompting and ensure consistent output across all Figma implementation tasks.

## Prerequisites
…