CRUD UI 线框图与组件规划(用例 → 屏幕 → 字段级行为)
将用户故事转化为屏幕地图、表单规格和组件行为,准备快速构建或交接。
提示词概览
精选 AI 合作伙伴
给你的提示
先设计标签页顺序;提前定义空状态;规范表格操作;禁用状态与隐藏状态一并记录。
来自运营团队NexusAi Technology解决的问题
团队在没有共享计划的情况下直接进入 UI 编码,导致返工。此方案连贯地定义了屏幕、表单和验证。
屏幕地图
从列表到详情再到创建的端到端路径。
组件规格
带规则的表格、表单、过滤器和操作。
RBAC 注释
按角色划分的可见性和禁用状态。
状态模式
空状态、错误状态和加载约定。
AI 提示词说明
角色定位:作为专注于速度、清晰度和数据质量的内部业务应用产品设计师和 UI 架构师。
任务重要性:清晰的屏幕和表单规则能缩短开发时间,减少验证错误。提前确定组件有助于提升一致性。
重要边界:
- 优先考虑键盘驱动的数据输入和无障碍模式。
- 保持视觉干扰低,强调验证和状态。
- 假设使用组件库(如 React + headless UI),但保持框架无关性。
用户输入:
- 主要用户故事及验收标准
- 实体和关键字段及其约束
- 所需角色和权限
目标:
1)生成屏幕地图和导航模型。
2)指定表单、表格、过滤器和内联验证。
3)记录每个屏幕和控件的权限。
4)定义空状态、错误状态和加载状态。
分析流程:
1)将故事转换为屏幕和流程。
2)列出每个屏幕的组件和字段规则。
3)定义表格列、排序、过滤和分页。
4)指定成功/错误提示和撤销/回滚模式。
5)映射基于角色的可见性和禁用状态。
所需输出格式:
- 屏幕地图
- 每个屏幕的组件与行为
- 每字段的验证规则
- 按角色的 RBAC 备注
- 状态处理(空/错误/加载)
- 交接清单
质量控制:
- 每个操作都有可见的状态变化和确认。
- 所有必填字段均有内联验证和帮助文本。
验证清单:
- 每个故事至少有一个屏幕映射
- CRUD 流程有一致的导航和面包屑
最终指令:输出适合快速线框设计或组件任务的结构化计划。
预期结果
屏幕地图:仪表盘、请求列表、请求详情、新建请求、管理员设置。 组件:请求列表(表格,列:id、标题、状态、负责人、更新时间;过滤器:状态、负责人;操作:查看、编辑)。验证:标题必填;金额为大于0的数字。 RBAC:请求者可创建;审批者可更新状态;管理员管理角色。 状态:空状态显示行动号召;错误显示内联消息;加载显示骨架屏。
实施流程
在 ChatGPT 中生成 UI 规划
向 ChatGPT 提供您的主要用户故事和字段约束。运行提示以获取带有标签部分的屏幕地图、组件列表和验证规则。
20 min创建低保真线框图
打开 Figma,使用组件列表绘制每个屏幕。利用验证规则在画布上注释字段并定义错误状态。
30 min将组件拆分为任务
将各部分导出到您的问题跟踪器作为任务:表格、表单、过滤器、RBAC 检查。附上 Figma 链接并复制每个任务的验收标准。
15 min
