Use Case: Marketing Team Using AI to Create a Game Campaign Landing Page

Marketing/Game teams can use an AI coding agent to brainstorm campaigns, design and build a complete landing page -- from idea to finished product in ~17 minutes, with a disciplined process instead of "generate and pray."

Context

You need to launch a campaign for the Spin-to-Win Mini Game feature of the MOBA game "The Ended World" -- a game that's already live with a stable player base. You need:

A dedicated landing page for the campaign, dark & epic tone fitting a post-apocalyptic game
Highlight an exclusive limited edition hero skin
CTA "Download Game" linking to App Store / Google Play
No developer on the team -- need AI to build everything

Tools:

AI coding agent (Claude Code) with Superpowers
Skills: Brainstorming, UI/UX Pro Max, Writing Plans, Subagent-Driven Development
Tech: Plain HTML/CSS/JS -- no framework needed

What You'll Learn

Brainstorming skill -- AI asks questions one at a time to fully understand requirements before doing anything
UI/UX Pro Max skill -- Searches for design intelligence (color palette, typography, layout patterns) suited to the project
Writing Plans skill -- Creates a detailed implementation plan with specific tasks
Subagent-Driven Development -- Dispatches multiple agents in parallel to speed up implementation
Automatic Code Review -- Checks code quality after completion

Step 1: Brainstorming -- Exploring Requirements

You tell the AI:

"I need to launch a campaign for the Spin-to-Win Mini Game feature for the MOBA game 'The Ended World'. Brainstorm the landing page with me."

AI asks one question at a time (7 questions):

AI doesn't rush to start working. Instead, it asks one question at a time to fully understand the context:

Question 1 -- Game stage:

"What stage is the game at and who is the primary player audience?"

A. Already launched, stable player base

B. Newly launched

C. Pre-launch/beta

D. Other

You: "A"

Question 2 -- Mini game mechanics:

"How does the Spin-to-Win feature work?"

A. Classic spin-to-win -- spin for random rewards

B. Accumulate points/tokens then spin

C. Seasonal/event-based wheel

D. Combination

You: "A"

Question 3 -- Landing page objective:

"What's the main objective?"

A. Build hype & announce

B. Collect pre-registrations

C. Play directly on the web

D. Combination

You: "A"

(From Questions 4-7, AI continues similarly with A/B/C/D options:)

Question 4 -- Visual style: You choose A -- Dark & epic, dark tones, neon/glow, post-apocalyptic

Question 5 -- Rewards: You choose A -- Exclusive limited edition hero skin

Question 6 -- Tech stack: You choose A -- Plain HTML/CSS/JS

Question 7 -- CTA: You choose B -- "Download Game" focused on downloads for players who don't have the game yet (App Store / Google Play), rather than "Play Now" for existing players. This is a strategic decision: prioritize acquiring new users.

AI summarizes and proposes 3 approaches:

After collecting enough information, AI proposes 3 directions:

Approach	Description	Pros	Cons
A. "The Wheel of Fate" -- Single-page Cinematic (Recommended)	Long scrolling page, each section is a "movie scene" with scroll animation	Immersive, epic, great for storytelling	More complex animation
B. "Neon Arena" -- Hero-focused Compact	Short and concise page, focuses on a large hero section with wheel + neon	Fast loading, mobile-effective	Less "wow factor"
C. "Apocalypse Spin" -- Interactive Showcase	Simulated demo wheel, zooms into each reward slot on scroll	Interactive, curiosity-inducing	Most complex

You choose: Approach A -- "The Wheel of Fate"

Nice touch: AI doesn't ask all questions at once. Each answer helps AI refine the next question. And AI presents multiple options with pros/cons analysis for you to choose, rather than deciding itself.

Step 2: Design -- Color Palette, Typography & Page Structure

AI combines the UI/UX Pro Max skill:

AI automatically searches for relevant design intelligence: gaming MOBA, dark epic, post-apocalyptic, neon glow.

Color Palette -- "Neon Apocalypse":

Role	Hex	Description
Background	`#0F0F23`	Deep dark -- primary dark background
Primary	`#7C3AED`	Violet neon -- primary wheel color
Secondary	`#00FFFF`	Cyan neon -- accent, glow effects
CTA	`#F43F5E`	Rose red -- prominent "Download Game" button
Text	`#E2E8F0`	Light gray -- easy to read on dark background
Gold accent	`#FFD700`	Gold -- highlight skin rewards

Typography:

Heading: Russo One -- bold, gaming feel, uppercase
Body: Chakra Petch -- readable while maintaining sci-fi/gaming vibe

Page Structure -- 6 Cinematic Scroll Sections:

#	Section	Purpose	Effects
1	Hero -- "The Wheel Awaits"	Hook the viewer	Animated spinning wheel, particle effects, neon glow pulsing
2	Storyline -- "Fate Calls"	Tell the wheel's lore	Text fade-in on scroll, parallax background
3	How It Works	Explain 3 gameplay steps	Icon steps reveal animation
4	Rewards Showcase	Highlight exclusive skin	Card grid with hover glow, gold shimmer for Legendary
5	Countdown/Urgency	Create FOMO -- limited-time event	Animated countdown timer
6	CTA Final -- "Claim Your Fate"	Convert -- drive game downloads	Large CTA button with glow, App Store/Google Play links

Sticky element: Thin navbar at top with game logo + small "Download Game" button (always visible on scroll).

Visual Companion: AI also shows a live preview directly in the browser (localhost) so you can see mockups of the color palette, typography, and wireframe page structure -- much easier to visualize than reading text.

Step 3: Design Spec & Implementation Plan

AI writes the Design Spec:

After you approve the design, AI compiles everything into a complete design spec document at docs/superpowers/specs/. The spec is auto-reviewed by a separate reviewer agent.

Spec review result: Approved, with 3 minor suggestions (non-blocking):

Countdown should have a default event end date (e.g., 14 days after deploy)
Need to clarify icon library (custom SVG or Font Awesome)
Particles: Confirmed using JS-based since file structure includes particles.js

AI writes the Implementation Plan (11 tasks):

# Wheel of Fate Landing Page -- Implementation Plan

**Architecture:** Static HTML/CSS/JS page with 6 scroll-animated sections.
CSS handles visual styling (neon glow, dark theme, responsive).
JS handles scroll-triggered animations (Intersection Observer),
canvas-based particle system, and countdown timer.

## Tasks:
1. Project Scaffold & Design System CSS
2. Sticky Navbar
3. Hero Section + Spinning Wheel SVG
4. Storyline Section
5. How It Works (3 steps)
6. Rewards Showcase (card grid)
7. Countdown Timer + JS
8. CTA Final + Footer
9. Particle Effects (Canvas)
10. Scroll Animations + Navbar Show/Hide
11. Responsive & Accessibility Polish

The plan is also auto-reviewed -- Approved with 2 minor notes:

When real skin images are available, remember to add loading="lazy"
Task 11 should use specific git add instead of git add -A

Step 4: Implementation -- Subagent-Driven Development

AI dispatches each task to a separate agent:

Instead of coding sequentially, AI uses Subagent-Driven Development -- each task is assigned to an independent agent:

Task	Agent	Time	Commit
1. Scaffold & Design System	Agent 1	~1m	`fc24707`
2. Sticky Navbar	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`

Tasks 9 and 10 run in parallel since they create separate JS files with no dependencies.

Each task = 1 separate commit. Easy to rollback if needed, easy to review each part individually.

Step 5: Code Review & Fix

AI dispatches a final code reviewer:

After all 11 tasks are complete, AI automatically runs a full implementation code review.

Result: Approved with 1 critical issue to fix:

Issue	Description	Fix
Media query ordering	Tablet breakpoint `(min-width: 768px)` overrides Desktop because it's missing `max-width`	Add `and (max-width: 1023px)`
Misleading cursor	`cursor: pointer` on rewards cards but cards aren't clickable	Remove `cursor: pointer`

AI fixes immediately and commits: 15cc895

Improvements AI discovered during polish:

Countdown timer has clearInterval when time expires (prevents memory leak)
Particle system has debounced resize (prevents lag on window resize)
aria-live on countdown (supports screen readers)
44px touch target for navbar CTA (mobile accessibility standard)

Final Results

After ~17 minutes working with AI, you have:

Deliverable	Status
Complete design spec	Approved
Implementation plan (11 tasks)	Approved
Complete landing page (HTML/CSS/JS)	Done -- 12 commits
"Neon Apocalypse" color palette	6 colors, 2 fonts
6 cinematic scroll sections	Animated, responsive
Particle effects (Canvas)	Performance optimized
Countdown timer	Accessible, auto-stop
Code review & fixes	2 issues fixed

Total: 12 commits, from brainstorm to complete landing page.

Superpowers Principles Applied

Principle	How Applied
Brainstorming first	7 sequential questions to fully understand requirements before designing
UI/UX Pro Max	Searches for relevant design intelligence instead of guessing
Structured plans	Design spec -> Implementation plan -> Review -> Execute
Subagent-Driven	Each task = 1 separate agent, independent tasks run in parallel
Auto review	Spec review, plan review, and code review all automatic
YAGNI	Plain HTML/CSS/JS -- no framework needed for a campaign page

Tips for Marketing/Game Teams

Answer brainstorming questions specifically -- AI asks each question for a reason. The clearer your answers, the better the results. Don't rush to skip.
Use Visual Companion -- AI can show previews in the browser. Seeing mockups visually helps you make decisions faster than reading text.
Trust the review process -- AI auto-reviews spec, plan, and code. But you should still look over the final output -- AI creates great structure, but brand voice needs the human touch.
Each task = 1 commit -- If any section isn't working, it's easy to rollback without affecting the rest.
No coding knowledge required -- You only need to know what you want. AI handles all technical decisions (color system, responsive breakpoints, accessibility, animation performance).

Takeaway: From the idea "need a landing page for a game campaign" to a finished product with 6 animated sections, particle effects, countdown timer -- all in ~17 minutes. Superpowers transforms AI from a "code generation tool" into "a team with a process": brainstorm -> design -> plan -> implement -> review.