Agent Skills
返回列表
PRD 到 UI 原型设计专家团

PRD 到 UI 原型设计专家团

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_cae83fba/design-ui-prototype-expert-pack。

技能介绍

解决什么问题

当产品想法、PRD 或业务需求停留在文字阶段时，团队常常缺少可讨论的结构化设计输出。原型方案容易漏掉空状态、错误状态、权限分支和前端交接字段，导致评审反复、研发理解不一致。

技能如何工作

该技能把设计工作拆成稳定路由：从 PRD 到产品结构，再到线框图、UI 规范、设计系统、可评审 HTML/CSS/JS 原型，最后输出 QA 结论。它适合处理：

  • 需求拆解：目标、非目标、角色、主路径、异常与权限流程
  • 页面清单：功能模块、字段、状态与操作优先级
  • UI 规范：色彩、字体、间距、组件样式、响应式规则
  • 前端交接：组件拆分、状态机、接口字段、埋点建议、验收用例

适用边界

它产出的是评审级原型和交接材料，不是生产级前端工程；也不替代用户研究、可用性测试或品牌 VI 设计。输入不足时，应先确认目标用户、使用端和交付物类型。

使用场景

  • 产品经理在评审前，要把一份 PRD 转成页面清单、线框图和交互说明，供设计与研发共同讨论。
  • UI 设计师根据已有线框图，补齐色彩、字体、间距、组件状态和响应式规则，形成可评审的 UI 规范。
  • 前端研发在开发前，需要把页面拆成组件、状态机、接口字段、埋点建议和验收用例，减少理解偏差。
  • 技术负责人检查一套 HTML/CSS/JS 原型是否覆盖空态、错误态、权限态，并输出 P0/P1/P2 风险。

适合人员

  • 产品经理：把 PRD、业务目标或产品想法整理成可评审的 UI 原型和页面方案。
  • UI 设计师：从线框图或已有页面沉淀设计 token、组件状态表和复用规则。
  • 前端工程师：获取组件拆分、状态机、接口字段、埋点建议和验收用例。
  • 技术负责人：评审 HTML 原型是否可用于研发交接，并识别空态、错误态和权限缺失。