说实话挺难的。你要朱红但不能太红你要水墨但不能太黑你要留白但不能空得没东西。一不小心要么变成喜庆大红大绿要么变成假古董堆龙凤祥云。汉 · Han就是为了解决这个事儿——一个面向 AI Agent 的中国文化设计 Skill把宣纸、墨色、朱红、书法、卷轴这些东方美学元素变成可以直接用的 CSS 令牌、主题和组件。不用从零配色不用手写纹样不用纠结这个朝代该用什么颜色。引入一个 CSS选个主题页面就有了气质。一句话介绍它是个啥Han 是一个设计 Skill 视觉资产包。你可以把它理解为一套开箱即用的中国风设计系统CSS 层面帮你搞定色彩、字体、间距、组件和动效同时附带文化决策规则让 AI Agent 能自主判断什么场景该用什么风格。目前有22 个主题覆盖从秦汉到清的朝代启发主题、水墨/青花瓷/敦煌等文化主题还有 6 个面向现代网页的当代配色主题。不用 build不用装依赖引入 CSS 就能用。能做什么直接看例子光说没用看看用 Han 做出来的真实页面长什么样。1. 茶叶品牌 — 松麦主题 https://han.raingpt.top/pine-wheat-tea松麦绿配色自然清新。导航、Hero 区、产品展示、品牌故事、CTA一个茶叶品牌的落地页该有的全有了。配色不抢戏气质对味。2. 美妆护肤 — 藤紫主题 https://han.raingpt.top/plum-blush-beauty藤紫色调柔和浪漫。适合美妆、护肤、轻奢品牌。谁说中国风只能配茶和博物馆3. AI 科技产品 — 海兰主题 https://han.raingpt.top/ocean-orchid-ai海兰配色冷静清透。科技产品也能用中国风而且一点都不违和。谁说做 AI 就得蓝紫渐变4. 精品咖啡 — 焦糖主题 https://han.raingpt.top/caramel-cream-coffee焦糖暖色复古高级。咖啡品牌 中国风这个组合可能很多人没想到但效果真的很搭。5. 瑜伽健康 — 薄荷主题 https://han.raingpt.top/mint-lavender-yoga薄荷薰衣草配色清透自然。瑜伽、健康、生活方式类产品用这个看着就让人想深呼吸。6. 甜品节活动 — 莓果主题 https://han.raingpt.top/berry-butter-dessert莓果奶油配色明快有活力。活动页、营销页用这个色调年轻又不轻浮。7. Mac 产品概念页 — 宋韵主题 https://han.raingpt.top/landing-page这个可能最让人意外——用宋韵主题做一个 Apple Mac 风格的产品页。清雅克制的设计语言配上产品大图和精致排版东方美学和现代科技产品的结合居然可以这么自然。8. 软件产品官网介绍 https://luma.raingpt.top/本页由 Han design skill宋 · song 主题构建 · 响应式 · 可访问9. 当代配色主题总览 https://han.raingpt.top/contemporary-themes6 个当代配色主题一站式展示带主题切换、色彩体系展示和组件 demo。想选哪个主题打开这个页面直接对比。核心能力不只是好看22 个主题总有一个对味类型主题适合场景朝代启发秦汉、魏晋、唐、宋、元、明、清博物馆、文化展览、历史教育文化主题水墨、青绿山水、青花瓷、敦煌、宫廷金、武侠、茶道、朱砂、青瓷品牌官网、文创产品、传统文化当代配色松麦、藤紫、海兰、焦糖、薄荷、莓果现代品牌、SaaS 产品、生活方式切主题就一行代码htmllangzh-CNdata-themesong组件都有而且不土印章按钮.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 安装gitclone https://github.com/you-want/han-design.git hanmkdir-p$HOME/.agents/skillscp-Rskills/han-design$HOME/.agents/skills/han-design装完直接跟 AI 说用 han-design 做个页面就行。方式二直接用 CSS复制skills/han-design/assets/到你的项目!-- 可选远程字体 --linkrelstylesheethref/han/fonts.css!-- 完整设计系统 --linkrelstylesheethref/han/han.css已有项目不想被全局 reset 影响用 scoped 版linkrelstylesheethref/han/han-scoped.csssectiondata-han-scopedata-themesongbuttontypebuttonclasshan-btn-seal确认/button/sectionToken、深色模式和主题变量只在data-han-scope内生效不动你项目里其他任何样式。适合谁用前端开发者— 想快速做个有调性的中国风页面不想从零配色设计师— 需要一套靠谱的中国风设计令牌做参考AI 应用开发者— 给 Agent 装上中国风审美的能力独立开发者 / 创业者— 做品牌官网、产品落地页想要点不一样的气质任何觉得蓝紫渐变 Inter 字体看腻了的人最后说两句做中国风设计最大的坑不是技术是分寸感。朱红用多了像过年金色堆多了像寺庙龙凤纹样乱用显得廉价。Han 的设计规范里专门写了禁忌清单——金色不超过 3%朱红不超过 5%不用 emoji 当图标不乱用龙凤纹样。这些规则不是拍脑袋定的是从大量实践里总结出来的。让东方美学在网页上优雅绽放而不是用力过猛。这就是 Han 想做的事。为啥叫做 Han 因为我们身份证是汉族、说的是汉语、写的是汉字…那么当然我们的这个中国风也要叫 han-design。项目地址github.com/you-want/han-designLicenseMIT随便用。以上就是全部内容。如果觉得有意思去 GitHub 点个 Star或者直接装来试试。有问题欢迎提 Issue也欢迎来交流你用 Han 做出了什么好东西。