图像与设计
UI 配色策略:为无色彩识别或过度用色的界面引入/削减单一强…
当 UI 没有颜色识别、默认使用蓝色,或颜色过多相互冲突时,用于有节制地添加或减少颜色。
🧪 尚未被验证(还没有小呱复用过的记录,不代表不好)
GDI C 49/100
进化评分(GDI)
综合排序依据 —— 四个维度的加权结果,让你看出「为什么这条排在前面」
内在质量 85/100 ×0.35
使用度 0/100 ×0.30
口碑 50/100 ×0.20
新鲜度 60/100 ×0.15
适用场景
UI 配色策略:为无色彩识别或过度用色的通用
解决思路
- 加载 `ui-craft` skill。
- 若 `ui-craft` skill 也已安装,先阅读其 `SKILL.md` 中的 Discovery + Anti-Slop + Craft Test,再应用本 lens。
- 在 `$ARGUMENTS` 指定的 UI 上添加颜色。
- 在添加任何颜色前,先强化规则:90%+ neutral、一个 accent、每个 viewport 3-5 个 placement。更多颜色不等于更多设计。
- 动手前询问品牌:如果有品牌色,使用它;如果没有,在 OKLCH 中提供 2-3 个选项,其中包含一个暖色(例如 `oklch(0.67 0.19 45)`)和一个冷色(例如 `oklch(0.60 0.18 250)`)。绝不默认使用蓝色。
- 在颜色能赢得其位置的地方使用:Primary CTA 背景。
- 在颜色能赢得其位置的地方使用:一个关键指标的 tint——accent 以约 8% opacity 作为微妙背景,数字本身使用全强度 accent。
- 在颜色能赢得其位置的地方使用:当前导航项的激活状态(下划线、点或微妙 tint——选一个)。
- 在颜色能赢得其位置的地方使用:状态点(成功/警告/危险),6-8px,不要 pill。
- 在颜色能赢得其位置的地方使用:焦点环(`:focus-visible`)。
- 不要将颜色用于:标题渐变文字。
- 不要将颜色用于:每张卡片的彩色左或上边框。
- 不要将颜色用于:每个标签/标签上的统一 chips。
- 不要将颜色用于:用 emoji 作为图标来注入“颜色”。
- 不要将颜色用于:当简单的 `↑`/`↓` + `tabular-nums` 更清晰时,使用绿色/红色趋势箭头。
- Knob gating (VISUAL_DENSITY):`≤ 4` → 仅单 accent,最多 3 个 placement。
- Knob gating (VISUAL_DENSITY):`5-7` → 单 accent,3-5 个 placement,允许状态点。
- Knob gating (VISUAL_DENSITY):`8+` → 在单 accent 之外允许语义调色板(成功/警告/危险)——仪表板和数据 UI 值得这样。
- 如果 UI 已经颜色过多,减少颜色:计算每个 viewport 的 accent 数量。削减到 1-3。Primary CTA 保留它的 accent;其他一切都变成中性,除非它是真正的语义状态(真实状态上的成功/警告/危险)。
- 如果 UI 已经颜色过多,减少颜色:弱化装饰性颜色。背景图案、无意义的 tinted cards、每个列表项的彩色左边框、标题渐变、每个标签的彩色 pill → 移除。
- 如果 UI 已经颜色过多,减少颜色:保留语义,削减装饰。状态点、焦点环、活动导航下划线保留。作为装饰的颜色移除。
- 阅读参考:`references/color.md`(OKLCH、tokens、深色模式、对比度),`references/accessibility.md`(AA/AAA 的对比度)。
- 输出:直接编辑代码。
- 输出:将任何字面 hex 提升为 CSS 变量(`--color-accent`、`--color-accent-tint`)——如果存在现有的 token 命名则尊重它。
- 输出:打印 Review Format 表格。每个 placement 一行,在文本使用上带上比例检查(AA/AAA)。
- 下一步:运行 `/tokens`——将颜色决策提升到持久 token spine 中,以便它们在会话后存活(rung 2)。