Han Design
一个给 AI Agent 用的中国风网页设计 Skill（系统），内置主题、颜色、字体、组件、纹样、排版规则与 CSS 资产。它的迭代拐点在于从”持续堆能力”转向”帮用户消化选择”——用内部生成设计简报、视觉强度预算、6 套完整 Starter 和浏览器自审自改，让 Agent 替用户”把车开起来”。
简介
Han Design 是一个面向 AI Agent 的中国风网页设计 Skill，本质上是把”东方美学设计知识”打包成一组主题、颜色、字体、组件、纹样、排版规则，外加 han.css 与 han-scoped.css 这类 CSS 资产。作者（雨夜寻晴天）一开始不断往里加能力——20 套主题、10+ 组件、大量文化规则和多种接入方式。
但作者在使用中发现一个反直觉的问题：能力越多，用户反而越不会用。用户对 Agent 说”帮我把这个页面做得好看一点”，Agent 却开始反问要不要宋韵、要不要唐风、要不要水墨、视觉强度选 0/1/2/3、要不要卷轴卡片、用 React 还是 Vue、要不要局部主题隔离——“不是哥们，人家只是想把页面改漂亮一点，怎么还得先考一个东方美学产品经理证书？” 作者把这种状态形容为：造了一辆性能很强的车，用户刚坐进去，你就递给他一本说明书让他先调悬挂、点火提前角和变速箱逻辑，但用户只是想回家。
因此 Han Design 的改造方向不是继续增加组件，而是给 Agent 补上”自动驾驶”：把本来丢给用户的决策成本收回到 Agent 内部，让它自己扫项目上下文、生成设计简报、按视觉强度做装饰预算、用完整 Starter 而不是零散零件拼页面，并在生成后用浏览器真打开页面看到问题、修完再交付。它与”单纯堆砌中国风元素”不同——它把”文化语境”和”决策逻辑”一起内置，服务的对象是不懂东方美学的普通用户，而不是设计师。
关键信息
- 类型：概念 / 工具类（AI Agent 设计 Skill / 设计系统）
- 领域：前端生成、AI Skill、产品设计、中国风视觉设计
- 官方网站/地址：https://github.com/you-want/han-design
- 定价/开源状态：开源项目，代码、6 套 Starter、视觉回看规则与示例站点随版本发布
- 相关概念：AI前端生成、AI Skill、克制的产品设计、设计思维、Not Boring Weather
核心特性
1. 能力结构（改造前）
- 主题：20 套，涵盖宋韵、唐风、水墨、海兰（ocean-orchid）、松麦（pine-wheat）等不同风格
- 组件：10+ 类，含卷轴卡片、屏风、灯笼、印章等中国风元素
- CSS 资产：
han.css与han-scoped.css，以及需要时支持局部主题隔离 - 文化规则：多用传统纹样、配色和排版规则
- 接入方式：多种技术栈适配（React/Vue 等）
2. 六处「自动驾驶」改造（面向产品体验而非文档）
| 改造 | 解决的问题 |
|---|---|
| 去掉问题轰炸，内部生成设计简报 | 用户不用回答一长串配置题 |
| 加入 0～3 档视觉强度 | 用「轻一点、浓一点」代替组件名 |
| 增加 6 套完整页面 Starter | 不再从零散零件开始拼页面 |
| 内容草稿自动补位 | 页面不再只有几个空标题 |
| 浏览器自审自改 | 真打开页面看，发现问题就修 |
| 把默认提示词改成工作流 | 从一句口号变成一套执行流程 |
3. 视觉强度 =「装饰预算」
0～3 四档预算：0 令牌层（只调颜色、文字、间距、边框、状态，适合 Dashboard/后台）、1 克制（一处安静编辑性装饰，官网/SaaS）、2 鲜明（一组文化结构，茶、服装、生活方式/品牌站）、3 戏剧化（装饰全开，节庆、游戏、展览/营销页）。核心是让 Agent 有”预算”概念——仓库里有灯笼、卷轴、印章、屏风，不代表它们都该出现在同一个页面里。
4. 6 套完整 Starter
S1 品牌落地页、S2 产品发布页、S3 Dashboard、S4 展览页、S5 节庆活动页、S6 长文编辑页。每套都含真实文案结构、图片占位、响应式断点和移动端布局。类比：以前是把木板、螺丝、门把手递给 Agent 让它自己造房子，现在先给一个靠谱房型再换材料。
5. 浏览器自审自改 + 硬性交付标准
生成代码后打开桌面端与 375px 移动端逐项回看，发现问题就改、再渲染、再检查。自检抓到真实问题：松麦主题 12px 辅助文字对比度仅 3.22:1（后加深到 4.8:1）、Dashboard 在 375px 下横向溢出 359 像素、移动端表格把负责人/状态/截止日期藏在右边（改成逐行字段卡片）。交付标准从”我看过了就看完成”改为硬性通过：发现问题不等于完成，必须改代码、重渲染、重新检查，直到全部通过，或明确列出权限、素材、信息等真实阻塞；评估指标新增 checksPassed。
不同素材中的观点
- 2026-08-11-154138-tg-bf5cd9：这是 Han Design 的”自动驾驶”改造实录。素材给出完整的问题-方案链条：起点是”能力越多用户越不会用”这一反直觉现象；解决路径不是继续加组件，而是把决策成本收回到 Agent 内部（内部生成设计简报、0～3 档视觉强度作为”装饰预算”、6 套完整 Starter、按页面类型补内容草稿并遵守”缺信息可补结构、缺事实不能瞎编”红线、浏览器自审自改、把默认提示词改成 6 步工作流）。素材同时记录了改造后的独立测试（全新 Agent 无上下文，接到”给年轻茶品牌做移动优先落地页”的需求，自主选了 S1 品牌落地页 + 松麦主题 + 2 档视觉强度并补出完整页面），并指出一个典型坑：Agent 在浏览器自检发现对比度和 20px 溢出后”报告完问题就停”，未把修复跑完，因此需要把规则改成带
checksPassed的硬性标准。素材的评判标准转变也可复用于其他 Skill：从”主题有多少套/组件有多少类/能不能做出中国风/有没有静态检查”，转向”不懂主题的人说『好看一点』能不能接住/Agent 能不能自己做合理判断/能不能把完整页面交出来/能不能看见自己的问题并修完”。
实用信息
本节为工具/概念类实体的可复用操作口径。
- 快速上手步骤（把「自动驾驶」思路落到自己的 Skill）：
- 诊断决策负担：列出用户目前被问到的问题，判断哪些”不改变业务目标”——这些应该交给 Agent 自答，只保留真正会影响业务目标的追问。
- 给设计对象定”强度预算”：把”轻一点/明显一点/戏剧感”这类用户语言映射为 0～3 档数字档位，替代让用户报组件名。
- 提供可复用的”完整结构”而非零件：准备几套完整页面 Starter（落地页/发布页/Dashboard/展览页/活动页/长文页），内含真实文案结构、图片占位、响应式断点。
- 为缺内容补结构，但不编事实：按页面类型补内容草稿（茶品牌补品牌主张/产品系列/产地/工艺/购买入口；展览页补时间/地点/展品/参观信息），红线是不能编奖项、销量、背书、渊源。
- 把”发现问题”升级为”修完为止”：用浏览器打开桌面端和 375px 移动端逐项回看，发现问题改代码、重渲染、重检查，直到通过或明确真实阻塞。
- 注意事项/避坑指南：
- “发现问题 ≠ 完成复盘”，必须规定”至少修改一轮”并加硬性通过指标（如
checksPassed）。 - 主题多、组件多不代表好用；真正阻碍的是把选择成本丢给用户。
- 设计翻车往往不是因为能力不够，而是”手里的能力都想证明自己来过”——装饰要有预算约束。
- 移动端是最容易翻车的地方（表格横向溢出、按钮被抢注意力、内容滚动后不可见），必须专门检查 375px。
- “发现问题 ≠ 完成复盘”，必须规定”至少修改一轮”并加硬性通过指标（如
- 学习资源：项目代码 + 6 套 Starter + 视觉回看规则 + 示例站点，见
github.com/you-want/han-design。