Tạo slide thuyết trình Marp chuyên nghiệp hơn với minorun-marp-skill

minorun-marp-skill làm gì

minorun-marp-skill là tập hợp các hướng dẫn có thể tái sử dụng và công cụ kiểm tra để tạo slide thuyết trình bằng Marp. Công cụ này giúp các tác nhân AI viết những slide không chỉ gọn gàng về mặt thị giác mà còn có mạch truyện rõ ràng, sơ đồ hữu ích và thiết kế cân đối.

Dự án tập hợp những cải tiến trong thuyết trình được tác giả Minoru Onda sử dụng nhiều lần, rồi đóng gói thành các skill mà những tác nhân AI như Claude Code có thể đọc. Nội dung này cũng có thể được sử dụng trực tiếp bởi những người tự viết Marp Markdown.

Cấu trúc kho lưu trữ

Kho lưu trữ phân tách hướng dẫn viết nội dung, thiết kế trực quan, giao diện, công cụ kiểm tra và ví dụ:

• skills/slide-story bao quát phần mở đầu thu hút, slide mở đầu mỗi mục, trình bày từng bước, cách viết tiêu đề, phần kết và ước tính thời lượng thuyết trình.
• skills/slide-figures giải thích cách giảm mật độ thông tin trong sơ đồ, vẽ hình SVG, thiết lập cỡ chữ tối thiểu và bố trí hình minh họa.
• skills/slide-design-dark bao quát việc đo khoảng trắng, cân bằng theo chiều dọc, nền tối, bảng, khối mã và các vấn đề đặc thù của Marp.
• theme/minorun-dark.css cung cấp giao diện Marp tối với các điểm nhấn màu cyan.
• tools/ chứa các tập lệnh đo đầu ra PDF và SVG đã xuất.
• examples/sample chứa một bộ slide mẫu, còn examples/broken cố ý chứa các vấn đề để bạn xác minh rằng những bước kiểm tra có thể phát hiện chúng.

Cài đặt và thiết lập

Sao chép các skill cho Claude Code

Khi sử dụng Claude Code, hãy sao chép ba thư mục skill vào thư mục skill cá nhân của bạn:

cp -r skills/* ~/.claude/skills/

Sau đó, Claude Code có thể sử dụng các hướng dẫn slide-story, slide-figures và slide-design-dark của kho lưu trữ khi hỗ trợ bạn tạo hoặc chỉnh sửa slide.

Sao chép giao diện và công cụ vào kho lưu trữ slide

Sao chép các thư mục theme/ và tools/ vào kho lưu trữ chứa bộ slide của bạn. Nhờ đó, giao diện và các tập lệnh kiểm tra được lưu cùng với Markdown và tài nguyên dùng cho bài thuyết trình.

Cài đặt các công cụ cần thiết

Các tập lệnh kiểm tra phụ thuộc vào Marp CLI, Google Chrome, poppler, mupdf-tools, Python 3 và Pillow. Cài đặt Marp CLI bằng lệnh:

npm i -g @marp-team/marp-cli

Trên macOS, cài đặt các tiện ích PDF bằng lệnh:

brew install poppler mupdf-tools

check-svg-box-fit.mjs sử dụng puppeteer-core đi kèm Marp CLI. Nếu không thể tự động tìm thấy các mô-đun hoặc tệp thực thi Chrome, hãy cung cấp vị trí của chúng thông qua MARP_NODE_MODULES và CHROME_PATH.

Chuẩn bị phông chữ

Giao diện này được thiết kế cho các phông chữ Gothic bo tròn. Cài đặt Zen Maru Gothic sẽ mang lại kiểu hiển thị được ưu tiên. Trên các hệ thống macOS không có phông chữ này, giao diện sẽ hiển thị bằng Hiragino Maru Gothic. Tính khả dụng của phông chữ có thể làm thay đổi diện mạo của bộ slide cuối cùng, vì vậy hãy cài đặt và kiểm tra phông chữ trước khi xuất slide.

Tạo và xuất bộ slide

Viết các slide trong một tệp Marp Markdown như deck.md. Xuất tệp này sang PDF bằng giao diện tối đi kèm và hỗ trợ tệp cục bộ:

marp --no-stdin deck.md --pdf --theme theme/minorun-dark.css --allow-local-files

Tùy chọn --theme áp dụng thiết kế tối với điểm nhấn màu cyan của kho lưu trữ. Tùy chọn --allow-local-files cho phép tải hình ảnh cục bộ và các tài nguyên khác được bộ slide tham chiếu trong quá trình xuất.

Kiểm tra các slide đã xuất

Sau khi xuất, hãy chạy các bước kiểm tra trên tệp PDF được tạo và mọi hình SVG. Những bước kiểm tra này nhằm phát hiện các vấn đề khó nhận thấy trong mã nguồn Markdown nhưng lại rõ ràng trong bài thuyết trình đã kết xuất.

Kiểm tra lề

python3 tools/check-dark-margins.py deck.pdf

Kiểm tra này đo khoảng trống ở cạnh dưới và cạnh phải của nội dung slide.

Kiểm tra khoảng cách giữa các thành phần

python3 tools/check-dark-gaps.py deck.pdf

Sử dụng bước kiểm tra này để tìm các sơ đồ hoặc hộp quá gần phần văn bản lân cận.

Kiểm tra văn bản bên trong hình

python3 tools/check-figure-text.py deck.pdf

Kiểm tra này tìm văn bản cỡ nhỏ bên trong hình và văn bản bị dồn sát các cạnh của hộp.

Kiểm tra độ vừa của hộp SVG

node tools/check-svg-box-fit.mjs images/*.svg

Kiểm tra này xác minh rằng văn bản bên trong các hộp SVG vừa với hộp. Công cụ đặc biệt hữu ích khi hình được tạo hoặc chỉnh sửa tách biệt với Markdown của slide.

Kiểm tra các slide được tái sử dụng

python3 tools/check-reuse-diff.py new.md old.md

Chạy phép so sánh này khi tái sử dụng slide. Công cụ kiểm tra mối quan hệ giữa tiêu đề và hình trong các tệp Markdown mới và cũ, giúp bạn nhận ra khi nội dung trực quan được tái sử dụng không còn phù hợp với thông điệp xung quanh.

Thêm hình minh họa

Bài thuyết trình mẫu thường sử dụng các hình minh họa từ Irasutoya, nhưng những hình ảnh đó không được đưa vào kho lưu trữ. Hãy tải chúng xuống trước khi xuất bộ slide mẫu:

sh examples/sample/fetch-illustrations.sh

Tự kiểm tra các điều kiện sử dụng áp dụng trước khi dùng bất kỳ hình minh họa nào đã tải xuống. Các hình minh họa xuất hiện trong phần tổng quan bộ slide mẫu là tác phẩm có bản quyền của Irasutoya và không thuộc phạm vi Giấy phép Apache 2.0 của kho lưu trữ này.

Quy trình thực tế có AI hỗ trợ

1. Bắt đầu từ câu chuyện. Yêu cầu tác nhân AI sử dụng hướng dẫn slide-story để xác định phần mở đầu thu hút, chuyển tiếp giữa các phần, cách trình bày ý tưởng theo từng bước, phong cách tiêu đề, phần kết và thời lượng thuyết trình dự kiến.
2. Lên kế hoạch cho các hình minh họa. Sử dụng slide-figures để rút gọn mỗi sơ đồ chỉ còn những thông tin cần thiết cho khán giả, chọn cỡ chữ dễ đọc và quyết định nên dùng SVG hay hình minh họa.
3. Áp dụng hệ thống hình ảnh. Sử dụng slide-design-dark và minorun-dark.css để duy trì khoảng trắng, sự cân bằng theo chiều dọc, độ tương phản trên nền tối và kiểu dáng nhất quán cho bảng cũng như mã nguồn.
4. Xuất bản sớm. Tạo PDF bằng Marp thay vì chỉ dựa vào mã nguồn Markdown hoặc bản xem trước trong trình soạn thảo.
5. Kiểm tra đầu ra. Chạy các bước kiểm tra PDF và SVG, sau đó chỉnh sửa slide dựa trên những vấn đề hiển thị thực tế như nhãn hình chật chội, khoảng cách chưa hợp lý hoặc sử dụng quá sát mép.
6. Đánh giá toàn bộ bài thuyết trình. Xác nhận rằng bộ slide có tiến trình mạch lạc và mỗi hình minh họa hỗ trợ tiêu đề của slide, thay vì chỉ mang tính trang trí.

Mẹo nâng cao

Sử dụng Ví dụ Lỗi làm Bài kiểm tra Hồi quy

Thư mục examples/broken cố ý chứa một bộ slide có lỗi. Hãy dùng thư mục này để xác nhận rằng các tập lệnh kiểm tra đã được cài đặt đúng và phản hồi với những dạng vấn đề bố cục mà chúng được tạo ra để phát hiện.

Xác thực PDF, không chỉ Markdown nguồn

Việc kết xuất bằng Marp có thể làm lộ những vấn đề không thể nhận thấy trong mã nguồn, bao gồm các thay đổi do phông chữ khả dụng, kích thước hộp, tài sản cục bộ và bố cục trang cuối cùng. Hãy coi PDF đã xuất là sản phẩm cần được kiểm tra.

Giữ cho Chữ trong Hình Dễ đọc

Khi một sơ đồ chứa quá nhiều thông tin, trước tiên hãy loại bỏ hoặc trì hoãn chi tiết thay vì thu nhỏ chữ. Hướng dẫn về hình minh họa và check-figure-text.py phối hợp với nhau để giữ cho sơ đồ dễ đọc trong khi thuyết trình trực tiếp.

Giữ Tiêu đề và Hình minh họa Đồng bộ

Nếu sử dụng lại một slide trước đó, hãy cập nhật cả tiêu đề và phần giải thích trực quan. Bước kiểm tra khác biệt khi sử dụng lại giúp xác định những trường hợp hình minh họa cũ vẫn còn trong khi thông điệp của slide đã thay đổi.

Ghi nhớ Ranh giới Giấy phép

Kho mã được phát hành theo Giấy phép Apache 2.0, với bản quyền thuộc về Minoru Onda. Phông chữ và hình minh họa bên ngoài có thể chịu các điều khoản riêng, vì vậy hãy xác minh giấy phép của chúng một cách độc lập trước khi phân phối bộ slide.

Kết luận

minorun-marp-skill chuyển các hướng dẫn thuyết trình dành cho Marp thành những kỹ năng có thể tái sử dụng cho tác nhân AI, một giao diện tối, các ví dụ và những bước kiểm tra đầu ra cụ thể. Hãy sao chép các kỹ năng vào Claude Code, đặt giao diện cùng các công cụ bên cạnh bộ slide, xuất bằng Marp và kiểm tra các tệp PDF, SVG đã kết xuất. Quy trình này giúp phần kể chuyện, sơ đồ và thiết kế hình ảnh phối hợp với nhau, thay vì xem việc hoàn thiện slide là một công đoạn làm đẹp vào phút cuối.