Name: create-design-system-rules
Rating: 83.2 (1 reviews)
Author: figma

create-design-system-rules

Generates 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.

1.63x

Quality

76%

Does it follow best practices?

Impact

100%

1.63x

Average score across 3 eval scenarios

Securityby

Advisory

Suggest reviewing before use

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/create-design-system-rules/SKILL.md

Evaluation results

100%

50%

Set Up Figma Design System Rules for Storefront UI

Cursor rule file format and Figma integration flow

Criteria

Without context

With context

Correct file path

100%

YAML frontmatter present

100%

Custom globs pattern

100%

alwaysApply field

100%

get_design_context first

100%

get_screenshot before implementation

100%

Validate before marking complete

100%

Figma output as representation

100%

No hardcoded colors

100%

No new icon packages

100%

Use localhost asset source

100%

Project-specific component path

100%

37%

Establish Figma-to-Code Guidelines for Vue Design System

Claude Code rule file with codebase-specific paths and asset rules

Criteria

Without context

With context

CLAUDE.md file

100%

Figma flow section

100%

get_design_context first

100%

get_screenshot step

100%

Validate at end

25%

100%

Specific token file path

100%

No hardcoded colors

100%

Specific component path

100%

No new icon packages

100%

Use localhost asset source

100%

Figma output as representation

62%

100%

Project styling approach

100%

28%

Add Figma Integration Guidelines to Angular Project AI Rules

Codex CLI AGENTS.md append and design token rules

Criteria

Without context

With context

Saved in AGENTS.md

100%

Original content preserved

100%

New section appended

100%

get_design_context first

100%

get_screenshot before coding

100%

Validate against Figma

100%

No new icon packages

100%

Use localhost sources

100%

No hardcoded colors

100%

Project-specific component path

100%

Repository: figma/mcp-server-guide
Commit: f046182

Evaluated: about 1 month ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Set Up Figma Design System Rules for Storefront UI Establish Figma-to-Code Guidelines for Vue Design System Add Figma Integration Guidelines to Angular Project AI Rules

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.