跳到正文

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/ui-workflow.md

本文中的脚本路径以本 skill 根目录为准。

新视觉方向、已有界面复用和局部修复分别识别。已有批准方案时继承;单页修改不追加菜单或全局设计。只读审查不要求生成新资产或新页面。

范围与来源

目标依据用户最新决定、批准需求和确认设计;代码及当前界面记录实现现状。缺少实现的目标页面仍纳入范围。推导和未知分别标记,不从视觉资料决定后台业务规则。

按需要读取:

设计与实施

  1. 记录平台、视口、页面、业务动作、风格、品牌、工具限制与用户授权。
  2. 将需求映射到页面、弹窗、交互状态、结果及错误恢复;额外建议不混入批准分母。
  3. 定义语义 Token、字体层级、颜色、间距、组件尺寸、换行、焦点、状态和响应式行为。
  4. 共享组件变更建立实际使用页面清单,检查继承规则,不能只修改和验证示例页面。
  5. 覆盖长内容、结果出现、空列表、加载、错误、权限、弹窗、缩放和键盘操作;检查滚动容器、固定导航、标题、浮层和底部内容的相互影响。
  6. 自适应规则明确可用区域、最小尺寸、超出内容后的滚动方式,保持用户确认的导航和页面结构。
  7. 资产按槽位、尺寸、来源和许可选择;新定制图像确有需要且用户允许时使用可用生成能力,复用资产不强制重新生成。
  8. IMPLEMENT 检查当前文件与未提交改动,修改后运行对应类型、构建、资源及交互回归;业务规则和接口变化单独核对授权及需求。

验证与声明

用户禁止视觉工具时遵守限制,可进行获准的 DOM、计算样式、可访问性与行为检查;这些证据不能替代未执行的视觉检查。声称视觉一致时,必须在获准条件下核对相同视口和状态。

使用 scripts/audit_ui_delivery.py 验证交付清单、引用、文件及图片有效性。依赖列于同目录 requirements.txt。脚本不生成产品图片,不执行视觉识别,也不证明交互或视觉效果。

输出与交接

按所选模式交付设计、实际修改或审查记录,附页面与状态分母、资产来源、检查结果和未验证项。完整设计保留 Token、组件、状态和资产;局部任务引用现有规范与实际变更,避免无关重复产物。

向 S005-4/S007 传递范围、组件和动态状态要求,向 S009 提供受影响页面及行为检查。状态遵循 交付记录,页面存在和校验器通过不能替代完整 UI 验收。

Haonan S003-2 UI 设计 · 原理图

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

CONTACT HAONAN

联系haonan

医疗 AI · 产品与独立开发

刘浩南

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

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

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