# design-system-rules-agent

A subagent that turns your codebase conventions into Figma-to-code rules and writes them into AGENTS.md, so later implementations stay consistent.

- subagent · `type=agent` · Codex, ChatGPT · ★ 7596
- 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/agents/design-system-rules-agent.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/agents/design-system-rules-agent

## What it does

The agent pairs with Figma MCP. It calls the `create_design_system_rules` tool first, then reads the codebase to find where components live, which tokens exist and how styling is done. What comes back is a set of specific, enforceable rules rather than vague advice.

The output is structured for direct pasting into `AGENTS.md`: codebase findings, proposed rules, the section to save them in, and a validation plan built around a small test implementation. Setup is one file — `.codex/agents/design-system-rules-agent.toml`.

If Figma MCP is not connected, the `create_design_system_rules` step cannot run and you are back to writing rules by hand. Worth checking that the Figma MCP server is reachable in your Claude session before you rely on this.

## Requirements
- Works with: Figma

## Install

### Codex (native platform)

**Manually: put the files in place**
- File: `.codex/agents/design-system-rules-agent.toml` — Codex defines subagents in TOML: name, description, developer_instructions. Move the Markdown text into developer_instructions by hand. For all projects use ~/.codex/agents/

### Claude Code

**Manually: put the files in place**
- File: `.claude/agents/design-system-rules-agent.md` — For all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention

### Cursor

**Manually: put the files in place**
- File: `.cursor/agents/design-system-rules-agent.md` — Cursor also reads .claude/agents/

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/agents/design-system-rules-agent.md

## When to use it
- collect Figma-to-code rules into one file
- locate real component paths and tokens in a project
- lock styling conventions for future tasks
- validate rules with a small test implementation
- refresh `AGENTS.md` after the project structure changes

## Example prompts
- run design-system-rules-agent and propose rules for `AGENTS.md`
- scan the codebase and draft Figma-to-code conventions
- update the design system rules and show me the validation plan

## Similar
- [figma-create-design-system-rules](https://affpapa.org/en/nevibecode/skills/figma-create-design-system-rules.md) — skill · 2900 installs
- [design-system-patterns](https://affpapa.org/en/nevibecode/skills/design-system-patterns.md) — skill · 15953 installs
- [ui-design-system](https://affpapa.org/en/nevibecode/skills/ui-design-system.md) — skill · 1076 installs
- [design-system](https://affpapa.org/en/nevibecode/skills/rampstackco-design-system.md) — skill · 310 installs
- [icon-system](https://affpapa.org/en/nevibecode/skills/icon-system.md) — skill · 2400 installs
- [figma-generate-design](https://affpapa.org/en/nevibecode/skills/openai-figma-generate-design.md) — skill · 2900 installs

From the same set: [openai/plugins](https://affpapa.org/en/nevibecode/by/openai/plugins.md) — 337 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