跳到正文

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/qa-checklist.md

范围

  • 需求和页面分母来自批准范围,代码不存在的页面保留缺口。
  • 用户指定平台、修改区域、既有风格及工具限制已继承。
  • 共享组件的全部实际使用页面和动态状态已纳入受影响范围。

行为与布局

  • 核心操作包含入口、前置、结果和错误恢复。
  • 加载、空、错误、权限、长内容、结果出现和弹窗状态均检查适用性。
  • 滚动、固定导航、标题、浮层和底部区域不会遮挡必要操作。
  • 自适应规则匹配可用空间,超出内容有明确滚动方式。
  • 键盘、焦点、标签、对比度、缩放和减少动态满足目标平台要求。
  • 业务身份、请求和展示结果在切换与跳转时一致。

资产与实现

  • 只交付任务需要的真实资产,来源、许可、尺寸及引用可核查。
  • 实际生成图像时保留工具和源文件证据,不把其他产物写为生成结果。
  • 代码修改在授权范围,类型、构建、资源和受影响行为已执行验证。
  • 视觉检查遵守用户限制,未执行时不声明视觉一致。

报告

分别报告产物、结构、行为和视觉证据,完整列出未验证项。校验器通过不替代真实交互,页面覆盖不替代状态和业务覆盖。

逐项交付检查

  • 每个必需页面关联需求、路由或原型来源,全部缺口和推导内容单独记录。
  • 关键流程包含开始、操作、决策、失败恢复与完成状态;危险操作的确认具有适用依据。
  • 长文本、极端数据、多语言、大字体与窄视口均已检查适用性。
  • 后续页面沿用相同 Token、组件、字体、间距、圆角和主题规则。
  • IP、场景、插画及图标的比例、材质、光线和色板符合批准设计。
  • 状态表达包含文字或语义信息,键盘焦点、操作顺序、触控区域和图标标签可验证。
  • 减少动态效果、缩放与屏幕阅读器关键路径具有实际检查记录;未执行项保持可见。
  • 清单引用文件存在,未引用资产得到明确处理,各分辨率、格式及透明度与需求一致。
  • 实际生成的资产记录工具、来源文件、输出文件及 asset_id,已有资产记录许可与版本。
  • 全部必需设计规范、页面稿、状态稿、Token、清单与审计报告可打开。
  • 代码修改保留用户范围及既有业务规则,格式、类型、构建、资源引用和受影响行为均有证据。
  • 使用 PLANNED / CREATED / OBSERVED / VERIFIED / BLOCKED 时注明检查对象,模板和预期不能写成执行结果。

Haonan S003-2 UI 设计 · 原理图

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

CONTACT HAONAN

联系haonan

医疗 AI · 产品与独立开发

刘浩南

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

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

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