中国顶级配色密码（国风配色）— AI设计 HTML 指导手册（增强版）

原创灵阙教研团队

B 基础进阶参考手册 | 约 9 分钟阅读更新于 2026-01-13

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）。

筛选 0 套

3) 角色色 Tokens 与占比（从“传统色名”到“可控系统”）

传统色名适合表达意象，但实现与 AI 控制更需要“角色色”。你可以保留色名作为注释与 prompt 语义锚点。

canvas surface primary secondary accent gold ink muted

复制 CSS

: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）

饱和 0

明度 0

建议：宋式清雅常用 S -10 ~ -20；节庆更建议只提升 accent 而不是全局增饱和。

重置调参导出 JSON Tokens

4.2 无障碍对比度（WCAG）快速检查

检查 ink on canvas、ink on surface、white on accent。

组合	对比度	建议

自动加深 ink 自动调整 accent（白字可读）

4.3 手动编辑 Tokens（精准控制）

直接改角色色；支持粘贴 HEX。建议只改 primary/secondary/accent 先找气质，再微调 canvas/ink。

canvas

surface

ink

muted

primary

secondary

accent

gold

同步（从当前主题）复制 CSS 复制 Tailwind

点睛 ≤ 8% · 留白 ≥ 60%

同一套 Tokens 的视觉预览

纸感底色 + 灰彩主色 + 墨色排版 + 小面积朱/金落印。

主要动作（accent）→ 次动作（primary）

信息块surface

图形可用主辅色，文字用 ink。边框用 muted 收住画面。

状态标签accent

节庆可提高点睛饱和度；非节庆尽量让点睛更小、更集中。

高光徽章gold

金色用于“仪式感高光”，避免大面积铺金。

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 导出与复制

复制 CSS Variables 复制 JSON Tokens 复制 Tailwind Config 复制 Figma Tokens

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（不足则自动增强）；主按钮确保白字可读。

语义名	值	说明

复制语义 Tokens JSON 复制语义 Tokens CSS

8.2 组件 Recipes（CSS 片段）

生成的 CSS 只引用语义变量（--color-xxx）。提示词建议：Use ONLY provided semantic variables; do not introduce new colors.

组件复制 Recipes

9) 工程导出（Tokens Studio / Figma Variables / Style Dictionary）

把角色色 + 语义 tokens 输出为团队常用工具链格式，便于进入 Figma/CI 构建与多端落地。

9.1 Tokens Studio JSON（Figma Tokens 插件常用）

复制 Tokens Studio JSON 预览

9.2 Figma Variables CSV（便于批量导入/转换）

复制 Figma CSV 预览

9.3 Style Dictionary JSON（含 $type/$value）

复制 Style Dictionary JSON 预览

9.4 Palette Lint（质量闸门）

将“顶级配色密码”落为可检测指标：对比度、色相距离、主色饱和上限、点睛可读性。

检查项	结果	建议

立即检查一键修复（ink+accent）

备注：传统色同名色值在不同资料间会有差异；屏幕端以“层级与可读性”优先，色名作为语义锚点即可。

已复制

深度加工（NotebookLM 生成）

基于本文内容生成的 PPT 大纲、博客摘要、短视频脚本与 Deep Dive 播客，用于多场景复用

PPT 大纲（5-8 张幻灯片）点击展开

中国顶级配色密码（国风配色）— AI设计 HTML 指导手册（增强版） — ppt

基于您上传的关于“中国顶级配色密码（国风配色）”的文章，我为您整理了一份 7 张幻灯片的 PPT 大纲。已按照要求使用 Markdown 格式输出。

幻灯片 1：中国顶级配色密码（国风配色）概览

核心目标：将传统色审美工程化，把规则转化为角色色 Tokens，从而实现可控的 AI 输出与 UI 设计落地 [1]。
打破误区：国风的高级感不在于“颜色多”，而是由明度秩序、灰度控制、小面积点睛与材质感共同决定的 [1]。
全链路流程：从配色密码规则集、主题库，到角色色分配、无障碍调参，最终生成组件映射与工程化导出格式（CSS/JSON等） [1]。

幻灯片 2：国风配色密码的核心规则

意象先行：设计前需先定“气韵”，结合场景（礼、雅等）、节令气候、材质表现（宣纸、瓷、漆）和历史时期（如宋代低饱和）进行表达 [1]。
明度与灰度控制：优先确定明度结构（先值后色），主色建议降噪“灰化”（饱和度 15%–45%），使画面更显雅致 [1]。
冷暖对位与克制留白：通过温差（如冷主色搭配暖点睛色）制造气韵，整体控制在 3-8 色完成一个系统，装饰越密色相越少 [1]。
强调材质化：通过色彩体现质感，例如宣纸/绢的雾面低对比、瓷器的干净留白、以及漆/铜的深底结合金属高光 [1]。

幻灯片 3：角色色 Tokens 与面积占比

结构大底（Canvas/Surface）：Canvas 作为页面大底/留白，占比 55%–75%；Surface 用于卡片/容器底色承载信息，占比 15%–30% [1-3]。
品牌与层级（Primary/Secondary）：主色与辅色占比 10%–25%，优先使用灰彩（低饱和），用于主要图形与插画丰富画面但不抢夺层级 [1, 3]。
点睛与高光（Accent/Gold）：Accent（点睛/CTA）占比须控制在 3%–10% 以内，越像印章越高级；Gold 仅用于仪式感高光，不可做大面积底色 [1, 3]。
信息与阅读（Ink/Muted）：Ink 用于正文标题，建议用青黛/墨蓝代替纯黑大面积使用；Muted 用于弱文本和分割线，用灰把画面“收住” [2, 3]。

幻灯片 4：组件映射（UI 落地清单）

页面与容器：背景映射为 Canvas，可叠加轻微纸纹但需控制低对比度（亮度差<6%）；卡片底色为 Surface，国风阴影需轻以体现“雾面层次” [4]。
按钮与交互：主按钮（CTA）背景使用 Accent，文字需确保对比度；次按钮/链接保持克制，边框用 Muted，填充用 Surface [4]。
信息层级表现：标题和正文使用 Ink，注释用 Muted；确保 UI 里的颜色只承载状态与层级，不要让颜色抢文本的视觉焦点 [1, 4]。
数据可视化：图表主线用 Primary，对比线用 Secondary，关键点用 Accent，避免过多色相，同类色阶梯更稳定 [4]。

幻灯片 5：配色工具箱与无障碍检查

快速调参策略：先调灰度与明度，最后再动色相。例如“宋式清雅”常将全局饱和度调低（S -10 ~ -20），而节庆主题建议只提升点睛色饱和度 [3]。
WCAG 无障碍检查：重点检查正文与底色（ink on canvas/surface）、白色文本与点睛色（white on accent）之间的对比度，保障可读性 [3]。
精准控制优先序：手动编辑 Tokens 时，建议先修改主/辅色（primary/secondary/accent）找准气质，再微调大底与信息色（canvas/ink） [3]。

幻灯片 6：AI 提示词生成器与硬约束控制

设定语义锚点：在写 Prompt 时，明确用途、时期、材质、构图和主题，以此生成设计方向的备选方案 [4]。
编写强制约束规则：要求 AI "use ONLY these tokens"（仅使用指定色值），防止 AI 擅自加色导致系统漂移 [4]。
明确面积与材质格式：明确写出 "accent area ≤ 8%"（点睛面积限制）与 "blank space ≥ 60%"（留白比例），并要求必须输出组件映射表和变量块 [4, 5]。

幻灯片 7：设计资产的工程化输出与交付

多格式资产导出：设计方案可直接一键导出为 CSS Variables、JSON Tokens 或 Tailwind Config 等前端和开发可用格式 [4]。
语义 Tokens 与 Recipes 派生：系统可自动派生满足无障碍标准的语义 Tokens，并生成按钮、卡片等组件的 CSS 片段（Recipes） [5]。
团队工具链无缝接入：支持生成 Tokens Studio JSON、Figma Variables CSV 以及 Style Dictionary，轻松对接 Figma 和 CI 构建环节 [5, 6]。
质量闸门检测：通过 Palette Lint 工具落为可检测指标，自动检测对比度、色相距离及主色饱和上限等，确保落地质量 [6]。

博客摘要 + 核心看点点击展开

中国顶级配色密码（国风配色）— AI设计 HTML 指导手册（增强版） — summary

想要打造高级的国风设计系统吗？本文深度解析了中国顶级配色密码，将传统的色彩审美巧妙转化为可控的AI与前端工程化规则[1]。该系统主张通过明度秩序、灰度控制以及宣纸/瓷器等材质感设定，结合创新划分的8大角色色Tokens（如大底Canvas、点睛Accent等），让国风UI配色彻底告别杂乱无章[1-3]。借助组件映射与精准的AI提示词硬约束，设计师不仅能高效产出符合标准的UI设计稿，还能一键导出CSS、JSON、Tailwind及Figma变量格式[1, 4, 5]。这份硬核指南将助您轻松构建标准化、可完全复用的高质量国风色彩资产[1, 5]。

三大核心看点：