传统色 × 现代和弦：专为 UI/UX 打造的国风配色 Skill

做界面或视觉设计时，要么配色充满辣眼的“塑料感”，要么看似好看却在实际 UI 中却丑的要哭。

东方传统色本不该只是博物馆里的陈迹，它同样能优雅地融入现代数字界面。

今天为大家带来一款专为 AI Agent（支持 Antigravity、Claude Code、OpenCode 等）打造的色彩专家技能 —— https://github.com/undsky/doudou-color-skill

让大模型瞬间化身为拥有深厚东方美学底蕴与现代工业落地经验的色彩总监！

极简安装

在你的项目根目录下，终端一行命令快速挂载技能：

npx skills add undsky/doudou-color-skill --yes

安装完成后，直接在对话框中呼叫 AI 开始探索中国传统色的万千意象吧！

零门槛实战：大白话对话，即刻出方案

使用本技能完全不需要死记硬背复杂的色彩学公式。在任何支持 Skill 的开发环境中，只要用日常大白话向 AI 描述你的场景与心境，它就能自动完成色彩诊断、数学计算与工程交付。

场景 1：唯美炫丽视觉 · 大胆撞色吸睛

用户对话：
“我想做一组唯美炫丽的视觉海报，希望用强烈的撞色形式凸显色彩冲击力，帮我搭一套高级惊艳的国风撞色组合！”

技能自动调取色彩空间对冲算法，推导出【青莲映日 · 孔雀销金】色谱：以沉稳的墨紫为底衬（60%），贵气的青莲魏紫为主体（30%），搭配冷锋对撞的孔雀蓝与铜绿，最后施以藤黄矿物金（10%）画龙点睛。

👉 点击在线查看交互 DEMO 1

场景 2：手里有个现代色，想找专属国风搭子

用户对话：
“我喜欢这个蓝色 #1976D2，再帮我搭几个好看的颜色做一套 Web 界面。”

无需手动换算，技能后台毫秒级运行 Delta-E 色距分析，将现代蓝精准映射为中国传统色“天蓝”，并自动推导出【天水澄光色谱】。同时给出按钮、卡片、侧边栏的具体应用，并严格通过文字与背景的无障碍阅读对比度校验：

👉 点击在线查看交互 DEMO 2

场景 3：清新自然 · 明快轻盈治愈

用户对话：
“我想做一款清新明快、轻盈治愈的文创包装，想要那种通透又有呼吸感的效果，帮我搭配一组明朗干净的中国传统色！”

依托东方五行“水生木”的流动逻辑，技能生成了【雨过天青 · 月白风清】色谱：采用月白与嫩菊绿作留白底衬，霁青构筑骨架，葱绿与荷叶绿生发春意，秋葵黄暖调点睛，兼具宋瓷的雅致与现代包装的通透呼吸感。

👉 点击在线查看交互 DEMO 3

为什么它比普通 AI 配色更专业？

市面上普通的 AI 配色往往依赖模型的“幻觉抽卡”，给出的十六进制色号常常前后打架、毫无章法。而 doudou-color 的底层是一套严谨的色彩科学计算与美学工程引擎：

工业级交付：开箱即用的设计令牌

每一个输出的配色方案，都包含标准化的色彩矩阵表与直接可粘贴进前端项目的 CSS Design Tokens：

:root {
   
  /* 60% 底衬基调：鱼肚白 */
  --color-bg: #f7f4ed;
  --color-surface: #ffffff;

  /* 30% 品牌主体：霁青 */
  --color-primary: #63bbd0;
  --color-secondary: #6e8b74;

  /* 10% 灵魂点睛：铁棕 */
  --color-accent: #d85916;

  /* 排版正文字重：钢青（对比度达标） */
  --color-text-main: #142334;
  --color-border: #e4dfd7;
}

告别反复吸色取色与调参返工，从设计灵感萌发到代码落地，一步到位。

让东方美学在数字时代真正“活”过来

千百年前，文人墨客在汝窑开片中寻找“雨过天青”，在千里江山间铺展石青石绿，在紫禁回廊下凝望朱红琉璃。每一抹中国传统色背后，都沉淀着古人对天地四时、草木生息的细腻体悟与中式浪漫。

而在如今快节奏的数字开发与界面设计中，我们往往容易被千篇一律的现成配色库或冰冷的色值参数所局限。

doudou-color 想做的，绝不仅是将古色编号简单数字化，而是搭建一座连接「东方意境之美」与「现代工业工程落地」的桥梁。

它让传统色不再是停留在博物馆展柜里的静态标本，也不再只是浮于表面的“古风装饰”，而是真正化作可计算、可推导、经得起无障碍对比度考验、能直接注入前端项目的现代设计语言。

当你下一次在编辑器里面对空白画布、思考如何赋予产品独特的视觉气韵时，不妨唤醒这位国风色彩总监 ——

从一抹月白、一缕霁青开始，把中国色彩的诗意与沉静，写进属于你的现代作品里。