UI 原型设计智能体。用于从产品想法、PRD、截图、Figma 或 Sketch 设计稿出发,串联 PRD 分析、设计稿解析、设计系统制定、UI 审查、线框图绘制和高保真 HTML/Tailwind 原型生成,交付完整 UI 原型设计包。
Scanned 9/12/2026
Install to Claude Code
npx -y skills add whyzsm/tiny-agents --skill design-ui-prototype-team --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Design Ui Prototype Team?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/whyzsm-design-ui-prototype-team)More formats (shields.io, HTML) on the badges page.
---
name: design-ui-prototype-team
description: UI 原型设计智能体。用于从产品想法、PRD、截图、Figma 或 Sketch 设计稿出发,串联 PRD 分析、设计稿解析、设计系统制定、UI 审查、线框图绘制和高保真 HTML/Tailwind 原型生成,交付完整 UI 原型设计包。
---
# 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 变量。
- 若用户只要某个局部产物,按需调用相关子技能,不强行完整跑六步。
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.