说实话，挺难的。
你要朱红，但不能太红；你要水墨，但不能太黑；你要留白，但不能空得没东西。一不小心，要么变成喜庆大红大绿，要么变成"假古董"堆龙凤祥云。
汉 · Han 就是为了解决这个事儿——一个面向 AI Agent 的中国文化设计 Skill，把宣纸、墨色、朱红、书法、卷轴这些东方美学元素，变成可以直接用的 CSS 令牌、主题和组件。
不用从零配色，不用手写纹样，不用纠结"这个朝代该用什么颜色"。引入一个 CSS，选个主题，页面就有了气质。
一句话介绍：它是个啥？
Han 是一个设计 Skill + 视觉资产包。你可以把它理解为：
一套开箱即用的中国风设计系统，CSS 层面帮你搞定色彩、字体、间距、组件和动效，同时附带文化决策规则，让 AI Agent 能自主判断"什么场景该用什么风格"。
目前有 22 个主题，覆盖从秦汉到清的朝代启发主题、水墨/青花瓷/敦煌等文化主题，还有 6 个面向现代网页的当代配色主题。
不用 build，不用装依赖，引入 CSS 就能用。
能做什么？直接看例子
光说没用，看看用 Han 做出来的真实页面长什么样。
1. 茶叶品牌 — 松麦主题
松麦绿配色，自然清新。导航、Hero 区、产品展示、品牌故事、CTA，一个茶叶品牌的落地页该有的全有了。配色不抢戏，气质对味。
2. 美妆护肤 — 藤紫主题
藤紫色调，柔和浪漫。适合美妆、护肤、轻奢品牌。谁说中国风只能配茶和博物馆？
3. AI 科技产品 — 海兰主题
海兰配色，冷静清透。科技产品也能用中国风，而且一点都不违和。谁说做 AI 就得蓝紫渐变？
4. 精品咖啡 — 焦糖主题
焦糖暖色，复古高级。咖啡品牌 + 中国风，这个组合可能很多人没想到，但效果真的很搭。
5. 瑜伽健康 — 薄荷主题
薄荷薰衣草配色，清透自然。瑜伽、健康、生活方式类产品用这个，看着就让人想深呼吸。
6. 甜品节活动 — 莓果主题
莓果奶油配色，明快有活力。活动页、营销页用这个色调，年轻又不轻浮。
7. Mac 产品概念页 — 宋韵主题
这个可能最让人意外——用宋韵主题做一个 Apple Mac 风格的产品页。清雅克制的设计语言，配上产品大图和精致排版，东方美学和现代科技产品的结合，居然可以这么自然。
8. 软件产品官网介绍
本页由 Han design skill（宋 · song 主题）构建 · 响应式 · 可访问
9. 当代配色主题总览
6 个当代配色主题一站式展示，带主题切换、色彩体系展示和组件 demo。想选哪个主题，打开这个页面直接对比。
核心能力：不只是好看
22 个主题，总有一个对味
| 类型 | 主题 | 适合场景 |
|---|---|---|
| 朝代启发 | 秦汉、魏晋、唐、宋、元、明、清 | 博物馆、文化展览、历史教育 |
| 文化主题 | 水墨、青绿山水、青花瓷、敦煌、宫廷金、武侠、茶道、朱砂、青瓷 | 品牌官网、文创产品、传统文化 |
| 当代配色 | 松麦、藤紫、海兰、焦糖、薄荷、莓果 | 现代品牌、SaaS 产品、生活方式 |
切主题就一行代码：
<html lang="zh-CN" data-theme="song">
组件都有，而且不土
- 印章按钮
.han-btn-seal— 关键 CTA 用，带倾斜和盖章动效 - 水墨导航
.han-navbar— sticky + 毛玻璃，品牌名一个字朱红 - 卷轴卡片
.han-card-scroll— 产品展示、文章列表，四角铆钉装饰 - 窗花边框
.han-frame-window— 名言警句、诗词展示 - 水墨分割线
.han-divider-ink— 章节过渡，带小印章 - 印章
.han-stamp— 署名、落款、认证
AI Agent 能自己干活
这是 Han 最有意思的地方——它不只是 CSS，还包含一套文化决策规则。
你跟 AI 说：
"用 han-design，帮我做一个克制的宋韵产品落地页。"
或者更随意：
"用 han-design 把当前页面弄好看点，你自己判断主题和风格。"
AI 会自己读设计规范、判断页面类型、选主题、定视觉强度、补全内容，然后生成页面。你不需要知道主题 ID 叫什么，也不需要背组件类名。
该有的工程素质都有
- 响应式，移动端能看
- 键盘焦点、ARIA 标签、reduced-motion 支持
han-scoped.css局部引入，不污染宿主项目全局样式- 无 build 步骤，静态 HTML 直接跑
- 深色模式支持
怎么用？
方式一：作为 Agent Skill 安装
git clone https://github.com/you-want/han-design.git han
mkdir -p "$HOME/.agents/skills"
cp -R skills/han-design "$HOME/.agents/skills/han-design"
装完直接跟 AI 说"用 han-design 做个页面"就行。
方式二：直接用 CSS
复制 skills/han-design/assets/ 到你的项目：
<!-- 可选：远程字体 -->
<link rel="stylesheet" href="/han/fonts.css">
<!-- 完整设计系统 -->
<link rel="stylesheet" href="/han/han.css">
已有项目不想被全局 reset 影响？用 scoped 版：
<link rel="stylesheet" href="/han/han-scoped.css">
<section data-han-scope data-theme="song">
<button type="button" class="han-btn-seal">确认</button>
</section>
Token、深色模式和主题变量只在 data-han-scope 内生效，不动你项目里其他任何样式。
适合谁用？
- 前端开发者 — 想快速做个有调性的中国风页面，不想从零配色
- 设计师 — 需要一套靠谱的中国风设计令牌做参考
- AI 应用开发者 — 给 Agent 装上"中国风审美"的能力
- 独立开发者 / 创业者 — 做品牌官网、产品落地页，想要点不一样的气质
- 任何觉得"蓝紫渐变 + Inter 字体"看腻了的人
最后说两句
做中国风设计最大的坑，不是技术，是分寸感。
朱红用多了像过年，金色堆多了像寺庙，龙凤纹样乱用显得廉价。Han 的设计规范里专门写了禁忌清单——金色不超过 3%，朱红不超过 5%，不用 emoji 当图标，不乱用龙凤纹样。这些规则不是拍脑袋定的，是从大量实践里总结出来的。
让东方美学在网页上优雅绽放，而不是用力过猛。
这就是 Han 想做的事。为啥叫做 Han ？？？ 因为我们身份证是汉族、说的是汉语、写的是汉字......那么当然我们的这个中国风也要叫 han-design 。
License：MIT，随便用。
以上就是全部内容。如果觉得有意思，去 GitHub 点个 Star，或者直接装来试试。有问题欢迎提 Issue，也欢迎来交流你用 Han 做出了什么好东西。
