Agent skill · design visual · aiskillstore
colorize
Add strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive.
Why this skill is useful
Provides a structured approach to color application that enhances visual design and user engagement, which the AI may not generate independently.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. MANDATORY PREPARATION Use the frontend-design skill — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run teach-impeccable first. Additionally gather: existing brand colors. --- Assess Color Opportunity Analyze the current state and identify opportunities: 1. Understand current state: Color absence: Pure grayscale? Limited neutrals? One timid accent? Missed opportunities: Where could color add meaning, hierarchy, or delight? Context: What's appropriate for this domain and audience? Brand: Are there existing brand colors we should use? 2. Identify where color adds value: Semantic meaning: Success (green), error (red), warning (yellow/orange), info (blue) Hierarchy: Drawing attention to important elements Categorization: Different sections, types, or states Emotional tone: Warmth, energy, trust, creativity Wayfinding: Helping users navigate and understand structure Delight: Moments of visual interest and personality If any of these are unclear from the codebase, {{askinstruction}} CRITICAL: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose. Plan Color Strategy Create a purposeful color introduction plan: Color palette: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals) Dominant color: Which color owns 60% of colored elements? Accent colors: Which colors provide contrast and highlights? (30% and 10%) Application strategy: Where does each color appear and why? IMPORTANT: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/colorize