步骤 3：生成 MVP PRD（如果未提供）

使用 Task 工具配合通用子代理，并提供：

来自 assets/app-overview-generator.md 的提示模板：

• 将 {项目背景} 替换为项目构思文件的内容
• 该模板引导完成：电梯演讲、问题陈述、目标受众、独特卖点、功能列表、UX/UI 考量

与用户互动以完善和澄清产品需求

输出：结构化的 PRD Markdown 文档

保存为变量供步骤 4 使用（可选择保存到 documents/prd/）

步骤 4：组合最终的 UI 实现提示

使用 assets/vibe-design-template.md 组合设计系统和 PRD：

替换内容：

• {项目设计指南} → 来自步骤 2 的设计系统
• {项目MVP PRD} → 来自步骤 3 的 PRD 或提供的 PRD 文件

结果：完整的、可立即用于实现的提示，包含：

• 设计美学原则
• 项目特定的颜色/排版指南
• 应用概览和功能需求
• 实现任务（多种 UI 变体、组件结构）

保存到：documents/ux-design/{idea_file_name}_design_prompt_{timestamp}.md

步骤 5：验证 React 环境

检查是否存在现有的 React 项目：

find . -name "package.json" -exec grep -l "react" {} \;

如果未找到，通知用户：

npx create-react-app my-app
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install lucide-react

步骤 6：实现 UI

使用步骤 4 中组合的最终提示在 React 项目中实现 UI。

该提示指示：

• 创建多种设计变体（移动端 3 种，网页端 2 种）
• 组织为独立的组件：[solution-name]/pages/[page-name].jsx
• 将所有变体汇总到展示页面中

模板资源

assets/design-system.md

用于提取视觉设计模式的模板。包含以下部分：

• 配色方案（主色、辅色、强调色、功能色、背景色）
• 排版（字体族、字重、文本样式）
• 组件样式（按钮、卡片、输入框、图标）
• 间距系统（4dp-48dp 比例）
• 动画（持续时间、缓动曲线）
• 深色模式变体

在分析参考图像时使用此模板，以确保全面覆盖设计系统。

assets/app-overview-generator.md

用于协作生成 PRD 的模板。引导完成：

• 电梯演讲
• 问题陈述和目标受众
• 独特卖点
• 平台目标
• 包含用户故事的功能列表
• 每个屏幕的 UX/UI 考量

设计用于与用户互动完善，以澄清需求。

assets/vibe-design-template.md

组合了设计系统和 PRD 的最终实现提示模板。包含：

• 美学原则（极简主义、留白、色彩理论、排版层次）
• 实际需求（Tailwind CSS、Lucide 图标、响应式设计）
• 任务规范（多种变体、组件组织）

此模板生成的提示无需进一步修改即可用于 UI 实现。

最佳实践

图像分析

• 在开始分析前阅读所有图像
• 寻找跨多个屏幕的模式
• 注意显式样式（颜色、字体）和隐式原则（间距、层次结构）
• 如果参考中存在，捕获深色模式

设计系统提取

• 系统化：覆盖所有模板部分
• 使用具体值（十六进制代码、像素大小）而非通用描述
• 在可推断的情况下记录设计选择的"原因"
• 包含变体（悬停状态、禁用状态）

PRD 生成

• 与用户互动以澄清模糊之处
• 基于对问题的理解建议功能
• 确保 MVP 范围是现实的
• 记录每个屏幕/交互的 UX 考量

输出组织

• 使用描述性文件名（基于图像目录名称）保存设计系统
• 保存最终提示时附带时间戳以便版本跟踪
• 将所有输出保存在 documents/ 目录中以便参考
• 保留中间输出以便迭代

使用示例

用户提供：

• reference-images/saas-dashboard/（5 张截图）
• ideas/project-management-app.md（项目概念）

执行工作流程：

1. 从 reference-images/saas-dashboard/ 读取 5 张图像
2. 使用 Task 工具 → design-system.md 模板 → 分析图像
3. 保存到 documents/designs/saas-dashboard_design_system.md
4. 使用 Task 工具 → app-overview-generator.md 配合项目概念
5. 通过用户互动完善 PRD
6. 使用 vibe-design-template.md 组合设计系统 + PRD
7. 保存到 documents/ux-design/project-management-app_design_prompt_20251025_153000.md
8. 检查 React 环境，如果需要设置则通知用户
9. 使用最终提示实现 UI

注意事项

• 这是一个自由度很高的工作流程——根据上下文调整步骤
• 模板提供了结构，但鼓励深思熟虑的分析而非机械填充
• 在 PRD 生成过程中与用户互动对于质量至关重要
• 最终提示的质量直接影响 UI 实现的成功
• 保留所有中间输出以便迭代和完善

每周安装次数

121

代码仓库

daymade/claude-…e-skills

GitHub 星标数

636

首次出现

2026年1月20日

安全审计

Gen Agent Trust HubPassSocketPassSnykPass

安装于

claude-code98

opencode94

codex88

gemini-cli87

cursor76

github-copilot69