实战案例：营销团队使用 AI 创建游戏活动着陆页
营销/游戏团队可以使用 AI 编码 agent 来头脑风暴活动、设计并构建完整的着陆页——从创意到成品仅需约 17 分钟，使用有纪律的工作流程而非"生成然后祈祷"。
背景
你需要为 MOBA 游戏 "The Ended World" 的 转盘小游戏（spin-to-win） 功能发起活动。游戏已上线并有稳定的玩家群体。你需要：
- 活动专属着陆页，暗黑史诗风格符合末日游戏调性
- 突出限定版独占英雄皮肤
- CTA "下载游戏" 链接到 App Store / Google Play
- 团队里没有开发人员——需要 AI 构建全部
工具：
- AI 编码 agent（Claude Code）配合 Superpowers
- Skill：Brainstorming, UI/UX Pro Max, Writing Plans, Subagent-Driven Development
- 技术：纯 HTML/CSS/JS——不需要框架
你将学到什么
- Brainstorming skill — AI 逐个提问以在做任何事之前充分理解需求
- UI/UX Pro Max skill — 搜索适合项目的设计智能（配色方案、字体、布局模式）
- Writing Plans skill — 创建包含具体任务的详细实现计划
- Subagent-Driven Development — 分派多个 agent 并行加速实现
- 自动代码审查 — 完成后检查代码质量
步骤 1：头脑风暴 — 探索需求
你对 AI 说：
"我需要为 MOBA 游戏 'The Ended World' 的转盘小游戏功能发起活动。和我一起头脑风暴着陆页的设计。"
AI 逐个提问（7 个问题）：
AI 不急于动手，而是逐个提问以充分理解上下文：
问题 1 — 游戏阶段：
"游戏目前处于什么阶段，主要目标玩家是谁？"
- A. 已上线，有稳定玩家群
- B. 刚上线
- C. 预发布/测试
- D. 其他
你： "A"
问题 2 — 小游戏机制：
"转盘小游戏的运作方式？"
- A. 经典 Spin-to-win — 转盘随机获奖
- B. 积分/代币后转盘
- C. 按赛季/活动轮换
- D. 组合
你： "A"
问题 3 — 着陆页目标：
"主要目标是什么？"
- A. 制造热度和公告
- B. 收集预注册
- C. 在网页上直接试玩
- D. 组合
你： "A"
（问题 4-7，AI 继续以类似的 A/B/C/D 选项提问：）
问题 4 — 视觉风格： 你选择 A — 暗黑史诗，深色调，霓虹/发光，末日风格
问题 5 — 奖励： 你选择 A — 限定版独占英雄皮肤
问题 6 — 技术栈： 你选择 A — 纯 HTML/CSS/JS
问题 7 — CTA： 你选择 B — "下载游戏" 面向尚未安装的新用户（App Store / Google Play），而非面向现有玩家的 "立即游戏"。这是一个战略决策：优先吸引新用户。
AI 汇总并提出 3 种方案：
收集完足够信息后，AI 提出 3 个方向：
| 方案 | 描述 | 优点 | 缺点 |
|---|---|---|---|
| A. "The Wheel of Fate" — 单页电影级（推荐） | 长滚动页面，每个 section 像一个"电影场景"，带滚动动画 | 沉浸式、史诗感、易于叙事 | 动画更复杂 |
| B. "Neon Arena" — 英雄为主的紧凑页 | 简短精炼的页面，聚焦大尺寸英雄 section + 转盘 + 霓虹 | 加载快、移动端高效 | "wow factor" 较少 |
| C. "Apocalypse Spin" — 互动展示 | 转盘模拟 demo，滚动时放大每个奖励格 | 互动性强、引发好奇 | 最复杂 |
你选择： 方案 A — "The Wheel of Fate"
亮点： AI 不会一次性提出所有问题。每个回答帮助 AI 微调下一个问题。而且 AI 提供多个选项并分析优缺点让你选择，而不是自行决定。
步骤 2：设计 — 配色、字体和页面结构
AI 结合 UI/UX Pro Max skill：
AI 自动搜索匹配的设计智能：gaming MOBA, dark epic, post-apocalyptic, neon glow。
配色方案 — "Neon Apocalypse"：
| 角色 | Hex | 描述 |
|---|---|---|
| 背景 | #0F0F23 | Deep dark — 深色主背景 |
| 主色 | #7C3AED | 紫罗兰霓虹 — 转盘主色调 |
| 辅色 | #00FFFF | 青色霓虹 — 强调色、发光效果 |
| CTA | #F43F5E | 玫瑰红 — "下载游戏" 按钮突出 |
| 文字 | #E2E8F0 | 浅灰 — 深色背景上易读 |
| 金色强调 | #FFD700 | 金色 — 高亮皮肤奖励 |
字体：
- 标题： Russo One — 粗体，游戏感，全大写
- 正文： Chakra Petch — 易读，保持科幻/游戏氛围
页面结构 — 6 个电影级滚动 Section：
| # | Section | 目的 | 效果 |
|---|---|---|---|
| 1 | Hero — "The Wheel Awaits" | 吸引观众 | 转盘动画、粒子效果、霓虹脉动 |
| 2 | Storyline — "Fate Calls" | 讲述转盘背景故事 | 滚动时文字淡入、视差背景 |
| 3 | How It Works | 说明 3 步玩法 | 图标步骤揭示动画 |
| 4 | Rewards Showcase | 突出独占皮肤 | 卡片网格带悬停发光、Legendary 金色闪烁 |
| 5 | Countdown/Urgency | 制造 FOMO — 限时活动 | 倒计时动画 |
| 6 | CTA Final — "Claim Your Fate" | 转化 — 引导下载游戏 | 大尺寸发光 CTA 按钮、App Store/Google Play 链接 |
固定元素： 顶部细导航栏，包含游戏 logo + 小尺寸 "下载游戏" 按钮（滚动时始终可见）。
Visual Companion： AI 还能直接在浏览器（localhost）上预览配色方案、字体和页面结构线框图——比阅读文字直观得多。
步骤 3：设计规格和实现计划
AI 编写设计规格：
你批准设计后，AI 将其汇总为完整的设计规格文档，保存在 docs/superpowers/specs/。Spec 由独立的 reviewer agent 自动审查。
Spec 审查结果： 批准，附 3 个小建议（不阻塞）：
- 倒计时应设置默认的活动结束日期（例如：部署后 14 天）
- 需要明确图标库（自定义 SVG 还是 Font Awesome）
- 粒子效果：已明确将使用 JS 实现，因为文件结构中有
particles.js
AI 编写实现计划（11 个任务）：
# Wheel of Fate Landing Page — Implementation Plan
**架构：** 静态 HTML/CSS/JS 页面，包含 6 个滚动动画 section。
CSS 处理视觉样式（霓虹发光、暗色主题、响应式）。
JS 处理滚动触发动画（Intersection Observer）、
基于 canvas 的粒子系统、以及倒计时。
## 任务：
1. Project Scaffold 和 Design System CSS
2. 固定导航栏
3. Hero Section + SVG 旋转转盘
4. Storyline Section
5. How It Works（3 步）
6. Rewards Showcase（卡片网格）
7. Countdown Timer + JS
8. CTA Final + Footer
9. Particle Effects（Canvas）
10. Scroll Animations + 导航栏显示/隐藏
11. 响应式和无障碍优化
计划也经过自动审查 — 批准，附 2 个小提示：
- 有真实皮肤图片时，记得添加
loading="lazy" - Task 11 应使用具体的
git add而非git add -A
步骤 4：实现 — Subagent-Driven Development
AI 将每个任务分派给独立 agent：
AI 不是顺序编码，而是使用 Subagent-Driven Development — 每个任务分配给独立的 agent：
| 任务 | Agent | 时间 | Commit |
|---|---|---|---|
| 1. Scaffold & Design System | Agent 1 | ~1m | fc24707 |
| 2. 固定导航栏 | Agent 2 | ~36s | 00fbae5 |
| 3. Hero Section | Agent 3 | ~50s | 8cae0a5 |
| 4. Storyline | Agent 4 | ~42s | e150e17 |
| 5. How It Works | Agent 5 | ~46s | 77b7624 |
| 6. Rewards Showcase | Agent 6 | ~54s | 1009a42 |
| 7. Countdown Timer | Agent 7 | ~58s | d4d61f9 |
| 8. CTA Final + Footer | Agent 8 | ~1m | 5ef6e78 |
| 9. Particle Effects | Agent 9 | ~36s | 54c7749 |
| 10. Scroll Animations | Agent 10 | ~36s | 68829fc |
| 11. Polish | Agent 11 | ~1m30s | dd53c9a |
Task 9 和 10 并行运行，因为它们创建独立的 JS 文件，互不依赖。
每个任务 = 1 个独立提交。 需要时容易回滚，易于逐部分审查。
步骤 5：代码审查和修复
AI 分派最终代码审查：
11 个任务全部完成后，AI 自动运行完整实现的代码审查。
结果： 批准，附 1 个需要修复的重要问题：
| 问题 | 描述 | 修复 |
|---|---|---|
| Media query 顺序 | 平板断点 (min-width: 768px) 覆盖了桌面端因为缺少 max-width | 添加 and (max-width: 1023px) |
| Cursor 误导 | rewards 卡片上有 cursor: pointer 但卡片不可点击 | 移除 cursor: pointer |
AI 立即修复并提交：15cc895
AI 在打磨过程中自行发现的改进：
- 倒计时 timer 归零时
clearInterval（避免内存泄漏） - 粒子系统 resize 时添加 debounce（避免 resize 时卡顿）
- 倒计时添加
aria-live（支持屏幕阅读器） - 导航栏 CTA 触控目标 44px（移动端无障碍标准）
最终结果
与 AI 合作约 17 分钟后，你拥有：
| 交付物 | 状态 |
|---|---|
| 完整设计规格 | 批准 |
| 实现计划（11 个任务） | 批准 |
| 完整着陆页（HTML/CSS/JS） | 完成 — 12 个提交 |
| "Neon Apocalypse" 配色方案 | 6 种颜色、2 种字体 |
| 6 个电影级滚动 section | 带动画、响应式 |
| 粒子效果（Canvas） | 性能优化 |
| 倒计时 timer | 无障碍、自动停止 |
| 代码审查和修复 | 2 个问题已修复 |
总计：12 个提交，从头脑风暴到完整着陆页。
应用的 Superpowers 原则
| 原则 | 应用方式 |
|---|---|
| 先头脑风暴 | 7 个顺序提问以在设计前充分理解需求 |
| UI/UX Pro Max | 搜索匹配的设计智能而非猜测 |
| 结构化计划 | 设计规格 → 实现计划 → 审查 → 执行 |
| Subagent-Driven | 每个任务 = 1 个独立 agent，独立任务并行运行 |
| 自动审查 | Spec 审查、计划审查、代码审查自动进行 |
| YAGNI | 纯 HTML/CSS/JS — 活动页面不需要框架 |
营销/游戏团队小贴士
-
认真回答头脑风暴问题 — AI 逐个提问是有原因的。答案越清晰，结果越匹配。不要急于跳过。
-
使用 Visual Companion — AI 可以在浏览器上预览。看可视化 mockup 比读文字更快做出决定。
-
信任审查流程 — AI 自动审查 spec、计划和代码。但你仍应查看最终输出——AI 搭好了框架，品牌调性需要人的感觉。
-
每个任务 = 1 个提交 — 如果某个 section 有问题，可以轻松回滚而不影响其他部分。
-
不需要懂代码 — 你只需要知道自己想要什么。AI 处理所有技术决策（颜色系统、响应式断点、无障碍、动画性能）。
要点： 从 "需要一个游戏活动着陆页" 的想法到拥有 6 个动画 section、粒子效果、倒计时 timer 的完整产品——全部在约 17 分钟内完成。Superpowers 将 AI 从"代码生成工具"变成了"有流程的团队"：头脑风暴 → 设计 → 计划 → 实现 → 审查。