Design UI Prototype Team

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

whyzsm e5a91db 6 files · 8.5 KB Updated

File contents

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 变量。
  • 若用户只要某个局部产物,按需调用相关子技能,不强行完整跑六步。

whyzsm/tiny-agents/tree/main/skills/design-ui-prototype-team commit e5a91db3ea

Frequently asked questions

npx skillmds@latest add whyzsm/design-ui-prototype-team