Web Design Wizard
概述
在并行工作树中为一个网页生成多种不同的设计风格，让用户在最终确认方向之前进行比较和优化。核心原则：先发散探索，再聚焦到最佳方案。
何时使用
- 用户想要为一个网页探索不同的设计风格
- 用户要求提供设计选项、视觉方向或风格比较
- 用户希望从多个实现方案中选择
不要使用时：
- 用户已经有一个明确的设计方案 → 直接使用
saurun:react-tailwind-v4-components或frontend-design - 用户想修改现有设计，而不是创建新设计
先决条件
以下所有技能必须已安装。如果缺少任何一个，停止并告知用户。
| 技能 | 使用阶段 | 用途 |
|---|---|---|
ui-ux-pro-max | 阶段 2 | 设计系统生成 |
superpowers:using-git-worktrees | 阶段 6 | 并行工作树设置 |
frontend-design | 阶段 6 | 生产级实现 |
vercel-react-best-practices | 阶段 6 | React 优化 |
copywriting | 阶段 6 | 文案优化 |
nano-banana-pro | 阶段 6 | 图像生成 — 安装命令：npx skills add intellectronica/agent-skills@nano-banana-pro -g -y |
工作流程
digraph design_wizard {
"用户请求" [shape=doublecircle];
"发现" [shape=box];
"风格生成" [shape=box];
"用户满意？" [shape=diamond];
"细化" [shape=box];
"图形偏好" [shape=box];
"项目设置" [shape=box];
"并行实现" [shape=box];
"并行验证" [shape=box];
"完成" [shape=doublecircle];
"用户请求" -> "发现";
"发现" -> "风格生成";
"风格生成" -> "用户满意？";
"用户满意？" -> "细化" [label="否"];
"细化" -> "用户满意？";
"用户满意？" -> "图形偏好" [label="是"];
"图形偏好" -> "项目设置";
"项目设置" -> "并行实现";
"并行实现" -> "并行验证";
"并行验证" -> "完成";
}
阶段 1：发现
使用 AskUserQuestion 收集上下文。批量提问 — 每次调用最多 4 个问题。从上下文中推断显而易见的答案（例如，咖啡店是面向消费者的，可能是温馨氛围）。
收集：
- 项目名称 — 从 package.json 或 git 仓库名中检测，与用户确认
- 页面类型 — 落地页、作品集、博客、电商、SaaS、文档
- 目标受众 — 专业人士、消费者、开发者、创意行业
- 氛围/感觉 — 专业、有趣、奢华、简约、大胆、温馨、未来感
- 内容语言 — 英语、丹麦语等
- 风格偏好/反偏好 — 仅当上述信息不明确时
跳过答案从用户请求中已经显而易见的问题。
阶段 2：风格生成
使用 ui-ux-pro-max 生成设计风格：
默认： 4 种风格（用户可以请求不同数量）。
对于每种风格：
-
从发现响应中构思多样化的关键词。 组合：页面类型 + 受众 + 氛围 + 独特美学。确保所有风格之间有足够的多样性。
-
生成设计系统： 通过
Skill工具调用ui-ux-pro-max，参数如下："[关键词]" --design-system --persist -p "[项目名称]" --page "[风格名称]"保存到当前工作目录的design-system/pages/[风格名称].md。 -
向用户展示：风格名称、关键颜色、字体、氛围形容词和最佳用例。
跟踪已生成的风格，以避免在细化轮次中出现重复关键词。
阶段 3：细化（迭代）
| 用户说 | 操作 |
|---|---|
| "给我 N 种完全不同的风格" | 使用不同关键词生成 N 种新风格 |
| "再给我 N 个选项" | 生成 N 种新风格（避免之前的关键词） |
| "我喜欢 X 和 Y，给我更多类似 X 的" | 保留 X 和 Y，生成 X 的变体 |
| "结合风格 X 和 Y" | 生成 1 种融合这两种美学的新风格 |
| "实现 X, Y, Z" 或 "全部实现" | 将所选风格移至阶段 4 |
阶段 4：图形偏好
在实现之前，一次性地询问所有选定风格的图形偏好：
使用 AskUserQuestion 并提供选项：
- "所有风格使用大量图形（主视觉 + 装饰图形 + 插图）"
- "所有风格使用最少图形（仅主视觉图片）"
- "让设计风格决定图形"（推荐）
- "我想为每种风格单独选择"
只有当用户选择最后一个选项时，才按每种风格进行询问。
阶段 5：项目设置
确认项目位置
建议： 当前工作目录下的 designs/[项目名称]/。
请用户确认或覆盖。
创建项目
mkdir -p [位置]- 编写
concept.md— 模板见 concept-template.md。从发现响应中填充。仅填写你有数据的字段 — 省略没有信息的章节。 - 不要运行
git init— 使用现有仓库。将项目文档提交到当前分支。
git add designs/[项目名称]/concept.md
git commit -m "docs: 初始化 [项目名称] 设计探索"
项目结构
[仓库根目录]/
├── designs/[项目名称]/
│ └── concept.md
├── design-system/pages/
│ ├── [风格-1].md
│ └── [风格-2].md
└── .worktrees/
├── [风格-1-分支]/ # React + Vite + TypeScript 项目
└── [风格-2-分支]/
阶段 6：并行实现
关键：在单条消息中通过多个 Task 工具调用，同时生成所有实现代理。
对于每种选定的风格，生成一个子代理。完整提示模板见 implementation-prompt.md。将 [absolute-path-to-repo-root] 替换为实际的仓库根路径，以便子代理能够解析跨工作树的引用。
每个子代理的关键点：
- 使用
superpowers:using-git-worktrees在.worktrees/[风格名称]/创建工作树 - 创建 React + Vite + TypeScript 项目：
npm create vite@latest . -- --template react-ts - 从
design-system/pages/[风格名称].md读取设计规范 - 使用
Skill工具调用：frontend-design、vercel-react-best-practices、copywriting、nano-banana-pro - 根据图形偏好生成图片
- 使用
npm run build构建并验证 - 提交所有更改
等待所有代理完成后再进入阶段 7。
阶段 7：并行验证
关键：在单条消息中通过多个 Task 工具调用，同时生成所有验证代理。
对于每个实现，生成一个验证子代理。完整提示模板见 verification-prompt.md。按顺序分配端口（5173, 5174, 5175, ...）并将 [absolute-path-to-repo-root] 替换为实际路径。
验证检查：
- 开发服务器启动无错误
- 所有 URL/链接有效
- 图像存在且引用正确
- 设计规范符合度（颜色、字体、布局、效果）— 评分 1-10
- 生产构建成功
所有完成后，显示比较摘要：
风格 1: [名称] — ✅ 全部通过 — 设计: 8.5/10
风格 2: [名称] — ⚠️ 2 个 URL 损坏 — 设计: 9.0/10
风格 3: [名称] — ❌ 构建失败 — 查看报告
根据结果推荐最佳风格。
快速参考
| 阶段 | 操作 | 关键工具 |
|---|---|---|
| 1. 发现 | 通过 AskUserQuestion 收集上下文（批量最多 4 个） | AskUserQuestion |
| 2. 风格生成 | 通过 ui-ux-pro-max 生成 4 个设计系统 | Skill |
| 3. 细化 | 迭代直到用户选择风格 | AskUserQuestion |
| 4. 图形 | 询问选定风格的图形偏好 | AskUserQuestion |
| 5. 项目设置 | 创建 concept.md，提交脚手架 | Write, Bash |
| 6. 实现 | 按风格并行生成子代理 | Task |
| 7. 验证 | 并行生成验证代理，显示比较 | Task |
常见错误
- 在子代理中重新生成设计规范 — 设计规范在阶段 2 创建。子代理应读取它们，切勿重新调用 ui-ux-pro-max。
- 顺序生成子代理 — 阶段 6 和 7 必须在单条消息中通过多个 Task 调用同时生成所有代理。切勿逐个进行。
- 跳过图形偏好 — 始终在实现之前询问。不要假设。
- 在工作树中使用
git add .— 仅提交特定路径，避免提交 node_modules、.env 或系统文件。 - 各风格使用相同关键词 — 跟踪已使用的关键词以确保多样性。重复的关键词会产生重复的设计。
错误处理
| 错误 | 恢复方法 |
|---|---|
ui-ux-pro-max 脚本失败 | 使用更简单的关键词重试。如果持续失败，根据风格关键词手动创建设计系统。 |
| 所有风格被拒绝 | 询问用户具体方向：“您不喜欢什么？颜色？布局？整体感觉？” |
| 子代理技能未找到 | 代理应使用 Skill 工具调用。如果技能确实缺失，跳过该增强步骤并记录。 |
| 实现构建失败 | 在工作树中修复，重新运行构建。如果无法修复，报告问题。 |