Appearance
让 AI 生成"不像 AI 生成的"配色,不是靠更长的提示词,而是给它一套可执行的原则:用感知空间、对比度先行、性格先于色相、用真算法生成色板。本指南提炼自 GitHub 上两个直接教 AI 用色的项目(skill.color-expert 与 design-for-ai),给出 7 条规则与接入方式。
技法概述
AI 默认会收敛到训练数据的统计中心——这就是为什么 AI 生成的界面都长一个样(青底深色 hero、玻璃拟态、等大卡片网格)。设计界对抗它的方法不是"再漂亮一点",而是把色彩理论转成可检查、可执行的规则,喂给 AI。本指南的原则来自:
- skill.color-expert(Agent 技能,144 篇色彩科学参考)
- design-for-ai(Claude Code 插件,基于《Design for Hackers》)
两者都已安装到本知识库 skills/color-expert/(技能本体存放处,随知识库一起备份/迁移;.claude/skills/color-expert 是指向它的目录联接,保证 Claude Code 自动加载),使用 Claude Code 管理知识库时自动可用。
适用场景
- 让 AI 生成网页/应用界面配色,要求专业、不撞款
- AI 生图(海报、封面、配图)时指定和谐色板
- 搭建"AI 自动出设计方案"的工作流,需要可校验的色彩产出
- 评估 AI 给出的 hex 值是否可信、能否直接使用
操作步骤
第一步:安装色彩技能(一次性)
bash
# 通用(自动装到 Claude Code/Codex/Cursor/Copilot 等技能目录)
npx skills add meodai/skill.color-expert
# 本知识库:技能本体已存放于 skills/color-expert/(.claude/skills/color-expert 为目录联接),无需重复安装
# Claude Code 插件(可选,教 AI 完整设计而不是只配色)
/plugin install design-for-ai@rtd第二步:把 7 条原则写进 AI 的规则文件或提示词
① 用 OKLCH/OKLAB,弃用 HSL — 所有取色、生成、插值在感知空间做。HSL 的 lightness 不符合感知("HSL lightness is a lie")。
② 对比度先行 — 色板生成后必须过 WCAG AA(4.5:1)/ APCA 校验。随机 hex 对只有约 12% 能过 AA,不能靠运气。产出时直接声明每个颜色对的对比度数值。
③ 性格先于色相 — 先定"性格"(pale / muted / vivid / deep / dark 等明度-纯度档位),再定色相。色相优先(hue-first)是弱启发,性格更能预测和谐。
④ 色温 ≠ 色相 — 暖/冷是色相+饱和度同时的系统偏移。描述"暖色"时,要同时移动 hue 和 saturation,不是只改一个值。
⑤ 情绪不由色相单独决定 — "蓝色=平静"不可靠。氛围主要由 chroma(彩度)+ lightness(明度)+ 构图 + 语境驱动。
⑥ 用真算法生成色板 — 别用 coolors.co 这类"不生成"的伪工具(它只随机排列预设色卡)。用 Poline / dittoTones / tints.dev / IQ cosine / color-mix()。
⑦ 消除 AI 味 — 禁:cyan-on-dark hero、玻璃拟态、等大卡片网格、Inter 16px 默认、纯黑阴影(阴影应用色相偏移的深色,如 #0a0a0a 改为同色相更深色)。
第三步:工具链校验(生成 → 运算 → 校验)
生成:poline / dittoTones / tints.dev → 运算:color.js / culori(OKLCH)
校验:SAPC-APCA / Color Buddy(38 条 lint 规则) → 输出:OKLCH 值- 生成色板:用
[色彩理论-色彩空间与工具资源](/学习笔记/设计/设计基础/色彩理论-色彩空间与工具资源)中列出的生成器 - 校验对比度:APCA 工具或 WCAG 计算器,不达标就调 lightness,而不是换一个"看起来差不多"的颜色
参数详解
| 参数/概念 | 含义 | AI 使用时 |
|---|---|---|
| OKLCH | L(明度)-C(彩度)-H(色相) 感知空间 | 生成、插值、渐变一律在此空间 |
| 性格 (character) | pale/muted/vivid/deep/dark 档位 | 先于色相确定,作为主约束 |
| 对比度 (contrast) | WCAG AA ≥4.5:1,APCA 90 更严 | 每个文字/背景对都显式校验 |
| 色温 (temperature) | hue+saturation 同移 | 暖色 = 偏红相 + 提彩度,冷色反之 |
| AI-tell | AI 生成的标志性套路组合 | 生成后按清单自查,命中即重做 |
效果对比
| 做法 | 结果 |
|---|---|
| 提示词:"配色好看一点" | 收敛到 AI 套路色,撞款、无校验 |
| 提示词:"用 OKLCH,对比度 4.5:1,muted 性格,暖色=色相+彩度同移" | 有约束、可校验、可解释每个色值 |
| 直接给 hex 让 AI"参考" | AI 会编造不存在的 hex,且不检查可访问性 |
| 让 AI 用 poline/dittoTones 生成 + APCA 校验 | 色板来自真实算法,对比度构造性解决 |
注意事项
- 别让 AI 直接编 hex 值:设计系统级色板应来自算法生成或设计 token 系统,而不是模型的"记忆"。
- 色板分角色:主色/强调色/背景色/语义色(错误、成功、警告)分开定义,AI 才不会把强调色铺满全屏。
- 深色模式不是简单反色:背景色、表面色、文字色在 OKLCH 中分别取不同的明度档,阴影用色相偏移深色。
- 数据日期:工具 star 数、版本为 2026-09 检索值,volatile 信息以仓库 README 为准。
一句话总结
让 AI 摆脱"AI 味"配色的关键是这 7 条可执行规则:用 OKLCH/OKLAB、对比度先行、性格先于色相,色板必须由真算法生成而不是让模型编 hex 值。
相关概念
- 基础:色彩理论-基础与色轮、色彩理论-色彩空间与工具资源
- 设计:设计原则-对比对齐重复亲密性、设计原则-视觉层级与留白
- AI:[AI-Agent-概述与核心组成](/学习笔记/AI技术/AI Agent/AI-Agent-概述与核心组成)(Agent 技能加载原理)、提示词工程-基础与框架