安装
每个 xxd-* 都是 Claude Code 原生 skill（带 frontmatter 的 SKILL.md），复制到个人 skills 目录就能用。每个 skill 自带完整的 references/，不用联网取数据。
前两行只把仓库里的 skills/ 拉下来（约 20 MB，不下载 742 张色卡原图），第三行一次装上全部 10 个。
终端
git clone --depth 1 --filter=blob:none --sparse https://github.com/nevertoday/zhongguo-traditional-colors.git
git -C zhongguo-traditional-colors sparse-checkout set skills
mkdir -p ~/.claude/skills && cp -R zhongguo-traditional-colors/skills/xxd-* ~/.claude/skills/只想装其中一个：先跑上面前两行，再用每个 skill 下面那条命令。装好后在 Claude Code 里直接描述任务（比如「用朱红做一套 UI token」），或者输入 skill 的名字调用它。
不想用 git，也可以下载整个仓库的压缩包，解压后把 skills/ 里的文件夹复制到 ~/.claude/skills/。压缩包约 1.1 GB，大部分是色卡原图。
10 个 skill 一览
每一步解决一个常见卡点，交付一样能直接拿去用的东西。点 skill 名字跳到它的说明。
| 步骤 | Skill | 解决的卡点 | 交付 |
|---|---|---|---|
| 01 定方向 | xxd-color-brief | 只有情绪词和参考图 | 方向简报 + 起始色 |
| 02 组色板 | xxd-palette-builder | 锚点有了但组合难 | 主辅点缀 + 比例 |
| 03 放版面 | xxd-palette-applier | 颜色一上版就互相抢 | 版面用色地图 |
| 04 交 token | xxd-ui-token | 只交 HEX 会失控 | CSS / Tailwind / Figma token |
| 05 查可读 | xxd-accessible-color | 漂亮但不够清晰 | 对比度 + 同库替代色 |
| 06 定品牌 | xxd-brand-system | 每次物料都重新争论 | 品牌锚点 + 渠道规则 |
| 07 做图表 | xxd-data-viz | 海报色板放进图表就乱 | ECharts / D3 / Chart.js 色组 |
| 08 修旧稿 | xxd-existing-design-audit | 旧资产里颜色越积越多 | 映射 + 迁移顺序 |
| 09 做系列 | xxd-content-series | 每期重配会散，固定又会腻 | 固定层 + 变量层 + 轮换表 |
| 10 进生产 | xxd-print-packaging | 屏幕好看不等于实物可靠 | 面板计划 + 打样清单 |
01 · 定方向
xxd-color-brief
把“高级、东方、年轻、不要俗”翻译成冷暖、明度、饱和度、对比和风险边界。
- 价值
- 先把“感觉”变成可讨论的判断标准，避免后面所有人拿主观形容词反复拉扯。
- 痛点
- 项目只有 moodboard、竞品、口头反馈或“高级一点”这类模糊词，直接选色会越选越散。
- 适合
- 品牌启动、活动视觉、课程封面、内容栏目、网站改版的配色方向阶段。
- 输入
/xxd-color-brief+ 项目载体、目标人群、希望气质、必须避开的感觉、参考图或竞品。- 产出
- 方向决策、约束表、3 到 5 个起始传统色、避坑清单和下一步 Studio。
示例触发
/xxd-color-brief 为新中式茶饮品牌做年轻但不俗的配色方向，受众是 20-35 岁女性，避免廉价国潮感mkdir -p ~/.claude/skills && cp -R zhongguo-traditional-colors/skills/xxd-color-brief ~/.claude/skills/
02 · 组色板
xxd-palette-builder
从 742 色里筛出能落地的主色、辅色、背景、强调色和替代方案。
- 价值
- 把“再试几个颜色”变成少量可比较方案，每个颜色都有角色，不只是漂亮 swatch。
- 痛点
- 已有色名、HEX 或情绪方向，但不知道哪些颜色能组合，比例和层级也不清楚。
- 适合
- 文化网站、课程封面、品牌提案、PPT、包装、产品 UI 的色板生成。
- 输入
/xxd-palette-builder+ 锚点色、用途、稳妥/醒目倾向、浅深偏好、禁用色或品牌限制。- 产出
- 主色、辅色、背景、强调、推荐比例、替代色、使用风险和下一步落版建议。
示例触发
/xxd-palette-builder 以月白为锚点，为文化类网站首页生成主辅点缀色板，要求安静、有层次、适合长文阅读mkdir -p ~/.claude/skills && cp -R zhongguo-traditional-colors/skills/xxd-palette-builder ~/.claude/skills/
03 · 放版面
xxd-palette-applier
把色板放进真实版面，决定背景、标题、正文、CTA、结构线和装饰色的落点。
- 价值
- 让颜色服务阅读路径和信息层级，而不是让每个颜色都同时争抢注意力。
- 痛点
- swatch 看着高级，一进网页、封面或包装，标题、按钮、背景和装饰就互相抢。
- 适合
- 网页首屏、PPT 封面、课程详情页、文章长图、包装正反面和社媒模板。
- 输入
/xxd-palette-applier+ 已有色板、页面结构、主要信息层级、用户最应该先看到什么。- 产出
- 背景/内容/行动/结构/细节五类角色、面积比例、版面落点、错误用法和替代建议。
示例触发
/xxd-palette-applier 把月白、黛蓝、绛紫、银朱这组传统色用到课程封面和详情页首屏，重点突出报名按钮mkdir -p ~/.claude/skills && cp -R zhongguo-traditional-colors/skills/xxd-palette-applier ~/.claude/skills/
04 · 交 token
xxd-ui-token
把传统色变成 primitive、semantic、component、mode 四层 UI token。
- 价值
- 让设计、开发和后续维护共用同一套命名，避免硬编码、状态遗漏和深色模式返工。
- 痛点
- 只给开发一组 HEX，按钮态、边框、背景、焦点、暗色模式很快各写各的。
- 适合
- 网站、App、后台工具、设计系统、Figma variables、Tailwind 主题和组件库。
- 输入
/xxd-ui-token+ 产品类型、已有色板、组件类型、浅深色模式要求、输出格式。- 产出
- primitive、semantic、component、mode-aware token，默认 CSS variables，也可转 Tailwind 或 Figma 结构。
示例触发
/xxd-ui-token 把这组中国传统色转成官网浅色和暗色模式 CSS variables，包含按钮、边框、背景、文本和焦点态mkdir -p ~/.claude/skills && cp -R zhongguo-traditional-colors/skills/xxd-ui-token ~/.claude/skills/
05 · 查可读
xxd-accessible-color
检查传统色压在文字、按钮、状态和图表上是否真的读得清。
- 价值
- 保留传统色气质，同时照顾真实阅读者、操作状态和无障碍要求。
- 痛点
- 浅背景上的灰绿、粉、黄很容易低对比；图表和状态如果只靠颜色表达，也会丢信息。
- 适合
- 正文、小字、按钮、焦点环、状态色、标签、图表、深色模式和印刷小字。
- 输入
/xxd-accessible-color+ 前景色、背景色、用途、字号、是否要通过 WCAG。- 产出
- contrast ratio、通过/条件可用/失败判断、同库替代色、非颜色提示和修复方案。
示例触发
/xxd-accessible-color 检查 #F9F4DC 背景上的 #5C2223 正文和按钮文字是否适合网页阅读，并给出同库替代色mkdir -p ~/.claude/skills && cp -R zhongguo-traditional-colors/skills/xxd-accessible-color ~/.claude/skills/
06 · 定品牌
xxd-brand-system
把一次好看的传统色方案沉淀成长期品牌规则、比例和禁用组合。
- 价值
- 让团队有长期决策依据，减少活动、海报、官网、包装之间的品牌色漂移。
- 痛点
- 官网、包装、活动、社媒各自调色，短期热闹，长期识别越来越散。
- 适合
- 品牌升级、产品官网、社媒矩阵、包装系列、内容栏目和长期视觉系统。
- 输入
/xxd-brand-system+ 行业、价格带、目标用户、竞品差异、品牌性格、主要渠道。- 产出
- 品牌锚点色、支撑色、强调色、默认比例、渠道差异、禁用组合和 token 化建议。
示例触发
/xxd-brand-system 为文创香氛品牌建立传统色规范，覆盖官网、包装、小红书封面和线下展陈mkdir -p ~/.claude/skills && cp -R zhongguo-traditional-colors/skills/xxd-brand-system ~/.claude/skills/
07 · 做图表
xxd-data-viz
按数据关系而不是装饰喜好，生成分类、顺序、发散、高亮和状态色方案。
- 价值
- 让读者先看懂数据，再感受到传统色气质；图表颜色首先服务理解。
- 痛点
- 海报配色直接放进图表后，分类分不清、顺序没轻重、正负发散没有中点。
- 适合
- 仪表盘、报告图表、地图、热力图、数据故事、课程数据页和可视化组件。
- 输入
/xxd-data-viz+ 图表类型、系列数量、背景色、数据关系和是否有重点系列。- 产出
- 分类色数组、顺序色带、发散色带、高亮色、状态色，以及常见图表库可用格式。
示例触发
/xxd-data-viz 为 7 个分类和一个高亮系列生成 ECharts 中国传统色数组，背景是浅色，要求分类容易区分mkdir -p ~/.claude/skills && cp -R zhongguo-traditional-colors/skills/xxd-data-viz ~/.claude/skills/
08 · 修旧稿
xxd-existing-design-audit
盘点旧稿、CSS、Figma styles 或散乱 HEX，判断哪些该保留、合并、替换或移除。
- 价值
- 尊重旧项目里已经有效的识别资产，只清理真正造成混乱、重复或难维护的颜色。
- 痛点
- 旧稿里有重复近似色、临时色、低对比色和没人敢删的历史品牌色。
- 适合
- 旧官网、旧 CSS、Figma styles、历史海报、品牌色表或一串散乱 HEX。
- 输入
/xxd-existing-design-audit+ HEX 清单、截图描述、当前用途、不能轻易改的颜色和迁移程度。- 产出
- 颜色盘点、相近传统色映射、保留/合并/替换/移除建议、迁移风险和执行顺序。
示例触发
/xxd-existing-design-audit 审计这组 CSS 颜色，映射到最接近的中国传统色，并告诉我哪些应该保留或合并mkdir -p ~/.claude/skills && cp -R zhongguo-traditional-colors/skills/xxd-existing-design-audit ~/.claude/skills/
09 · 做系列
xxd-content-series
为小红书、公众号、视频封面、课程课件等长期内容建立统一但不疲劳的色彩系统。
- 价值
- 让内容团队稳定生产，既保留栏目识别度，也降低每期重新设计封面和模板的压力。
- 痛点
- 每期都换色会丢识别，完全固定又容易疲劳，团队也难长期执行。
- 适合
- 小红书、公众号、视频封面、课程课件、newsletter、栏目海报和长期内容矩阵。
- 输入
/xxd-content-series+ 平台、栏目数量、更新节奏、模板类型、固定元素和可变化元素。- 产出
- 固定层、变量层、模板层、栏目色、特殊期色、轮换规则和内容生产检查清单。
示例触发
/xxd-content-series 为小红书 5 个栏目做统一但不重复的封面色彩系统，每周更新 3 次，要求传统但不老气mkdir -p ~/.claude/skills && cp -R zhongguo-traditional-colors/skills/xxd-content-series ~/.claude/skills/
10 · 进生产
xxd-print-packaging
把屏幕上的 HEX 推进到材质、CMYK、工艺、货架光线和打样检查。
- 价值
- 提前照顾印刷、材质、供应商和最终实物效果，减少交付后才发现色差或小字不可读的成本。
- 痛点
- CMYK、纸张、油墨、覆膜、烫金、材质纹理、光线和货架环境都会改变最终观感。
- 适合
- 包装、书籍、礼盒、文创、标签、实体材料、展陈和需要跟印刷方沟通的项目。
- 输入
/xxd-print-packaging+ 品类、材质、工艺、预算/价格带、系列数量、专色和条码要求。- 产出
- 正背侧面板用色、系列变体规则、CMYK 风险、材质建议、小字和条码提醒、打样检查清单。
示例触发
/xxd-print-packaging 为茶叶礼盒规划传统色、系列变体和印刷打样清单，材质是哑粉纸加局部烫金mkdir -p ~/.claude/skills && cp -R zhongguo-traditional-colors/skills/xxd-print-packaging ~/.claude/skills/