colorize

为过于单调、灰暗或缺乏视觉温度与个性的设计，有策略地引入色彩。

必须完成的准备工作

调用 /impeccable — 其中包含设计原则、反模式和 Context Gathering Protocol。继续之前，请遵循该协议 — 如果尚无设计上下文，必须先运行 /impeccable teach。此外，还要收集：现有品牌颜色。

---

评估色彩应用机会

分析当前状况并找出机会：

1. 了解当前状况：

   • 缺少色彩：是纯灰度设计？中性色有限？只有一种过于谨慎的点缀色？
   • 错失的机会：哪些地方可以通过色彩传达含义、建立层级或增添趣味？
   • 上下文：对于这个领域和受众，什么样的色彩合适？
   • 品牌：是否有我们应该使用的现有品牌颜色？

2. 找出色彩能发挥作用的地方：

   • 语义含义：成功（绿色）、错误（红色）、警告（黄色／橙色）、信息（蓝色）
   • 层级：吸引用户注意重要元素
   • 分类：区分不同的区域、类型或状态
   • 情感基调：温暖、活力、信任、创意
   • 导航指引：帮助用户导航并理解结构
   • 趣味性：营造视觉亮点与个性

如果无法从代码库中判断以上任何一点，请直接询问用户，澄清无法推断的内容。

重要：更多色彩 ≠ 更好。每次都应选择有策略的用色，而非把颜色胡乱堆砌。每种颜色都应有明确用途。

制定色彩策略

制定有目的的色彩引入计划：

• 调色板：哪些颜色适合品牌／上下文？（除中性色外，最多选择 2-4 种颜色）
• 主导色：哪种颜色将用于 60% 的彩色元素？
• 点缀色：哪些颜色用于对比和强调？（分别占 30% 和 10%）
• 应用策略：每种颜色会出现在哪里，原因是什么？

重要：色彩应强化层级和含义，而非制造混乱。越是重要之处，越应少而精。

有策略地引入色彩

在以下方面系统地添加色彩：

语义色彩

• 状态指示器：

  • 成功：绿色调（祖母绿、森林绿、薄荷绿）
  • 错误：红色／粉色调（玫瑰红、深红、珊瑚红）
  • 警告：橙色／琥珀色调
  • 信息：蓝色调（天蓝、海蓝、靛蓝）
  • 中性：非活动状态使用灰色／石板灰

• 状态徽标：为各种状态（活动、待处理、已完成等）使用彩色背景或边框

• 进度指示器：使用彩色进度条、圆环或图表显示完成度或健康状况

点缀色的应用

• 主要操作：为最重要的按钮／行动号召（CTA）着色
• 链接：为可点击文本添加颜色（同时确保可访问性）
• 图标：为关键图标着色，增强辨识度与个性
• 标题／题目：为分区标题或关键标签添加颜色
• 悬停状态：在交互时引入颜色

背景与表面

• 着色背景：将纯灰色背景（#f5f5f5）替换为温暖的中性色（oklch(97% 0.01 60)）或冷色调（oklch(97% 0.01 250)）
• 彩色区域：使用细微的背景色区分不同区域
• 渐变背景：使用细腻且有意设计的渐变增加层次（不要使用千篇一律的紫蓝渐变）
• 卡片与表面：为卡片或表面添加轻微色调，营造温暖感

使用 OKLCH 表示颜色：它具有感知均匀性，意味着相同的明度变化看起来也相同。非常适合生成和谐的色阶。

数据可视化

• 图表：使用颜色编码类别或数值
• 热力图：用颜色强度表示密度或重要性
• 对比：使用颜色区分不同数据集或时间段

边框与强调

• 强调边框：为卡片或区域添加彩色左边框／上边框
• 下划线：使用彩色下划线突出内容或表示活动状态
• 分隔线：用细微的彩色分隔线替代灰色线条
• 焦点环：使用与品牌相配的彩色焦点指示器

字体颜色

• 彩色标题：使用品牌色呈现章节标题（同时保持足够的对比度）
• 高亮文本：使用颜色突出重点或类别
• 标签与标记：使用小型彩色标签展示元数据或类别

装饰元素

• 插图：添加彩色插图或图标
• 形状：使用品牌色的几何形状作为背景元素
• 渐变：添加彩色渐变叠加效果或网格背景
• 斑块／有机形状：使用柔和的彩色形状增添视觉趣味

平衡与完善

确保添加颜色能提升效果，而非喧宾夺主：

保持层次

• 主色（60%）：主要品牌色或使用最多的强调色
• 次色（30%）：用于丰富变化的辅助色
• 强调色（10%）：用于突出关键时刻的高对比度颜色
• 中性色（其余部分）：灰色／黑色／白色，用于构建结构

无障碍

• 对比度：确保符合 WCAG 标准（文本为 4.5:1，UI 组件为 3:1）
• 不要只依赖颜色：搭配图标、标签或图案使用颜色
• 进行色盲测试：确认红绿组合对所有用户都适用

一致性

• 统一的调色板：使用预先定义的调色板中的颜色，不要随意选择
• 系统化应用：始终为颜色赋予一致的含义（绿色始终表示成功）
• 色温一致：暖色调调色板保持暖色，冷色调保持冷色

切勿：

• 使用彩虹中的所有颜色（除中性色外，选择 2–4 种颜色）
• 随意使用颜色而不赋予其语义含义
• 在彩色背景上使用灰色文本——这样会显得黯淡；应改用更深的背景色或透明度
• 使用纯灰色作为中性色——添加细微的暖色或冷色色调，更显精致
• 在大面积区域使用纯黑色（#000）或纯白色（#fff）
• 违反 WCAG 对比度要求
• 只用颜色作为指示方式（这会造成无障碍问题）
• 让所有元素都变得五彩缤纷（这会适得其反）
• 默认使用蓝紫渐变（这会产生 AI 垃圾美学）

验证颜色的使用效果

测试添加颜色是否改善了体验：

• 层次更清晰：颜色是否恰当地引导注意力？
• 含义更明确：颜色是否帮助用户理解状态／类别？
• 更具吸引力：界面是否感觉更温暖、更亲切？
• 仍然无障碍：所有颜色组合是否都符合 WCAG 标准？
• 不过分：颜色是否平衡且使用得当？

请记住：颜色富有情感且力量强大。用它营造温暖感、引导注意力、传达含义并展现个性。但克制与策略比饱和度和多样性更重要。可以丰富多彩，但要有目的性。