第三节：从 PRD 到七页面原型

​

有了 PRD，如果直接让 AI“生成一个企业 AI 网站”，它很可能给出首页、Dashboard、几张数据卡片和一个聊天框。我们先做页面地图：每个页面都要回答谁来这里、完成什么任务、需要哪些信息、完成后去哪里。​

​

​

​

七个页面对应七个任务​

P01 产品介绍和 Demo 入口。它要在十秒内说明产品是什么、解决什么问题、下一步点哪里，并持续展示“合成数据、非生产环境”。试用申请只验证意向，不接真实销售系统。​

P02 登录与角色入口。使用一线客服、客服主管和系统管理员三个预置账号，不开放注册和找回密码。需要覆盖错误凭证、停用账号和无权限访问。​

P03 工单列表。最低字段包括工单号、主题、客户、类别、优先级、状态、负责人和更新时间。搜索、筛选、排序、分页，以及返回列表后恢复筛选和滚动位置都属于任务。​

P04 核心工单详情。客服要同时看到客户与订单上下文、会话、AI 状态、知识来源、工具结果、风险和最终回复。AI 建议不能直接发送，要经过插入、编辑和确认。​

P05 企业知识库。管理员不仅上传文件，还要看到版本、处理状态、片段数量和更新时间，并运行检索测试，确认文档真的可以被找到和引用。​

P06 固定评测。使用同一组业务与安全案例比较模型、提示词和知识版本。页面不能只给总分，还要能打开失败案例，定位分类、引用、安全或工具恢复问题。​

P07 管理与审计。这里查看预置账号、环境状态和关键日志。日志需要回答谁、何时、执行了什么、影响哪个对象、结果怎样，同时隐藏敏感字段。​

先画主路径，再补状态​

​

⭕

一线客服的主路径是：登录 → 找到高优先级工单 → 阅读客户上下文 → 查看 AI 找到的依据 → 编辑建议回复 → 人工确认保存。​

​

💡 页面跳转也提前确定：P01 的只读 Demo 进入 P03；不同角色登录后进入 P03、P06 或 P05；P03 打开 TK-20260719-028 进入 P04 READY；P04 确认保存后进入 COMPLETED；P06 点击失败案例打开详情；P07 点击日志打开脱敏详情。​

主路径确定后，再为每个节点补状态。​

工单列表要区分“系统没有数据”和“当前筛选无匹配”；知识库要覆盖可用、处理中、已停用和处理失败；详情页要覆盖缺信息、检索无命中、工具失败、转人工和保存冲突；无权限页面不能先显示敏感内容再弹提示。​

低保真阶段决定什么​

这一步需要确定页面与导航、信息层级、主次动作、字段、状态、权限、跳转和提示文案。​

暂时不锁定品牌色、插画、复杂动效、最终栅格与组件库。按钮圆角是 4px 还是 6px，可以以后校准；“人工确认必须和最终文本同屏”不能推迟到开发时再讨论。​

每个任务区最多一个高强调主按钮。次操作使用中性按钮或文字链接。危险操作需要说明影响并再次确认。系统状态靠近当前任务，不能只用红黄绿表示。​

桌面以 1440px 为基准，三栏详情在 1280px 仍能完成任务。移动端不属于第一版，但登录、筛选、打开工单、编辑和确认需要支持键盘。​

原型不是七张静态图​

低保真原型至少要演示这些分支：​

•

工单列表筛选后打开详情，返回时恢复上下文；​

•

AI 发现缺失信息时停止生成确定性结论；​

•

检索无命中时补充信息或转人工；​

•

订单工具失败时重试、降级或人工处理；​

•

高风险回复保存前二次确认；​

•

并发冲突时比较版本，不能覆盖新数据；​

•

审计详情隐藏密钥与完整客户信息。​

只有这些状态可以点击，原型才真正成为后续开发和测试的输入。​

可以直接交给 AI 的页面拆分指令​

​

代码块​

Markdown

读取已经确认的一页产品说明和轻量 PRD。先不要设计视觉。​

​

请从“角色—任务—入口—信息—动作—状态—出口”拆分页面。​

每个页面输出：主要角色、核心任务、最低字段、唯一主操作、次操作、危险操作、正常状态、空状态、失败状态、无权限状态、跳转目标和验收条件。​

​

如果某个页面只是在展示一个 AI 能力，却不对应用户任务，请合并或删除。​

不得新增 PRD 之外的角色、支付、真实退款、自由注册和多 Agent 功能。​

​

七个页面和状态链确定后，我们才开始讨论 UI。​