UI 规格

技能名称:view-spec

背景与适用场景

在把用户故事交给UI设计师画原型或者交给前端开发写页面之前,需要先把「这个页面有哪些元素、点击后发生什么、数据从哪里来」这些交互规则说清楚。否则设计师和开发者会各自脑补,导致最终页面和需求预期不一致。这个技能产出的是UI设计师和前端开发都能读懂的视图操作规格。

输入与输出

你需要提供:已确认的用户故事集和需求规格说明书。

你将获得:UI视图操作规格表,包含:每个页面的组件映射(有哪些输入框/按钮/列表)、数据转化规则(展示的数值怎么计算)、阀门条件(什么情况下哪个按钮可点)、操作链(点击后触发什么)。

流程说明

Agent 会逐个场景、逐个页面帮你定义:这个页面有哪些 UI 组件(输入框、按钮、列表)、展示的数据怎么转化计算、什么条件下哪些操作可用、用户点击按钮后触发什么操作链。产出的是 UI 设计师和前端开发都能直接使用的视图操作规格表。

flowchart TD s0["视图规格准备"] s1["单场景内页面 by 页面递进"] s2["单场景页面一致性自检与收口"] s3["校验与确认"] s4["文档整合:元数据 + 视图规格准备"] s5["文档整合:所有场景页面规格"] s6["文档整合:校验清单 + 待澄清事项 + 定稿声明"] s0 --> s1 s1 --> s2 s2 --> s3 s3 --> s4 s4 --> s5 s5 --> s6