All directories
SkillDesignEngineering

Figma Create Design System Rules

Generates project-specific Figma→code design system rules (CLAUDE.md / AGENTS.md / Cursor rules) from your codebase conventions.

01

Overview

OpenAI’s curated `figma-create-design-system-rules` skill (also mirrored via Figma MCP guides / marketplace listings) analyzes your repo and writes durable design-system rules for Figma-to-code workflows—layout primitives, file locations, naming, token handling, and “never hardcode” policies. Use when implement-design alone drifts because the agent lacks your team’s unwritten conventions. Requires Figma MCP connected.

SaaSAgencyOther

Work with LimeDock

Using this skill? LimeDock can wire it into a durable automation you own.

Skills show what's possible. LimeDock builds and runs the owned marketing, sales, and ops automations around them.

We sell owned automations for SaaS teams — live workflows that plug into Slack, CRM, and your internal platform — not just a skill list.

02

Link

https://github.com/openai/skills/tree/main/skills/.curated/figma-create-design-system-rules
03

Installation guide

npx skills add openai/skills --skill figma-create-design-system-rules

Also available through Figma MCP skill surfaces / Claude Marketplaces design-UI listings. Ensure Figma MCP is connected.

04

How to use it

Say “create design system rules” or “generate Figma-to-code rules for this project.” Review the generated CLAUDE.md / AGENTS.md / `.cursor/rules` file, commit it, then run implement-design workflows so agents inherit the conventions automatically.

05

Example prompts

  • Create design system rules for this repo for Figma-to-code work.
  • Generate Cursor rules that encode our button/stack primitives and token usage.
  • Update CLAUDE.md with Figma implementation conventions after our folder migration.
  • What should never be hardcoded when translating Figma in this codebase?
06

Use cases and examples

  • Codify Figma→code conventions once
  • Onboard agents to component file layout
  • Prevent hardcoded colors/spacing in implementations
  • Align Claude Code, Codex, and Cursor on one rule file
  • Prep a design system before large Figma translation work
07

Prerequisites

  • Figma MCP server connected
  • Access to the target codebase
  • Team agreement on component/token conventions (or willingness to decide)
08

Tips

  • Regenerate when the design system folder structure changes.
  • Keep rules short and enforceable—agents ignore novels.
  • Pair with implement-design + Playwright for fidelity loops.
  • Commit rules so every agent/session shares them.
09

Sources