figma-create-design-system-rules

Name: figma-create-design-system-rules
Availability: InStock
Author: OpenAI

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

Ready to run

npx skills add https://github.com/openai/skills --skill figma-create-design-system-rules-openai

💬 Prompt for ChatGPT / Claude Chat▼

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.