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

Landing page mode — Cấu trúc

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: "[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                 │
       └─────────────────────────────────────┘

Brief landing page — Anatomy

7 yếu tố:

Ví dụ:

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.

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

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:

Features grid (4 cards):

Testimonials (3 generic):

Pricing (3 tiers):

FAQ (6 Qs):

CTA section:

Footer:

Bước 3: Iterate

3 issues thấy ngay:

Edit + Comment batch:

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:

Kết quả

• 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
• "Theo dõi liên tục 24/7" — icon + 1 paragraph
• "AI hiểu context Việt" — icon + paragraph
• "Chia sẻ với gia đình" — icon + paragraph
• "Pin 30 ngày" — icon + paragraph
• Each: avatar placeholder + quote + name + role
• Basic / Premium (highlighted "Most popular") / Family
• "Có bảo hành không?", "Tương thích phone gì?", ...
• "Đăng ký nhận thông tin sớm — limited spots"
• Email input + button
• Logo + nav + social + copyright
• Hero CTA secondary "Tìm hiểu thêm" — quá generic, đổi "Xem trên VnExpress"
• Pricing tier 2 ("Most popular") chưa nổi bật đủ
• FAQ Q5 dịch hơi cứng
• 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"
• 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)
• 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)

Launch video mode — 30 giây từ brand

Cấu trúc

Brief video — 5 yếu tố

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ố

Ví dụ:

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:

Khi không nên:

• Launch announcement (1 video, polish)
• Pitch supplement (kèm pitch deck)
• Social media teaser (organic)
• Hero background landing page (subtle, looped)
• 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

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

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

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

Categories phổ biến

• 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)

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

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:

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:

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:

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:

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

• 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
• 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)
• 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
• 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)

Prompt template — Landing & video

Template L-1: Landing page — SaaS B2B

Template L-2: Course / education sales page

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

Template L-3: Product launch (waitlist)

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)

Template L-4: Event landing

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

Template L-5: Portfolio personal page

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

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

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)

Template V-2: Explainer video (60s)

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:

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

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

Sau first generate, comment:

Pick winner. Apply.

Mẹo 3: Pricing tier psychology

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

Override với psychology:

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 ↑↑.

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.

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

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

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):

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

Sau Bài tập 1:

• Test desktop Chrome: ___/10
• Test mobile (Safari/Chrome): ___/10
• Total time bài tập: ___ phút
• 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

🎯 Landing page mode = 7 sections spine — Hero → Features → Social proof → Pricing → FAQ → CTA → Footer. Customize sections theo product, đừng skip cấu trúc cơ bản.

🎯 Brief 7 yếu tố — Product + Positioning + Audience + Sections + Tone + Conversion goal + Design system. Specific over generic.

🎯 21st.dev = animation gallery free — Pick 1-2 effect/page max. Browse → copy prompt → paste vào Claude Design → apply.

🎯 Video mode tốn token nặng — 5-10% Pro plan/video. Dùng cho launch event, không daily content.

🎯 Decision Claude Design vs Webflow — Claude Design cho first draft, MVP, validate. Webflow/Framer cho production CMS. Pair tools, đừng thay nhau.

🎯 Test responsive sau export — Desktop + iPhone Safari + Android Chrome. Fix bug bằng Claude Code (Bài 9).

🎯 Conversion goal rõ ràng — 1 primary CTA, repeat 3-5 lần. Đo CTA click rate, không vibe page.