Figma Create Design System Rules
Skill ActiveGenerates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.
To establish consistent, project-specific design conventions for AI coding agents, ensuring adherence to team standards during Figma-to-code workflows.
Features
- Generates custom design system rules
- Supports multiple AI coding agents (Claude Code, Codex CLI, Cursor)
- Analyzes codebase for component organization and styling
- Provides templates for various rule categories (components, styling, assets)
- Ensures consistent Figma-to-code implementation
Use Cases
- Starting a new project with established Figma-to-code conventions
- Onboarding AI coding agents to existing projects with specific patterns
- Standardizing Figma implementation workflows across a team
- Users requesting to 'create design system rules' or 'customize guidelines'
Non-Goals
- Replacing the Figma MCP server or Figma itself
- Directly implementing UI components from Figma
- Providing generic design system rules without project context
Trust
- warning:Issues AttentionThere are 30 open issues and 6 closed issues in the last 90 days, resulting in a low closure rate, indicating slow maintainer response.
Installation
npx skills add openai/skillsRuns the Vercel skills CLI (skills.sh) via npx — needs Node.js locally and at least one installed skills-compatible agent (Claude Code, Cursor, Codex, …). Assumes the repo follows the agentskills.io format.
Quality Score
Similar Extensions
Use My Browser
100Use when work depends on the user's live browser session or visible rendered state rather than static fetches, especially for browser debugging contexts or DevTools-selected elements or requests, logged-in dashboards or CMS flows, localhost apps, forms, uploads, downloads, media inspection, DOM or iframe inspection, Shadow DOM, or browser failures that look like soft 404s, auth walls, anti-bot checks, or rate limits.
Github
100Use gh for GitHub issues, PR status, CI/logs, comments, reviews, releases, and API queries.
Openclaw Testing
100Choose, run, rerun, or debug OpenClaw tests, CI checks, Docker E2E lanes, release validation, and the cheapest safe verification path.
Cli Creator
100Build a composable CLI for Codex from API docs, an OpenAPI spec, existing curl examples, an SDK, a web app, an admin tool, or a local script. Use when the user wants Codex to create a command-line tool that can run from any repo, expose composable read/write commands, return stable JSON, manage auth, and pair with a companion skill.
Figma Generate Library
100Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
Design System
98Build or audit a design system including component library, design tokens, naming conventions, contribution model, and documentation. Use this skill whenever the user wants to build a design system, audit an existing system, define design tokens at the system level, structure a component library, or set up design system governance. Triggers on design system, component library, design tokens, atomic design, atoms, molecules, organisms, design system documentation, Storybook, Figma library, system governance, design contribution model. Also triggers when teams are inconsistent across products and a system is the answer.