Refines UI color palettes and semantic systems to improve visual hierarchy and warmth.

Install

mkdir -p .claude/skills/colorize && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12807" && unzip -o skill.zip -d .claude/skills/colorize && rm skill.zip

Installs to .claude/skills/colorize

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Build or refine UI color systems, warmth, semantic color, and color-based hierarchy in designs that are too gray, monochromatic, or missing color meaning. Use when the user mentions dull colors, gray UI, missing warmth, weak semantic color, or a need for stronger color hierarchy.
280 chars✓ has a “when” triggerlonger than Claude Code's old 250-char listing cap (fine on current versions)
Intermediate

Key capabilities

  • Build UI color systems
  • Refine existing UI color systems
  • Introduce warmth to dull designs
  • Implement semantic color usage
  • Establish color-based hierarchy
  • Address monochromatic or gray UI issues

How it works

This skill refines UI color systems by analyzing existing designs and applying principles of warmth, semantic color, and hierarchy to address issues like dullness or monochromatic appearance.

Inputs & outputs

You give it
A screen, theme, or color system description
You get back
A refined UI color system with improved warmth, semantic meaning, and hierarchy

When to use colorize

  • Fix dull UI colors
  • Define color system
  • Improve semantic design

About this skill

This compatibility wrapper exposes the colorize skill for the .codex/skills layout while keeping skills/colorize/SKILL.md as the canonical source of truth.

Follow the canonical instructions in ../../../skills/colorize/SKILL.md.

When not to use it

  • When the user does not mention dull colors
  • When the user does not mention gray UI
  • When the user does not mention missing warmth

Limitations

  • Requires an existing screen, theme, or color system to refine
  • Focuses on warmth, semantic color, and color-based hierarchy
  • Addresses designs that are too gray, monochromatic, or missing color meaning

How it compares

This workflow specifically targets the enhancement of UI color systems for warmth, semantic meaning, and hierarchy, providing a focused approach beyond general color selection.

Compared to similar skills

colorize side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
colorize (this skill)03moNo flagsIntermediate
penpot-uiux-design276moReviewAdvanced
stitch-ui-design264moNo flagsBeginner
ui-design-system297moReviewBeginner

Try saying

Example prompts that trigger this skill in your AI assistant.

You might also like

penpot-uiux-design

github

Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".

27145

stitch-ui-design

sickn33

Expert guide for creating effective prompts for Google Stitch AI UI design tool. Use when user wants to design UI/UX in Stitch, create app interfaces, generate mobile/web designs, or needs help crafting Stitch prompts. Covers prompt structure, specificity techniques, iteration strategies, and design-to-code workflows for Stitch by Google.

26126

ui-design-system

davila7

UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.

29108

elegant-design

rand

Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.

21108

ui-ux-designer

sickn33

Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, user flows, or interface optimization.

4171

visual-design-foundations

wshobson

Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.

547

Search skills

Search the agent skills registry