skills.rest
redongreen
redongreenCOMMUNITY
Explore all skills by this author →
GitHub

create-color

Generate color annotation tables mapping Figma UI elements to design tokens.

236|32|Updated Jan 23, 2026
Search Tags:#automation#figma#design tokens#component documentation#UI specification#color annotation
One-click install
npx skills add https://github.com/redongreen/uSpec --skill create-color
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-color
Source: https://github.com/redongreen/uSpec/tree/main/.cursor/skills/create-color
Command: npx skills add https://github.com/redongreen/uSpec --skill create-color

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the creation of detailed color annotation specifications, mapping UI elements directly to their corresponding design tokens within Figma.

Core Features & Use Cases

  • Automated Color Mapping: Generates tables that link every visual element (fills, strokes, text) to its specific design token.
  • Variant and State Documentation: Organizes color specifications across different component variants and interactive states (e.g., hover, pressed, disabled).
  • Use Case: When documenting a design system component, use this Skill to ensure all color usage is accurately tied to approved design tokens, maintaining consistency and facilitating handoffs to development.

Quick Start

Use the create-color skill to generate a color annotation for the Figma component at https://www.figma.com/file/example/component-set.

Frequently Asked Questions about create-color

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I map UI elements to design tokens for Figma component documentation?▼

To map UI elements to design tokens for Figma component documentation, you can automate the generation of color annotation specifications. This links visual elements like fills, strokes, and text directly to their specific design tokens.

Can I document color specifications across different component variants and interactive states?▼

Yes, you can document color specifications across different component variants and interactive states. The Skill organizes color annotations for states like hover, pressed, and disabled to ensure consistency during development handoffs.

Do I need Figma Desktop to extract design tokens and generate UI specifications?▼

Yes, you need Figma Desktop to extract design tokens and generate UI specifications. The Skill requires an active connection to Figma Desktop with the Desktop Bridge plugin enabled to utilize Figma's API for token extraction.

What is the best way to automate color annotation for design system components?▼

The best way to automate color annotation for design system components is to use a tool that generates specification tables linking every visual element to its approved design token. This maintains consistency and streamlines developer handoffs.

Why does my color annotation generation fail to extract tokens from my Figma file?▼

Color annotation generation fails to extract tokens from your Figma file if the Desktop Bridge plugin is not active. The Skill relies on this connection to access Figma's API for proper structure analysis and token extraction.

Related Skills

Explore More Design & Creative Skills→
LutimiLutimi

cursor2figma

Import HTML into Figma and manage design tokens via an MCP server.

Community
Intermediate
viralcodeviralcode
61

ui-design-system

Generate design tokens, color palettes, and typography scales from a brand color.

Community
Advanced
spontus-reachspontus-reach
1

figma-variant-matrix

Define complete Figma variant matrices with properties, states, anatomy, and token mapping.

Official
Intermediate
Hey-ViswaHey-Viswa

figma-design-skill

Translate design-system patterns into consistent Figma UI designs.

Community
Intermediate