参考驱动的 UI 设计通过参考图、动效页面和现有组件库约束 AI 的布局、风格与实现边界。
定义
参考驱动的 UI 设计是先提供可观察的视觉或交互参考，再结合项目现有框架、组件库和业务流程约束 AI Agent 生成界面的工作方法。参考用于表达偏好和结构特征，不代表照抄原页面。
基本流程
- 选择少量能代表布局、配色或信息密度偏好的静态参考图。
- 对动效需求提供可访问的真实页面，让 Agent 分析状态变化、节奏和交互反馈。
- 明确现有技术栈与组件库，要求优先复用项目已有组件，再做局部样式调整。
- 先确定信息架构、布局和操作流程，再进入 Color System、间距、字体和动效细节。
- 用桌面与移动端截图复验文本、溢出、响应式布局和交互状态。
边界与风险
- 参考图不能替代业务目标、内容优先级和可访问性要求。
- 社区对某个 Skill 或工具的效果评价属于经验判断，不能直接推导为跨模型、跨项目的普遍结论。
- 只模仿视觉表面容易忽略组件状态、数据密度、键盘操作和错误反馈。
- 引用真实产品时应提取设计原则，避免复制受版权或品牌保护的独特表达。
相关概念与实体
当前结论
高质量 UI 生成依赖“参考材料 + 项目约束 + 可验证实现”三者同时存在。参考材料主要降低审美表达歧义，组件复用和跨视口验收负责把设计落到可维护产品中。