skills.rest
ENG-BXI
ENG-BXICOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-create-design-system-rules

Generate custom design system and Figma-to-code rules for a codebase.

1|Updated Jan 28, 2026
Search Tags:#design system#figma#token usage#ui conventions#rules generation#mcp workflow#figma-to-code
One-click install
npx skills add https://github.com/ENG-BXI/SAAS-SMART-SHIPMENT-TRACKING-CLIENT-SIDE --skill figma-create-design-system-rules-eng-bxi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-create-design-system-rules
Source: https://github.com/ENG-BXI/SAAS-SMART-SHIPMENT-TRACKING-CLIENT-SIDE/tree/main/.agents/skills/figma-create-design-system-rules
Command: npx skills add https://github.com/ENG-BXI/SAAS-SMART-SHIPMENT-TRACKING-CLIENT-SIDE --skill figma-create-design-system-rules-eng-bxi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents inconsistent, off-convention UI implementations by generating project-specific design system rules that guide Figma-to-code outputs to match your team’s component, styling, and token conventions.

Core Features & Use Cases

  • Rule generation for Figma-to-code workflows: Produces custom guidance that reduces randomness in how agents implement Figma designs.
  • Agent-specific rule file targets: Automatically formats and saves rules for common tooling such as Claude Code, Codex CLI, and Cursor.
  • Figma MCP integration workflow: Defines the required sequence (design context, metadata fallback, screenshot capture, asset handling) to improve fidelity and correctness.

Quick Start

Connect the Figma MCP server and ask your agent to create design system rules for your project following the workflow defined in SKILL.md.

Frequently Asked Questions about figma-create-design-system-rules

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create design system rules for Figma-to-code workflows?▼

Figma-to-code design system rules are generated by analyzing your codebase to produce custom guidance that standardizes component organization, styling, and token usage. This requires a connected Figma MCP server to fetch design context and screenshots before implementation.

What is a Figma MCP workflow for generating UI conventions?▼

A Figma MCP workflow for UI conventions defines a required sequence: fetching design context, using metadata fallback, capturing screenshots, and handling assets. This structured process improves fidelity and correctness when agents implement Figma designs into code.

Do I need a Figma MCP server to generate token usage and component rules?▼

Yes, a connected Figma MCP server is required to generate token usage and component rules. The Skill relies on the MCP server to execute the required workflow of retrieving design context and screenshots prior to generating the codebase-specific rules.

Can I save generated design system rules to specific agent tools like Claude Code or Cursor?▼

Yes, generated design system rules can be saved to specific agent tools like Claude Code, Codex CLI, and Cursor. The Skill automatically formats and targets these agent-specific rule files to match your tooling conventions.

Why are my Figma-to-code implementations inconsistent across different components?▼

Figma-to-code implementations become inconsistent when agents lack project-specific design system rules governing component organization and styling. Generating custom rules tailored to your codebase reduces randomness and enforces team conventions for UI outputs.

What's the best way to standardize UI conventions for Figma-driven development?▼

The best way to standardize UI conventions for Figma-driven development is generating custom design system rules that guide agents to match your team’s component and token conventions. This enforces a structured MCP workflow for design context retrieval.

Related Skills

Explore More Design & Creative Skills→
2good4me2good4me

figma

Translate Figma designs into React and Tailwind code via the Figma MCP server.

Community
Advanced
DevPelumiDevPelumi

figma-create-design-system-rules

Generate design system rule files for Claude Code, Cursor, and Codex CLI.

Community
Intermediate
wiltaylorwiltaylor

figma-create-design-system-rules

Generate and apply design system rules for Figma-to-code workflows.

Community
Intermediate
figmafigma
1.9k

create-design-system-rules

Generate project-specific design system rules for Figma-to-code implementations.

Official
Intermediate