中国顶级配色密码（国风配色）— AI设计 HTML 指导手册（增强版）
AI 导读
中国顶级配色密码 — AI 设计手册（增强版） 把传统色审美工程化：规则 → 角色色 Tokens → 可控的 AI 输出 宣纸春青 暖金朱砂 宋式清雅 明式对比 导出 CSS Tokens 1. 配色密码（规则集） 2. 主题库（季节/场景/时期） 3. 角色色 Tokens 与占比 4. 配色工具箱（调参与无障碍） 5. 组件映射（UI落地） 6. AI 提示词生成器 7....
1) 中国顶级配色密码（可执行规则集）
国风高级感通常不是“颜色多”，而是明度秩序、灰度控制、小面积点睛与材质感共同作用。 下面把它拆成可给 AI 的约束。
1. 意象先行：场景 / 节令 / 材质 / 时代表达 先定“气韵”
- 场景：礼（庄重）、雅（清淡）、逸（闲适）、喜（节庆）、肃（克制）。
- 节令：春清、夏浓、秋澄、冬肃；先选“主气候色”，再加点睛色提精神。
- 材质：宣纸/绢（雾面、低对比）、瓷（高明度、净）、漆/铜（深底、金属高光）。
- 时期：宋（清雅低饱和）、唐（富丽暖金）、明（对比明确、块面清晰）、清（装饰密度高、但仍需控灰）。
2. 明度秩序优先：先“值（value）”，后“色（hue）” 结构感
- Canvas（大底）：55%–75%，高明度（纸/雾面）。
- Surface（块面）：15%–30%，比大底略深或略彩，用来承载信息。
- Primary/Secondary（主辅）：10%–25%，用于品牌识别与图形层级。
- Accent（点睛）：3%–10%，像“落印”，用于 CTA / 关键标签。
- Ink/Muted（信息色）：用于可读性；避免大面积纯黑。
实操：先做一张纯灰阶草图确认层级，再替换为传统色（保持明度关系不变）。
3. 灰度是高级：主色“灰化”，点睛“锋利” 控饱和
- 主色建议 Saturation 15%–45%（带灰），画面更“雅”。
- 点睛色可以更饱和，但必须小面积，并给它“理由”：印章、标题关键词、按钮。
- 金色更适合“高光与仪式感”，不适合作为大面积底色。
4. 冷暖对位：用温差制造气韵，而非硬碰硬 温差
- 常见：冷主（青/蓝/绿） + 暖点（朱/金/赭）；或暖主、冷压。
- 避免刺眼：对位色其中一端“灰化/雾化/提明度”，形成柔对抗。
- 现代国潮：可以提高对比，但仍需保持“纸感底 + 结构留白”。
5. 控色与留白：3–8 色完成一个系统 少即是多
- 建议：主色 1 + 辅色 1 + 点睛 1 + 中性色 2（纸白/灰/墨）+ 金 0~1。
- 纹样/装饰必须服从层级：装饰密度越高，色相越要少。
- 在 UI 里：尽量让色只承载“状态与层级”，不要让颜色抢文本。
6. 材质化：宣纸/绢/瓷/漆/铜决定质感 质感
- 宣纸/绢：雾面、颗粒很轻，建议低对比背景纹理（不可噪点太大）。
- 瓷：干净、明亮，留白更大；线条更细更工整。
- 漆/铜：深底 + 金属高光；必须用“雾面深色”，不要纯黑。
2) 主题库（季节 / 场景 / 时期）
先选一个“气质母版”，再微调。每套主题都内置 8 个角色色（canvas/surface/ink/muted/primary/secondary/accent/gold）。
3) 角色色 Tokens 与占比（从“传统色名”到“可控系统”）
传统色名适合表达意象，但实现与 AI 控制更需要“角色色”。你可以保留色名作为注释与 prompt 语义锚点。
:root{
--c-canvas: #EBEEE8; /* 大底/宣纸/背景 */
--c-surface: #D5EBE1; /* 卡片/二级底 */
--c-ink: #2C2F3B; /* 正文/墨 */
--c-muted: #BEB1AA; /* 分割线/弱文本 */
--c-primary: #B1D5C8; /* 主色/主题 */
--c-secondary:#80A492; /* 辅色 */
--c-accent: #C12C1F; /* 点睛/CTA/印章 */
--c-gold: #E5A84B; /* 高光/金属/徽章 */
}
| 角色 | 建议用途 |
|---|---|
canvas |
页面背景/留白/纸感纹理；深色方案用“雾面深底”替代纯黑。 |
surface |
卡片、信息块、容器底色；用于“层级分割”。 |
ink |
正文、标题、图标；避免大面积纯黑；更推荐青黛、墨蓝。 |
muted |
弱文字、分割线、边框；用灰把画面“收住”。 |
primary |
主品牌色/主要图形/强调块面；优先灰彩（低饱和）。 |
secondary |
辅助品牌色/次强调/插画二级块面；用于丰富但不抢主。 |
accent |
CTA、关键标签、印章位、关键字高亮；面积 ≤ 8%。 |
gold |
徽章/高光/金属边；适合作为“仪式感高光”，不做大面积底。 |
建议占比（UI/海报通用）配色工程参数
- canvas 55–75%
- surface 15–30%
- primary + secondary 10–25%
- accent 3–10%（越小越高级，越像印章）
- ink/muted 由排版决定，优先保证可读性（对比度）
4) 配色工具箱（调参与无障碍）
用“轻微调参”完成从传统色意象到屏幕端的可读性与一致性。建议先调 灰度 与 明度，最后再动 色相。
4.1 快速调参：整体饱和 / 明度（HSL）
建议：宋式清雅常用 S -10 ~ -20；节庆更建议只提升 accent 而不是全局增饱和。
4.2 无障碍对比度（WCAG）快速检查
检查 ink on canvas、ink on surface、white on accent。
| 组合 | 对比度 | 建议 |
|---|
4.3 手动编辑 Tokens（精准控制）
直接改角色色；支持粘贴 HEX。建议只改 primary/secondary/accent 先找气质，再微调 canvas/ink。
图形可用主辅色，文字用 ink。边框用 muted 收住画面。
节庆可提高点睛饱和度；非节庆尽量让点睛更小、更集中。
金色用于“仪式感高光”，避免大面积铺金。
5) 组件映射（UI 落地清单）
给 AI 的关键不是“颜色表”，而是组件 ↔ 角色色映射，让它输出可实现设计系统。
| 组件 | 默认映射 | 注意事项 |
|---|---|---|
| 页面背景 | 背景 = canvas；装饰纹理 = canvas + 轻微纸纹（低对比） | 纹理不要高噪点；对比度低于 6% 亮度差更稳。 |
| 卡片 / 容器 | 底色 = surface；边框 = muted；阴影轻 | 国风高级感更偏“雾面层次”，阴影不宜重。 |
| 主按钮（CTA） | 背景 = accent；文字 = 白或 canvas；hover = gold 或 accent 加深 | 保证白字对比度；点睛面积 ≤ 8%。 |
| 次按钮 / 链接 | 边框 = muted；填充 = surface；强调字 = primary | 避免高饱和填充，保持克制。 |
| 信息层级（标题/正文/注释） | 标题/正文 = ink；注释 = muted | ink 不一定是黑；更推荐青黛、墨蓝。 |
| 图表 / 数据可视化 | 主线 = primary；对比线 = secondary；关键点 = accent | 数据图不要用太多色相；同类色阶梯更稳。 |
6) AI 提示词生成器（可控输出）
把规则写成“硬约束”，把 tokens 写成“可执行参数”。可生成 UI、海报、插画、包装等提示词。
6.1 选择语义锚点
6.2 可直接投喂的 Prompt（含约束 + Tokens）
建议：要求输出“组件映射表 + CSS 变量”，并写清 use ONLY these tokens。
7) 导出（CSS / JSON / Tailwind / Figma Tokens）
把色彩从“审美”变成“资产”。统一用 tokens 管控，避免系统漂移。
7.1 导出与复制
7.2 让 AI 更“听话”的写法
- 写硬约束：use ONLY these tokens，否则 AI 会自行加色。
- 写面积：accent area ≤ 8%、blank space ≥ 60%。
- 写材质：xuan paper matte texture / porcelain clean glaze。
- 写输出格式：必须给组件映射表（button/card/text/chart）与变量块。
- 深色主题要求：dark base must be matte (no pure black)。
8) 语义 Tokens & 组件 Recipes（把配色变成可复用设计系统）
角色色负责审美与层级，语义 tokens 负责工程可用性。本节自动从当前角色色派生语义 tokens，并输出按钮/卡片/表单/徽章/图表等组件 recipes，便于直接给前端或作为 AI 的硬约束。
8.1 语义 Tokens（自动派生）
原则：文本优先 WCAG AA；分割线更灰；focus ring 用 gold（不足则自动增强）；主按钮确保白字可读。
| 语义名 | 值 | 说明 |
|---|
8.2 组件 Recipes（CSS 片段）
生成的 CSS 只引用语义变量（--color-xxx）。提示词建议：Use ONLY provided semantic variables; do not introduce new colors.
9) 工程导出（Tokens Studio / Figma Variables / Style Dictionary）
把角色色 + 语义 tokens 输出为团队常用工具链格式，便于进入 Figma/CI 构建与多端落地。
9.1 Tokens Studio JSON（Figma Tokens 插件常用）
9.2 Figma Variables CSV（便于批量导入/转换）
9.3 Style Dictionary JSON（含 $type/$value）
9.4 Palette Lint（质量闸门）
将“顶级配色密码”落为可检测指标：对比度、色相距离、主色饱和上限、点睛可读性。
| 检查项 | 结果 | 建议 |
|---|