Workflow tạo Landing Page Workshop nhanh
Hệ thống thiết kế dark "blueprint tech" dùng cho mọi trang landing page workshop của Deman AI Lab. Dùng trang này để tự tạo một buổi workshop mới trong vài phút — không cần biết code.
Giới thiệu
Đây chính là hệ thống thiết kế đang chạy thật ở /workshop/haivn-110726-brandfoamer — bảng màu, bố cục và các khối nội dung bạn thấy ở đó đều được rút ra thành quy tắc và đóng gói lại trên trang này.
Mục tiêu là để bất kỳ ai trong team — kể cả không biết code — cũng có thể tự dựng một trang landing page workshop mới trong vài phút, thay vì phải chờ lập trình viên rảnh tay mỗi lần có buổi học mới.
Có 3 cách dùng: (1) nhanh nhất — để Ziino tự tạo giúp bạn, chỉ cần nhập chủ đề; (2) copy một prompt AI đã soạn sẵn, dán vào ChatGPT, Claude hoặc Gemini và điền nội dung buổi học của bạn; hoặc (3) tải trực tiếp file HTML mẫu gốc rồi tự sửa tay nếu bạn quen chỉnh code.
Nhanh nhất · AI tự viết nội dungĐể Ziino tạo landing page workshop giúp bạn
Nhập chủ đề (kèm file slide nếu có) — Ziino viết toàn bộ nội dung đúng hệ thống thiết kế này, xem trước rồi tải file .html trong vài phút.
Bảng màu
12 token màu cố định — khai báo dưới dạng biến CSS :root trong file mẫu, dùng xuyên suốt mọi trang workshop để đảm bảo đồng nhất.
Cấu trúc trang
13 khối theo đúng thứ tự xuất hiện trên trang. Khối gắn nhãn Cố định giữ nguyên nội dung ở mọi buổi workshop; khối gắn nhãn Biến thiên là phần bạn cần viết lại cho từng buổi.
Nền trang trí
Gradient mờ + lưới kẻ blueprint + 1 SVG mạng lưới điểm góc phải trên. Cố định, phía sau mọi nội dung.
Nav
Logo + menu (nếu đồng bộ site chính) + nút đăng ký màu gold, sticky trên cùng.
Hero
Eyebrow + H1 (1 cụm chữ tô gradient cyan→violet) + subhead + 2 CTA + 3 chip ngày/giờ/hình thức + card bên phải liệt kê nội dung buổi + banner 'tiếp nối' (nếu có).
Nỗi đau
3 thẻ pain-point + 1 dòng kết nhấn màu cyan.
Câu chuyện
1 quote box — trích lời diễn giả.
Bạn học được gì
3 thẻ 'chuyển hoá' sau buổi.
Chương trình
Timeline dọc theo giờ, mỗi dòng có tiêu đề + mô tả ngắn.
Nội dung chi tiết
5–8 module — mỗi module 1 trong 6 kiểu khối.
Diễn giả
Ảnh/avatar chữ cái + tên + vai trò + bio + tag.
Sản phẩm đề xuất
Giới thiệu gói dịch vụ chủ lực — nội dung cố định, không đổi theo từng workshop.
CTA cuối
Câu hỏi tu từ + nút đăng ký.
FAQ
Accordion 4–6 câu hỏi thường gặp.
Footer + sticky CTA mobile
Logo, liên kết, hashtag buổi học + thanh CTA dính đáy màn hình trên di động.
6 kiểu khối nội dung
Phần "Nội dung chi tiết" của mỗi workshop gồm 5–8 module, mỗi module chọn 1 trong 6 kiểu khối dưới đây để trình bày.
So sánh (compare)
2 cột đối lập — sai/đúng, trước/sau, người/AI. Mỗi cột là đoạn văn hoặc danh sách gạch đầu dòng.
⚖️ So sánh (compare)
2 cột đối lập — sai/đúng, trước/sau, người/AI. Mỗi cột là đoạn văn hoặc danh sách gạch đầu dòng.
🧱 Phân lớp (layers)
Lưới 3–4 ô — mô hình cấp bậc hoặc kiến trúc theo tầng.
🎯 Điểm chạm (points)
Lưới 3–5 ô đánh số — quy trình hoặc checklist ngắn.
🔄 Luồng (flow)
3 bước theo thời gian, mỗi bước có Prompt → AI Action.
📊 Case study (cases)
2 ô — mỗi ô 1 con số lớn + bài toán + giải pháp.
🗺️ Lộ trình (roadmap)
3 mốc theo tháng/bước, mỗi mốc vài gạch đầu dòng.
Tạo workshop mới
Có 3 cách dùng: (1) bấm nút bên dưới để copy prompt đúng nền tảng AI bạn đang dùng rồi dán vào cuộc trò chuyện mới; (2) tải file skill.md để cấu hình sẵn (Custom GPT, Gem, hoặc Project của Claude) và dùng lại nhiều lần không cần dán prompt mỗi lượt; hoặc (3) tải file mẫu gốc về và tự sửa tay.
Tải file HTML mẫu gốc (WORKSH_1.HTM) về máy và tự sửa tay nếu bạn quen chỉnh code.
Muốn xem ví dụ thật?
Xem trang workshop đang chạy live, dựng đúng bằng hệ thống thiết kế này.
