Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot official · OpenAI

figma-create-design-system-rules · openai — Claude Code skill: how to install

Generates project-specific design system guidelines for AI coding agents handling Figma-to-code tasks. It inspects existing components and writes rules directly into your repository.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add openai/skills --skill figma-create-design-system-rules -a claude-code
Open on GitHub

What figma-create-design-system-rules does

This skill creates project-specific guidelines for coding agents implementing Figma interfaces. Instead of repeating architectural requirements in every prompt, the skill writes instructions into configuration files like CLAUDE.md for Claude Code, AGENTS.md for Codex CLI, or .cursor/rules/figma-design-system.mdc for Cursor.

During execution, the skill invokes the create_design_system_rules tool on the connected Figma MCP server. It analyzes folder structures, styling tokens, and component naming habits in your repository. The output enforces an implementation order: fetching structured data via get_design_context, grabbing visual references with get_screenshot, and reusing existing component files rather than inventing duplicates.

An accessible Figma MCP server connection is mandatory beforehand. The workflow halts immediately if the server cannot supply the initial templates.

What it helps with

  • generate design system rule files for AI coding agents
  • lock in component locations and styling token conventions
  • standardize the retrieval flow for Figma MCP tools
  • prevent agents from duplicating existing UI components

Example prompts for the agent

  • create design system rules for my project
  • set up Figma guidelines for our codebase
  • generate design system rules for Claude Code

How to install figma-create-design-system-rules

1Skills CLI (Vercel)

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

2Manually: put the files in place

~/.claude/skills/figma-create-design-system-rules/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/figma-create-design-system-rules/

From the same set20

The whole set →
pdf official openai A skill for reading, creating and reviewing PDFs where layout matters. Useful when the agent builds a document and needs to see how it renders. Claude Code CX Codex Cursor +1 13,400installs gh-fix-ci official openai Finds failing GitHub Actions checks on a pull request, inspects logs, and drafts a fix plan. The skill modifies code only after explicit approval. Claude Code CX Codex Cursor +1 11,400installs openai-docs official openai The skill finds current OpenAI guidance for API work, Codex, model selection, migrations, and prompt updates, using official documentation. Claude Code CX Codex Cursor +1 6,100installs imagegen official openai This skill creates and edits raster images such as illustrations, textures, sprites, and mockups. Use it when the output should be a bitmap asset. Claude Code CX Codex Cursor +1 5,700installs jupyter-notebook official openai Scaffolds reproducible Jupyter notebooks for experiments and tutorials using bundled templates and a helper script. It prevents manual raw JSON editing errors. Claude Code CX Codex Cursor +1 5,600installs skill-creator official openai Official guide for drafting and updating agent skills. It structures procedures, bundled scripts, and documentation while keeping token overhead low. Claude Code CX Codex Cursor +1 4,900installs gh-address-comments official openai This skill finds the open pull request for the current branch, lists review comments, and applies the fixes you select through gh. Claude Code CX Codex Cursor +1 4,800installs cloudflare-deploy official openai This skill helps choose Cloudflare services and prepare application or infrastructure deployments through Workers, Pages, and related products. Claude Code CX Codex Cursor +1 4,300installs

Other versions of figma-create-design-system-rules

figma-create-design-system-rules nexu-io This skill generates project-specific design system rules for Figma-to-code work. Use it to capture tokens, naming conventions, and lint rules in one place. Claude Code CX Codex Cursor +1 2,700installs

Similar

image-manipulation-image-magick official github Use ImageMagick to resize images, convert formats and inspect metadata. The skill is suited to thumbnails and batch image processing. GitHub Copilot 9,723installs motion-design LottieFiles This skill guides UI animation choices, from timing and easing to choreography. Use it when planning micro-interactions, loading states, or page transitions. Claude Code CX Codex Cursor +1 19,700installs extract-design-system arvindrk This skill extracts design primitives from a public website and generates starter tokens.json and tokens.css files for your project. Claude Code CX Codex Cursor +1 130,600installs shadcn-vue unovue Teaches coding agents shadcn-vue architecture, proper CLI runners, FieldGroup form composition, and strict Tailwind semantic token rules. Claude Code CX Codex Cursor +1 5,700installs mobile-android-design Seth Hobson This skill guides native Android UI work with Material Design 3 and Jetpack Compose. Use it for screens, navigation, adaptive layouts, and accessibility checks. Claude Code CX Codex Cursor 24,847installs power-bi-report-design-consultation official github This skill guides Power BI report planning, from chart choices to page layout and accessibility. Use it when a report needs to support specific decisions for a defined audience. GitHub Copilot 9,390installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs

Questions about figma-create-design-system-rules

How do I install figma-create-design-system-rules in Claude Code?

Run npx skills add openai/skills --skill figma-create-design-system-rules -a claude-code in your terminal. It adds the skill to your Claude Code environment.

What does figma-create-design-system-rules do?

It analyzes your repository and generates a rule file containing your styling conventions, tokens, and component paths. This guides coding agents when translating Figma mockups into code.

What is required before using this skill?

You must have an active Figma MCP server connection and access to your project files. The skill relies on the server to provide the initial template via the create_design_system_rules tool.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor