用途:这是 ui-craft 技能下的一个子技能(色彩视角)。若已安装 ui-craft,应先读其 SKILL.md 中的 Discovery、Anti-Slop、Craft Test,再套用本视角。通过 $ARGUMENTS 指定要上色的 UI,并加载 ui-craft 技能。
核心规则:90% 以上中性色,单一强调色,每个视口 3-5 个落点。先执行这条规则,再加任何颜色——更多颜色不等于更多设计。
上色前先问品牌。有品牌色就用品牌色;没有则提供 2-3 个 OKLCH 方案,至少含一个暖色(如 oklch(0.67 0.19 45))和一个冷色(如 oklch(0.60 0.18 250))。不要默认用蓝色。
色彩值得出现的位置:主 CTA 背景;一个关键指标着色(强调色约 8% 透明度作背景,数字本身用全强度);当前导航项的激活状态(下划线、圆点或轻微底色,任选其一);状态点(成功/警告/危险),6-8px,不要胶囊;焦点环(:focus-visible)。
色彩不该去的地方(反 slop):标题渐变文字;每张卡片都加彩色左/上边框;每个标签都用同款彩色小片;用 emoji 当图标来“加颜色”;本可用普通 ↑/↓ 加 tabular-nums 更清晰时,却用绿/红趋势箭头。
密度门控(VISUAL_DENSITY):≤4 只用单一强调色,最多 3 个落点;5-7 单一强调色、3-5 个落点,允许状态点;8+ 允许在单一强调色之外使用语义色板(成功/警告/危险),仪表盘与数据类 UI 可适用。
过度用色则削减:若界面已被颜色淹没,本命令同样负责减色。统计每视口强调色数量,削到 1-3 个;主 CTA 保留强调色,其余除非是真实语义状态(真实状态上的成功/警告/危险)一律中性化。去掉装饰性颜色:背景图案、无意义的着色卡片、每个列表项的彩色左边框、标题渐变、每个标签的彩色小片。保留语义、砍掉装饰:状态点、焦点环、激活态导航下划线保留,作为装饰的颜色去掉。
可参考:references/color.md(OKLCH、令牌、深色模式、对比度)与 references/accessibility.md(AA/AAA 对比度)。
输出:直接改代码;把字面 hex 提升为 CSS 变量(--color-accent、--color-accent-tint),若已有令牌命名则沿用。打印 Review Format 表格,每个落点一行,文字用途附对比度检查(AA/AAA)。
下一步:/tokens,把颜色决策提升为持久令牌主干,使其在会话之后仍保留。资料未提供具体安装命令与价格信息。