20.8 · Landing page & launch video — với 21st.dev integration

Mở đầu: Launch video không có asset thật

"I never gave Claude a photo of a watch. I never described what the watch should look like physically. It took the brand language we built together — colors, motion principles, premium positioning — and imagined what the product itself should look like. Then animated it."

30 giây video. Vajra Pro health watch — sản phẩm chưa tồn tại. Không single asset nào upload. Output: animated launch video với watch giả lập, motion premium, brand consistency.

This is the first time I've seen an AI tool go from brand file to finished launch film without a human touching a single asset in the middle.

Đây là điều mà 2 năm trước impossible. Brand designer cần 3-5 ngày đầu để concept watch design. Motion designer cần 1 tuần animate. Voiceover artist studio. Total: 2-4 tuần + $15k-50k.

Vaibhav: 5 phút render trong Claude Design.

Dĩ nhiên không phải film commercial chiếu TV. Nhưng đủ cho:

• Landing page hero
• Social media teaser
• Investor pitch B-roll
• Slack share để cofounder phản hồi

Bài này chỉ bạn cách dùng landing page + video mode hiệu quả — và không trở thành "tool cheap không chạy được production".

Landing page mode — Cấu trúc

              BRIEF: "[Product] for [audience], [tone]"
                              │
                              ▼
       ┌─────────────────────────────────────┐
       │  CLAUDE DESIGN — Landing page mode  │
       └────────────────┬────────────────────┘
                        │
                        ▼
       ┌─────────────────────────────────────┐
       │  ① BRIEF → Q&A (audience, sections, │
       │    pricing, CTA, conversion goal)   │
       └────────────────┬────────────────────┘
                        │
                        ▼
       ┌─────────────────────────────────────┐
       │  ② GENERATE STRUCTURE               │
       │   ┌──────────────────────────┐      │
       │   │  Hero (90vh)             │      │
       │   │  Features grid (3-6)     │      │
       │   │  Social proof / quotes   │      │
       │   │  Pricing / package       │      │
       │   │  FAQ                     │      │
       │   │  CTA section             │      │
       │   │  Footer                  │      │
       │   └──────────────────────────┘      │
       │   5-10 phút render                  │
       └────────────────┬────────────────────┘
                        │
                        ▼
       ┌─────────────────────────────────────┐
       │  ③ ITERATE 4-mode (Bài 4)           │
       │   + 21st.dev animation insert       │
       └────────────────┬────────────────────┘
                        │
                        ▼
       ┌─────────────────────────────────────┐
       │  ④ EXPORT                           │
       │   HTML standalone │ Claude Code     │
       │   Canva │ Figma push                 │
       └─────────────────────────────────────┘

Khác slide deck:

• Section structure là spine (hero → features → social proof → pricing → FAQ → CTA → footer)
• Mobile-first responsive auto-built
• HTML export = production-ready (deploy được luôn)
• Animation native + có thể inject từ 21st.dev

Brief landing page — Anatomy

7 yếu tố:

[PRODUCT]
+ [ONE-LINER POSITIONING]
+ [AUDIENCE PROFILE]
+ [SECTIONS NEEDED]
+ [TONE/COLOR DIRECTION]
+ [CONVERSION GOAL]
+ [DESIGN SYSTEM] (nếu có)

Ví dụ:

"Build me a landing page for Saigon Health [product] — 'Sức khỏe phòng ngừa, bắt đầu từ hôm nay' [one-liner], targeting Vietnamese urban professionals 30-45, premium-conscious nhưng cân nhắc giá [audience]. Sections: hero, 4-feature grid, customer testimonials, pricing tier (Basic/Premium), FAQ, CTA pre-order, footer [sections]. Tone: premium ấm, không Silicon Valley cold tech [tone]. Conversion goal: email signup + pre-order $50 deposit [conversion]. Apply 'Saigon Health' design system [design system]."

5-7 câu Claude hỏi sau brief tập trung vào: copy detail (headline, value prop), social proof source (testimonial real?), pricing breakdown.

Workflow đầy đủ — Saigon Health landing page

Bước 1: Brief + questions

Brief 7 yếu tố ở trên. Send.

Claude hỏi 6 câu:

Bước 2: Generate (~7 phút)

Output: full landing page với 7 sections.

Hero section:

• Headline H1: "Sức khỏe phòng ngừa, bắt đầu từ hôm nay"
• Sub: "Saigon Health là health watch đầu tiên thiết kế cho người Việt..."
• CTA primary: "Đặt hàng trước"
• CTA secondary: "Tìm hiểu thêm"
• Visual: imagined watch product (Vaibhav-style — Claude tự design watch)
• Background: subtle gradient sunrise, brand color

Features grid (4 cards):

1. "Theo dõi liên tục 24/7" — icon + 1 paragraph
2. "AI hiểu context Việt" — icon + paragraph
3. "Chia sẻ với gia đình" — icon + paragraph
4. "Pin 30 ngày" — icon + paragraph

Testimonials (3 generic):

• Each: avatar placeholder + quote + name + role

Pricing (3 tiers):

• Basic / Premium (highlighted "Most popular") / Family

FAQ (6 Qs):

• "Có bảo hành không?", "Tương thích phone gì?", ...

CTA section:

• "Đăng ký nhận thông tin sớm — limited spots"
• Email input + button

Footer:

• Logo + nav + social + copyright

Bước 3: Iterate

3 issues thấy ngay:

1. Hero CTA secondary "Tìm hiểu thêm" — quá generic, đổi "Xem trên VnExpress"
2. Pricing tier 2 ("Most popular") chưa nổi bật đủ
3. FAQ Q5 dịch hơi cứng

Edit + Comment batch:

• Edit: hero CTA secondary inline edit
• Comment 2: "Pricing tier 2 'Premium' needs stronger visual emphasis — gradient border + larger card scale"
• Comment 3: "FAQ Q5: rewrite phần Việt soft hơn"

Send batch. ~3 phút render.

Bước 4: Add animation từ 21st.dev

(Sẽ chi tiết phần 21st.dev integration sau bài)

Quick: vào 21st.dev → backgrounds → pick "subtle particle health pulse" → copy prompt → paste vào Claude Design.

Background hero giờ có particle subtle motion. Premium feel ↑.

Bước 5: Export

3 export:

• HTML standalone → upload Vercel custom domain
• Claude Code hand-off → for dev integrate với backend pre-order form
• PDF → for stakeholder review (cofounder, advisor)

Kết quả

• Total time: ~25 phút (brief 3 + Q 4 + generate 7 + iterate 6 + 21st.dev 3 + export 2)
• Token tốn: ~12% Pro plan
• Output quality: 8.5/10 (production-deploy được sau 1 round dev review)

🎯 Ghi nhớ: Landing page mode tốn token nhiều hơn slide deck (vì sections phức tạp hơn) nhưng output production-ready. Khoản đầu tư trả về khi deploy thay vì cần Webflow / Figma → handoff thêm.

Launch video mode — 30 giây từ brand

Cấu trúc

Brief video → Q&A (length, pacing, sound, narrative arc)
    ↓
Generate (~2-5 phút):
- Visual scene từ brand
- Motion principles applied
- Optional: voiceover, sound
    ↓
Iterate (giới hạn — không có 4-mode đầy đủ cho video)
    ↓
Export: MP4, GIF, embed link

Brief video — 5 yếu tố

[PRODUCT]
+ [LENGTH] (10s, 30s, 60s)
+ [NARRATIVE ARC] (problem→solution / showcase / explainer)
+ [SOUND] (yes/no, type)
+ [TONE/PACING]

Ví dụ:

Quick 30-second video breakdown of Saigon Health. Narrative: showcase product feel + key features. Sound: subtle ambient + soft text reveal. Pacing: smooth, premium, không cuồng. Apply Saigon Health design system.

Token cost cảnh báo

Vaibhav: 77% Pro plan after 2 brand builds, including 1 video.

Video 30s = 5-10% Pro plan. Đừng generate 5 video/day exploration.

Khi nào dùng video mode:

• Launch announcement (1 video, polish)
• Pitch supplement (kèm pitch deck)
• Social media teaser (organic)
• Hero background landing page (subtle, looped)

Khi không nên:

• Daily content (TikTok, Reel) → cost prohibitive
• Long-form (>1 phút) → quality drop
• Heavy custom asset cần (real product photo) → not Claude's strength

21st.dev — Animation effects gallery

21st.dev là gallery free animation/component effects, copy-prompt design. Khi pair với Claude Design, bạn thêm motion polish miễn phí.

Workflow

1. Vào 21st.dev
2. Browse: Backgrounds / Cards / Buttons / Particle / Hover / Text effects
3. Pick effect bạn thích
4. Click "Copy prompt"  ← prompt mô tả effect, đã optimized
5. Quay lại Claude Design — landing page hiện tại
6. Paste prompt vào Comment / chat
7. Claude apply effect vào element bạn chọn

Ví dụ Lil (Iana Veia, Bài source PT):

• Vào 21st.dev → backgrounds → pick particle effect
• Copy prompt
• Paste vào Claude Design landing page
• Background hero có particle motion subtle
• Cost: 1 round comment (~3% Pro plan)

Categories phổ biến

So sánh — Claude Design vs Webflow vs Framer vs Figma → handoff

Workflow phối hợp tốt nhất

Phase 1: Claude Design  (10-30 phút first draft + 4-mode iterate)
                ↓
Phase 2: Validate    (share link với user, gather feedback)
                ↓
Phase 3: Decide
   ┌─────────┬─────────┬─────────┐
   │         │         │         │
   ▼         ▼         ▼         ▼
 MVP       Production CMS   Production motion-heavy
 (ship    (Webflow:        (Framer:
 HTML       export HTML       rebuild với motion library)
 export)    + import)

Ví dụ theo ngành / Case studies

Indie hacker — MVP landing trong 1 ngày

Pain: "Mình build SaaS solo. Cần landing page validate idea trước code app. Webflow $39/mo + 2 ngày build = chậm + tốn."

Workflow:

• Brand synthesis Bài 5 (~30 phút)
• Landing page Claude Design (~30 phút)
• Export HTML → Vercel free deploy (~5 phút)
• Total: 1 buổi sáng

Kết quả: Validate idea trong 1 tuần với landing + waitlist. Pivot sớm nếu signal tệ. Saving: $39/mo Webflow + 2 ngày.

Agency — 1-day MVP cho client

Pain: "Client RFP: cần MVP landing trong 1 ngày để pitch investor mai. Webflow không kịp."

Workflow:

• Client brand → Claude Design design system (1 tiếng)
• Landing page (1 tiếng)
• Export HTML → host on Vercel demo subdomain
• Polish bằng Claude Code overnight (~2 tiếng)

Kết quả: MVP landing live trong 5 tiếng thay vì 1-2 ngày Webflow. Client closed investor.

Course creator — sales page

Pain (Lil's case): "Sales page cho course Iana Veia. Hire designer 3-5 triệu + 1 tuần. Dùng Canva — trông cheesy."

Workflow Lil's:

• Skill custom Claude generate copy first (Bài 5 territory)
• Paste copy vào Claude Design landing page
• Tweak color → "Iana Veia pink"
• Add animation từ 21st.dev (electric background hero)
• Export HTML → upload WordPress Elementor

Kết quả: Sales page premium-feel, conversion +35% vs Canva. Cost: $20.

Marketer — campaign landing

Pain: "Quarterly campaign cần dedicated landing. Marketing không có designer dedicated. Block design team — ko ưu tiên."

Workflow:

• Apply company design system Claude Design
• Generate campaign-specific landing
• 21st.dev background effect cho hero
• Export → host on subdomain marketing
• Update mỗi quarter (clone + edit)

Kết quả: Marketing self-serve campaign landing. Design team focus product, không campaign one-off.

Prompt template — Landing & video

Template L-1: Landing page — SaaS B2B

Build me a landing page for [SaaS product] — [1-line positioning],
targeting [B2B persona]. Sections: hero, problem statement,
solution overview, 3-6 features with icons, social proof (logos +
testimonials), pricing tier comparison, FAQ, CTA (book demo / start
trial), footer. Tone: [trust + competence / disrupt + bold].
Apply [design system name] OR no design system.

Template L-2: Course / education sales page

Build me a sales page for [course name] — [course value prop],
targeting [learner profile]. Sections: hero with course title, pain
points (problems learner has), course outcome (what they'll achieve),
syllabus modules, instructor bio, testimonials (placeholder), pricing
(early bird + regular), FAQ, CTA (enroll now). Tone: [aspirational +
trustworthy]. Animation: subtle. Conversion goal: enrollment.

Template L-3: Product launch (waitlist)

Build me a launch landing for [product] — [positioning]. Goal: build
waitlist. Sections: hero with product reveal, why it matters, sneak
peek (3 visual feature highlights), founder note, email signup
(prominent), social share. Tone: [bold launch energy / mysterious
intrigue / community-driven]. Apply [design system].

Template L-4: Event landing

Build me an event landing for [event name] — [event 1-liner], on
[date], [location/format virtual]. Sections: hero with date + register
button, agenda (speakers + sessions), about event, ticket tiers, FAQ,
CTA register. Tone: [conference-pro / community-warm / festival-bold].
Apply [design system].

Template L-5: Portfolio personal page

Build me a personal portfolio for [name], [profession]. Sections:
hero with name + tagline, about me (1-2 paragraphs), case studies (3-6,
each with image + outcome metric), services offered, contact CTA.
Tone: [creative + bold / minimal + premium / playful]. Color direction:
[reference brand]. Apply portfolio design system or generate fresh.

Template V-1: Launch video (no real assets)

Build me a 30-second launch video for [product] — [brand language /
design system applied]. Narrative: showcase product feel + 3 key
features. Pacing: smooth premium, không quá flashy. Sound: subtle
ambient + soft text reveal. End on CTA: "[CTA text]". Imagine product
appearance from brand language.

Template V-2: Explainer video (60s)

Build me a 60-second explainer video for [product]. Narrative arc:
problem (10s) → why current solutions fail (15s) → introduce our
solution (20s) → key benefit demo (10s) → CTA (5s). Tone: [educational
+ confident]. Voice-over: yes, [neutral / energetic / calm].

Anti-patterns — Sai lầm phổ biến

Build landing như slide deck (text-heavy)

7 sections, mỗi section 4 paragraph, tổng 5000 từ.

Tại sao sai

Landing page là scan, không phải read. User scroll trong 5-10s decide stay. 5000 từ = leave.

Cách đúng

Hero <50 từ. Each feature <30 từ. Pricing tier 1 sentence each. Total <800 từ for whole page. Visual >> text.

Add 5 animation từ 21st.dev cho 1 page

Particle background + cursor follow + text decrypt + button glow + card 3D tilt + ...

Tại sao sai

Slow load (animation tốn JS), visual chaos. User notice 0 animation thay vì 5.

Cách đúng

1-2 animation/page max. Pick 1 hero animation + 1 micro-interaction (button hover hoặc card hover). Stop.

Dùng video mode cho daily content

Generate 5 video TikTok/day → 50% Pro plan tuần đầu.

Tại sao sai

Video tốn token nặng nhất (5-10%/video). Daily content = budget hỏng.

Cách đúng

Video mode cho launch event (1-2/tháng). Daily content → CapCut, Canva video, manual.

Export HTML rồi không test responsive

Export, upload, share. Mở mobile — vỡ.

Tại sao sai

Claude generate responsive nhưng không 100% perfect. Browser cụ thể (Safari iOS, Chrome Android) đôi khi quirk.

Cách đúng

Test 3 device sau export: desktop Chrome, iPhone Safari, Android Chrome. Fix responsive bug bằng Claude Code (Bài 9).

Landing không có conversion goal rõ

Build landing đẹp, không có CTA cụ thể. User scroll xong... rời.

Tại sao sai

Landing không phải brochure. Mục đích là action (signup, buy, book demo, share).

Cách đúng

1 primary CTA xuyên suốt page. Repeat 3-5 lần (hero, mid-page, end). Optional 1 secondary CTA. Đo conversion = đo CTA click rate.

Import 21st.dev prompt mà không hiểu effect

Copy prompt particle background → paste → output: page chạy chậm 3s.

Tại sao sai

Một số 21st.dev effect heavy WebGL → impact performance.

Cách đúng

Read 21st.dev preview trước copy. Pick effect "Lightweight" tag. Test page speed sau apply.

Mẹo nâng cao

Mẹo 1: "Above the fold" là sacred

70% user không scroll. Hero (90vh) phải đứng một mình truyền tải:

• WHO bạn là (1 sentence)
• WHY họ should care (positioning)
• WHAT action (CTA)

Skip hero "weak" → đếm conversion drop.

Mẹo 2: A/B test 2 hero variations

Sau first generate, comment:

Show me 2 variations of hero only — A) bold-statement headline, B) question-based headline. Same body & CTA.

Pick winner. Apply.

Mẹo 3: Pricing tier psychology

Default Claude generate: "Basic / Premium / Pro" — generic.

Override với psychology:

Pricing 3 tiers. Tier 2 'Premium' must be visually most prominent — larger card, gradient border, 'Most Popular' badge. Tier 1 và 3 framing tier 2 as anchor. Tier 1 deliberately limited features. Tier 3 deliberately overkill (anchor down to tier 2).

Conversion tier 2 thường ↑ 30-50% với psychology framing.

Mẹo 4: Dùng video làm hero background

Generate video 10s loop → embed làm hero background landing page. Premium feel ↑↑.

Comment landing page: "Use the launch video [link] as a muted, looped
background for hero section. Overlay với gradient dark cho text legibility.
Reduce video opacity to 60%."

Mẹo 5: Multi-language landing

Vietnamese site target tier 2-3 city → landing 100% Việt. Tier 1 + expat → landing với toggle EN/VI.

Brief: "Build landing với 2 ngôn ngữ. Default Vietnamese, toggle button
góc top-right switch English. Both versions content equivalent, không
phải 1-1 translation — adapt cho cultural context."

Áp dụng ngay

Bài tập 1: Build full landing page (~45 phút)

Bước 1 — Pick 1 product (10 phút):

Use idea từ Bài 5 (brand synthesis) hoặc 1 idea cá nhân.

Bước 2 — Brief 7 yếu tố (5 phút):

Bước 3 — Generate (~10 phút):

Bước 4 — Iterate 1 round (10 phút):

3 issue identify + batch comment send.

Bước 5 — Add 1 animation từ 21st.dev (5 phút):

Bước 6 — Export HTML (5 phút):

• Test desktop Chrome: ___/10
• Test mobile (Safari/Chrome): ___/10
• Total time bài tập: ___ phút

Bài tập 2 (advanced): 30s launch video (~30 phút)

Sau Bài tập 1:

• Brief video 30s với product cùng brand
• Trả lời 4-5 question
• Generate (~3-5 phút)
• Note token tiêu: ___ %
• Quality video (1-10): ___
• Sử dụng video làm hero background landing → re-iterate landing

Tóm tắt bài học

Tài liệu tham khảo

• 21st.dev — animation effects gallery free
• Vaibhav Sisinty — Nobody Is Ready For What Claude Just Launched — workflow Vajra Pro launch video imagined product
• Lil @Iana Veia — Brazilian PT case — sales page Iana Veia với 21st.dev electric background
• Webflow, Framer — production alternatives
• Refactoring UI — Adam Wathan & Steve Schoger — bí quyết landing page đẹp

Câu hỏi để giữ tinh thần đúng: bạn đang xây landing page hay đang xây "showcase Claude Design power"? Landing page tốt phải drive conversion, không phải showcase. 1 hero clean + 1 CTA mạnh > 5 animation lảng vảng. Đo bằng signup rate, không bằng "wow factor".