How does the Colorize skill avoid generic 'AI slop' colors?

The skill mandates a context-gathering phase to understand your specific brand identity and audience. It also follows strict design principles like the 60-30-10 rule to ensure color is applied with purpose rather than randomly.

Does this skill handle web accessibility (WCAG)?

Yes, accessibility is a core part of the workflow. The skill verifies contrast ratios (4.5:1 for text) and ensures that color is never the only indicator for critical information.

Can I target specific components for colorization?

Yes, the skill includes an optional 'target' argument that allows you to focus the colorization process on specific features, components, or sections of your interface.

Why does the skill use OKLCH for color generation?

OKLCH is a perceptually uniform color space. This means that equal changes in lightness values look equal to the human eye, resulting in more harmonious and consistent color scales compared to RGB or HEX.

Strategic UI Colorizer

Name: Strategic UI Colorizer
Author: SHUAXINDIARY

bySHUAXINDIARY

0•

디자인 도구

Enhances monochromatic interfaces by strategically introducing purposeful color palettes and semantic highlights to improve visual hierarchy and engagement.

The Colorize skill helps developers transform dull, grayscale, or uninspiring interfaces into vibrant, professional designs by applying intentional color theory. It goes beyond simple aesthetic changes, using semantic color for state indicators, OKLCH for harmonious scales, and the 60-30-10 rule to ensure visual balance. By analyzing brand identity and user context before application, it avoids generic aesthetics and ensures that every color choice serves a functional purpose, such as improving wayfinding, accessibility, and user delight.

주요 기능

01Semantic color application for status indicators, badges, and progress tracking

020 GitHub stars

03Accessibility-first design ensuring WCAG contrast compliance for all text and UI

04Strategic hierarchy improvement via the 60-30-10 distribution rule

05Sophisticated neutral tinting to replace flat grays with professional warm or cool tones

06Context-aware color palette generation using OKLCH for perceptual uniformity

사용 사례

01Improving user navigation by adding semantic color cues to status badges and primary actions

02Transforming an MVP or wireframe from basic grayscale to a branded, high-fidelity interface

03Refining landing pages with subtle gradients and background tints to add depth and visual interest

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add shuaxindiary/index-page colorize

For use in Claude.ai and ChatGPT