跳到正文

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/prd-and-prototype-inputs.md

PRD 输入

提取角色、使用环境、目标、流程、验收、对象、状态、权限、平台和品牌要求。每项需求映射入口、操作、反馈、结果与恢复路径。后台规则缺失时保持未知,不在 UI 阶段自行制定。

现有原型与实现

记录屏幕、入口、导航、弹层、主要控件、数据来源和状态。代码与画面只说明当前实现,缺少的已批准功能继续保留在目标范围。

目标依据依次为用户最新明确决定、批准需求、确认设计、明确标注的推导。现状依据运行结果、源码、实际路由及其他可核查材料。冲突同时记录目标与现状,不能静默缩减目标。

未知与约束

只有必要答案会改变核心流程、实质范围或授权动作时提问。其他推导注明来源及影响,沿用已经确认的风格、平台、修改范围和工具限制。

假设记录 ID、来源类型、依据、内容、影响和待验证条件;新建议与批准范围分开。

逐项输入记录

输入 必须提取的内容 交付映射
PRD 角色、权限、使用环境、目标、成功指标、用户故事、验收条件、业务对象与异常规则 需求 ID、入口、操作页、反馈、结果页与恢复路径
原型 屏幕名称、入口、退出、前后页面、导航层级、控件、内容类型、可见状态 屏幕图谱、组件关系与状态清单
现有代码 实际路由、页面、导航、弹窗、条件分支及数据来源 当前实现证据与批准需求之间的差异
用户约束 平台、尺寸、品牌、内容、代码范围、视觉权限与交付格式 每项交付物的适用要求

逐屏检查加载、空、错误、权限和确认状态。可直接验证的内容标记 EXPLICIT,交互必需的推导标记 INFERRED,无法确认的后台规则标记 UNKNOWN。

假设与问题清单

ID 类型 来源 假设或问题 影响 当前处理 状态
[稳定 ID] EXPLICIT / INFERRED / UNKNOWN [具体资料] [内容] [页面或流程] [已有决定或待验证动作] [当前状态]

品牌方向、核心任务流、代码权限、不可逆交付差异或受限资产的必要信息缺失时,等待对应决策。其余可逆工作保留假设并继续,不自行制定计费、权限和数据规则。

Haonan S003-2 UI 设计 · 原理图

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

CONTACT HAONAN

联系haonan

医疗 AI · 产品与独立开发

刘浩南

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

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

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