说实话，挺难的。

你要朱红，但不能太红；你要水墨，但不能太黑；你要留白，但不能空得没东西。

一不小心，要么变成喜庆大红大绿，要么变成“假古董”堆龙凤祥云。

汉 · Han 就是为了解决这个事儿——一个面向 AI Agent 的中国文化设计 Skill，把宣纸、墨色、朱红、书法、卷轴这些东方美学元素，变成可以直接用的 CSS 令牌、主题和组件。

不用从零配色，不用手写纹样，也不用纠结“这个朝代该用什么颜色”。

引入一个 CSS，选个主题，页面就有了气质。

一句话介绍：它是个啥？

Han 是一个设计 Skill + 视觉资产包。

你可以把它理解为：一个能把中国文化视觉语言，直接转成网页设计能力的系统。

目前有 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 产品、生活方式

切主题就一行代码：

先说核心判断：Han 这套系统，把“国风”和“现代组件”结合得相当到位。

组件都有，而且不土

• 印章按钮 .han-btn-seal — 关键 CTA 用，带倾斜和盖章动效
• 水墨导航 .han-na vbar — sticky + 毛玻璃，品牌名一个字朱红
• 卷轴卡片 .han-card-scroll — 产品展示、文章列表，四角铆钉装饰
• 窗花边框 .han-frame-window — 名言警句、诗词展示
• 水墨分割线 .han-divider-ink — 章节过渡，带小印章
• 印章 .han-stamp — 署名、落款、认证

AI Agent 能自己干活

这是 Han 最有意思的地方——它不只是 CSS，还包含一套文化决策规则。

你跟 AI 说：

或者更随意：

AI 会自己读设计规范、判断页面类型、选主题、定视觉强度、补全内容，然后生成页面。

你不需要知道主题 ID 叫什么，也不需要背组件类名。

该有的工程素质都有

• 响应式，移动端能看
• 键盘焦点、ARIA 标签、reduced-motion 支持
• han-scoped.css 局部引入，不污染宿主项目全局样式
• 无 build 步骤，静态 HTML 直接跑
• 深色模式支持

怎么用？

方式一：作为 Agent Skill 安装

git clone https://github.com/you-want/han-design.git hanmkdir -p "$HOME/.agents/skills"cp -R skills/han-design "$HOME/.agents/skills/han-design"

装完直接跟 AI 说“用 han-design 做个页面”就行。

方式二：直接用 CSS

复制 skills/han-design/assets/ 到你的项目：

rel="stylesheet" href="/han/fonts.css"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 。

项目地址：github.com/you-want/ha…

License：MIT，随便用。