一、问题背景与分析1.1 能力积累现状Han Design 设计系统截至本次升级前已具备以下核心能力主题体系20 套历史文化主题秦汉、魏晋、唐、宋、元、明、清风格化主题水墨、青绿山水、青花瓷、敦煌、武侠、茶空间、朱砂、青瓷当代配色主题松麦 pine-wheat、藤紫 plum-blush、海兰 ocean-orchid、焦糖 caramel-cream、薄荷 mint-lavender、莓果 berry-butter组件体系10 类印章按钮、卷轴卡片、窗棂组件、屏风布局、册页组件、题签组件、纹样组件、图标集、动效组件、深色模式、局部主题隔离data-han-scope、无障碍检查1.2 核心问题能力越强使用门槛越高尽管系统能力丰富但在真实用户使用场景中暴露了严重的使用门槛问题。典型场景如下用户输入一句普通需求「帮我把这个页面做得好看一点」Agent 端会产生以下犹豫链是否需要询问用户选择什么主题是否需要询问用户偏好的历史朝代/文化范围是否需要确认前端技术栈React/Vue/原生是否需要确认视觉强度/装饰浓度偏好最终结果Agent 向用户抛出一排8~10 个配置性问题用户无法快速回答体验断崖式下降。1.3 问题根因分析经过对使用文档和 Skill 行为的复盘定位问题根源在于设计哲学层面设计系统一直在「增加能力」却把「使用能力的决策成本」直接转嫁给了最终用户。该问题可类比为制造商造了一辆性能很强的汽车但用户上车后制造商不是直接提供驾驶操作而是递出一本厚厚的说明书要求用户先自行调整悬挂参数、点火提前角和变速箱逻辑——而用户的目标仅仅是「开车回家」。由此确立本次升级的核心目标为 Han Design 补上一个「设计总监」角色——一个站在用户与系统能力之间替用户看项目、做判断、选方向、组织内容、检查效果并交付成品的中间决策层。本次升级代号Han Design 「自动驾驶」升级。二、改造方案一取消用户问题轰炸引入「内部设计简报」机制2.1 改造前流程用户自然语言需求 → Agent 识别信息缺口 → 生成多维度配置问题列表 → 用户回答 → Agent 基于回答生成页面问题信息缺口被转嫁给用户用户需要成为「半个设计专家」才能回答2.2 改造后流程用户自然语言需求 → Agent主动扫描项目上下文→ 内部生成「设计简报」→ 基于简报直接生成页面2.3 上下文扫描维度Agent 在生成设计简报前自动扫描以下项目信息当前项目类型与文件结构已有页面内容与路由结构已使用的组件与布局模式图片与静态资源情况现有品牌语言已存在的配色、字体、文案风格2.4 设计简报示例设计简报是 Agent 的内部决策约束不展示给用户典型结构如下面向小型设计团队的产品落地页核心动作是申请体验 使用海兰主题 ocean-orchid视觉强度 1克制档 保留现有 React 表单结构 避免千篇一律的霓虹 AI 视觉风格。2.5 决策触发阈值规则仅当缺失信息确实会改变业务目标时才向用户发起询问。以下情况属于「用户不需要操心」的决策范畴Agent 自行判断主题选择字体方案卡片/容器外观是否使用印章/卷轴等装饰性组件装饰性元素浓度以下情况属于「应确认用户」的决策范畴核心 CTA主要行动按钮指向缺失关键业务数据缺失且无法合理补位品牌标识/合规要求缺失三、改造方案二四档视觉强度体系装饰预算机制3.1 设计动机用户无法准确理解技术化组件名称如「卷轴卡片」「窗棂组件」「.han-frame-window 类」但用户能够准确表达「想要轻一点」或「想要浓一点」的风格偏好。3.2 四档视觉强度定义档位档位名称装饰行为适用业务场景0 档令牌层Token Only仅修改颜色变量、文字样式、间距、边框和交互状态零装饰性结构Dashboard 后台、企业应用、管理系统、数据密集型页面1 档克制Restrained允许出现 1 处安静的编辑性装饰不干扰信息阅读产品官网、SaaS 落地页、个人作品集、B端产品介绍页2 档鲜明Distinctive可使用一组标志性文化结构作为页面特征茶品牌、工艺品牌、服装品牌、文化机构、生活方式品牌站3 档戏剧化Dramatic全部装饰能力开放追求最大视觉冲击力节庆活动页、游戏官方站、展览专题页、娱乐营销活动页3.3 档位自动映射规则Agent 在无用户明确指示时按以下规则自动选择档位Dashboard 类页面 → 默认 0 档产品/SaaS 类落地页 → 默认 1 档品牌/文化/生活方式类 → 默认 2 档节庆/游戏/娱乐/营销类 → 默认 3 档3.4 机制核心价值Agent 首次拥有了「装饰预算」概念不是仓库里有什么就全部往上堆而是按预算额度合理使用设计能力。该机制有效避免了「设计翻车」的常见成因——每个能力都急于证明自身存在导致过度装饰。四、改造方案三6 套完整页面 Starter 体系4.1 改造动机此前 Agent 从「零散组件库」直接构建完整页面难度极高结果往往呈现「东拼西凑」感。根本原因在于页面体验的核心决定因素并非单个组件的视觉质量而是整体结构。页面体验的核心决定因素首屏比例Hero 区域高度与内容密度内容密度信息与留白的平衡章节节奏信息块的排布顺序与节奏感卡片多样性是否出现「卡片墙」同质化问题图片位置视觉动线引导收尾动作页面底部是否提供清晰的下一步操作入口4.2 6 套 Starter 详情Starter 编号Starter 名称结构组成适用场景S1品牌落地页导航栏 Hero 首屏 品牌主张区 产品卡片矩阵 特性列表 CTA 行动区 页脚 完整移动端结构品牌官网、产品官网、服务介绍页S2产品发布页版本导航 发布亮点 特性对比表 变更日志Changelog 下载/接入引导 兼容性说明产品版本发布、更新公告、升级介绍S3Dashboard侧边导航 KPI 指标卡 数据表格含响应式处理 状态标签 风险提示区 空状态处理管理后台、数据看板、运营平台S4展览页展品元数据卡片 时间地点信息 展品网格含筛选 来源/作者说明 参观预约入口艺术展览、博物馆专题、产品陈列、线上展厅S5节庆活动页倒计时组件 权益/奖品卡片矩阵 营销区块 互动入口 规则说明 即时行动区节日营销、活动运营、游戏专题、品牌周年庆S6长文编辑页文章标题区 目录导航 正文组件引用/代码/图片/表格 相关推荐 作者信息 互动区博客文章、产品文档、教程专栏、深度内容每套 Starter 均包含真实可编辑文案、图片占位结构、响应式断点处理、移动端布局优化。4.3 与此前模式的本质差异维度此前模式组件库模式Starter 模式Agent 起点拿到一堆「零件」拿到一套「靠谱房型」工作方式从零拼装所有结构基于房型做局部改造拆墙、换材料、重新布置结果可靠性结构质量波动极大底线质量有保证上限取决于改造深度失败率高易出现结构不合理低Starter 已验证结构合理性五、改造方案四内容草稿自动补位机制5.1 设计动机空内容做不出好设计。若页面仅填充「品牌标题、产品一、产品二、了解更多」等通用占位文字即使 CSS 设计再精良最终呈现也只是一个「精致的空壳」。5.2 补位内容规则Han Design 根据页面类型自动补充可编辑的真实草稿内容内容规则如下页面类型自动补充的内容结构茶品牌类页面品牌主张品牌故事 产品系列3~4 款产品卡 产地介绍 工艺说明 冲泡/使用方式 购买入口展览类页面展览时间 展览地点 展品元数据名称/年代/来源/规格 展品背景说明 参观须知 预约入口Dashboard 类真实标签命名如「进行中/已完成/高风险」 合理数据值 状态语义如「正常/告警/异常」 风险提示文案 空状态引导文案5.3 事实红线不可逾越内容补位机制严格遵守以下红线❌禁止编造奖项、认证、排名❌禁止编造销量、用户数、营收等业务数据❌禁止编造专家背书、名人推荐、媒体报道❌禁止编造历史故事、品牌渊源、人物经历原则缺什么可以补结构框架绝不能把 AI 想象包装成客观事实。六、改造方案五浏览器自审自改机制视觉回看 迭代修复6.1 改造前流程页面代码生成 → 静态语法检查Lint→ 标记为「完成」问题大量视觉问题响应式溢出、对比度不足、信息隐藏无法通过静态检查发现6.2 改造后流程页面代码生成 → 静态语法检查 →真实浏览器渲染桌面端 移动端→视觉回看规则检查→自动修复问题→ 重新渲染 → 再次检查 → 所有检查通过或遇到不可抗阻塞 → 标记为「完成」6.3 视觉回看规则清单9 项检查项检查说明判定标准层级检查标题/正文/辅助文字/注释的字号层级是否清晰至少 3 级可辨识字号差节奏检查页面区块之间的间距节奏是否一致不出现忽大忽小的异常留白间距检查元素内边距外边距是否遵循设计规范对齐网格、无杂乱间距字体检查中英文混排、字号、字重是否合理标题字重≥正文、字号不跳变颜色检查正文对比度、链接可见性、状态色语义正文对比度≥4.5:1WCAG AA装饰检查装饰性元素是否喧宾夺主CTA 按钮视觉权重必须高于装饰图片检查图片比例、占位、alt 属性是否规范无拉伸变形、占位符统一响应式检查375px 宽度下是否溢出、布局是否为移动优化无横向滚动、信息不被隐藏交互检查悬停/按下/禁用/聚焦状态是否完整按钮/链接/输入框均具备四态6.4 实际发现问题案例来自 Starter 自检在本次升级中该机制成功识别了「人工审查遗漏」的 3 个问题问题 1对比度不足场景松麦主题下 12px 辅助文字测量值对比度 3.22:1标准要求≥4.5:1WCAG AA 级修复方式加深文字色值至对比度 4.8:1问题 2移动端水平溢出场景Dashboard 表格组件在 375px 宽度测量值页面横向溢出 359px修复方式增加表格横向滚动容器问题 3信息隐藏二次发现场景修复溢出后「负责人/状态/截止日期」列进入横向滚动盲区用户问题无法直观感知「后面还有信息」最终修复移动端改为「逐行字段卡片式布局」所有字段直接可见无需横向滚动七、改造方案六工作流式默认提示词7.1 改造前提示词请做一个克制、可访问、有文化语境的中国风页面。问题诊断方向性正确但完全不可执行。Agent 读完后不知道「先做什么、后做什么、做到什么程度算完成」。7.2 改造后提示词工作流式你是 Han Design 的设计总监。按以下工作流执行用户需求 【第 1 步项目诊断】 扫描当前项目上下文判断页面类型、目标用户、核心 CTA。 【第 2 步决策定档】 自动选择主题 视觉强度档位 最合适的 Starter 页面模板。 决策依据第三节「四档视觉强度规则」 第四节「Starter 适用场景表」。 【第 3 步内容补位】 按第五节「内容补位规则」为页面补充真实可编辑草稿结构。 严格遵守事实红线绝不编造奖项/销量/背书/历史。 【第 4 步生成响应式页面】 基于选定 Starter 进行定制化改造输出完整响应式代码。 桌面端断点 ≥1024px平板 768px~1023px移动端 ≤767px。 【第 5 步浏览器真实检查】 打开浏览器分别查看桌面端 移动端375px 宽度效果。 按第六节 9 项视觉回看规则逐项检查。 【第 6 步迭代修复】 发现问题不算完成。必须修复问题 → 重新渲染 → 重新执行失败的检查项。 循环直至所有检查通过或明确遇到权限/素材/业务信息缺失需明确告知阻塞原因。 最终交付质量标准可直接上线的生产级页面。八、独立验证测试8.1 测试设计测试目的验证「自动驾驶」机制是否在零上下文暗示的全新 Agent 实例中依然生效。测试配置启动一个全新的独立 Agent 实例无历史对话、无项目缓存仅输入一句普通需求无任何主题/组件/参数提示测试输入与用户实际使用场景一致给一个年轻茶品牌做移动优先落地页风格安静一点 有产品卡片、产地故事和一个主 CTA其他设计你自己决定。8.2 Agent 自主决策结果正确决策维度Agent 自主选择是否符合预期Starter 模板品牌落地页S1✅ 正确主题选择松麦 pine-wheat✅ 正确安静的自然绿匹配年轻茶品牌视觉强度2 档鲜明✅ 正确品牌站适用 2 档内容补位3 张产品卡 产地故事 冲泡方式 价格 CTA✅ 正确符合茶品牌内容规范8.3 异常发现与二次修正Agent 按工作流执行至浏览器检查阶段正确发现了以下问题发现 1 个严重对比度问题发现 20px 移动端水平溢出但出现了规则理解偏差Agent 仅「报告」了发现的问题未执行「修复 → 重渲染 → 重检查」的迭代流程直接进入结束状态。8.4 测试价值与规则修正该测试的核心价值在于静态文档中看似明确的规则「至少修改一轮」在真实 Agent 执行中被理解为「发现问题并报告 完成复盘」。基于测试结果对第六步「迭代修复」规则进行了语义收紧修正前模糊检查完成后至少修改一轮。修正后明确发现问题不视为完成。必须执行以下循环实际修改代码重新渲染页面重新运行之前失败的检查项循环终止条件✅ 全部检查通过❌ 或遇到「权限不足/素材缺失/业务信息缺失」的真实阻塞需明确列出阻塞项同时在 Eval 自动化评估指标中新增checksPassed字段。评估标准由「声称检查过」升级为「检查问题均已修复」。九、升级验证统计本次升级完成后执行的全量测试清单测试类别执行数量覆盖范围路由 自动驾驶用例14 个覆盖常见页面类型 边界场景Starter 静态检查6 套S1~S6 全量 Starter 各一套完整检查浏览器真实渲染测试6 组桌面端 移动端 375px 双端验证Skill 格式校验1 套Prompt 格式、语法、参数引用正确性示例站点校验1 套官方展示站点全页面回归测试发布包复验1 套NPM 发布包文件完整性、版本号、依赖关系数字本身不是重点重点是 Han Design 的产品评判标准发生了根本性迁移。评判维度升级前旧标准升级后新标准主题维度主题数量有多少不懂主题的用户说「好看一点」系统能否正确选择组件维度组件种类有多少Agent 能否自行判断组件的使用场景与用量能力维度能不能做出中国风效果能不能把页面做完整、做合理自检维度无自检机制能不能「看见」自己的问题并修复交付维度代码静态无误即可能不能修到可直接交付的状态十、设计哲学总结与产品拐点思考10.1 产品能力增长的两个阶段大多数技术产品都会经历同一个拐点第一阶段能力堆积期核心策略疯狂增加功能/主题/组件/模型/参数增长逻辑能力可量化、可截图、可展示、可直接宣传用户感知「产品越来越强大」第二阶段选择消化期核心策略替用户做决策、做判断、消化复杂度增长逻辑用户能否「少费脑子」完成目标任务用户感知「产品越来越好用」用户最终不关心你的产品有多少能力只关心他要做的那件事能不能少费一点脑子。10.2 Skill 产品的本质知识 决策一个真正可用的 AI Skill能力插件不只是向 Agent 注入更多知识更重要的是替用户消化选择——在正确的时机做正确的动作。具体包括以下决策能力什么时候该问用户信息缺失会影响业务什么时候自己判断信息可从上下文推断什么时候必须克制装饰预算不超支什么时候可以下重手节庆/戏剧化场景什么时候必须回去重做质量未达交付线这些看不见的「决策逻辑」才是 Skill 中真正的产品价值。10.3 Han Design 的新定位本次「自动驾驶」升级后Han Design 的产品定位发生迁移维度升级前定位升级后定位产品性质中国文化设计语言 CSS 资产集合可独立工作的设计总监 Agent用户交互用户配置主题 选择组件 拼装页面用户说一句话需求 → 系统交付完整页面质量保障依赖用户审美与技术判断内置规则 浏览器自审 迭代修复最终目标提供设计素材提供设计交付结果当前系统仍不完美距成熟的设计 Agent 还有较长的路要走。但本次升级完成了一个关键的体验拐点用户坐进车里不再需要先学会调悬挂。他只需要说去哪里。Han Design 负责把车开起来。资源获取Han Design 「自动驾驶」升级版本代码、6 套 Starter 页面模板、视觉回看规则清单、示例站点均已随项目版本发布可前往项目仓库查阅。https://github.com/you-want/han-design