Han Design 是一套面向 AI Agent 的中国风网页设计 Skill，也是一套可以直接复制进真实项目的 CSS 视觉资产。
当前版本为
v0.1.0-preview.0，欢迎试用、反馈和一起继续打磨。
起点不是 CSS，是一句话
事情是这样的。
我一直很喜欢中国古文化。
不是那种只在过年换个红色头像的喜欢，而是会在看到古建筑、书法、山水、器物、戏曲、传统纹样的时候，忍不住多看一会儿。
前段时间，我又想到周杰伦说过的一句话，「华流才是最屌的」。
这句话听起来很简单，但我每次想起来，还是会觉得挺有劲儿。
因为它说的其实不只是音乐。
这几年，不管是音乐、影视，还是视觉艺术，我都能看到越来越多的创作者，把中国文化、中国审美和自己的作品揉在一起。有人把古典乐器放进流行编曲，有人把传统服饰、建筑、色彩做成新的视觉语言，也有人在动画、游戏和舞台里重新想象那些我们从小听到大的故事。
他们不是把古代元素原封不动搬过来，而是让这些东西继续活在今天。
我就开始想，既然一首歌、一部电影、一件艺术作品都可以做出中国风，那网站为什么不行？
为什么网页一说中国风，就只剩下米黄色背景、毛笔字标题、红色印章和一圈祥云？
我的网站也应该有一点自己的古韵之美、中国风之美。
不是为了给页面贴一个中国风标签，而是希望用户打开它的时候，能感觉到一点宣纸的温度、墨色的呼吸、留白的安静，还有那些属于我们自己的文化记忆。
这就是我后来做 Han Design 的初衷。
我不想再做一个只会堆符号的中国风页面
最开始，我确实只是想把一个页面做得好看一点。
页面里已经有印章、水墨、宣纸、书法、卷轴，单看每个元素都挺中国，放在一起却总觉得哪儿不太对。
怎么形容呢。
就像去古镇旅游，刚进门看到牌坊觉得还有点意思，再往里走五十米，灯笼、祥云、龙纹、楷体、金色描边一股脑全冲过来了。。。
不能说不中国。
只能说，中国得有点过于努力了。
于是我开始琢磨，有没有可能把这种喜欢，做成一套真正适合网页的东方设计语言。它不靠堆符号证明自己，不是一换成红色和楷体就敢叫国风，也不是让 AI 随手生成一张水墨背景图，然后开发同学对着图片发呆。
而是可以真的落到 HTML、CSS、React、Vue 这些东西里。
AI Agent 能看懂，前端能接着改，设计能继续调，最后还能过键盘、对比度和移动端检查。
折腾了一圈以后，就有了 Han Design。
中文名就一个字。
汉。
项目目前已经开源，版本还是 v0.1.0-preview.0，谈不上成熟，更不敢说自己定义了什么东方美学标准。我自己也还在摸索。
但至少，它已经不是一份躺在 Figma 里的设计稿，也不是一堆只能看不能用的效果图了。
它现在是一套可以被 AI Agent 直接调用的设计 Skill，也是一套可以复制进真实项目的 CSS 视觉资产。
上面这张图就是项目里的真实页面。
页面里看到的印章按钮、山水层次、字体、颜色、间距、图标和动效，都是浏览器真正渲染出来的。
这事儿为什么要做成 Skill，而不是再造一个 CSS 框架呢？
我一开始也想过这个问题。
现在前端组件库已经够多了，Ant Design、Element Plus、TDesign、Arco Design，哪个都比一个个人项目完整。再做一套 Button、Modal、Table、Date Picker，坦率的讲，除了把自己累个半死，意义不大。
Han Design 到底想解决什么
Han Design 真正想解决的，不是组件够不够多。
而是 AI 在设计中国风页面时，太容易走捷径。
我做这个项目，也不是想让所有网站都长成同一个样子。
我更希望它像一个入口，让更多网站有机会借一点古韵，用一点中国自己的视觉语言，但最后还是长成它自己。
你跟它说做个宋韵网站，它经常先把背景调成米黄色，再放个毛笔字标题，右下角盖个红章，然后非常自信地告诉你，宋代美学已经完成。
不是哥们。。。
宋韵要真这么简单，做设计的朋友早就下班了。
所以 Han Design 里面最重要的东西，其实不是 CSS，而是判断规则。
Agent 会先判断你要的是历史复原、历史启发，还是当代中国风。它会考虑时期、地域、媒介、使用场景和视觉强度，再决定用什么主题、读哪些参考资料、哪些文化符号需要谨慎。
涉及龙、凤、蝙蝠、莲花、宗教图像、官阶纹样，它不能随手往页面上贴。
涉及书法和印章，它要区分书法联想、真实书体、印面和普通红色方块。
涉及地域、民族、宗教和活态文化，它不能把所有东西都塞进一个叫传统中国风的抽屉里。
这些规则读起来可能没 CSS 炫，但我越来越觉得，这才是一个设计 Skill 最该有的东西。
因为样式写错了还能改。
文化语境胡说八道，真的挺尴尬的。
当然，聊文化不能只剩下谨慎，不然最后做出来的页面也容易像博物馆免责声明。
所以 Han Design 还是准备了足够多可以直接玩的东西。
16 套主题，不是 16 张换色皮肤
目前一共有 16 套主题。
其中 7 套是朝代启发主题，秦汉、魏晋、唐、宋、元、明、清。
另外 9 套更偏具体视觉场景，水墨、青绿山水、青花瓷、敦煌、宫廷金、武侠玄墨、当代茶空间、朱砂喜庆和青瓷。
这里特意用了启发两个字。
它们是给现代网页使用的视觉起点，不是历史复原，更不代表一个朝代只有这一种颜色和气质。
| 你能拿到的东西 | 具体内容 |
|---|---|
| 主题系统 | 7 套朝代启发主题，9 套文化场景主题 |
| 视觉资产 | 颜色、字体、间距、阴影、动效和纹样 Token |
| 页面组件 | 印章按钮、卷轴卡片、题签、窗棂、屏风、灯笼等 |
| Agent 规则 | 文化语境、主题选择、可访问性和输出边界 |
| 接入方式 | 独立页面使用 han.css，已有项目使用 han-scoped.css |
切换主题不需要重写整页 CSS，设置一个 data-theme 就行。
<html lang="zh-CN" data-theme="song">
想做青瓷方向，可以换成 celadon。想做水墨，可以用 ink。想做比较克制的茶品牌，可以从 tea 开始，再根据品牌本身继续调整。
我说从它开始，是因为主题不是答案。
它更像一个不会让你一上来就跑偏的起点。
Han Design 里面还有印章按钮、卷轴卡片、窗棂边框、题签、册页、屏风、灯笼、纹样、图标、排版和一些从中国画构图里转译过来的布局工具。
但这里有一条我自己很喜欢的规则。
一个页面里，最好不要同时使用超过两组抢眼的装饰组件。
克制一点。
我有时候觉得，所谓高级感也没那么玄学。很多时候就是知道什么时候该停手。
真正接入项目时，scoped 才是关键
说到组件，这块也得把丑话讲在前面。
Han Design 不是一个完整的交互组件库。
卡片、分隔线、印章、题签这种静态结构，拿来就能用。
Modal、Tabs、自定义 Select、Date Picker、Tree、Upload 这些东西，CSS 只能负责长相，键盘行为、焦点管理、状态同步和 ARIA 还是要交给宿主项目已有的组件。
所以它不会为了看起来组件很多，就把一个静态弹窗截图包装成生产级 Dialog。
看着能点，和真的能用，中间差着不少东西。
这也是这次做这个项目时，我踩得最实在的一个坑。
一开始我给现有应用准备了一个 han-scoped.css，想法挺简单，不导入全局 reset，不就不会污染宿主项目了吗？
结果真放进浏览器一测，问题来了。
Token 还在往 :root 上挂，主题选择器仍然可能撞到宿主项目，连 .han-container 都偷偷依赖了全局的 box-sizing。桌面看着没事，切到 375 像素宽，页面多出来 7 像素横向滚动。
7 像素。
这种小东西最气人，因为肉眼看截图很容易忽略，真放进项目里就会一直硌着你。
后来我把全局基础样式、工具类和无障碍规则拆开，给 scoped 入口增加了明确的 data-han-scope 边界，Token 和主题变量只在这个区域内生效。
宿主应用继续用自己的字体、圆角、颜色和按钮，Han 只在需要的地方落一点墨。
现在局部接入大概是这样。
<link rel="stylesheet" href="/han/han-scoped.css">
<section data-han-scope data-theme="song">
<button type="button" class="han-btn-seal">确认</button>
</section>
这可能没有满屏动画那么炸，但对真正维护项目的人来说，我觉得这个能力更有用。
你不需要推翻现有设计系统，不需要为了中国风重写整套组件，也不需要让一个营销页的样式顺着 body 和 button 爬遍整个后台系统。
只在需要的地方，落一点墨**。**
如何开始使用
如果你想试，安装也不复杂。
先把仓库克隆下来。
git clone https://github.com/you-want/han-design.git han
然后把 Skill 目录复制到 Agent Skills 的目录里。
mkdir -p "$HOME/.agents/skills"
cp -R skills/han-design "$HOME/.agents/skills/han-design"
Codex 也可以放在 ~/.codex/skills/han-design。
装好以后，不需要背一堆命令，直接跟 Agent 说人话就行。
使用 han-design，帮我做一个克制的宋韵产品落地页。
使用 han-design，把当前 React Dashboard 改成低强度水墨风，保留现有组件和交互，不要污染全局样式。
使用 han-design，为一个年轻茶品牌做移动优先的当代青瓷风官网。
如果你暂时不想装 Skill，只想拿 CSS，也可以直接复制 skills/han-design/assets。
独立页面使用 han.css，现有产品局部接入使用 han-scoped.css。
就这么简单。
我希望它最后变成什么
当然，简单的是开始，不是最终效果。
中国风最难的地方，从来不是找到一个红色，也不是找一张宣纸纹理。真正难的是，你要知道自己在表达什么，为什么用这个元素，为什么在这里停手。
这也是我做完 Han Design 以后越来越确定的一件事。
AI 时代的设计资产，不能只给 AI 一堆可以复制的代码。
还得给它判断力。
什么时候用，什么时候不用，什么能说，什么不能乱说，什么只是现代设计联想，什么需要查真实来源。
代码决定页面能不能跑。
判断力决定它最后像不像一个认真做出来的东西。
写在最后
项目现在已经开源，MIT License，欢迎直接拿去玩，也欢迎提 Issue、交 PR、补主题、修可访问性或者告诉我哪里看着还是很像景区文创店。。。
说实话，我自己也不知道它最后会长成什么样。
可能是一套越来越成熟的 Agent 设计 Skill，可能会变成很多项目里很轻的一层东方视觉语言，也可能只是给一些喜欢中国文化和网页设计的人，提供一个能继续往下折腾的起点。
但我始终觉得，这件事值得做。
因为中文互联网里不缺中国风图片。
缺的是能落进真实产品、能被继续维护、又愿意尊重文化边界的中国风设计工具。
只在需要的地方，落一点墨。
这句话放在页面里挺合适。
放在做工具这件事上，好像也一样。
项目地址，GitHub 上的 Han Design
如果你觉得这个项目还有点意思，欢迎点个 Star，也欢迎把你做出来的页面甩给我看看。
我是真的挺想看看，大家会拿它玩出什么东西。
