design-system-rules-agent — Claude subagent: Figma-to-code rules
A subagent that turns your codebase conventions into Figma-to-code rules and writes them into AGENTS.md, so later implementations stay consistent.
.codex/agents/design-system-rules-agent.tomlWhat design-system-rules-agent 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.
What it helps with
- 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.mdafter the project structure changes
Example prompts for the agent
- 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
How to install design-system-rules-agent
Manually: put the files in place
.codex/agents/design-system-rules-agent.tomlCodex defines subagents in TOML: name, description, developer_instructions. Move the Markdown text into developer_instructions by hand. For all projects use ~/.codex/agents/
Manually: put the files in place
.claude/agents/design-system-rules-agent.mdFor all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention
Manually: put the files in place
.cursor/agents/design-system-rules-agent.mdCursor also reads .claude/agents/
Step by step, with commands for each platform: Claude Code subagents: how to create one, call it and keep context clean
Questions about design-system-rules-agent
How do I install design-system-rules-agent in Claude?
Create the file .codex/agents/design-system-rules-agent.toml. That is the whole install step for Claude.
What does design-system-rules-agent do?
It generates or updates Figma-to-code rules for AGENTS.md by analyzing component locations, tokens and styling conventions in the codebase, then returns a copy-ready rule set.
What does the agent need to run?
Access to the Figma MCP create_design_system_rules tool, which the agent calls before drafting the final rules.
