What is OKLCH and why does the skill use it?

OKLCH is a modern color space that is perceptually uniform. The skill uses it to create harmonious color scales where equal steps in lightness look consistent to the human eye, unlike traditional RGB or HEX.

Will it make my website look over-saturated or like 'AI slop'?

No. The skill is built on the principle of 'less is more' and explicitly avoids generic AI aesthetics like rainbow gradients, focusing instead on strategic, minimal, and purposeful color application.

Does this skill follow accessibility guidelines?

Yes, the Colorize skill prioritizes WCAG compliance, ensuring appropriate contrast ratios and providing multiple visual indicators beyond just color.

Can I use my own brand colors?

Absolutely. The skill includes a mandatory preparation phase where it gathers your existing brand palette and tone to ensure consistency across your codebase.

Strategic UI Colorizer

Name: Strategic UI Colorizer
Author: SHUAXINDIARY

bySHUAXINDIARY

0•

デザインツール

Transforms monochromatic or gray interfaces into engaging, visually rich designs using strategic color application and semantic principles.

The Strategic UI Colorizer skill helps developers move beyond bland, gray-scale interfaces by introducing purposeful color that enhances user experience, hierarchy, and brand personality. It follows a rigorous methodology that begins with context gathering and accessibility checks, ensuring that color additions are never arbitrary. By utilizing the OKLCH color space and focusing on semantic meanings—such as status indicators, accent surfaces, and purposeful typography—this skill creates sophisticated, professional designs that guide user attention without overwhelming them.

主な機能

01UI hierarchy enhancement through primary accents, tinted backgrounds, and decorative elements

02Accessibility-first design ensuring WCAG contrast compliance and non-color-dependent indicators

030 GitHub stars

04Automated context gathering to align with existing brand colors and target audience needs

05Semantic color application for success, error, warning, and informational states

06Strategic color palette generation using the OKLCH color space for perceptual uniformity

ユースケース

01Ensuring an existing application meets modern accessibility standards while maintaining visual appeal

02Revitalizing a 'gray-box' prototype or internal tool into a polished, professional interface

03Adding visual hierarchy and semantic meaning to data-heavy dashboards or complex forms

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add shuaxindiary/index-page colorize

For use in Claude.ai and ChatGPT