从产品需求零提问直出PRD到设计方向、设计稿像素级还原，到设计令牌体系与组件规范制定、UI设计质量审查与反模式识别，再到低保真线框图绘制和高保真生产级HTML/Tailwind原型输出的完整UI原型设计工作流。支持Figma/Sketch设计稿解析、响应式布局、移动优先设计、设计系统构建和交互原型生成。
概述
你现在要完成一项从产品需求到高保真原型的 UI 原型设计任务。你已安装以下 Skill，请按步骤串联使用：
步骤 1：需求分析与 PRD 输出（获取层）
使用 PRD to Prototype 完成：
- 接收用户的产品想法或需求描述
- 零提问模式直接输出结构化 PRD（产品需求文档）
- 明确目标用户、核心功能、页面列表和交互要求
- 确认目标平台（移动端/PC端/双端）
- 生成设计方向建议和功能优先级排序
输出 PRD 文档和平台选择确认。
步骤 2：设计稿解析与像素还原（获取层）
使用 Design To Code 完成：
- 如有现成设计稿（Figma、Sketch 或截图），进行像素级解析
- 提取设计稿中的布局结构、间距、字体、颜色等参数
- 识别响应式断点和自适应规则
- 将设计稿转为结构化的设计规格说明
输出设计规格参数和布局结构描述。若无现成设计稿则跳过此步，由后续步骤从零设计。
步骤 3：设计系统与规范制定（分析层）
使用 UI Design System 完成：
- 基于 PRD 和设计规格，构建设计令牌体系（颜色、字体、间距、圆角等）
- 定义组件库规范（按钮、输入框、卡片、导航等基础组件）
- 设计响应式布局策略和断点规则
- 生成设计令牌文档（CSS 变量 / Tailwind 配置）
- 建立组件命名和状态管理规范
输出设计令牌文件和组件规范文档。
步骤 4：UI 设计质量审查（分析层）
使用 UI Design 完成：
- 审查设计方案的布局合理性（视觉层级、信息密度）
- 检查排版系统（字号层级、行高、对齐）
- 验证色彩搭配（对比度、可访问性 WCAG 标准）
- 评估间距一致性和组件复用性
- 识别常见 UI 反模式并给出修正建议
输出设计质量审查报告和优化建议。
步骤 5：低保真线框图绘制（输出层）
使用 Wireframe 完成：
- 绘制核心页面的低保真线框图（ASCII 或 SVG 格式）
- 标注页面间的跳转关系和用户流程
- 定义每个页面的功能区块和内容占位
- 导出线框图用于团队评审
输出线框图文件和用户流程图。
步骤 6：高保真原型生成（输出层）
使用 Frontend Design Pro 完成：
- 基于线框图和设计系统，生成高保真 HTML/Tailwind 原型
- 实现移动优先的响应式布局
- 添加微交互动效和过渡效果
- 确保视觉效果达到生产级水准（Awwwards 级别）
- 输出单文件可预览的 HTML 原型
最终输出
将以上步骤的结果整合为完整的 UI 原型设计包，交付以下文件：
- PRD 文档：产品需求、功能列表、目标平台
- 设计令牌与组件规范：颜色/字体/间距令牌、组件库定义
- 设计审查报告：布局/排版/色彩/可访问性检查结果
- 线框图：核心页面低保真布局和用户流程
- 高保真 HTML 原型：可直接在浏览器中预览的交互原型
技能模块
这个专家包由 6 个技能串联而成，按下面的顺序依次调用即可跑通整套工作流。点击卡片可看单个技能的完整说明。
PRD to Prototype
从产品需求到可交互原型的完整工作流。当用户表达产品想法（如'我想做一个…'、'帮我设计…'）时触发。支持：1) 零提问直出PRD 2) 平台选择确认 3) 生成Awwwards级别的高…
Design To Code
Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsi…
UI Design System
资深产品设计师方法论，确保深入用户研究、结构化架构、易访问的颜色与排版系统，以及像素级完美的用户界面。
Ui-design
UI 设计 skill。当用户需要设计用户界面、产出 UI 设计稿/线框图/原型，或请求页面布局、配色、字体、间距、组件方案时使用。覆盖桌面端管理后台、数据可视化大屏、移动端 App、响应式网…
Wireframe
创建线框图和用户流程。用于 ASCII/SVG 绘制页面布局、流程映射或导出 HTML。
Frontend Design Pro — 专业前端设计规范
前端设计质量提升 skill。让 AI 生成的 UI/前端代码更专业，避免常见设计反模式。 参考 impeccable 项目的设计语言规范，提供 audit/polish/critique 等…
下载 Zip 包
解压到你的项目目录即可使用，包内结构与 SkillHub 原包一致：manifest.json + skillsets/ + skills/。
https://www.zhengdianxue.com/wp-content/uploads/skillpackage/design-ui-prototype.zip将提示词发送给你的 AI 安装该专家包
把下面这段提示词复制给你的 AI 助手（WorkBuddy、Claude Code、Codex 等均可），它会按 SkillHub 官方安装说明把整套专家包装好。
请根据 https://skillhub.cn/install/skillhub-pack-install.md，安装 design-ui-prototype。
