skills.rest
openai
openaiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma-create-design-system-rules

Generate custom design system rules from Figma designs via Figma MCP API.

24.7k|1.7k|Updated Nov 25, 2025
Search Tags:#consistency#code generation#design system#figma#ai coding agents
One-click install
npx skills add https://github.com/openai/skills --skill figma-create-design-system-rules-openai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-create-design-system-rules
Source: https://github.com/openai/skills/tree/main/skills/.curated/figma-create-design-system-rules
Command: npx skills add https://github.com/openai/skills --skill figma-create-design-system-rules-openai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pypdf, pdfplumber, pdf2image, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of custom design system rules for your project, ensuring consistent and high-quality code generation from Figma designs.

Core Features & Use Cases

  • Custom Rule Generation: Automatically generate design system rules tailored to your project's specific needs.
  • Figma Integration: Integrates with Figma MCP server for seamless Figma-to-code workflows.
  • Use Case: Ideal for onboarding AI coding agents to a new project or standardizing design system conventions across a team.

Quick Start

Use the figma-create-design-system-rules skill to generate design system rules for your project.

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 automate design system rule generation from Figma files?▼

You can automate design system rule generation by using a Skill that integrates with the Figma MCP server to retrieve designs and utilizes Python to output custom rules for consistent code generation.

How do I standardize Figma-to-code workflows for AI coding agents?▼

Standardize Figma-to-code workflows by generating custom design system rules tailored to your project, ensuring AI coding agents output consistent, high-quality code that matches design conventions.

Do I need a Figma MCP server connection to generate design system rules?▼

Yes, you need an active Figma MCP server connection to retrieve design data, and you must provide access to your project codebase to generate accurate custom design system rules.

Can I use Python to extract design tokens and create rules for Figma designs?▼

Yes, the rule generation process utilizes Python alongside libraries like pypdf, pdfplumber, and pdf2image to automate the extraction and creation of design system rules from Figma designs.

What is the best way to onboard AI coding agents to a new design system?▼

The best way to onboard AI coding agents is to automatically generate custom design system rules from your Figma files, providing the agents with strict conventions for consistent code quality.

Does this design system rule generator work without access to the project codebase?▼

No, project codebase access is required alongside the Figma MCP server connection to ensure the generated design system rules are accurately tailored to your specific project environment.

Related Skills

Explore More Software Engineering Skills→
OniroHuaverOniroHuaver
30

figma-create-design-system-rules

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

Community
Advanced
tech-leads-clubtech-leads-club
5.0k

figma-implement-design

Translate Figma designs into production-ready UI code via Figma MCP.

Official
Advanced
cnhxcnhx
1

pdf

Extract text, tables, and form data from PDF files into structured formats.

Community
Intermediate
HeartcoolmanHeartcoolman
88

figma-create-design-system-rules

Generate design system rules for Figma projects via Python scripts.

Community
Advanced