skills.rest
wiltaylor
wiltaylorCOMMUNITY
Explore all skills by this author →
GitHub

figma-create-design-system-rules

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

Updated May 1, 2026
Search Tags:#code generation#design system#AI integration#Figma#Figma-to-code
One-click install
npx skills add https://github.com/wiltaylor/warpium --skill figma-create-design-system-rules-wiltaylor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-create-design-system-rules
Source: https://github.com/wiltaylor/warpium/tree/main/resources/bundled/mcp_skills/figma/figma-create-design-system-rules
Command: npx skills add https://github.com/wiltaylor/warpium --skill figma-create-design-system-rules-wiltaylor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This skill addresses the need for customized design system guidelines in Figma-to-code workflows, ensuring consistency and adherence to project-specific conventions.

Core Features & Use Cases

  • Customized Rules Generation: Creates rules tailored to a project's specific design system needs.
  • AI Coding Agents Integration: Supports multiple AI coding agents, enabling automated Figma design implementation.
  • Use Case: For a design team working on a Vue project, this skill helps establish and enforce design token usage, component naming conventions, and asset handling rules across the project.

Quick Start

Execute the 'create_design_system_rules' tool with the necessary parameters, and follow the subsequent steps outlined in the SKILL.md guide to establish your project's design system rules.

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 generate design system rules for Figma-to-code workflows?▼

Yes, you can enforce Figma design implementation across multiple AI coding agents. The skill supports Claude Code, Codex CLI, and Cursor, tailoring project-specific design guidelines for automated code generation workflows.

What do I need to set up before applying design system guidelines to my codebase?▼

You need to connect the Figma MCP server and provide access to your project codebase. These prerequisites allow the skill to extract design data and generate tailored rules for your specific development environment.

How do I customize design token usage and component naming conventions for a Vue project?▼

To customize design token usage and component naming conventions for a Vue project, run the 'create_design_system_rules' tool. It analyzes your codebase to establish and enforce specific asset handling rules.

Does this Figma-to-code rule generator work with Cursor and Claude Code?▼

Yes, this Figma-to-code rule generator works with Cursor and Claude Code, along with Codex CLI. It facilitates automated design implementation by ensuring AI coding agents adhere to your project-specific conventions.

Why does my AI coding agent ignore my Figma design system conventions during code generation?▼

AI coding agents ignore Figma design system conventions when project-specific rules are not explicitly defined. This skill solves that by generating tailored guidelines that instruct agents on exact design token and component usage.

Related Skills

Explore More Design & Creative Skills→
MercurykzMercurykz

figma

Extract Figma design data via MCP and generate code from nodes.

Community
Intermediate
OniroHuaverOniroHuaver
30

figma-create-design-system-rules

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

Community
Advanced
DavidGD616DavidGD616

create-design-system-rules

Generate design system rules for AI coding agents from Figma designs.

Community
Advanced
NagyViktNagyVikt
2

figma-create-design-system-rules

Generate custom design system rules for Figma-to-code workflows.

Community
Advanced