| name | mkt-landing-presentation-style |
| description | Tạo single-page landing website (HTML đơn file dùng Tailwind CDN + Lucide icons + Chart.js) trình bày nội dung video chia sẻ kiến thức AI/tech theo design language của Claude AI. Body dark navy theme + accent màu thương hiệu (Claude orange, DeepSeek blue, OpenAI green, etc.); infographic placeholder dùng style cream hand-drawn editorial của Claude AI. Scroll-down dọc, vertical connector lines giữa section có animation flow + traveling dot, big hero typography với gradient highlight cho keyword thương hiệu, 3-column stats cards, Chart.js benchmarks, image placeholder dùng pattern <img> + onerror fallback (HTML auto-detect khi user drop ảnh `1.png`/`2.png`... vào folder). Output là 1 folder `output/<slug>/` chứa `<slug>.html` + `prompts.md` (chứa toàn bộ prompt Claude-AI-editorial-style để user copy-paste sang AI33 / Nano Banana Pro / Midjourney gen ảnh thủ công). USE WHEN user says 'tạo landing page kiến thức', 'website 1 trang scroll', 'tạo trang trình bày video AI/tech', 'Claude AI style landing', 'transcript thành landing page', 'one-page knowledge website', 'tạo website chia sẻ kiến thức scroll dọc', 'knowledge sharing landing page', 'website giới thiệu video chia sẻ', 'landing presentation style'. |
mkt-landing-presentation-style
Tạo landing page 1 trang (scroll-down) trình bày 1 chủ đề kiến thức AI/tech, thiết kế theo design language Claude AI: dark navy body với accent màu thương hiệu, vertical connector lines, big hero typography, stats cards, Chart.js, image placeholder kèm prompt Claude-AI-editorial-style ẩn (chỉ hiện nút Copy).
Khi nào dùng
User muốn turn 1 nội dung — video transcript, blog post, hoặc đơn giản là 1 topic + intent — thành website 1 trang scroll để chia sẻ kiến thức trên social/portfolio. Đây không phải slide deck (không dùng marp / slidev), không phải multi-page site, không phải lead-gen quiz (đã có landing-page-content-creator cho việc đó).
Ví dụ phù hợp:
- "Tạo landing page chia sẻ video về DeepSeek V4 + Claude Code"
- "Làm trang web 1 trang scroll giới thiệu agent N8n"
- "Convert transcript này thành knowledge landing"
Inputs cần có từ user
Trước khi build, hỏi (hoặc parse từ message của user) những thứ sau. Nếu user không đưa, infer reasonable default rồi confirm.
| Input | Bắt buộc | Default |
|---|
| Topic / chủ đề | ✅ | — |
| Brand được nhắc đến (Claude / DeepSeek / OpenAI / ...) | ✅ | infer từ topic |
| Tài liệu nguồn (transcript / blog / key points) | optional | — |
| Target audience | optional | "Việt Nam, AI/tech learner" |
| Output folder | optional | output/<slug>/ (folder, không phải file đơn) |
| Số section (ngoài hero) | optional | 5–7 |
Output structure
Skill này luôn output 1 folder (không phải 1 file đơn lẻ). Cấu trúc:
output/<slug>/
├── <slug>.html ← landing page chính, tên file = slug của topic
├── prompts.md ← danh sách prompt cho từng ảnh, copy-paste để gen thủ công
├── 1.png ← user tự gen rồi đặt vào (skill KHÔNG tự gen)
├── 2.png
└── ...
- Folder name: slug của topic (vd.
deepseek-v4-claude-code, n8n-ai-agent-vs-zapier).
- HTML filename: trùng folder name +
.html.
- prompts.md: file Markdown liệt kê toàn bộ prompt theo thứ tự
1.png, 2.png, ... User copy từng prompt → paste vào AI33 / Nano Banana Pro / Midjourney → save về cùng folder.
- Image files: HTML tự nhận khi user thêm vào folder (xem
<img> + onerror fallback trong assets/template.html). Chưa có ảnh → hiện placeholder dashed border. Có ảnh → render full đẹp ngay không cần edit HTML.
- Skill KHÔNG tự gọi AI gen ảnh — chỉ output prompt. Nếu user muốn auto-gen, chạy
mkt-broll-image riêng từng prompt (xem mục "Tích hợp mkt-broll-image").
Workflow
Bước 1 — Hiểu intent & outline
Đọc tài liệu (nếu có) hoặc bám topic. Identify brand chính (1–2 brand) → tra references/design-tokens.md để pick accent color. Outline 5–7 section ngoài hero:
| # | Section archetype | Khi nào dùng |
|---|
| 01 | WHAT IS X | giới thiệu chủ thể chính (model / tool / framework) — pattern: stats cards 3-column |
| 02 | THE VALUE / SAVINGS | lý do quan trọng (cost, time, quality) — pattern: image-placeholder + 3 mini-stats |
| 03 | BENCHMARKS / DATA | so sánh số liệu — pattern: Chart.js bar chart |
| 04 | HOW IT WORKS | mechanism, architecture — pattern: image-placeholder (visual thinking diagram) |
| 05 | STEP BY STEP | hướng dẫn dùng — pattern: 4 step cards với code snippet |
| 06 | WHEN TO USE WHICH | comparison decision — pattern: 2-column compare |
| 07 | GET STARTED | CTA — pattern: code block + 3 link cards |
Linh hoạt — bỏ section không phù hợp, đổi thứ tự nếu logic kể chuyện cần. Mỗi landing page nên có ít nhất 1 image placeholder và ít nhất 1 stats hoặc chart section.
Bước 2 — Viết Vietnamese copy
Quy tắc copy:
- Headlines section: mix Anh-Việt OK, keyword brand giữ English (DeepSeek V4, Claude Code), từ chuyên ngành OK English. Sub-headline có thể tiếng Anh ngắn gọn (như "Same workflow. 3000× less money.").
- Body paragraph: tiếng Việt có dấu đầy đủ, brand/tech keyword giữ tiếng Anh. Tone: educational, professional, friendly. LLM xưng "tôi", gọi user là "anh" (theo CLAUDE.md ở
hoang_brain).
- Section badge marker:
• 0N · TITLE_IN_ENGLISH (như • 02 · THE SAVINGS).
- Annotation labels: tiếng Việt ngắn, có dấu.
Bước 3 — Apply gradient highlight cho keyword
Trong heading lớn (h1, h2 hero và section), wrap keyword brand bằng class gradient tương ứng:
<span class="grad-claude">Claude Code</span>
<span class="grad-deepseek">DeepSeek V4</span>
<span class="grad-green">code</span>
<span class="grad-amber">3000×</span>
<span class="grad-purple">AI</span>
Class gradient đã định nghĩa sẵn trong assets/template.html. Nếu brand chưa có sẵn, thêm vào <style> block theo pattern.
Bước 4 — Generate image prompt
Mỗi image placeholder cần 1 prompt theo Claude AI editorial signature style. Đọc references/infographic-prompt-template.md để có rule chi tiết. Quy tắc cứng:
- Background: warm cream
#F0EEE6 — KHÔNG vintage, KHÔNG parchment, KHÔNG aged texture.
- Style: hand-drawn editorial line art với subtle warm color fills (như spot illustration trên claude.ai marketing pages).
- Visual thinking metaphor: mỗi ảnh phải có ẩn dụ trực quan dễ hiểu (heo đất vỡ vs két sắt nhỏ; ống nước nối terminal qua proxy; gear-and-pipe cho mechanism; cầu thang cho progression...).
- Text trong ảnh: TẤT CẢ tiếng Việt có dấu đầy đủ. CHỈ giữ tiếng Anh cho:
- Brand names (CLAUDE OPUS, DEEPSEEK V4, OPENAI, ANTHROPIC, MIT…)
- Technical keywords (TERMINAL, PROXY, API, MoE, SDK, CLI…)
- Inline code (
$ claude, :8082, npm…)
- Currency / math symbols ($, %, ×, ₫…)
- Palette: cream bg + dark slate text + Claude orange
#DA7756 + brand-color tương ứng + accent (green #3FCF8E cho saving / amber #F4B860 cho highlight / etc.).
- Aspect ratio: 16:10 (default) hoặc 16:9 cho diagram dài.
Bước 5 — Đặt tên file ảnh theo số thứ tự
Convention: ảnh đánh số tăng dần — 1.png, 2.png, 3.png, ... — KHÔNG đặt tên theo nội dung (không phải phep-tinh-infographic.png hay dual-terminal-diagram.png). Lý do: dễ tracking, dễ replace, dễ rename về sau.
Trong HTML placeholder tag: ▮ IMAGE PLACEHOLDER #N — N.png (N là số thứ tự xuất hiện trong page, đếm từ 1).
Bước 6 — Assemble HTML
Bắt đầu từ assets/template.html (skeleton có đủ Tailwind config + CSS tokens + script). Inject section bằng snippet trong references/section-patterns.md. Với mỗi snippet, copy-paste rồi điền nội dung — đừng tự viết lại CSS, dùng class có sẵn (.card, .pill, .badge, .connector, .ph, .code, .step-num, .chip-good, etc.).
Section connector: chèn <div class="connector"></div> giữa mỗi 2 section. Đường gradient dọc nối có animated color flow (gradient chạy + traveling pulse dot di chuyển xuống) — hiệu ứng mặc định đã có trong template.html qua CSS keyframes @keyframes flow + @keyframes travel. Tự động tắt khi prefers-reduced-motion: reduce.
6a — Pro polish bằng ui-ux-pro-max (recommended)
Trước khi viết HTML, gọi ui-ux-pro-max skill để get extra design intelligence — animation patterns, hover micro-interactions, accessibility checks. Đặc biệt hữu ích khi:
- User yêu cầu "giao diện chuyên nghiệp", "có nhiều hiệu ứng", "polish hơn".
- Topic phức tạp cần multi-section logic flow.
- Muốn brand color mới chưa có trong design-tokens.
python3 /Users/tonyhoang/Documents/GitHub/hoang_brain/.claude/skills/ui-ux-pro-max/scripts/search.py \
"<topic> <brand> AI dev tool dark futuristic" \
--design-system -p "<Project Name>"
Lấy phần KEY EFFECTS + PATTERN + PRE-DELIVERY CHECKLIST từ output → áp dụng:
- Hover micro-interactions (scale, color-shift, shadow lift).
- Scroll-triggered animations (fade-up, slide-in) — dùng IntersectionObserver hoặc CSS-only (sticky + clip).
- Section transition cues (parallax orbs, gradient bleed giữa sections).
- Bổ sung CSS keyframes mới ngoài
flow/travel đã có.
Tóm tắt brief từ ui-ux-pro-max cho user trước khi build, để confirm direction. KHÔNG override identity Claude AI dark theme — chỉ thêm polish lớp trên.
Bước 7 — Image slot trong HTML + prompts.md riêng
Slot ảnh trong HTML dùng pattern <img> + onerror fallback. Khi file N.png chưa có trong folder → hiện placeholder dashed border. Khi user thêm ảnh vào → tự động render full.
<div class="ph aspect-[16/9] max-w-5xl mx-auto" id="img-slot-{N}">
<img src="{N}.png" alt="{ALT_TEXT_VI}"
class="w-full h-full object-cover rounded-[20px]"
onload="this.parentElement.classList.add('img-loaded')"
onerror="this.remove()" />
<span class="ph-tag">▮ {N}.png — chưa có ảnh</span>
<span class="ph-aspect">16 : 9</span>
<div class="ph-center">
<div class="icon-box"><i data-lucide="image" class="w-7 h-7 text-claude"></i></div>
<div class="font-serif italic text-2xl text-white/80 mb-2">{TIÊU ĐỀ TIẾNG VIỆT}</div>
<div class="font-mono text-xs text-white/40 max-w-md">
Xem prompt #{N} trong prompts.md
CSS .img-loaded ẩn các element placeholder khi <img> load thành công (đã có trong template.html).
Prompt KHÔNG nhúng vào HTML nữa — viết vào file riêng prompts.md cùng folder. Format:
# Image prompts — {{TITLE}}
Tổng cộng N ảnh. Đặt tên `1.png`, `2.png`, ..., `N.png` cùng folder. HTML tự load.
## 1.png — {{TIÊU_ĐỀ_NGẮN}}
[Aspect: 16:9 · Provider gợi ý: AI33 / Nano Banana Pro · Resolution: 2K]
{{FULL_PROMPT_CLAUDE_AI_EDITORIAL_STYLE}}
---
## 2.png — ...
Template chi tiết: assets/prompts-template.md.
Bước 8 — Save folder & confirm
Tạo folder output/<slug>/ rồi save 2 file:
<slug>.html — landing page chính.prompts.md — danh sách prompt cho từng ảnh, format theo assets/prompts-template.md.
Mở browser preview (open output/<slug>/<slug>.html). Báo cho user:
- Path tới folder.
- Số image placeholder cần gen (N).
- Hướng dẫn: "Anh copy từng prompt trong
prompts.md rồi paste vào AI33/Nano Banana Pro, save ảnh về cùng folder, đặt tên 1.png, 2.png, ... HTML sẽ tự nhận khi anh refresh trang."
Bước 9 — Optional: gọi mkt-broll-image gen ảnh
Nếu user muốn tự động hoá: hỏi "Anh muốn tôi gen luôn N ảnh placeholder bằng mkt-broll-image (AI33 / Nano Banana Pro) không?"
Nếu yes, với mỗi prompt trong prompts.md:
python3 .claude/skills/image-post-creator/scripts/generate.py \
'<PROMPT_NGẮN_GỌN_<2K_CHARS>' \
-o output/<slug>/N.png \
-ar 16:9 \
-p ai33 \
--size 2K \
-v
⚠️ Cảnh báo prompt length: AI33 dễ trả temporary_model_error khi prompt dài >2000 chars. Khi auto-gen, rút ngắn prompt xuống ~1500-2000 chars: giữ layout description + visual metaphor + brand colors, bỏ bớt text annotation thừa và mô tả style lặp. Bản đầy đủ vẫn lưu trong prompts.md cho user dùng tay.
⚠️ Aspect ratio: AI33 KHÔNG hỗ trợ 16:10 — phải dùng 16:9 (gần nhất). Ảnh ra 1344×768 (2K). Trong HTML đã set placeholder aspect-[16/9] mặc định.
Files trong skill này
mkt-knowledge-landing-claude-style/
├── SKILL.md (file này)
├── assets/
│ ├── template.html (skeleton để fork — copy & fill)
│ ├── prompts-template.md (template file prompts.md output)
│ └── examples/
│ └── deepseek-v4-claude-code.html (case hoàn chỉnh tham khảo)
└── references/
├── design-tokens.md (palette + typography + brand color lookup)
├── section-patterns.md (HTML snippet cho mỗi loại section)
└── infographic-prompt-template.md (rule viết prompt Claude AI editorial)
Quick reference — Section archetypes
Khi outline section, chọn pattern phù hợp từ bảng dưới. Snippet HTML chi tiết xem references/section-patterns.md.
| Pattern | Dùng cho | Visual hook |
|---|
| hero | Mở đầu | Pills row + display heading + dual CTA + meta |
| stats-3col | What is X — đặc tính số | 3 cards với số to gradient |
| image-placeholder | Concept cần ẩn dụ | Cream infographic + Copy prompt button |
| chart | Benchmark / so sánh số | Chart.js bar chart |
| comparison-2col | When to use which | 2 cards Yes/Yes với chip |
| step-cards | How to use | 4-col cards với serif step number + code |
| code-block | CTA cài đặt | macOS-style terminal frame + copy all |
| link-cards | Outbound | 3-col card với icon + label |
Quick reference — Brand color (đầy đủ trong references/design-tokens.md)
| Brand | Primary | Tailwind alias |
|---|
| Claude / Anthropic | #DA7756 | claude |
| DeepSeek | #4D6BFE | deepseek |
| OpenAI / ChatGPT | #10A37F | openai |
| Google / Gemini | #4285F4 | google |
| Mistral | #FF6B35 | mistral |
| Perplexity | #20808D | perplexity |
| xAI / Grok | #1DA1F2 | xai |
| Meta / Llama | #0467DF | meta |
| Microsoft / Copilot | #0078D4 | msft |
Anti-patterns
❌ Vintage parchment / Da Vinci style trong infographic — đã reject.
❌ Image filename theo nội dung (savings.png, diagram.png) — phải đánh số 1.png 2.png.
❌ Hiện prompt text dạng block visible — phải nằm trong prompts.md (file riêng), KHÔNG nhúng vào HTML.
❌ Output 1 file HTML đơn — phải là folder output/<slug>/ chứa HTML + prompts.md + ảnh.
❌ Emoji icon — luôn dùng Lucide SVG.
❌ Light mode — landing này luôn dark navy (Claude AI dark theme).
❌ Slide-deck layout — đây là scroll-down web, không phải slide.
❌ Tự code CSS từ đầu — luôn fork assets/template.html.
❌ Tiếng Anh trong body Vietnamese — chỉ giữ Anh cho brand/tech keyword.
❌ Connector tĩnh — phải có animation (flow gradient + traveling dot).
❌ Auto-gen ảnh không hỏi user — user là người quyết định gen tay hay auto.
Không làm
- Không tạo multi-page site — skill này chỉ cho 1 folder + 1 file HTML.
- Không generate ảnh tự động trừ khi user đồng ý.
- Không quên
<div class="connector"></div> giữa các section — signature design.
- Không quên
prefers-reduced-motion + cursor-pointer + Lucide initialization.
- Không gọi AI33 với prompt > 2000 chars — sẽ trả
temporary_model_error.
