用途
colorize 用于为过于单色(monochromatic)、灰暗或缺乏视觉温暖与个性的设计战略性地引入色彩,使界面更具吸引力、表现力和参与感。当用户提及相关内容时可使用。
强制准备
- 调用 /impeccable——其中包含设计原则、反模式与上下文收集协议(Context Gathering Protocol)。
- 在继续之前遵循该协议;若尚无设计上下文,必须首先运行 /impeccable teach。
- 额外收集:现有品牌色。
主要能力
评估色彩机会
分析当前状态并识别机会:
- 理解当前状态:色彩缺失(纯灰度?有限中性色?单一怯懦的强调色?);错失的机会(色彩可在何处添加含义、层级或愉悦感);上下文(对该领域和受众而言什么是得体的);品牌(是否有现有品牌色可用)。
- 识别色彩增值点:语义含义(成功绿、错误红、警告黄/橙、信息蓝)、层级(聚焦重要元素)、分类(不同区块、类型或状态)、情绪基调(温暖、活力、信任、创造力)、寻路(帮助用户导航与理解结构)、愉悦(视觉趣味与个性的时刻)。
- 若任何一项无法从代码库推断,需直接向用户询问澄清。
- 关键:更多色彩 ≠ 更好。有策略的色彩永远胜过彩虹乱喷。每种颜色都应有一个目的。
规划色彩策略
创建有目的的引入计划:
- 调色板:什么颜色匹配品牌/上下文?(除中性色外最多选 2-4 种颜色)
- 主色:哪种颜色占据 60% 的有色元素?
- 强调色:哪些颜色提供对比与高亮?(30% 与 10%)
- 应用策略:每种颜色出现在何处及其原因。
- 重要:色彩应增强层级与含义,而非制造混乱。越重要时越应少即是多。
战略性引入色彩
按以下维度系统性地添加色彩:
语义色:状态指示(成功用绿色调如 emerald/forest/mint,错误用红/粉调如 rose/crimson/coral,警告用橙/琥珀调,信息用蓝色调如 sky/ocean/indigo,非激活态用灰/石板灰);状态徽章(用彩色背景或边框表示状态如激活、待处理、已完成);进度指示(彩色条、环或图表显示完成度或健康度)。
强调色应用:主要操作(为最重要的按钮/CTA 上色)、链接(为可点击文本添加颜色并保持无障碍)、图标(为关键图标上色以助识别与个性)、页眉/标题(为区块标题或关键标签上色)、悬停态(在交互时引入颜色)。
背景与表面:着色背景(用暖中性色 oklch(97% 0.01 60) 或冷色调 oklch(97% 0.01 250) 替换纯灰 #f5f5f5);彩色区块(用微妙背景色分隔区域);渐变背景(用微妙、有意的渐变增加深度,而非通用紫蓝);卡片与表面(轻微为卡片或表面着色以增加温暖感)。使用 OKLCH 进行色彩设计:它在感知上均匀,亮度上等步长看起来相等,适合生成和谐的色阶。
数据可视化:图表(用色彩编码类别或数值)、热力图(颜色强度显示密度或重要性)、对比(为不同数据集或时间范围配色)。
边框与点缀:强调边框(为卡片或区块添加彩色左/上边框)、下划线(为强调或激活态使用彩色下划线)、分隔线(用微妙彩色分隔线替代灰线)、焦点环(与品牌匹配的彩色焦点指示器)。
排版色彩:彩色标题(区块标题使用品牌色并保持对比度)、高亮文本(用于强调或分类)、标签与徽章(用于元数据或分类的小彩色标签)。
装饰元素:插画(添加彩色插画或图标)、形状(品牌色的几何形状作为背景元素)、渐变(彩色渐变叠加或网格背景)、斑点/有机形状(柔和的彩色形状增加视觉趣味)。
平衡与精修
确保添加色彩是改进而非压垮:
- 维持层级:主色(60%)为主品牌色或最常用强调色;辅助色(30%)为支持性颜色以增加变化;强调色(10%)用于关键时刻的高对比;中性色(其余)用于结构。
- 无障碍:对比度需符合 WCAG(文本 4.5:1,UI 组件 3:1);不要仅依赖颜色(同时使用图标、标签或图案);测试色盲(验证红绿组合对所有用户可用)。
- 凝聚力:一致调色板(使用已定义调色板中的颜色,而非随意选择);系统性应用(同一颜色含义贯穿始终,绿色始终=成功);温度一致(暖色调保持暖,冷色调保持冷)。
禁止事项(NEVER)
- 使用彩虹上的每一种颜色(除中性色外选 2-4 种)。
- 无语义地随机应用颜色。
- 在有色背景上放灰色文本——看起来发灰;改用背景色的更深色调或透明度。
- 中性色使用纯灰——添加微妙的颜色着色(暖或冷)以提升精致感。
- 在大面积区域使用纯黑(#000)或纯白(#fff)。
- 违反 WCAG 对比度要求。
- 将颜色作为唯一指示(无障碍问题)。
- 让所有东西都五颜六色(违背初衷)。
- 默认使用紫蓝渐变(AI 垃圾美学)。
验证色彩添加
测试着色是否改善体验:层级更好(色彩是否恰当引导注意);含义更清晰(色彩是否帮助用户理解状态/分类);更具参与感(界面是否感觉更温暖、更吸引人);仍无障碍(所有色彩组合是否满足 WCAG 标准);不过度(色彩是否平衡且有意义)。
使用方式
先调用 /impeccable,若无需上下文则运行 /impeccable teach,收集品牌色后依次执行:评估色彩机会 → 规划色彩策略 → 战略性引入色彩 → 平衡与精修 → 验证色彩添加。具体安装命令、URL 或调用参数暂未提供。
适用场景
适用于界面视觉设计,尤其是现有设计过于单色、灰暗、缺乏视觉温度与个性时;也适用于需要借助语义色、强调色、数据可视化配色等提升层级与含义的场景。
限制
- 具体平台、运行环境、收费与价格信息暂未提供。
- 需要依赖 /impeccable 技能与其上下文收集协议。
- 具体调用方式与参数文档暂未提供。记忆要点:色彩是情感化且强大的,用它创造温暖、引导注意、传达含义并表达个性;但克制与策略比饱和与多样更重要。要有色彩,但要有意图。