Usecase: Marketing Team Dùng AI Tạo Landing Page Campaign Game

Marketing/Game team có thể dùng AI coding agent để brainstorm campaign, thiết kế và build landing page hoàn chỉnh — từ ý tưởng đến sản phẩm trong ~17 phút, với quy trình có kỷ luật thay vì "generate và cầu nguyện".

Bối Cảnh

Bạn cần launch campaign cho tính năng Mini Game Vòng Quay Số (spin-to-win) của game MOBA "The Ended World" — game đã ra mắt và có lượng người chơi ổn định. Bạn cần:

Landing page riêng cho campaign, tông dark & epic phù hợp game hậu tận thế
Highlight skin hero độc quyền limited edition
CTA "Tải Game" dẫn đến App Store / Google Play
Không có developer trong team — cần AI build toàn bộ

Công cụ:

AI coding agent (Claude Code) với Superpowers
Skill: Brainstorming, UI/UX Pro Max, Writing Plans, Subagent-Driven Development
Tech: HTML/CSS/JS thuần — không cần framework

Bạn Sẽ Học Được Gì

Brainstorming skill — AI hỏi từng câu để hiểu rõ yêu cầu trước khi làm bất kỳ thứ gì
UI/UX Pro Max skill — Tìm kiếm design intelligence (color palette, typography, layout patterns) phù hợp với project
Writing Plans skill — Tạo implementation plan chi tiết với từng task cụ thể
Subagent-Driven Development — Dispatch nhiều agent song song để tăng tốc implementation
Code Review tự động — Kiểm tra chất lượng code sau khi hoàn thành

Bước 1: Brainstorming — Khám Phá Yêu Cầu

Bạn nói với AI:

"Tôi cần launch campaign cho tính năng Mini game vòng quay số cho game MOBA 'The Ended World'. Brainstorm trang landing page cùng tôi."

AI hỏi từng câu một (7 câu):

AI không vội vàng làm ngay mà hỏi từng câu một để hiểu rõ context:

Câu 1 — Giai đoạn game:

"Game đang ở giai đoạn nào và đối tượng người chơi chính là ai?"

A. Đã ra mắt, có lượng người chơi ổn định

B. Mới ra mắt

C. Pre-launch/beta

D. Khác

Bạn: "A"

Câu 2 — Cơ chế mini game:

"Tính năng Vòng Quay Số hoạt động như thế nào?"

A. Spin-to-win classic — quay nhận thưởng ngẫu nhiên

B. Tích điểm/token rồi quay

C. Vòng quay theo mùa/event

D. Kết hợp

Bạn: "A"

Câu 3 — Mục tiêu landing page:

"Mục tiêu chính là gì?"

A. Tạo hype & thông báo

B. Thu thập đăng ký trước

C. Chơi trực tiếp trên web

D. Kết hợp

Bạn: "A"

(Từ Câu 4-7, AI tiếp tục hỏi tương tự với các lựa chọn A/B/C/D:)

Câu 4 — Visual style: Bạn chọn A — Dark & epic, tông tối, neon/glow, hậu tận thế

Câu 5 — Rewards: Bạn chọn A — Skin hero độc quyền limited edition

Câu 6 — Tech stack: Bạn chọn A — HTML/CSS/JS thuần

Câu 7 — CTA: Bạn chọn B — "Tải game" focus vào download cho người chưa có game (App Store / Google Play), thay vì "Chơi ngay" cho người đã có game. Đây là quyết định chiến lược: ưu tiên thu hút người dùng mới.

AI tổng hợp và đề xuất 3 approach:

Sau khi thu thập đủ thông tin, AI đề xuất 3 hướng:

Approach	Mô tả	Ưu điểm	Nhược điểm
A. "The Wheel of Fate" — Single-page Cinematic (Khuyên dùng)	Trang cuộn dài, mỗi section là một "cảnh phim" với scroll animation	Immersive, epic, dễ kể chuyện	Animation phức tạp hơn
B. "Neon Arena" — Hero-focused Compact	Trang ngắn gọn, tập trung hero section lớn với vòng quay + neon	Load nhanh, hiệu quả mobile	Ít "wow factor"
C. "Apocalypse Spin" — Interactive Showcase	Vòng quay mô phỏng demo, zoom vào từng ô thưởng khi scroll	Interactive, gây tò mò	Phức tạp nhất

Bạn chọn: Approach A — "The Wheel of Fate"

Điểm hay: AI không hỏi tất cả câu hỏi cùng lúc. Mỗi câu trả lời giúp AI tinh chỉnh câu hỏi tiếp theo. Và AI đưa ra nhiều option có phân tích ưu/nhược để bạn chọn, thay vì tự quyết.

Bước 2: Thiết Kế — Color Palette, Typography & Page Structure

AI kết hợp skill UI/UX Pro Max:

AI tự động tìm kiếm design intelligence phù hợp: gaming MOBA, dark epic, post-apocalyptic, neon glow.

Color Palette — "Neon Apocalypse":

Role	Hex	Mô tả
Background	`#0F0F23`	Deep dark — nền tối chủ đạo
Primary	`#7C3AED`	Violet neon — màu chủ đạo vòng quay
Secondary	`#00FFFF`	Cyan neon — accent, glow effects
CTA	`#F43F5E`	Rose đỏ — nút "Tải Game" nổi bật
Text	`#E2E8F0`	Light gray — dễ đọc trên nền tối
Gold accent	`#FFD700`	Vàng — highlight phần thưởng skin

Typography:

Heading: Russo One — bold, gaming feel, viết hoa
Body: Chakra Petch — dễ đọc, vẫn giữ vibe sci-fi/gaming

Page Structure — 6 Sections Cinematic Scroll:

#	Section	Mục đích	Hiệu ứng
1	Hero — "The Wheel Awaits"	Hook người xem	Vòng quay animated, particle effects, neon glow pulsing
2	Storyline — "Fate Calls"	Kể lore vòng quay	Text fade-in khi scroll, parallax background
3	How It Works	Giải thích 3 bước chơi	Icon steps reveal animation
4	Rewards Showcase	Highlight skin độc quyền	Card grid với hover glow, gold shimmer cho Legendary
5	Countdown/Urgency	Tạo FOMO — event có thời hạn	Countdown timer animated
6	CTA Final — "Claim Your Fate"	Convert — dẫn tải game	Nút CTA lớn với glow, links App Store/Google Play

Sticky element: Navbar mỏng ở top với logo game + nút "Tải Game" nhỏ (luôn hiện khi scroll).

Visual Companion: AI còn show preview trực tiếp trên trình duyệt (localhost) để bạn xem mockup color palette, typography, và wireframe page structure — dễ hình dung hơn nhiều so với đọc text.

Bước 3: Design Spec & Implementation Plan

AI viết Design Spec:

Sau khi bạn approve thiết kế, AI tổng hợp thành design spec document hoàn chỉnh tại docs/superpowers/specs/. Spec được auto-review bởi một agent reviewer riêng.

Kết quả review spec: Approved, với 3 gợi ý nhỏ (không block):

Countdown nên set giá trị mặc định ngày kết thúc event (VD: 14 ngày sau deploy)
Cần clarify icon library (SVG custom hay Font Awesome)
Particles: Đã rõ sẽ dùng JS-based vì file structure có particles.js

AI viết Implementation Plan (11 tasks):

# Wheel of Fate Landing Page — Implementation Plan

**Architecture:** Static HTML/CSS/JS page với 6 scroll-animated sections.
CSS handles visual styling (neon glow, dark theme, responsive).
JS handles scroll-triggered animations (Intersection Observer),
canvas-based particle system, và 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

Plan cũng được auto-review — Approved với 2 lưu ý nhỏ:

Khi có real images cho skin, nhớ thêm loading="lazy"
Task 11 nên dùng git add cụ thể thay vì git add -A

Bước 4: Implementation — Subagent-Driven Development

AI dispatch từng task cho agent riêng:

Thay vì code tuần tự, AI sử dụng Subagent-Driven Development — mỗi task được giao cho một agent độc lập:

Task	Agent	Thời gian	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`

Task 9 và 10 chạy song song vì tạo file JS riêng biệt, không phụ thuộc nhau.

Mỗi task = 1 commit riêng. Dễ rollback nếu cần, dễ review từng phần.

Bước 5: Code Review & Fix

AI dispatch final code reviewer:

Sau khi 11 tasks hoàn thành, AI tự động chạy code review toàn bộ implementation.

Kết quả: Approved với 1 lỗi quan trọng cần fix:

Issue	Mô tả	Fix
Media query ordering	Tablet breakpoint `(min-width: 768px)` override cả Desktop vì thiếu `max-width`	Thêm `and (max-width: 1023px)`
Cursor misleading	`cursor: pointer` trên rewards card nhưng card không clickable	Xóa `cursor: pointer`

AI fix ngay và commit: 15cc895

Những cải tiến AI tự phát hiện trong quá trình polish:

Countdown timer có clearInterval khi hết giờ (tránh memory leak)
Particle system có debounce resize (tránh lag khi resize window)
aria-live cho countdown (hỗ trợ screen reader)
Touch target 44px cho navbar CTA (chuẩn mobile accessibility)

Kết Quả Cuối Cùng

Sau ~17 phút làm việc với AI, bạn có:

Deliverable	Trạng thái
Design spec hoàn chỉnh	Approved
Implementation plan (11 tasks)	Approved
Landing page hoàn chỉnh (HTML/CSS/JS)	Done — 12 commits
Color palette "Neon Apocalypse"	6 màu, 2 fonts
6 sections cinematic scroll	Animated, responsive
Particle effects (Canvas)	Performance optimized
Countdown timer	Accessible, auto-stop
Code review & fixes	2 issues fixed

Tổng: 12 commits, từ brainstorm đến landing page hoàn chỉnh.

Nguyên Tắc Superpowers Áp Dụng

Nguyên tắc	Cách áp dụng
Brainstorming trước	7 câu hỏi tuần tự để hiểu rõ yêu cầu trước khi thiết kế
UI/UX Pro Max	Tìm kiếm design intelligence phù hợp thay vì đoán
Structured plans	Design spec → Implementation plan → Review → Execute
Subagent-Driven	Mỗi task = 1 agent riêng, task độc lập chạy song song
Auto review	Spec review, plan review, và code review tự động
YAGNI	HTML/CSS/JS thuần — không cần framework cho campaign page

Tips Cho Marketing/Game Team

Trả lời brainstorming cụ thể — AI hỏi từng câu vì lý do. Câu trả lời càng rõ, kết quả càng phù hợp. Đừng vội skip.
Dùng Visual Companion — AI có thể show preview trên trình duyệt. Xem mockup trực quan giúp bạn quyết định nhanh hơn đọc text.
Tin tưởng quy trình review — AI tự review spec, plan, và code. Nhưng bạn vẫn nên xem qua output cuối cùng — AI tạo khung tốt, brand voice cần human touch.
Mỗi task = 1 commit — Nếu section nào không ổn, dễ dàng rollback mà không ảnh hưởng phần còn lại.
Không cần biết code — Bạn chỉ cần biết mình muốn gì. AI handle toàn bộ technical decisions (color system, responsive breakpoints, accessibility, animation performance).

Takeaway: Từ ý tưởng "cần landing page cho campaign game" đến sản phẩm hoàn chỉnh với 6 sections animated, particle effects, countdown timer — tất cả trong ~17 phút. Superpowers biến AI từ "tool generate code" thành "đội ngũ có quy trình": brainstorm → design → plan → implement → review.