第四节：原型图一键生成UI界面
把过程拆成五步：寻找参考、拆解产品、制作截图任务卡、生成多个方案、把选择写成 Visual Contract。
参考分三层，不从头抄一个产品
⭕
第一层是成熟设计系统，用来理解表格、表单、导航、状态和无障碍规则。我们看了 Carbon、Atlassian 和 Ant Design。
第二层是成熟企业产品，用来观察真实工作流、权限、高信息密度和异常处理。主要参考 Intercom、Front、Zendesk、Gorgias 和 Freshdesk。
第三层是同类 AI 产品和评测工具，用来观察来源、工具、置信、人工接管和版本比较。固定评测部分参考了 LangSmith 的实验比较与单例 Trace。
全部 7 个核心页面已经完成，并统一使用当前确定的设计规范：
•
P01 产品介绍与 Demo 入口
•
P02 登录与角色入口
•
P03 工单列表
•
P04 工单详情与 AI 助手
•
P05 企业知识库
•
P06 固定评测
•
P07 基础管理与审计日志
具体组合是：P03 借 Zendesk 和 Intercom 的任务密度；P04 借 Intercom 与 Front 的来源透明和人工控制；P05 借 Gorgias 的知识结构；P06 借 LangSmith 的比较与追踪。
Dribbble、Behance 和营销模板可以看氛围与构图，但不能证明企业流程应该怎样设计。
用六层拆解法把“好看”变成业务判断
#apAHIBsLWGQR text { white-space: pre; }#apAHIBsLWGQR .fb0 { stroke: var(--N900-FG, 0.15); }#apAHIBsLWGQR .fb0 {stroke: rgba(31,35,41, 0.15)}#apAHIBsLWGQR .fx0 { stroke-miterlimit: 10; }#apAHIBsLWGQR .fx0 {stroke-miterlimit: 10}#apAHIBsLWGQR .fa1 { fill: rgb(187, 191, 196); }#apAHIBsLWGQR .fa1 {fill: rgb(187, 191, 196)}#apAHIBsLWGQR .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#apAHIBsLWGQR .fx1 {font-style: normal}#apAHIBsLWGQR .fx2 { text-anchor: middle; }#apAHIBsLWGQR .fx2 {text-anchor: middle}#apAHIBsLWGQR .fx3 { dominant-baseline: central; }#apAHIBsLWGQR .fx3 {dominant-baseline: central}#apAHIBsLWGQR .fx4 { stroke: none; }#apAHIBsLWGQR .fx4 {stroke: none}#apAHIBsLWGQR .fc0 { fill: var(--text-caption); }#apAHIBsLWGQR .fc0 {fill: #646a73}#apAHIBsLWGQR .fa2 { fill: var(--text-link-disabled); }#apAHIBsLWGQR .fa2 {fill: rgb(187, 191, 196)}#apAHIBsLWGQR .fa3 { fill: rgb(239, 243, 244); }#apAHIBsLWGQR .fa3 {fill: rgb(239, 243, 244)}#apAHIBsLWGQR .fx5 { font: 400 16px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#apAHIBsLWGQR .fx5 {font-style: normal}#apAHIBsLWGQR .fx6 { text-anchor: start; }#apAHIBsLWGQR .fx6 {text-anchor: start}#apAHIBsLWGQR .fx7 { dominant-baseline: alphabetic; }#apAHIBsLWGQR .fx7 {dominant-baseline: alphabetic}#apAHIBsLWGQR .fc1 { fill: rgb(15, 20, 25); }#apAHIBsLWGQR .fc1 {fill: rgb(15, 20, 25)}#apAHIBsLWGQR .fb1 { fill: var(--N900-FG, 0.15); }#apAHIBsLWGQR .fb1 {fill: rgba(31,35,41, 0.15)}#apAHIBsLWGQR .fb2 { fill: rgb(207, 217, 222); }#apAHIBsLWGQR .fb2 {fill: rgb(207, 217, 222)}#apAHIBsLWGQR .fa4 { fill: var(--bg-body); }#apAHIBsLWGQR .fa4 {fill: #fff}ABC1234567层任务信息动作状态AI视觉要问的问题用户此刻完成什么？决定前必须看到什么？主次与危险操作怎样排序？哪些异常必须出现？做了什么、依据何在、人怎样接管？密度怎样支持任务？P04 的答案形成可追溯、可发送的售后回复客户、订单、知识、风险和最终文本确认保存 > 编辑 > 重跑 > 转人工无命中、工具超时、会话过期、保存冲突分类、检索、只读工具、起草、人工确认三栏分工、单一主按钮、风险靠近确认区
参考页面上的内容如果不能映射回这些问题，就不能因为“别人有”而加入项目。
截图要配任务卡
我们给 P04 写的任务卡包括：目标是在一页核验 AI 依据、修改建议并确认保存；必须保留工单上下文、来源、只读工具、风险、编辑器和确认区；不得照搬品牌、专有文案、自动发送和真实退款；必须覆盖 READY、缺信息、工具失败、待确认、完成和保存冲突。
第一步让 AI 只拆截图，不画页面：
代码块
Markdown
按用户任务、信息层级、主次动作、状态反馈、AI 透明度、人工控制、可迁移模式和不应照搬八列拆解截图。
截图只包含成功状态时，主动补列缺失的加载、空、失败、权限和冲突状态。
把每条结论映射到 P04 验收项；没有证据的内容标记为假设。
第二步才生成多个方向，而且不能只改颜色和圆角。
每一轮只改变一个变量
⭕
第一轮比较视觉密度：A 企业紧凑、B 现代平衡、C 服务亲和。我们选择 A，因为客服会连续处理大量工单，扫描效率比营销感重要。
50%
50%
⭕
第二轮比较页面主轴：A1 会话主轴、A2 工单主轴、A3 审阅主轴。选择 A1，因为理解客户问题和形成回复仍是核心任务。
50%
50%
⭕
第三轮比较消息表达：M1 工单日志、M2 对话气泡、M3 混合审阅。选择 M2，客户在左、客服在右、系统事件居中。
⭕
第四轮比较人工审阅：R1 一键插入、R2 对比审阅、R3 内联建议。第一版选择 R1，因为 AI 原稿与人工最终结果的边界最清楚。
所有候选使用同一条工单、同一系统状态、同一视口和同样的数据量。每轮保存全部截图，最终文件名增加“已选择”，不能只保留胜出方案。
用业务权重比较结构
结构方案还按照任务效率 25%、AI 透明与控制 20%、异常恢复 15%、权限 10%、信息密度 10%、实现成本 10%、一致性与无障碍 5%、展示解释 5% 做了加权。
任务工作台型得 92 分，会话优先型 82 分，流程分步型 79 分。最后选任务工作台作为日常结构，从会话优先型借常驻编辑器，从流程分步型借运行详情和失败定位，但不把三种结构硬塞进一张页面。
最后把选择写成设计契约
冻结组合是：A 企业紧凑 × A1 会话主轴 × M2 对话气泡 × R1 一键插入。
•
桌面三栏比例固定为业务上下文 22%、会话与回复 50%、AI 证据与控制 28%。左栏放队列、客户和订单，中栏放会话与最终回复，右栏放 AI 状态、来源、工具、建议和风险。1080px 以下变两列，760px 以下变单列，但不能删除来源、风险和人工确认。
•
视觉使用冷灰背景、白色内容区和 1px 分隔线，正文以 11～12px 为主，圆角以 5px 为基准。禁止装饰插画、大面积渐变、玻璃拟态和营销式阴影。
•
AI 每次开始新页面前先读取契约，列出相关规则和冲突；完成后报告遵守项、例外和未覆盖状态。任何会改变业务或责任边界的例外，都要等待人工确认。
先别问“能不能用”，先问“我喜欢它什么”
下面这个开关很有视觉冲击力。
v它首先是一个 Switch 组件。视觉上混合了 3D 拟物、玻璃材质、新拟态、内外阴影和绿色光晕。
如果直接放进企业工单工作台，会有几个问题：装饰比状态更抢眼；高光可能影响开关状态识别；大量使用会降低信息密度；动效和阴影还会增加实现与维护成本。
但这不代表整张参考图没有价值。可以继续问：我喜欢的是胶囊轮廓、绿色反馈、玻璃材质，还是滑动时的弹性感？
只要回答出其中一项，AI 就能开始适配。
再看这张卡片。
它接近浅色 Soft UI：低饱和蓝灰、大圆角、柔和阴影、按钮轻微浮起、留白充足。
整套搬进高密度后台，卡片之间的边界可能太弱。不过我们仍然可以保留蓝灰色和柔和感，只给 AI 建议卡增加轻微浮起，表格与风险区继续使用清楚的 1px 边框。
这就是“风格适配”：保留喜欢的原因，修改妨碍任务的部分。
四种处理办法
换一个更合适的页面
3D 玻璃开关不适合工单列表，却可以用在产品官网的 Hero、功能演示或课程宣传页。
企业产品和宣传页可以共享品牌色与字体，不必共用同一种按钮和动效。一个负责工作，一个负责让人产生兴趣。
拆出可以迁移的特征
不要给 AI 一句“把整个网站做成这种风格”。把参考拆成几项更容易控制：
•
色彩：低饱和蓝灰或绿色状态反馈；
•
几何：胶囊形、圆角大小和卡片比例；
•
层级：边框、阴影和浮起程度；
•
动效：切换速度、弹性和透明度变化。
只选真正喜欢的部分。剩余规则继续服从产品原来的设计系统。
降低视觉强度
很多“好看但不合适”的风格，不需要彻底删除，只需要降级。
例如把强烈玻璃质感改成轻微半透明，把多层阴影改成单层浅阴影，把发光动画改成短暂状态反馈，把大圆角改成与现有组件一致的圆角。
原来的气质还在，操作不会被装饰压住。
只放在一个局部
企业工作台不适合整页新拟态，不等于所有卡片都必须完全扁平。
可以把柔和层级留给 AI 建议卡、空状态、首次引导或运行结果摘要。表格、表单、权限和危险操作仍保持清晰、稳定。
局部使用还有一个好处：这个视觉重点会显得更特别，而不是铺满以后变成噪音。
安装 $choose-ui-with-ai 后，AI 会怎样处理？
把一张喜欢的参考图交给普通 AI，它很可能直接模仿颜色、阴影和排版。
安装 UI 选型 Skill 后，流程会多几步。
AI 会先识别这是什么组件，再拆分布局、视觉语言、材质效果和动效。接着判断它准备放在企业工作台、宣传页还是两者之间的公共区域。
然后输出三张清单：
如果参考仍有使用价值，Skill 会把它放进真实业务内容里做适配稿。对比时保持布局、文字和数据不变，只调整视觉强度或应用范围。
接下来还要做一次业务检查：主次操作是否清楚，风险是否醒目，文字对比度够不够，Loading、Disabled、Error 和人工确认是否完整，长时间使用会不会疲劳。
通过以后，AI 才会把选中的部分写成 Design Tokens 和组件规则。以后开发其他页面，不能因为又看到一张漂亮截图，就把整套风格换掉。
人需要做的决定并不多
使用者不用回答“这是不是新拟态”或者“阴影模糊半径应该是多少”。只要告诉 AI：
喜欢参考里的什么感受或细节；
想把它用在哪个页面或组件；
哪些内容不能影响，例如信息密度、风险识别或阅读；
看完适配稿后，选择更接近自己预期的一版。
像“我喜欢图二的柔和感，但边界要清楚一点”，已经是一条可执行的设计反馈。
可以直接交给 AI 的提示词
代码块
Plain Text
使用 $choose-ui-with-ai 分析这张我喜欢的 UI 参考。
先判断它属于什么组件、布局、视觉语言、材质效果和动效；
再判断它适合企业工作台、宣传页，还是只适合作为局部点缀。
不要直接照抄。请分别列出：
1. 可以保留的特征；
2. 为了适合当前业务需要调整的部分；
3. 不应该带入产品的部分。
如果可以适配，请使用我的真实业务内容生成对比方案。
保持现有布局、信息层级和功能不变，只比较应用范围或视觉强度。
收藏好看的界面没有错。真正需要练习的是把“我想要这个”说得更具体一点：我想要它的颜色、轮廓、层级，还是动效？