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.
Install with Tessl CLI
npx tessl i github:figma/mcp-server-guide --skill create-design-system-rules79
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillAgent success when using this skill
Validation for skill structure
Evaluation results
100%
50%Set Up Figma Design System Rules for Storefront UI
Cursor rule file format and Figma integration flow
Correct file path
0%
100%
YAML frontmatter present
100%
100%
Custom globs pattern
100%
100%
alwaysApply field
100%
100%
get_design_context first
0%
100%
get_screenshot before implementation
0%
100%
Validate before marking complete
100%
100%
Figma output as representation
0%
100%
No hardcoded colors
100%
100%
No new icon packages
100%
100%
Use localhost asset source
0%
100%
Project-specific component path
100%
100%
Without context: $0.2154 · 1m 6s · 8 turns · 9 in / 3,367 out tokens
With context: $0.3681 · 1m 23s · 13 turns · 13 in / 4,085 out tokens
100%
37%Establish Figma-to-Code Guidelines for Vue Design System
Claude Code rule file with codebase-specific paths and asset rules
CLAUDE.md file
100%
100%
Figma flow section
100%
100%
get_design_context first
0%
100%
get_screenshot step
0%
100%
Validate at end
25%
100%
Specific token file path
100%
100%
No hardcoded colors
100%
100%
Specific component path
100%
100%
No new icon packages
100%
100%
Use localhost asset source
0%
100%
Figma output as representation
62%
100%
Project styling approach
100%
100%
Without context: $0.2227 · 1m 9s · 8 turns · 9 in / 3,449 out tokens
With context: $0.3597 · 1m 20s · 13 turns · 268 in / 4,056 out tokens
100%
28%Add Figma Integration Guidelines to Angular Project AI Rules
Codex CLI AGENTS.md append and design token rules
Saved in AGENTS.md
100%
100%
Original content preserved
100%
100%
New section appended
100%
100%
get_design_context first
0%
100%
get_screenshot before coding
0%
100%
Validate against Figma
100%
100%
No new icon packages
100%
100%
Use localhost sources
0%
100%
No hardcoded colors
100%
100%
Project-specific component path
100%
100%
Without context: $0.1953 · 50s · 8 turns · 9 in / 2,823 out tokens
With context: $0.3546 · 1m 17s · 14 turns · 269 in / 3,873 out tokens
- Evaluated
- Agent
- Claude Code
Table of Contents
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.