最近我一直在折腾 Han Design。
它原本是一个给 AI Agent 用的中国风网页设计 Skill，里面有主题、颜色、字体、组件、纹样、排版规则，也有 han.css 和 han-scoped.css 这样的 CSS 资产。
东西其实不少。
但我越用越觉得不对劲。
能力越多，用户反而越容易不会用。
这就很尴尬了。
用户只是想要「好看一点」
场景特别简单。
用户对 Agent 说：
帮我把这个页面做得好看一点。
然后 Agent 开始反问：
- 要不要宋韵？
- 要不要唐风？
- 要不要水墨？
- 视觉强度选 0、1、2 还是 3？
- 要不要卷轴卡片？
- 你现在用的是 React 还是 Vue？
- 要不要局部主题隔离？
问题一个接一个。
不是哥们，人家只是想把页面改漂亮一点，怎么还得先考一个东方美学产品经理证书？
我后来想明白了，问题不在于 Han Design 能力少，而在于：
我一直在增加能力，却把使用能力的决策成本全丢给用户了。
主题多，用户自己选。
组件多，用户自己拼。
文化规则多，用户自己定。
接入方式多，用户还得先解释技术栈。
这就像你造了一辆性能很强的车，用户刚坐进去，你递给他一本说明书：
请先调悬挂、点火提前角和变速箱逻辑。
但用户只是想回家。
所以这次我停下了继续加组件的手，开始给 Han Design 补「自动驾驶」。
这次到底改了什么
这次一共动了 6 个地方。
| 改造 | 解决的问题 |
|---|---|
| 去掉问题轰炸，内部生成设计简报 | 用户不用回答一长串配置题 |
| 加入 0～3 档视觉强度 | 用「轻一点、浓一点」代替组件名 |
| 增加 6 套完整页面 Starter | 不再从零散零件开始拼页面 |
| 内容草稿自动补位 | 页面不再只有几个空标题 |
| 浏览器自审自改 | 真打开页面看，发现问题就修 |
| 把默认提示词改成工作流 | 从一句口号变成一套执行流程 |
看上去像是在改 Skill 文档，实际上改的是产品体验。
第一刀，别再让用户填配置表
以前的流程是这样：
用户提需求
↓
Agent 找信息缺口
↓
Agent 生成一长串问题
↓
用户回答
↓
Agent 才开始做页面
现在换成：
用户提需求
↓
Agent 扫描项目上下文
↓
内部生成设计简报
↓
直接开始做页面
Agent 会自己看这些东西：
- 当前项目是什么类型
- 已经有哪些页面和路由
- 现成组件能不能复用
- 项目里有没有图片
- 现在的品牌语言是什么
- 这个页面最重要的动作是什么
然后在内部形成一个很短的判断，例如：
面向小型设计团队的产品落地页，
核心动作是申请体验，
使用海兰主题 ocean-orchid，
视觉强度 1，
保留现有 React 表单，
避免千篇一律的霓虹 AI 视觉。
这个简报是给 Agent 自己看的，不拿出来折腾用户。
只有一种情况需要追问，缺失的信息真的会改变业务目标。
主题、字体、卡片长什么样、装饰放多少，这些不该变成用户的负担。
第二刀，把视觉强度变成「装饰预算」
用户不一定知道 .han-frame-window 是什么。
但用户一定能说清楚：
我想要轻一点。
我想要明显一点。
我想要有点戏剧感。
所以我给 Han Design 定了 0～3 四档装饰预算。
| 档位 | 名称 | 怎么用 |
|---|---|---|
| 0 | 令牌层 | 只调整颜色、文字、间距、边框和状态，适合 Dashboard、后台 |
| 1 | 克制 | 放一处安静的编辑性装饰，适合官网和 SaaS |
| 2 | 鲜明 | 加一组文化结构，适合茶、服装、生活方式和品牌站 |
| 3 | 戏剧化 | 装饰全开，适合节庆、游戏、展览和营销页 |
这套东西最重要的地方，不是多了四个数字。
而是 Agent 终于有了「装饰预算」这个概念。
仓库里有灯笼、卷轴、印章、屏风，不代表它们都该出现在同一个页面里。
设计翻车，很多时候不是能力不够，而是手里的能力都想证明自己来过。
第三刀，从一堆零件变成 6 个靠谱房型
以前 Agent 要从零散组件直接拼完整页面。
这事儿比看起来难多了。
页面好不好看，不是看某一个按钮漂不漂亮，而是看整体结构：
- 首屏比例对不对
- 内容密度会不会太挤
- 章节有没有节奏
- 图片放在哪儿
- 卡片是不是全长一个样
- 最后有没有明确的行动入口
所以这次直接补了 6 套完整 Starter。
| Starter | 适合做什么 |
|---|---|
| S1 品牌落地页 | 导航、Hero、品牌主张、产品矩阵、CTA |
| S2 产品发布页 | 版本导航、亮点、对比表、Changelog、接入引导 |
| S3 Dashboard | 侧边栏、KPI 卡、表格、状态、空状态 |
| S4 展览页 | 展品信息、时间地点、展品网格、预约入口 |
| S5 节庆活动页 | 倒计时、权益卡、营销区、规则和行动入口 |
| S6 长文编辑页 | 标题、目录、正文组件、相关推荐 |
每套 Starter 里都放了真实文案结构、图片占位、响应式断点和移动端布局。
以前是把一堆木板、螺丝、门把手递给 Agent，让它自己造房子。
现在是先给它一个靠谱房型，再根据项目情况换材料。
这个难度完全不是一回事。
第四刀，内容不够的时候，先把结构补上
有个问题特别现实：
空内容，做不出好设计。
用户说「帮我做一个茶品牌官网」，如果页面里只有：
品牌标题
产品一
产品二
了解更多
那再好的 CSS，也只能做出一个精致空壳。
所以现在会按页面类型补内容草稿。
茶品牌会先补：
- 品牌主张
- 产品系列
- 产地
- 工艺
- 购买入口
展览页会先补：
- 展览时间
- 地点
- 展品元数据
- 参观信息
Dashboard 会先补：
- 数据标签
- 表格值
- 状态
- 空状态文案
但这里有一条红线，不能碰：
- 不能编奖项、认证和排名
- 不能编销量、用户数和营收
- 不能编专家背书和名人推荐
- 不能编历史故事和品牌渊源
缺信息，可以补结构。
缺事实，不能瞎编。
这条边界我觉得挺重要。设计可以先搭起来，但不能拿 AI 的想象冒充品牌资料。
第五刀，别只跑静态检查，真的打开浏览器看看
以前的流程比较像这样：
生成代码
↓
跑静态检查
↓
报告没问题
↓
交付
问题是，很多视觉问题静态检查根本看不出来。
比如：
- 字体颜色对比度不够
- 移动端表格横向溢出
- 首屏按钮被装饰抢了注意力
- 内容虽然没丢，但滚动以后看不到
- 桌面端好看，375px 手机上直接崩掉
现在流程换成：
生成代码
↓
静态检查
↓
浏览器打开桌面端
↓
浏览器打开 375px 移动端
↓
按规则逐项回看
↓
发现问题就改
↓
重新渲染，再检查一遍
这次自己写 Starter 的时候，真的抓到了几个问题：
- 松麦主题的 12px 辅助文字对比度只有 3.22:1，后来加深到 4.8:1
- Dashboard 在 375px 下横向溢出 359 像素
- 表格虽然能滚动，但负责人、状态、截止日期都藏在右边，手机用户根本看不全
- 最后把移动端表格改成逐行字段卡片，让信息直接可见
这个过程我挺喜欢。
不是我拍胸脯说「新版更好」，而是页面真的打开以后，问题一个个自己浮出来。
第六刀，把提示词改成真正能执行的工作流
旧版默认提示词大概是：
请做一个克制、可访问、有文化语境的中国风页面。
听着没错。
但 Agent 看完以后，还是不知道下一步先做什么。
所以现在把它改成 6 步：
第1步，扫描项目上下文，判断页面类型、目标用户和核心 CTA
第2步，选择主题、视觉强度和 Starter
第3步，按页面类型补内容草稿，遵守事实红线
第4步，生成桌面端、平板端和移动端页面
第5步，用浏览器检查桌面端和 375px 移动端
第6步，发现问题后改代码、重新渲染、重新检查
交付标准也说得更直白：
不是「我看过了」就算完成，
必须改完、重渲染、重跑检查，
直到全部通过，或者明确说明真正的阻塞原因。
我还专门做了一次独立测试
为了避免自嗨，我启动了一个全新的 Agent 实例。
它没有 Han Design 的上下文，只给一句需求：
给一个年轻茶品牌做移动优先落地页，风格安静一点，
有产品卡片、产地故事和一个主 CTA，其他设计你自己决定。
它最后自己做了这些判断：
- 选了品牌落地页 S1
- 选了松麦主题 pine-wheat
- 选了 2 档视觉强度
- 补了 3 张产品卡、产地故事、冲泡方式、价格和 CTA
入口算是通了。
但也暴露了一个问题。
它在浏览器检查时发现了对比度和 20px 溢出，却报告完问题就停了，没有把修复动作跑完。
这个坑很典型。
文档里写「至少修改一轮」，人看得懂，Agent 可能把「发现问题」理解成「完成复盘」。
所以我把规则改成了更硬的一句：
发现问题，不等于完成。必须改代码、重渲染、重新检查，直到全部通过，或者明确列出权限、素材、信息等真实阻塞。
现在评估指标里也加了 checksPassed。
不能只说看过了，得真的修完。
评判标准已经变了
以前我会关注：
| 以前关注什么 | 现在更关心什么 |
|---|---|
| 主题有多少套 | 不懂主题的人说「好看一点」，能不能接住 |
| 组件有多少类 | Agent 能不能自己做合理判断 |
| 能不能做出中国风 | 能不能把完整页面交出来 |
| 有没有静态检查 | 能不能看见自己的问题并修完 |
很多产品都会经历这个拐点。
刚开始，大家疯狂加能力，因为好展示、好宣传。
做到后面才发现，用户根本不关心你有多少能力，他只关心自己要做的那件事，能不能少费一点脑子。
Han Design 也是一样。
一个真正好用的 Skill，不只是往 Agent 脑子里塞更多设计知识，更重要的是帮用户消化选择：
- 什么时候该问
- 什么时候自己判断就够了
- 什么时候必须克制
- 什么时候可以下重手
- 什么时候发现问题以后必须回去重做
这些看不见的决策逻辑，才是 Skill 里真正的产品价值。
还不完美。
距离一个成熟的设计 Agent，还有不少路要走。
但至少现在，用户坐进车里以后，不需要先学调悬挂了。
他说去哪儿。
Han 负责把车开起来。
项目代码、6 套 Starter、视觉回看规则和示例站点，都已经随版本发布。
项目地址：
如果你也在做 AI Agent、设计系统或者前端工程，欢迎在评论区聊聊，你现在最想让 Agent 替你消化哪一类决策？
喜欢这类分享的话，欢迎点赞、收藏、评论三连，也可以顺手给项目点个 Star。
