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

Ready to run

npx skills add https://github.com/redongreen/uSpec --skill create-color

💬 Prompt for ChatGPT / Claude Chat▼

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.