create-color
CommunityMap UI elements to design tokens.
Design & Creative#automation#figma#design tokens#component documentation#UI specification#color annotation
Authorredongreen
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: create-color Download link: https://github.com/redongreen/uSpec/archive/main.zip#create-color Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.