跳到正文

Haonan S003-2 UI 设计

面向现有产品或新产品的整套高保真 UI 设计与交付技能,支持三类输入:完整项目/代码、只有 PRD 需求文档、只有原型/线框图/截图。能够从现有路由盘点真实页面,或从 PRD 推导信息架构、任务流和页面状态,或从原型反推组件、交互与缺失边界;随后锁定视觉方向、建立设计系统、逐页补齐正常/加载/空/错误/确认/反馈/完成等状态,生成真实配图与图标切图,输出设计规范、页面设计稿、资产清单、假设清单和自查报告,并可在用户明确授权后落地现有前端。Use when Codex needs to design or redesign an app、小程序、H5、移动端或Web产品,即使用户没有代码,只有PRD或只有原型;也适用于解决页面遗漏、边距不合理、IP缺失、后期质量下降、视觉不一致、切图不完整、设计规范缺失,或核对“是否全部页面和全部切片都包含”的任务。

个人 Skill产品研发10 个文件浏览次数 0
开始使用

下载前阅读 SKILL.md 中的使用条件,并确认所用工具支持对应能力。

交付内容
设计规范必须说明: 品牌理念和视觉关键词。 色彩、字体、栅格、间距、圆角、阴影与动效 Token。 组件正常/按下/禁用/加载/错误状态。 IP形象、场景背景、插画和图标使用规则。 页面结构模板和模块主题映射。 切图规格、命名、适配、安全区与开发标注。 禁用做法和常见一致性问题。 同时提供可阅读版 PDF 和可维护的 Markdown/JSON Token 文件。 阅读本节完整说明
  1. 获取完整包,保留配套文件的目录结构。
  2. 按照原文准备所需工具、依赖与输入资料。
  3. 阅读对应使用步骤与输入输出说明,在自己的环境中验证结果。

使用提示摘自原文,配套文件保留来源版本;实际运行条件以各包说明为准。

正文

获取原文件

references/coverage-and-states.md

1. 页面盘点

现状审查从以下位置交叉取数;目标页面集合同时保留用户批准但尚未实现的页面:

  • 路由配置、文件系统路由和动态路由参数。
  • 一级/二级导航、快捷入口和深链。
  • 弹窗、抽屉、步骤流、条件分支和权限页面。
  • 404、403、登录失效、维护和离线页面。

PRD 或原型模式从角色、任务、入口、结果和恢复路径推导页面。推导项标记为 INFERRED。

2. 映射表字段

route-design-map.csv 或 screen-design-map.csv 至少使用:

source_id,screen_id,name,source_type,requirement_refs,status,required_states,artifact_path,notes
  • source_type:EXPLICIT、INFERRED、UNKNOWN。
  • status:PLANNED、CREATED、OBSERVED、VERIFIED、BLOCKED、NOT_APPLICABLE。这些状态描述页面产物,与任务和业务验收状态分别记录;OBSERVED 仅表示已读取现有产物。
  • requirement_refs:PRD、路由或原型屏幕的可追溯编号。

3. 状态族

按适用性检查:

  1. 数据:初始、加载、增量加载、刷新、空、部分数据、过期。
  2. 网络:慢网、离线、超时、断线重连、重复提交。
  3. 权限:未登录、无权限、权限申请、会话过期。
  4. 操作:默认、进行中、成功、失败、撤销、确认、危险操作。
  5. 内容:短文本、长文本、异常字符、多语言、图片失败。
  6. 业务:锁定、审核中、驳回、完成、归档、已删除。

状态不适用时写明原因,不能简单留空。

4. 流程完整性

每个核心任务流至少记录:

  • 入口和前置条件。
  • 主路径与关键决策点。
  • 中止、返回、失败和恢复路径。
  • 完成状态和后续动作。

覆盖率分母必须来自可核查基线。不要把“推导出的建议页面”混入“原始范围已覆盖”数字。

5. 完成度计算

  • 页面覆盖率 = 已创建必需页面 / 必需页面总数。
  • 状态覆盖率 = 已创建适用状态 / 适用状态总数。
  • 验证覆盖率 = 已完成要求验证的必需页面和状态 / 全部必需页面和状态。

分别报告,不合并成一个模糊百分比。任何 BLOCKED 项单列原因和解除条件。

Haonan S003-2 UI 设计 · 原理图

查看原图
Haonan S003-2 UI 设计 原理图

CONTACT HAONAN

联系haonan

医疗 AI · 产品与独立开发

刘浩南

关注医疗 AI 从 demo 到真实落地,聚焦产品化、商业化与院内工作流效率提升。

12年医疗产研经验,大湾区头部医疗AI公司前产品总监,独立开发者

医疗 AI 产品化医疗 AI 商业化院内工作流效率
刘浩南的微信联系二维码
微信扫一扫,联系 haonan