Làm Chủ
Claude Design
Cẩm nang chuẩn hóa quy trình thiết kế Website, Landing Page và Presentation đẳng cấp thương mại — triệt tiêu thiết kế rập khuôn ("AI Slop") bằng tư duy Kiến trúc Hệ thống thay vì Prompt cầu may.
Gói truy cập
Trải nghiệm Thiết kế AI-Native Đột phá
Sức mạnh của mô hình thị giác Claude Opus 5 trong quy trình sáng tạo của bạn. Các tùy chọn truy cập:
Dành cho Cá nhân
Claude Pro
GÓI CƠ BẢNLý tưởng cho Designer, Developer và Freelancer.
Truy cập Claude Design, Code và Artifacts
Claude Max
TÙY CHỌNDành cho người dùng cường độ làm việc cao.
Hạn mức thiết kế cao nhất
Dành cho Doanh nghiệp
Claude Team
THEO NGƯỜI DÙNGHỗ trợ Design Systems dùng chung, cộng tác thời gian thực.
Quản lý quyền linh hoạt
Claude Enterprise
LIÊN HỆBảo mật cấp cao, triển khai trên codebase lớn.
Hạn mức không giới hạn
Giá thay đổi theo thời gian và theo Anthropic quyết định — xem bảng giá mới nhất tại anthropic.com/pricing.
Triết lý cốt lõi
Khử "AI Slop" — Từ Prompt Engineering sang Systems Architecture
Mô hình AI không tự nhận biết thế nào là thẩm mỹ thương mại. Câu lệnh ngắn buộc nó tự suy đoán hàng nghìn quyết định thẩm mỹ cùng lúc — kết quả là sản phẩm đồng dạng, thiếu bản sắc.
Thị giác rập khuôn
Gradient tím-chàm, kính mờ tràn lan, bo góc thiếu tính toán, luôn luôn là 3 feature card nằm ngang.
Typography cẩu thả
Font mặc định hệ thống, thiếu phân cấp thị giác, line-height và kerning không đạt chuẩn xuất bản.
Copywriting sáo rỗng
"Unlock your full potential", "Peace of mind", "Trusted and reliable" — chung chung, vô nghĩa.
Thiếu tương tác thực chất
Giao diện tĩnh, cuộn trang không gắn kết trực quan, không dẫn dắt hành vi người dùng.
| Tiêu chí | Prompter (Câu lệnh đơn lẻ) | Master Builder (Kiến trúc hệ thống) |
|---|---|---|
| Cách tiếp cận | Viết prompt dài miên man, cầu may kết quả | Thiết lập hệ thống quy chuẩn trước khi sinh mã |
| Hệ quy chiếu | Mô tả trừu tượng ("làm web hiện đại") | Design System & Gold Standard cụ thể |
| Sửa lỗi | Mở từng trang/code để sửa thủ công | Tinh chỉnh cấp hệ thống (System-level fixing) |
| Tạo sinh Media | Ảnh stock miễn phí hoặc placeholder | CLI/API sinh ảnh & video hoạt họa đồng bộ |
| Nội dung | Chấp nhận văn phong AI tự tạo | Bộ lọc khử sáo ngữ + tâm lý học hành vi |
Phần 1
Mô Hình Kiến Trúc 3 Lớp
Đảm bảo tính nhất quán, hạn chế lỗi hiển thị và cho phép tái sử dụng qua nhiều dự án.
File design.md — Quy tắc & Tiêu chuẩn Cốt lõi
Design System — Hệ thống Trực quan & UI Kit
Reusable Templates — Khung sườn theo mục đích
Lớp 1: File design.md (Bộ quy chuẩn bằng Markdown)
- Palette màu sắc: Primary, Secondary, Background, Border, Accent dưới dạng mã HEX/HSL rõ ràng.
- Quy chuẩn Typography: Font cho Heading/Body/Caption, cỡ chữ, tỷ lệ tương phản chuẩn WCAG.
- Spacing & Grid: Padding/margin theo hệ 4px hoặc 8px, khoảng trắng âm.
Lớp 2: Visual Design System (UI Kit)
Nạp design.md cùng tài nguyên thật (logo vector, ảnh thực tế, tài sản thương hiệu) vào môi trường thiết kế, chuyển hóa thành bộ UI Kit hoàn chỉnh: Button States, Form, Card sản phẩm, Header/Footer. Sửa lỗi ngay tại lớp này (vị trí logo, căn lề, số trang) — mọi tinh chỉnh sẽ tự động kế thừa cho toàn bộ trang tạo ra sau.
Lớp 3: Reusable Templates
Website / Landing Page
Hero → Proof/Receipts → Interactive Utility → Tính năng → Đội ngũ → FAQ → Final CTA
Business Proposal Slide
Vấn đề thị trường → Giải pháp → Roadmap → Ngân sách → Kêu gọi hành động
Bài tập: Viết design.md thật cho 1 dự án
Dùng đúng mẫu ở Cheat Sheet (Phần 5) bên dưới, viết file design.md cho 1 dự án bạn đang có — không phải dự án ví dụ.
Phần 2
Thang Đo 7 Cấp Độ Thiết Kế Website Chuyển Đổi Cao
Từ ý tưởng sơ khai đến website thương mại có hiệu suất chuyển đổi vượt trội.
Trích xuất DNA Thiết kế từ Gold Standard
Không bao giờ thiết kế từ trang giấy trắng. Khai thác sản phẩm dẫn đầu ngành (ví dụ Mintlify, referral.design) hoặc thư viện thiết kế chuẩn mực quốc tế — yêu cầu AI dịch ngược (reverse-engineer) tỷ lệ màu, phong cách đổ bóng, nhịp điệu typography, cảm giác thương hiệu.
Kiến trúc Đa trang & Wireframe Toàn diện
Sản phẩm thương mại hoàn chỉnh cần cấu trúc toàn diện (Home, About, Services, Case Studies, Pricing, Contact). Dùng công cụ dựng sitemap & wireframe chuyên dụng (như Reloom) để xác lập khung xương HTML trước khi đổ phong cách đồ họa.
Điểm dừng Thị giác & Tiện ích Tương tác
Đồng bộ thao tác cuộn chuột với chuyển động trang (scroll-driven). Thay form liên hệ tĩnh bằng công cụ tính giá/kiểm tra nhu cầu cho kết quả tức thì.
Tối ưu hóa Mobile-First Thực chiến
Menu điều hướng tinh gọn, vùng chạm nút bấm tối thiểu 44×44px, lề an toàn, ngắt dòng tiêu đề tự nhiên trên màn hình nhỏ — nơi chiếm phần lớn traffic thật.
Thanh lọc Văn phong Sáo rỗng (De-slopification)
Cognitive Ease: tiêu đề truyền tải thông điệp trong 3 giây. Pain First: nêu rào cản trước khi giới thiệu giải pháp. One Page - One Thought: mỗi màn hình một ý niệm chủ đạo.
❌ Sáo rỗng
"Chúng tôi cung cấp giải pháp bảo vệ tối ưu với sự tận tâm và chất lượng vượt trội."
✔️ Cụ thể, xác thực
"Bắn chuẩn 6 đinh trên mỗi tấm ngói. Cam kết báo giá cố định trước khi thợ bước lên thang."
❌ Sáo rỗng
"Đội ngũ chuyên gia giàu kinh nghiệm hàng đầu khu vực."
✔️ Cụ thể, xác thực
"38 chuyên gia tay nghề cao được chứng nhận chính hãng từ năm 2001."
Kỹ thuật Bắn tỉa Giao diện (UI Sniping)
Thu thập vi linh kiện cao cấp từ thư viện mã nguồn mở hiện đại (như 21st.dev). Bổ sung bảo chứng thực tế (card đánh giá động, badge số liệu đã kiểm chứng), đồng nhất hệ icon theo chuẩn hình học thương hiệu.
Tối ưu hóa SEO & Triển khai Hạ tầng Tự động
Phân tích search intent, xây từ khóa đuôi dài tỷ lệ chuyển đổi cao. Đẩy code lên Private Git Repo và kích hoạt CI/CD lưu trữ đám mây.
Bài tập: Viết lại 1 câu sáo rỗng thật
Lấy 1 câu copy sáo rỗng thật đang có trên website/landing page hiện tại của bạn — không phải ví dụ trong bài — viết lại theo nguyên tắc Level 5.
Phần 3
Agentic Workflow & Kỹ Thuật Tự Kiểm Định
Cơ chế tác tử tự lặp, tự kiểm thử — không cần can thiệp thủ công liên tục.
4.1 Khung Phỏng Vấn Định Hướng
Trước khi sinh bất kỳ đoạn mã nào, để AI tự vấn người dùng qua 4 câu hỏi then chốt:
- Scroll Journey: Người xem tiếp cận thông tin theo thứ tự nào?
- Core Belief: Khách hàng phải tin điều gì sau khi kết thúc, trong đúng 1 câu?
- Emotional Rhythm: Đoạn nào cần Calm (uy tín), đoạn nào cần Intense (kích hoạt)?
- Signature Move: Tính năng/hiệu ứng đột phá nào sản phẩm thông thường chưa có?
4.2 CLI tạo Đồ họa & Chuyển động
Tích hợp CLI/API (như Higgsfield) sinh linh vật/icon thương hiệu có tính cách riêng, video loop ngắn cho từng khối tính năng, đồng bộ HEX code thương hiệu vào tham số render 3D/Isometric.
4.3 Vòng Lặp Đối Chiếu (Design Loop)
Tác tử kiểm duyệt tự hỏi: "Đã đạt Gold Standard chưa? Có dấu hiệu rập khuôn không?" — chưa đạt thì tự lặp lại, không cần can thiệp thủ công.
4.4 Tự Kiểm Định Trực Quan
AI tự chụp screenshot các keyframe sau khi render, phân tích để bắt lỗi tràn chữ, vỡ layout, lệch khoảng cách trước khi bàn giao.
Bài tập: Chạy 1 vòng Design Loop
Dùng prompt Design Loop ở Cheat Sheet (Phần 5), chọn 1 Gold Standard cụ thể, để AI tự chụp màn hình đối chiếu ít nhất 2 vòng lặp.
Phần 4
Slide Thuyết Trình & Pitch Deck Doanh Nghiệp
Chuẩn hóa cho Slide Báo cáo Quản trị, Đào tạo và Hồ sơ Đề xuất Dự án.
Design System vs Slide Template
Design System: màu bìa, tỷ lệ cột, vị trí logo, quy chuẩn biểu đồ, font tiêu đề/nội dung.
- Báo cáo Quản trị: Ngắn gọn, dashboard số liệu, biểu đồ xu hướng, kết luận trọng tâm.
- Đào tạo nội bộ: Trực quan, sơ đồ quy trình, ví dụ minh họa từng bước.
- Sales / Pitch Deck: Vấn đề sắc bén, giải pháp, chứng thực, bảng giá, CTA.
Tinh chỉnh Hai Tầng
Phần 5
Bộ Prompt Mẫu & Cheat Sheet
Copy thẳng, chỉnh tên dự án và dùng ngay.
Mẫu design.md (rút gọn)
## Color Palette
Primary: #0F172A · Accent: #2563EB · Background: #F8FAFC
Border: #E2E8F0 (1px, bo góc 12px)
## Typography
Heading: Inter Display (Bold, kerning -0.02em)
Body: Inter Text (line-height 1.6, #334155)
## Absolute Restrictions
❌ Gradient tím/chàm (indigo-violet)
❌ Bố cục 3 feature card kính mờ rập khuôn
❌ Câu sáo rỗng ("peace of mind", "cutting-edge")
✔️ Mọi claim phải kèm số liệu xác thực
✔️ Một màn hình - Một thông điệpPhỏng vấn ngược (Reverse Interview)
"Bạn là Giám đốc Sáng tạo... TRƯỚC KHI sinh mã, hãy phỏng vấn tôi 4 câu hỏi về hành trình, thông điệp cốt lõi, bằng chứng xác thực và điểm nhấn độc bản."
Khử sáo ngữ Copywriting
"Xoá bỏ tính từ sáo rỗng, giảm tải nhận thức bằng câu ngắn, định lượng hoá mọi claim, giữ nguyên tắc một màn hình - một thông điệp - một CTA."
Kích hoạt Design Loop
"Lấy [Gold Standard] làm hệ quy chiếu. Tự sửa và kiểm tra lại qua ảnh chụp màn hình cho đến khi đạt chuẩn thương mại cao cấp."
Bài tập: Checklist trước khi bàn giao
Trước khi gửi bất kỳ thiết kế nào cho khách/sếp, chạy qua đúng 3 điều Do's & Don'ts trong file design.md của bạn.
Tổng Kết Hành Trình Master
| Cấp độ | Tư duy | Sản phẩm đầu ra |
|---|---|---|
| Cơ bản | "Nhập prompt để AI tạo trang web đẹp" | Rập khuôn, lỗi tràn chữ, đầy sáo ngữ AI |
| Trung cấp | "Áp dụng Brand Guideline" | Ổn định, đúng màu nhưng thiếu tương tác sâu |
| Master | "Xây hệ sinh thái tự vận hành" | Sản phẩm độc bản, chuyển đổi cao, chuẩn $10,000+ |
Lộ trình tiếp theo
Claude Masterclass 2026
Biến thiết kế thành sản phẩm hoạt động với Claude Code, Agentic Workflow và triển khai lên Vercel.
Khám phá khóa học