MASTER PROMPT WEB/LANDING PAGE

Bạn là một Senior Graphic Designer kiêm UI/UX Expert với 10+ năm kinh nghiệm.
Nhiệm vụ của bạn là phân tích, trích xuất DNA thiết kế và tái tạo phong cách
(style clone) của mwebsite hoặc landing page ___ theo quy trình 4 bước sau.

## BƯỚC 1 — RESEARCH & ANALYSIS

### 1.1 VISUAL IDENTITY (Nhận diện thị giác)
- **Color Palette**: Liệt kê TẤT CẢ màu sắc theo mã HEX
  → Primary color, Secondary color, Accent color, Background color, Text color
  → Tỷ lệ sử dụng màu (60-30-10 rule hay pattern khác?)
- **Typography**: Tên font chính xác (dùng WhatFont / Google Fonts Inspector)
  → Heading font: tên, weight, size, line-height, letter-spacing
  → Body font: tên, weight, size, line-height
  → Accent font (nếu có)
- **Logo & Brand Mark**: Phong cách logo (wordmark / lettermark / icon-based)

### 1.2 LAYOUT SYSTEM 
- **Grid System**: Số cột (12-col / 16-col / custom)
- **Container Width**: Max-width của content area (px)
- **Spacing Scale**: Khoảng cách cơ bản (8px / 12px / 16px base unit?)
- **Section Padding**: Top/bottom padding của mỗi section (px)
- **Breakpoints**: Điểm responsive (mobile / tablet / desktop)

### 1.3 COMPONENT STYLE 
- **Buttons**: Border-radius, padding, font-weight, shadow, hover effect
- **Cards**: Border-radius, shadow depth, padding, border style
- **Forms**: Input style, border, focus state, placeholder color
- **Icons**: Style (outline / filled / duotone), kích thước, thư viện icon
- **Images**: Aspect ratio phổ biến, style xử lý ảnh (grayscale / overlay / mask?)

### 1.4 MOTION & INTERACTION 
- **Animation Style**: Fade-in / Slide-up / Scale / Parallax
- **Transition Speed**: Fast (150ms) / Medium (300ms) / Slow (500ms+)
- **Scroll Behavior**: Sticky elements, scroll-triggered animations
- **Hover Effects**: Transform, color change, shadow depth change

### 1.5 BRAND PERSONALITY 
- **Tone**: Professional / Playful / Luxury / Minimal / Bold / Warm
- **Target Audience cảm nhận được**: B2B hay B2C? Tuổi? Thu nhập?
- **Keyword mô tả cảm xúc khi nhìn vào trang**: (VD: "tin tưởng", "hiện đại", "năng lượng")

Sau khi phân tích, trình bày kết quả theo đúng format trên.

## BƯỚC 2 — DESIGN DNA DOCUMENT 

Dựa trên kết quả Bước 1, tạo một tài liệu DESIGN DNA chuyên nghiệp
có thể bàn giao trực tiếp cho Designer hoặc Developer.
Tài liệu phải đủ chi tiết để ai cũng có thể tái tạo đúng phong cách mà
KHÔNG cần xem lại trang gốc.

Format tài liệu như sau:

---
# [TÊN DỰ ÁN] — DESIGN DNA DOCUMENT
Version: 1.0 | Date: [ngày tạo]

## 🎨 COLOR SYSTEM
| Token Name         | HEX     | RGB             | Mục đích sử dụng              |
|--------------------|---------|-----------------|-------------------------------|
| --color-primary    | #XXXXXX | rgb(X, X, X)    | CTA buttons, highlights       |
| --color-secondary  | #XXXXXX | rgb(X, X, X)    | Supporting elements           |
| --color-accent     | #XXXXXX | rgb(X, X, X)    | Icons, badges, tags           |
| --color-bg-light   | #XXXXXX | rgb(X, X, X)    | Section backgrounds (sáng)    |
| --color-bg-dark    | #XXXXXX | rgb(X, X, X)    | Section backgrounds (tối)     |
| --color-text-main  | #XXXXXX | rgb(X, X, X)    | Body text                     |
| --color-text-muted | #XXXXXX | rgb(X, X, X)    | Captions, labels, placeholders|

## 🔤 TYPOGRAPHY SYSTEM
| Role          | Font Family    | Weight | Size (desktop) | Size (mobile) | Line-height | Letter-spacing |
|---------------|----------------|--------|----------------|---------------|-------------|----------------|
| H1 — Hero     | [font name]    | 700    | 56px           | 36px          | 1.1         | -0.02em        |
| H2 — Section  | [font name]    | 600    | 40px           | 28px          | 1.2         | -0.01em        |
| H3 — Card     | [font name]    | 600    | 24px           | 20px          | 1.3         | 0              |
| Body Large    | [font name]    | 400    | 18px           | 16px          | 1.6         | 0              |
| Body Default  | [font name]    | 400    | 16px           | 15px          | 1.65        | 0              |
| Caption/Label | [font name]    | 500    | 13px           | 12px          | 1.4         | 0.04em         |

## 📐 SPACING & LAYOUT
- Base unit: Xpx (mọi spacing đều là bội số của X)
- Container max-width: Xpx (centered)
- Section padding: X–Xpx (top/bottom)
- Column gap: Xpx
- Card padding: Xpx

## 🔘 COMPONENT SPECS
### Button Primary
- Background: [HEX]
- Text color: [HEX]
- Border-radius: Xpx
- Padding: Xpx Xpx
- Font: weight X, size Xpx
- Hover: background [HEX], transform: translateY(-2px)
- Transition: all 0.25s ease

### Button Secondary / Ghost
[tương tự button primary]

### Card Component
- Background: [HEX]
- Border: 1px solid [HEX] hoặc none
- Border-radius: Xpx
- Box-shadow: X X Xpx rgba(X,X,X,X)
- Padding: Xpx
- Hover shadow: X X Xpx rgba(X,X,X,X)

### Form Input
- Border: 1px solid [HEX]
- Border-radius: Xpx
- Padding: Xpx Xpx
- Focus border-color: [HEX], box-shadow: 0 0 0 3px rgba([R,G,B], 0.15)
- Placeholder color: [HEX]

## 🎭 MOTION PRINCIPLES
- Animation philosophy: [mô tả ngắn — VD: "subtle, nhẹ nhàng, không phô trương"]
- Default transition: all 0.3s ease
- Scroll animation: [fade-up / fade-in / slide-right, delay: 0.1s stagger]
- Hover transforms: translateY(-Xpx) trên cards

## 🖼️ IMAGE TREATMENT
- Aspect ratio phổ biến: [16:9 / 3:2 / 1:1]
- Border-radius trên ảnh: Xpx
- Overlay nếu có: rgba([R,G,B], 0.X)
- Grayscale filter: [có / không]

## ✍️ COPYWRITING TONE
- Ngôn ngữ: [chính thức / thân mật / kỹ thuật / đơn giản]
- CTA verb pattern: [VD: "Bắt đầu ngay" / "Khám phá" / "Đăng ký miễn phí"]
- Headline style: [hỏi / khẳng định / benefit-first / pain-point]
---

## BƯỚC 3 — BUILD LANDING PAGE / WEBSITE

Dựa trên Design DNA đã xác lập, build trang bằng HTML/CSS/JS

### Quy tắc bắt buộc khi build:
1. **CSS Variables**: Khai báo TẤT CẢ tokens màu, spacing, typography dưới dạng
   CSS custom properties trong :root { }
2. **Component-first**: Mỗi section là một block độc lập, có thể tái sử dụng
3. **Responsive**: Mobile-first approach, breakpoints tối thiểu: 375px / 768px / 1280px
4. **Semantic HTML**: Dùng đúng thẻ (header, main, section, article, footer)
5. **Accessibility**: Alt text cho ảnh, aria-label cho buttons, contrast ratio đạt WCAG AA
6. **Performance**: Không dùng inline style, tránh !important, tối ưu selector
7. **Placeholder Content**: Dùng [CONTENT PLACEHOLDER] cho text chưa có thật,
   dùng placeholder.com hoặc picsum.photos cho ảnh
8. Sử dụng hình ảnh demo từ các stock free để đảm bảo thể hiện đầy đủ landing page.
9. Nếu nếu người dùng chưa có nội dung, tự điền placeholder để bạn thay sau."

## BƯỚC 4 — SECTION-BY-SECTION BRIEFING
## Section 1:
- Headline chính là gì?
- Subtext / mô tả là gì?
- Có bao nhiêu item / card / cột?
- CTA button text và link đến đâu?
## Section 2:
...

BẢNG 1: CÁC SECTION TRONG LANDING PAGE (1 sản phẩm / 1 mục tiêu)

# Tên Tiếng Anh Tên Tiếng Việt Giải thích cho người mới Ý nghĩa & Chức năng Khi nào dùng?
1 Hero Section Màn hình chào Phần đầu tiên bạn nhìn thấy khi vào trang — như trang bìa của 1 cuốn sách Thu hút sự chú ý ngay lập tức, truyền tải thông điệp chính + CTA đầu tiên Bắt buộc — Mọi landing page đều cần
2 Problem Section Phần vấn đề Phần nói ra nỗi đau của khách hàng — "Bạn có đang gặp vấn đề này không?" Tạo sự đồng cảm, khiến khách hàng cảm thấy "đây là trang dành cho mình" Dùng khi bán sản phẩm giải quyết vấn đề cụ thể
3 Solution Section Phần giải pháp Sau khi nêu vấn đề, đây là phần "đây là cách chúng tôi giải quyết" Giới thiệu sản phẩm/dịch vụ như là đáp án duy nhất cho vấn đề trên Đi ngay sau Problem Section
4 Features Section Tính năng / Đặc điểm Liệt kê những gì sản phẩm của bạn có thể làm Giải thích chi tiết từng tính năng, thường dùng icon + text ngắn Khi cần giải thích sản phẩm có nhiều tính năng (SaaS, app, khóa học)
5 Benefits Section Lợi ích Không phải sản phẩm làm được gì, mà là khách hàng được gì Chuyển đổi tính năng thành giá trị cảm xúc cho người dùng Sau Features, hoặc thay thế Features nếu audience là người thường
6 How It Works Cách hoạt động Giải thích "dùng sản phẩm này như thế nào?" theo từng bước Giảm rào cản tâm lý — khách hàng biết quy trình sẽ tự tin mua hơn Khi sản phẩm/dịch vụ cần giải thích quy trình (đặc biệt là dịch vụ)
7 Social Proof Section Bằng chứng xã hội Hiển thị người khác đã dùng và hài lòng — "đừng tin tôi, hãy tin họ" Xây dựng niềm tin qua testimonials, ratings, case studies, logo khách hàng Quan trọng — Nên có ở mọi landing page bán hàng
8 Testimonials Section Đánh giá khách hàng Trích dẫn lời khen từ khách hàng thật — như review trên Shopee Tăng độ tin cậy bằng lời nói của người thứ 3, không phải người bán Khi đã có ít nhất 3–5 khách hàng thật đã dùng sản phẩm
9 Case Study Section Câu chuyện thành công Kể chi tiết 1 khách hàng đã dùng dịch vụ và đạt kết quả cụ thể Bằng chứng sâu hơn testimonial: con số thật, hành trình thật, kết quả thật Khi bán dịch vụ B2B, dịch vụ cao cấp, hoặc sản phẩm phức tạp
10 Pricing Section Bảng giá Hiển thị gói giá — thường dạng 3 cột: Basic / Pro / Enterprise Giúp khách hàng tự lựa chọn phù hợp túi tiền, tạo hiệu ứng neo giá Khi có nhiều gói giá hoặc cần minh bạch giá với khách hàng
11 FAQ Section Câu hỏi thường gặp Trả lời trước những câu hỏi khách hay thắc mắc trước khi mua Giảm rào cản mua hàng, xử lý objection, tăng tỷ lệ chuyển đổi Dùng khi sản phẩm/dịch vụ còn mới hoặc phức tạp với khách hàng
12 CTA Section Lời kêu gọi hành động Phần thúc đẩy khách bấm nút — "Đăng ký ngay", "Mua ngay", "Liên hệ" Tập trung 100% vào 1 hành động duy nhất, không distract Bắt buộc — Thường xuất hiện nhiều lần trong trang
13 Urgency / Scarcity Section Tạo khẩn cấp / Khan hiếm Countdown timer, "Còn X chỗ", "Ưu đãi kết thúc lúc..." Kích hoạt tâm lý sợ bỏ lỡ (FOMO), đẩy nhanh quyết định mua Dùng trong flash sale, pre-launch, giới hạn slot
14 Guarantee Section Cam kết / Bảo đảm "Hoàn tiền 30 ngày nếu không hài lòng" — xóa bỏ rủi ro cho khách Giảm nỗi sợ mất tiền, tăng tỷ lệ chuyển đổi đáng kể Khi giá sản phẩm cao hoặc khách hàng còn hoài nghi
15 Team Section Đội ngũ Giới thiệu những người đứng sau sản phẩm/công ty Xây dựng niềm tin qua con người thật — "ai đang làm điều này?" Khi brand trust quan trọng: giáo dục, y tế, tư vấn, đầu tư
16 Lead Capture Form Form thu thập thông tin Ô điền tên, email, số điện thoại để nhận tư vấn/tài liệu Thu thập lead, kích hoạt email marketing / sales follow-up Dùng cho sản phẩm cần tư vấn hoặc funnel có nhiều bước
17 Video Section Section video Nhúng video demo, video testimonial, hoặc video giới thiệu Tăng thời gian ở lại trang, giải thích tốt hơn văn bản Khi có video chất lượng cao, đặc biệt hiệu quả với SaaS/app
18 Comparison Section So sánh Bảng so sánh sản phẩm của bạn vs đối thủ hoặc "trước/sau" Chứng minh ưu thế cạnh tranh một cách trực quan Khi thị trường cạnh tranh cao, khách hàng đang cân nhắc nhiều lựa chọn
19 Stats / Numbers Section Số liệu ấn tượng Hiển thị con số lớn: "10.000+ khách hàng", "98% hài lòng" Tạo uy tín bằng số liệu định lượng — dễ nhớ và có sức thuyết phục cao Khi đã có số liệu thực tế đủ ấn tượng để nêu ra
20 Footer Chân trang Phần dưới cùng — logo, link menu, thông tin liên hệ, copyright Điều hướng phụ, tăng tin cậy với thông tin pháp lý đầy đủ Bắt buộc — Mọi trang đều cần

BẢNG 2: CÁC SECTION THÊM TRONG WEBSITE (Nhiều trang / Nhiều mục tiêu)

# Tên Tiếng Anh Tên Tiếng Việt Giải thích cho người mới Ý nghĩa & Chức năng Khi nào dùng?
1 Navigation / Header Thanh điều hướng Thanh menu trên cùng — logo bên trái, menu bên phải Điều hướng người dùng đến các trang khác trong website Bắt buộc cho website nhiều trang
2 Mega Menu Menu mở rộng Menu thả xuống có nhiều cột — thường thấy ở website lớn như Shopee Hiển thị nhiều danh mục sản phẩm / dịch vụ cùng lúc Website có nhiều danh mục (ecommerce, giáo dục, SaaS lớn)
3 Breadcrumb Đường dẫn vị trí Dòng nhỏ "Trang chủ > Blog > Bài viết X" — cho biết bạn đang ở đâu Giúp điều hướng, tốt cho SEO, giảm tỷ lệ bounce Blog, trang sản phẩm, trang danh mục
4 Sidebar Thanh bên Cột nhỏ bên cạnh nội dung chính — thường có trên blog Hiển thị bài viết liên quan, ads, danh mục, search box Blog, trang tin tức, diễn đàn
5 Blog / Article Section Section bài viết Hiển thị danh sách bài blog dạng card hoặc grid Content marketing, SEO, giữ chân người dùng ở lại Website có blog, trang tin tức, knowledge hub
6 Portfolio / Gallery Danh mục tác phẩm Hiển thị ảnh / project đã làm — như album ảnh Bằng chứng năng lực bằng hình ảnh trực quan Agency, photographer, designer, nhà thầu xây dựng
7 About Section Về chúng tôi Kể câu chuyện công ty — thành lập khi nào, giá trị cốt lõi, tầm nhìn Xây dựng brand story, kết nối cảm xúc với khách hàng Trang About Us, hoặc nhúng vào landing page tạo trust
8 Partners / Clients Section Đối tác / Khách hàng Hiển thị logo của các công ty đã hợp tác Social proof cấp độ brand — "những tên tuổi này đã tin dùng" Khi có đối tác / khách hàng là thương hiệu có tiếng
9 Contact Section Liên hệ Form + địa chỉ + map + số điện thoại Cung cấp cách thức liên lạc, tạo điểm chốt kênh offline Trang Contact, hoặc cuối landing page dịch vụ
10 Map Embed Bản đồ nhúng Google Maps được nhúng vào trang Hướng dẫn địa điểm, tăng tin cậy với địa chỉ thực tế Doanh nghiệp có địa điểm vật lý: spa, nhà hàng, phòng khám
11 Newsletter Section Đăng ký nhận tin Ô nhập email để nhận bản tin — thường có quà tặng kèm Xây dựng email list cho marketing dài hạn Blog, media site, e-commerce, SaaS
12 Search Bar Section Thanh tìm kiếm Ô search ngay trên trang Giúp người dùng tìm nội dung nhanh, cải thiện UX Website có nhiều nội dung: blog lớn, ecommerce, knowledge base
13 Filter / Sort Bar Thanh lọc & sắp xếp Các nút lọc sản phẩm: theo giá, danh mục, đánh giá... Giúp người dùng tìm đúng sản phẩm họ cần nhanh hơn Trang danh sách sản phẩm, trang tìm kiếm
14 Product Card Grid Lưới thẻ sản phẩm Hiển thị nhiều sản phẩm dạng ô vuông — như Shopee, Tiki Duyệt và so sánh nhiều sản phẩm cùng lúc Ecommerce, marketplace, danh mục dịch vụ
15 Sticky CTA Bar Thanh CTA dính Thanh nổi luôn hiển thị khi cuộn trang — không mất khỏi tầm nhìn Giữ nút hành động luôn hiện diện, tăng tỷ lệ click Landing page dài, trang bán hàng, booking
16 Exit Intent Popup Popup khi thoát Hộp thoại bật lên khi bạn chuẩn bị đóng tab Thu hồi khách sắp rời đi bằng offer cuối cùng Ecommerce, landing page khóa học, SaaS
17 Cookie Banner Thông báo cookie Thông báo nhỏ phía dưới "Trang này dùng cookie..." Tuân thủ pháp lý (GDPR), cần thiết với website quốc tế Mọi website có audience từ EU hoặc cần compliance
18 404 Page Trang lỗi không tìm thấy Trang hiển thị khi link bị lỗi — "Oops! Trang không tồn tại" Giữ người dùng không bỏ đi khi gặp link chết Bắt buộc — Mọi website đều cần trang 404 tùy chỉnh

📚 BẢNG 3: THỨ TỰ SECTION THEO LOẠI TRANG (Cheat Sheet)

Loại trang Thứ tự Section được khuyên dùng
Landing Page Bán Hàng Đơn Giản Hero → Problem → Solution → Features → Social Proof → Pricing → FAQ → CTA → Footer
Landing Page Thu Thập Lead Hero → Benefits → How It Works → Testimonials → Lead Capture Form → Footer
Landing Page Khóa Học Hero → Problem → Solution → Curriculum → Instructor (Team) → Testimonials → Pricing → Guarantee → FAQ → CTA → Footer
Landing Page Dịch Vụ B2B Hero → Stats → How It Works → Case Study → Partners → Testimonials → Pricing → Contact → Footer
Trang Chủ Website Công Ty Header → Hero → About → Services → Stats → Partners → Testimonials → Blog → Contact → Footer
Trang Ecommerce Header → Banner → Featured Products → Categories → Product Grid → Newsletter → Footer
Trang Blog Header → Featured Post → Category Filter → Article Grid → Newsletter → Sidebar → Footer

💡 Ghi nhớ quan trọng cho học viên: