Bài viết kiểu tạp chí (article-magazine)
Mẫu quy tắc dàn trang giúp Claude tạo bài viết dài dạng HTML sang trọng theo phong cách Substack/Medium.
Nội dung · Viết láchNhập môn★ 8,935⑂ 869Điểm AI 5/10Cập nhật lần cuối: 15 thg 9, 2026
Làm được gì
- Cung cấp cho Claude bộ quy tắc typography để biến nội dung thành trang HTML kiểu tạp chí.
- Quy định khối hero (tiêu đề lớn, phụ đề, tác giả / thời gian đọc / ngày), thân bài một cột rộng ~700px căn giữa, tiêu đề H2/H3 dùng font serif, blockquote có viền accent, code block bo góc nền tối kèm nhãn ngôn ngữ, bullet tùy chỉnh, đường phân cách trang trí và thẻ kêu gọi chia sẻ ở cuối bài.
- Dùng các class Tailwind (
text-lg leading-relaxed text-neutral-700 dark:text-neutral-300) nên hỗ trợ cả dark mode.
Phù hợp với ai
- Người viết blog, newsletter cần xuất bản bài dài dưới dạng HTML đẹp mắt.
- Marketer hoặc dev solo muốn chuyển bản thảo Markdown thành trang web đăng bài.
- Nhóm nội dung muốn giữ phong cách trình bày thống nhất mà không phải nhắc lại yêu cầu thiết kế mỗi lần.
Ví dụ sử dụng
- "Chuyển bản thảo Markdown này thành một file HTML theo phong cách tạp chí" → trang có hero, thân bài và thẻ chia sẻ.
- Bài blog kỹ thuật nhiều đoạn code → toàn bộ code block được bo góc, nền tối, có nhãn ngôn ngữ.
- Trang lưu trữ newsletter → nhiều bài dùng chung khung 700px và đường phân cách trang trí để đồng bộ tông.
· · · Hướng dẫn cài đặt · · ·
Dùng thử ngay, không cần cài
Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.
Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình: https://raw.githubusercontent.com/nexu-io/html-anything/HEAD/next/src/lib/templates/skills/article-magazine/SKILL.md Mình muốn: (viết việc bạn cần ở đây)
Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.
↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.
Cài vào ứng dụng Claude (không cần terminal)
- Tải tệp ZIP bằng nút bên dưới.
- Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
- Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
Cài vào Claude Code
Để Claude làm — dán câu dưới đây vào Claude Code
Hãy cài skill mình tìm thấy trên Claude Skill Mart. Copy thư mục next/src/lib/templates/skills/article-magazine từ repo GitHub nexu-io/html-anything vào ~/.claude/skills/article-magazine/ của mình. Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.
Cài bằng lệnh thủ công
git clone https://github.com/nexu-io/html-anything.git && mkdir -p ~/.claude/skills/article-magazine && cp -r html-anything/next/src/lib/templates/skills/article-magazine/* ~/.claude/skills/article-magazine/⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.
- Mở terminal.
- Tải repo:
git clone https://github.com/nexu-io/html-anything.git - Tạo thư mục skill:
mkdir -p ~/.claude/skills/article-magazine - Sao chép template:
cp -r html-anything/next/src/lib/templates/skills/article-magazine/* ~/.claude/skills/article-magazine/ - Khởi động lại Claude Code và kiểm tra
article-magazinecó trong danh sách skill. - Khi dùng, hãy nói rõ "dàn trang bài này theo kiểu tạp chí, xuất HTML" và cho biết dự án có Tailwind CSS hay cần chèn CDN.
Xem mã nguồn trên GitHub ↗Giấy phép: Apache-2.0