# create-design-system-rules

This command builds project-specific rules for turning Figma designs into code and formats them for AGENTS.md. Use it before implementing UI work.

- command · `type=command` · Codex, ChatGPT · ★ 7604
- Author: Figma · official OpenAI repository
- License: LicenseRef-Figma-Developer-Terms · policy=link-only · description only; the file stays with the author
- Source: https://github.com/openai/plugins/tree/HEAD/plugins/figma/commands/create-design-system-rules.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/commands/create-design-system-rules

## What it does

The command first checks whether Figma MCP can be reached. It then calls `create_design_system_rules` with hints about the project’s language and framework, and inspects the repository for component locations, design tokens, naming patterns, and styling conventions.

Its result is a copy-ready rule set plus a brief validation plan. The output identifies concrete component and token paths, separates hard requirements under `IMPORTANT`, and gives the exact section heading to add to `AGENTS.md`.

Figma MCP access is required before the command can run its main tool call. For Codex, place the command file at `~/.codex/prompts/create-design-system-rules.md`.

## Requirements
- Works with: Figma

## Install

### Codex (native platform)

**Manually: put the files in place**
- File: `~/.codex/prompts/create-design-system-rules.md` — Call it with /prompts:create-design-system-rules. Codex marks this format deprecated in favour of skills

### Claude Code

**Manually: put the files in place**
- File: `.claude/commands/create-design-system-rules.md` — Call it with /create-design-system-rules. For all projects use ~/.claude/commands/

### GitHub Copilot

**Manually: put the files in place**
- File: `.github/prompts/create-design-system-rules.prompt.md`

### Gemini CLI

**Manually: put the files in place**
- File: `.gemini/commands/create-design-system-rules.toml` — Gemini stores commands as TOML: the prompt text goes into the prompt field

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/openai/plugins/tree/HEAD/plugins/figma/commands/create-design-system-rules.md

## When to use it
- derive Figma-to-code rules from a repository
- locate component and token paths
- separate hard constraints from preferences
- prepare a section for `AGENTS.md`
- outline checks for the generated rules

## Example prompts
- Run `/create-design-system-rules` for this repository and account for its TypeScript and React setup.
- Inspect the project through Figma MCP, identify component and token paths, and prepare rules for `AGENTS.md`.
- Generate implementation rules from the Figma setup, then mark hard constraints with `IMPORTANT`.

## Similar
- [find](https://affpapa.org/en/nevibecode/commands/find.md) — command · 210 installs
- [design-database-schema](https://affpapa.org/en/nevibecode/commands/design-database-schema.md) — command · 1021 installs
- [web-design-reviewer](https://affpapa.org/en/nevibecode/commands/web-design-reviewer.md) — command · 605 installs
- [create-component](https://affpapa.org/en/nevibecode/commands/create-component.md) — command · ★ 41823

From the same set: [openai/plugins](https://affpapa.org/en/nevibecode/by/openai/plugins.md) — 528 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md