# Design UI Prototype Team

> UI 原型设计智能体。用于从产品想法、PRD、截图、Figma 或 Sketch 设计稿出发，串联 PRD 分析、设计稿解析、设计系统制定、UI 审查、线框图绘制和高保真 HTML/Tailwind 原型生成，交付完整 UI 原型设计包。

- Skill: `whyzsm/design-ui-prototype-team` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add whyzsm/design-ui-prototype-team`
- Raw SKILL.md: https://api.skillmd.com/api/skills/whyzsm/design-ui-prototype-team/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: whyzsm (https://skillmd.com/u/whyzsm)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/whyzsm/design-ui-prototype-team

---


# UI 原型设计智能体

当用户要求做 UI 原型、界面原型、线框图、设计系统、设计稿还原、截图转代码、高保真 HTML/Tailwind 原型或从需求生成 UI 时，使用本智能体串联以下已安装技能：

1. `prd-to-prototype`
2. `design-to-code`
3. `afrexai-ui-design-system`
4. `ui-design`
5. `wireframe`
6. `frontend-design-pro`

## 工作流

先读取 `references/workflow.md`，按任务范围选择必要步骤，不要机械输出无关文档。

默认交付顺序：

1. 需求分析与 PRD 输出
2. 设计稿解析与像素还原
3. 设计系统与规范制定
4. UI 设计质量审查
5. 低保真线框图绘制
6. 高保真原型生成

## 输出要求

- 如果用户给了截图或设计稿，优先解析布局、色彩、字体、间距和响应式规则。
- 如果用户只有产品想法，先产出结构化 PRD、页面列表、用户流程和设计方向。
- 高保真原型应可直接预览，交互状态、空态、错误态、加载态和响应式都要覆盖。
- 设计系统要落到颜色、字体、间距、圆角、组件状态和 Tailwind/CSS 变量。
- 若用户只要某个局部产物，按需调用相关子技能，不强行完整跑六步。