— 中国传统色配色技能 Banner

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

—— 专为 UI/UX 打造的国风配色 Skill

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

今天为大家带来一款专为 AI Agent(支持 Antigravity、Claude Code、OpenCode 等)打造的色彩专家技能 —— doudou-color-skill[2]

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

本文脉络

01

极简安装与挂载

02

大白话对话出方案

03

色彩科学与工业交付


01 · INSTALLATION

极简安装


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

. . . bash

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

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


02 · PRACTICE

零门槛实战:大白话对话,即刻出方案


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

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

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

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

— 青莲映日 · 孔雀销金 撞色组合

👉 点击在线查看交互 DEMO 1 [3]

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

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

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

— 天水澄光色谱与无障碍阅读对比度

👉 点击在线查看交互 DEMO 2 [4]

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

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

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

— 雨过天青 · 月白风清 色谱

👉 点击在线查看交互 DEMO 3 [5]


03 · SCIENCE

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


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

核心维度 普通 AI 随意配色 doudou-color 专家技能
色彩数据源 随机生成 HEX 色号,虚构不存在的“古风名” 内置 526 种权威传统色 数据库,含雅称、拼音、HEX、RGB 及 CMYK 四色印刷标定
匹配科学度 依靠文字联想,容易产生感知偏差 采用 RGB → XYZ → CIE LAB 空间转换及 Delta-E (CIE76) 最小色距算法,精准锚定正色
美学和弦体系 仅靠感觉东拼西凑 深度融合 东方五行相生相克(青木、赤火、黄土、白金、黑水)与现代和弦(互补、邻近、三元、分裂互补)
工程落地性 只给色块图,无法直接用于开发 严格遵循 60-30-10 黄金法则,通过 WCAG 2.1 AA/AAA 级无障碍检测,一键输出 CSS Tokens

04 · DELIVERY

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


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

. . . css

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

}

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


∞ · POSTSCRIPT

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


「千百年前,文人墨客在汝窑开片中寻找“雨过天青”,在千里江山间铺展石青石绿。每一抹中国传统色背后,都沉淀着古人对天地四时的细腻体悟与中式浪漫。」

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

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

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

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

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

END

我是 undsky(全网同名),专注AI应用落地,开发经验分享。

如果你觉得今天这篇有收获,欢迎 点赞、分享、推荐、写留言 ,我们下篇见。

REFERENCE · 引用链接

[1] 访问 Undsky: https://www.undsky.com

[2] doudou-color-skill: https://github.com/undsky/doudou-color-skill

[3] 在线 DEMO 1 (青莲映日 · 孔雀销金): https://htmlpreview.github.io/?https://github.com/undsky/doudou-color-skill/blob/master/demo/demo1.html

[4] 在线 DEMO 2 (天水澄光色谱): https://htmlpreview.github.io/?https://github.com/undsky/doudou-color-skill/blob/master/demo/demo2.html

[5] 在线 DEMO 3 (雨过天青 · 月白风清): https://htmlpreview.github.io/?https://github.com/undsky/doudou-color-skill/blob/master/demo/demo3.html