文章目录 / 点击展开
AI 可以加快需求整理和方案发散，但不能替代产品判断。线框到高保真的正确顺序是先确认任务和内容，再建立布局、状态和组件，最后才处理视觉细节。
第一步：把需求改写成任务流
向 AI 提供目标用户、核心任务、业务规则、已有页面和必须保留的内容，让它输出用户进入页面前的状态、主要步骤、成功结果和失败分支。
请把以下需求整理成任务流。
输出：用户目标、入口、主要步骤、决策点、空状态、加载、错误、成功和退出方式。
不要设计界面，不要新增需求；把缺失信息列为待确认问题。先与产品和研发确认流程。若业务规则仍然不清楚，直接生成高保真只会更快地产生返工。
第二步：建立内容清单
列出页面必须出现的标题、说明、字段、操作、状态反馈和帮助信息。使用接近真实长度的中文内容，避免 lorem ipsum 掩盖排版问题。
AI 可以生成字段示例、错误提示和空状态文案，但所有业务术语、限制条件和法律文本必须由负责人确认。
第三步：先做低保真线框
在 Figma 中只用灰阶、基本文字和简单容器表达层级。先验证主要任务是否明显、操作顺序是否自然、页面在不同内容量下是否成立。
准备桌面和移动端关键帧，并为固定格式区域设置稳定尺寸，例如工具栏、表格、棋盘或预览区。不要让内容多少决定控件尺寸，否则真实数据加载后会产生跳动。
第四步：覆盖完整状态
至少设计默认、悬停、聚焦、禁用、加载、空、错误和成功状态。表单还要考虑必填、校验、提交中和服务端错误。
可以让 AI 根据任务流检查状态遗漏，但最终画面必须在 Figma 中真实存在，不能只写在说明文档里。
第五步：组件化并进入高保真
优先使用现有设计系统的按钮、输入、标签、导航和卡片。新增组件时先确认它解决的是重复问题，而不是只服务一个画面。
高保真阶段再应用颜色、字体、间距和图像。检查对比度、键盘焦点、触控目标、文本换行和 375 像素宽度下的布局。Figma AI 功能和使用范围会变化，可核对 Figma 官方帮助中心。
第六步：准备研发交付
标明组件状态、响应式规则、内容边界、空错误状态和交互顺序。复杂动画应描述触发、持续时间、缓动和中断行为，而不是只给一张静态图。
与研发一起检查真实数据、权限差异和技术限制。交付完成不等于设计结束，上线后仍需根据使用问题修正。
交付检查清单
- 核心任务是否在第一视口清晰可见。
- 页面内容是否使用接近真实长度的文案。
- 加载、空、错误、禁用和成功状态是否齐全。
- 组件是否复用现有设计系统。
- 桌面和 375 宽度是否无重叠、无横向滚动。
- 文本、控件和图标是否满足可读性与对比度。
- 研发是否获得响应式和状态规则。
常见问题
AI 能直接从需求生成可交付高保真吗
它可以生成起点，但通常缺少真实业务状态和组件约束。先确认流程和内容，再进入高保真更可靠。
什么时候适合新增组件
当同一交互或视觉结构在多个位置重复，并且状态与行为可以统一时。单个页面的特殊容器不一定值得抽象。
为什么线框阶段也要做移动端
移动空间会暴露信息优先级和操作顺序问题。等高保真完成后再适配，通常需要更大范围返工。