create-design-system-rules — Codex command for Figma 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.
~/.codex/prompts/create-design-system-rules.mdWhat create-design-system-rules 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.
What it helps with
- 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 for the agent
- Run
/create-design-system-rulesfor 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.
How to install create-design-system-rules
Manually: put the files in place
~/.codex/prompts/create-design-system-rules.mdCall it with /prompts:create-design-system-rules. Codex marks this format deprecated in favour of skills
Manually: put the files in place
.claude/commands/create-design-system-rules.mdCall it with /create-design-system-rules. For all projects use ~/.claude/commands/
Manually: put the files in place
.github/prompts/create-design-system-rules.prompt.mdManually: put the files in place
.gemini/commands/create-design-system-rules.tomlGemini stores commands as TOML: the prompt text goes into the prompt field
Questions about create-design-system-rules
How do I install create-design-system-rules in Codex?
Place the command file at ~/.codex/prompts/create-design-system-rules.md.
What does create-design-system-rules do?
It uses Figma MCP and repository analysis to produce project-specific Figma-to-code rules, a validation plan, and an AGENTS.md section heading.
What does create-design-system-rules need to run?
It requires access to Figma MCP so it can call create_design_system_rules. The command also accepts project language and framework hints.
