Hướng dẫn thiết kế slide chuẩn bộ nhận diện thương hiệu bằng ngôn ngữ tự nhiên với Claude

Bạn đã thử nhờ AI làm slide chưa? Bạn có gặp phải những vấn đề như font tiếng Việt lỗi dấu, ảnh sinh ra không dùng được, chữ và khối đè chồng lên nhau, màu sắc thì chẳng liên quan gì đến thương hiệu công ty? Bạn sửa đi sửa lại vài vòng vẫn không ra bộ slide dùng được. Bạn thấy tốn thời gian hơn cả tự làm và bỏ luôn ý định làm slide với AI.

Vấn đề không nằm ở AI. AI đủ mạnh để làm slide chuẩn thương hiệu, đẹp và dùng lại được. Quan trọng là bạn cần giao tiếp với nó đúng cách cho đúng tác vụ. Sau nhiều lần thử nghiệm, ZTO Labs đúc rút được một cách làm hiệu quả: để Claude tạo slide dưới định dạng HTML. Bạn không cần biết lập trình: Claude tạo phần code, việc của bạn là đưa nội dung và yêu cầu bằng ngôn ngữ tự nhiên. Mỗi bước trong bài đều có sẵn một prompt để bạn copy dán thẳng vào.

Vì sao nên làm slide dưới định dạng HTML

Có ba lý do chính vì sao nên làm slide dưới định dạng HTML thay vì các định dạng phổ biến trong PowerPoint hoặc Google Slides.

• AI làm việc với HTML tốt hơn. File .pptx hay .pdf là định dạng đóng gói: chữ, hình, bố cục bị nén vào một cấu trúc phức tạp mà AI phải “bóc” ra để hiểu, nên dễ có tình trạng đọc lệch và đoán mò. Đây chính là nguồn gốc của những bộ slide lỗi font, vỡ layout. HTML thì ngược lại: nó là code, là văn bản thuần, thứ AI đọc và viết chính xác nhất. Yêu cầu AI làm slide HTML là đang cho AI làm việc trên đúng thế mạnh của nó, nên kết quả ra đúng và ổn định hơn hẳn.
• Styling (CSS) giữ mọi slide nhất quán tuyệt đối. Slide HTML có một phần định kiểu chung gọi là CSS, nơi bộ nhận diện thương hiệu được ghi dưới dạng những con số chính xác: tiêu đề dùng font gì, cỡ chữ bao nhiêu, màu mã nào, khoảng cách ra sao. Mọi slide cùng đọc từ một địa chỉ là CSS, nên không xảy ra tình trạng lệch giữa các slide. Còn với PowerPoint hay Google Slides, dù đã có template, cứ vài lần chỉnh tay là format bắt đầu trôi: slide này cỡ chữ to hơn slide kia một chút, màu lệch đi một tông, tiêu đề slide này bị lệch so với slide kia.
• Slide đẹp và sống động như một trang web chuyên nghiệp. HTML là công nghệ đứng sau những website đẹp nhất bạn từng xem: chuyển màu mượt, hiệu ứng động, bố cục tự do. Làm slide bằng HTML nghĩa là slide của bạn cũng làm được những thứ mà hiện tại PowerPoint hay Google Slides chưa đáp ứng được.

Để kiểm chứng, ZTO Labs đã chạy thử cùng một prompt chi tiết với hai định dạng đầu ra. Bản .pptx lấy đúng màu và logo thương hiệu, nhưng không làm đúng được những quy tắc thuộc bản chất định dạng. Khi mở trong PowerPoint, chữ ở vài slide đè chồng lên nhau và tràn ra ngoài; font khai báo đúng nhưng không đi theo file, mở trên máy chưa cài font là rơi về font mặc định. Bản HTML giữ đúng quy tắc trên toàn bộ slide và hiển thị như nhau trên mọi trình duyệt — lỗi duy nhất gặp phải liên quan đến logo sửa được bằng một câu lệnh (sẽ hướng dẫn ở phần sau trong bài viết).

Dù vậy, HTML không phải lúc nào cũng là lựa chọn đúng. Nếu chỉ cần một bộ slide nhanh, làm một lần rồi thôi, PowerPoint hay Google Slides vẫn ổn. HTML phát huy giá trị khi bạn dùng lại nhiều lần, sửa liên tục, hoặc cần giữ bộ nhận diện thương hiệu đồng nhất qua nhiều bộ slide.

Bài viết này sử dụng Claude để tạo slide HTML vì khả năng viết HTML tốt và ổn định của mô hình này.

Quy trình ba bước

Toàn bộ công việc gói trong ba động tác.

Bước 1: Dạy AI bộ quy tắc thương hiệu của công ty bạn

Trước khi bảo Claude tạo slide, bạn dạy Claude nhận diện thương hiệu công ty: đưa file template gốc (.pptx) và nhờ Claude rút ra một bộ quy tắc thiết kế — font gì, màu gì, bố cục ra sao. Tại thời điểm viết bài, bước này chạy tốt ngay trên bản Claude miễn phí.

Câu lệnh dưới đây viết theo khung 5# được sử dụng trong các chương trình đào tạo của ZTO Labs với doanh nghiệp: Context / Goal / Task / Output Format / Notes (Bối cảnh / Mục tiêu / Nhiệm vụ / Định dạng / Lưu ý).

📎 Đính kèm: file template PowerPoint của công ty.

# CONTEXT
I'm a non-technical professional. I've attached my company's official slide template as a PowerPoint file ({your_template_file}.pptx). I want to reuse its exact visual brand when I build new slide decks later, so I need its design captured as clear, written rules I can save and reuse.

# GOAL
Read the actual contents of this template file and produce a single, reusable design-rules document that captures the template's real brand: its fonts, colors, backgrounds, layouts, and recurring visual elements — accurately enough that future slides built from these rules will look like they came from this template.

# TASK
1. Read the real font names and the actual color values from inside the file (not guesses from appearance).
2. Capture: the fonts and their roles (headings vs body), the full color palette with hex codes, background styles, the layout patterns for each slide type, and any repeating motifs (number badges, dividers, logo placement).
3. Organize it as a clean, reusable reference I can paste into a future chat to build new decks.

# OUTPUT FORMAT
A single markdown file I can download and save (e.g. brand_design_rules.md). Use clear headings and tables for fonts and colors. Keep the language plain enough for a non-designer, but precise on the actual values.

# NOTES
Read the true values from the file — do not approximate fonts or colors from a visual impression. If something is a gradient or image rather than a flat color, say so. End with a short "new slide checklist" I can glance at when building.

Hãy nhớ lưu bộ quy tắc thành một file để dùng lại về sau — đây chính là thứ làm cả quy trình trở nên đáng giá. Nếu Claude chưa tự xuất file, gõ thêm:

Wrap all of this into a markdown file I can download and reuse.

File bộ quy tắc thương hiệu này (ví dụ brand_design_rules.md) chính là tài sản thương hiệu của bạn, có thể dùng cho mọi bộ slide về sau. Chỉ làm lại bước này khi bản thân template thay đổi.

Bước 2: Làm slide HTML

Đính kèm tất cả những tài liệu sau cho Claude:

• File quy tắc thương hiệu vừa lưu ở Bước 1.
• Nội dung slide: Bài viết này không tập trung vào việc tạo nội dung slide. Cách gọn nhất để đưa nội dung slide cho Claude là tạo một file văn bản đơn giản (.md hoặc .txt), chia rõ nội dung từng slide, ví dụ: một dòng tiêu đề cho mỗi slide, bên dưới là các ý chính. Không cần định dạng cầu kỳ, chỉ cần Claude đọc ra “đây là slide 1, đây là slide 2.” Nếu chưa có sẵn, bạn thậm chí có thể dán thẳng nội dung vào khung chat thay cho file.
• Các hình ảnh cố định muốn đưa vào slide: thường gặp nhất là logo công ty, nhưng cũng có thể là ảnh sản phẩm, ảnh minh hoạ, hay icon. Bài này lấy logo làm ví dụ

📎 Đính kèm: file quy tắc, file nội dung, file logo.

# CONTEXT
I'm a non-technical professional. I've attached three things: my brand design rules ({your_rules_file}.md), my slide content ({your_content_file}.md), and my real company logo ({your_logo_file}.png). I want a single, fully self-contained HTML slide deck — one HTML file that carries everything inside it, including the logo, so I can open and share it on its own with no other files.

# GOAL
Produce one HTML file that follows my brand rules exactly, displays my real logo correctly, renders in my real brand fonts, and works completely on its own when opened in a browser.

# TASK
1. Build the deck as a single HTML file from {your_content_file}.md, one slide per section.
2. Apply my design rules precisely — fonts, colors, backgrounds, number badges, and dividers — and pick the most fitting layout from the rules for each slide's content.
3. Use my attached logo ({your_logo_file}.png) exactly as-is. Do NOT draw, generate, recreate, or substitute any logo of your own. My logo is a PNG with a transparent background — embed it into the HTML and place it directly on the slide with NO box, fill, or colored background behind it. Put it bottom-left on light slides, sized small, per the rules.
4. Load my brand fonts properly (e.g. link Lexend from Google Fonts) so headings and body text render in Lexend, not a fallback like Arial.
5. Include simple built-in navigation (arrow keys and click) inside the same HTML file.
6. For slides with little content, center the content vertically and space it to fill the slide, so empty space looks intentional rather than like a gap.

# OUTPUT FORMAT
One self-contained .html file with everything inside it — styling, navigation, and the embedded logo. The file must reference no external image or script files. Loading fonts from Google Fonts is allowed.

# NOTES
Use my attached logo exactly — do not draw or substitute one, and put no background behind it (it is a transparent PNG). Make sure Lexend actually loads so text is not in Arial. Keep everything in one HTML file; do not create a separate script or assets folder for this version.

Vài chỗ trong prompt là yêu cầu cụ thể, bạn có thể tuỳ chỉnh theo nhu cầu: “Lexend” chỉ là font mẫu — Claude sẽ tự dùng đúng font trong bộ quy tắc của bạn. Prompt cũng đang đặt logo ở góc dưới bên trái theo bộ quy tắc; nếu muốn logo ở vị trí khác, hoặc muốn chèn một hình ảnh cụ thể vào slide nào, vị trí nào, bạn ghi thêm yêu cầu đó vào prompt.

Đừng kỳ vọng hoàn hảo ngay lần đầu. Gần như chắc chắn bạn sẽ gặp vài chỗ chưa ưng. Thường thì bộ slide đầu tiên mất khoảng vài lần sửa qua lại. Biết cách chỉ ra và sửa cũng quan trọng như việc dựng được bộ slide. Một vài lỗi thường gặp và cách sửa sẽ được chia sẻ ở Bước 3.

Bước 3: Chỉnh sửa và chia sẻ slide

3.1 — Chỉnh sửa slide

Cách một, trực tiếp nhờ Claude sửa. Dùng cho mọi thay đổi bố cục, thiết kế, hay thay đổi áp cho toàn bộ. Ví dụ yêu cầu Claude căn giữa và giãn nội dung cho slide đỡ trống.

This slide has too much empty space — the items are bunched together with a big gap. Center the content vertically and space it out to fill the slide, so the empty space looks intentional instead of like a gap.

Sau khi sửa xong, có thể nhờ Claude tạo lại file quy tắc để phản ánh đúng bộ slide đã hoàn thiện:

We've made a number of changes to the deck while building it. Please give me an updated version of my original design-rules file ({your_rules_file}.md) that reflects the deck as it stands now — same format and structure as the original, but updated with any fonts, colors, spacing, layout patterns, or component styles we changed or added. Output it as a markdown file I can save and reuse for future decks.

Bộ quy tắc ban đầu rút từ template. Sau khi dựng và sửa slide, bạn có bộ quy tắc phiên bản hai, rút từ bộ slide cuối đã hoàn thiện.

Cách hai, tự sửa bằng tay trên file HTML. Dùng cho những điều chỉnh nhỏ. Một lỗi đánh máy, đổi một từ, sửa một con số thì bạn không cần đến AI. Bạn có thể mở file html ra sửa thẳng, nhất là khi không tiện dùng Claude hoặc gõ tay nhanh hơn.

Các lỗi thường gặp và cách sửa

Không bộ slide nào hoàn hảo ngay lần đầu. Dưới đây là vài lỗi hay gặp trong thực hành trên thực tế, kèm theo prompt để sửa:

Logo có khung tối phía sau. Lỗi phổ biến nhất. AI thường đọc nhầm file logo đuổi PNG thành JPEG (vốn không giữ được nền trong suốt), nên “tự ý giúp” thêm nền tối xung quanh logo. Nếu tình trạng này xảy ra, sử dụng câu prompt sau để khắc phục:

The logo at the bottom-left still has a dark box behind it. Remove that — make the container around the logo fully transparent (no background-color, no fill, no padding box). The logo is a transparent PNG and should sit directly on the light slide with nothing behind it.

Chữ quá nhỏ. Slide do Claude dựng thường có cảm giác chữ bị nhỏ khi nhìn trên màn hình trình chiếu. Bạn có thể bảo Claude phóng to cỡ chữ trong slide nói chung bằng câu prompt sau:

The text across the whole deck feels too small. Increase the font sizes throughout — headings, body text, and labels — so everything is more readable when presenting on a screen. Keep the same Lexend font and my brand colors; just scale the sizes up consistently across every slide so the proportions still look balanced.

Tuy nhiên, nếu bạn biết cụ thể cỡ chữ và font chữ bạn muốn sử dụng, có thể sử dụng câu prompt sau:

Set specific font sizes across the whole deck so everything is readable on a presenting screen. Use roughly these: slide titles 44px, section headings 32px, body text 22px, and small labels/captions 16px. Keep and my brand font and colors. Apply these consistently on every slide and make sure nothing overflows or gets cut off — if a slide gets crowded at these sizes, give it more spacing rather than shrinking the text.

3.2 — Đóng gói và chia sẻ

Bản slide bạn vừa dựng ở Bước 2 đã chạy được: mở trên trình duyệt, bấm qua từng slide bằng phím mũi tên. Đây là một file HTML duy nhất, bạn có thể mở và chia sẻ ở đâu cũng được, rất hợp để làm nháp và sửa trực tiếp.

Nhưng nó có vài nhược điểm khi bạn cần mang đi trình bày và chia sẻ trong công việc:

• Không xuất được cả bộ dưới dạng PDF. Khi nhấn Ctrl/Cmd + P để lưu PDF, bản một-file chỉ lưu đúng slide đang mở thành một trang. Muốn lưu cả bộ thì phải làm thủ công từng slide, rất cực.
• Không trình chiếu kiểu slideshow thật. Không có chế độ toàn màn hình, bấm chuyển slide mượt như một bộ trình chiếu.

Giải pháp là tách bộ slide một-file thành một thư mục gồm vài phần đi cùng nhau: file HTML, một thư mục con assets chứa logo và các hình ảnh, và một file engine tên deck-stage.js.

Trong cùng cuộc trò chuyện tại bước 2 với Claude, sau khi bộ slide một-file đã ưng, chỉ cần đính kèm file deck-stage.js và yêu cầu Claude chuyển sang dùng nó.

📎 Đính kèm: file deck-stage.js.

The deck looks good now. I'm attaching a file called deck-stage.js — a slideshow engine. Convert my deck to use it: load this exact file with a script tag (don't write your own navigation), wrap all my slides in one <deck-stage width="1920" height="1080"> element, and size slides to that fixed canvas. Also move my logo out to an external file referenced as assets/{your_logo_file}.png instead of embedding it. Keep everything else exactly as it looks now.

Giờ bạn có thể lưu toàn bộ phần slide dưới dạng PDF: mở slide HTML trên trình duyệt, nhấn Ctrl + P (Windows) hoặc Cmd + P (Mac), ở mục “Máy in” chọn “Lưu thành PDF” (Save as PDF). Bộ 40 slide cho ra file PDF 40 trang, mỗi slide một trang.

Nếu bạn đăng ký các gói trả phí của Anthropic và kết nối được với Claude Cowork (Claude kết nối trực tiếp với file trên máy) thì có thể đi thẳng luồng engine ngay từ đầu, không cần làm bản một-file trên Claude Chat rồi mới chuyển. Chuẩn bị sẵn một thư mục chứa: thư mục con assets (logo + hình ảnh), file deck-stage.js, file quy tắc, và file nội dung. Rồi yêu cầu Claude dựng thẳng bộ slide vào thư mục đó. Vì deck-stage.js và assets đã nằm sẵn, bộ slide chạy được ngay sau khi tạo, không phải lắp ráp gì.

📎 Mở thư mục chứa sẵn: assets (logo + hình ảnh), deck-stage.js, file quy tắc, file nội dung.

# CONTEXT
This folder contains everything needed to build my slide deck: deck-stage.js (a slideshow engine), an assets folder with my logo and images, my brand design rules ({your_rules_file}.md), and my slide content ({your_content_file}.md).

# GOAL
Build a complete HTML slide deck directly inside this folder, correctly wired to the engine and assets that are already here, so it runs in a browser as-is the moment it is created — no assembling afterwards.

# TASK
1. Build the deck as one HTML file from {your_content_file}.md, one slide per section, and save it directly into this folder.
2. Apply my design rules precisely — fonts, colors, backgrounds, and layouts.
3. Use the deck-stage.js that is already in this folder: load this exact file with a script tag, do NOT write your own navigation. Wrap all slides in one  element and size slides to that fixed canvas.
4. Reference my logo from the assets folder (e.g. assets/{your_logo_file}.png) — do not embed, redraw, or substitute it. It is a transparent PNG; place it directly on the slide with no box or background behind it.
5. Load my brand fonts properly so text renders in my brand font, not a fallback like Arial.

# OUTPUT FORMAT
One .html file saved in this folder, referencing deck-stage.js and the assets folder by relative paths, so the deck works immediately when opened in a browser.

# NOTES
Everything the deck needs is already in this folder — use what is here instead of creating new versions. Do not modify deck-stage.js. If the content gives a slide very little material, center and space it so it looks intentional.

Để xem hay sửa slide, bạn vẫn mở file trong trình duyệt và bấm refresh sau mỗi lần Claude sửa.

Lưu ý: Claude sửa đè trực tiếp lên file, không có lịch sử bản cũ; nếu muốn giữ một bản trước khi đổi lớn, bảo Claude lưu một bản sao trước.

Lời kết

Cả quy trình thiết kế slide, từ lúc đưa Claude file template đến khi xuất ra bộ PDF hoàn chỉnh, chỉ mất khoảng 15 đến 30 phút. Kết quả là một bộ slide đúng nhận diện thương hiệu công ty, dùng lại được nhiều lần sau. Đó là kết quả thật, làm được ngay sau khi đọc bài này.

Nhưng bộ slide chỉ là phần dễ. Thứ đáng giá hơn là cách nghĩ đằng sau: lấy một việc bạn vẫn làm đi làm lại, rồi biến nó thành quy trình mà AI giúp được ở cả bốn khâu — cấu trúc, sản xuất, chỉnh sửa, tái sử dụng. Thứ thật sự tạo ra kết quả không phải một file định dạng HTML, mà là cách bạn ra lệnh cho Claude. Bộ slide là ví dụ; kỹ năng ra lệnh mới là bài học mang đi được, áp dụng cho mọi việc khác

Đó cũng là điều ZTO Labs xây dựng cùng các đội nhóm: ZTO Labs không chỉ hướng dẫn cách làm một bộ slide với AI, mà trang bị cách nghĩ và quy trình AI may đo theo công việc thật của cá nhân và doanh nghiệp.

Nếu bạn muốn tìm hiểu thêm về cách ứng dụng AI vào công việc hàng ngày, hãy khám phá các chương trình đào tạo của ZTO Labs tại https://www.ztolabs.com/programs.html