email-design

Tổng quan

Kỹ năng email-design dùng để làm gì

Kỹ năng email-design là một hướng dẫn thực tiễn để thiết kế email marketing và template có khả năng chuyển đổi cao. Nó kết hợp các mẫu bố cục đã được chứng minh hiệu quả, cách tiếp cận viết dòng tiêu đề và các quy tắc tối ưu deliverability với một quy trình HTML-to-image để tạo banner header chuẩn nhận diện thương hiệu.

Kỹ năng này tập trung vào:

• Bản tin marketing và chiến dịch khuyến mãi
• Chuỗi welcome và email onboarding
• Template giao dịch (hóa đơn, cảnh báo, email xác nhận)
• Bố cục thân thiện di động hiển thị ổn định trên Gmail, Outlook và các client phổ biến
• Header email dạng hình ảnh được tạo từ HTML bằng CLI inference.sh

Nếu bạn đang chạy chiến dịch email, thiết kế UI cho email hoặc hỗ trợ đội marketing, email-design mang đến các ràng buộc và ví dụ sẵn dùng để bạn không còn phải thử nghiệm mò mẫm.

Đối tượng phù hợp với email-design

Hãy dùng kỹ năng email-design nếu bạn là:

• Email marketer và đội growth đang lên kế hoạch bản tin, khuyến mãi hoặc drip campaign
• Designer và frontend developer chịu trách nhiệm template email HTML
• Product marketer và lifecycle marketer xây dựng flow welcome và email giao dịch
• Agency và freelancer cần một cách tiếp cận lặp lại được cho bố cục email, dòng tiêu đề và banner

Kỹ năng này đặc biệt hữu ích khi bạn muốn:

• Một đặc tả bố cục rõ ràng, đã được kiểm tra trên các client (độ rộng, cột, quy tắc responsive)
• Hướng dẫn về dòng tiêu đề và cấu trúc nội dung hỗ trợ chuyển đổi
• Cách tạo ảnh header email trực tiếp từ HTML snippet

Khi nào email-design phù hợp hoặc không phù hợp

Phù hợp khi:

• Bạn gửi campaign thường xuyên và quan tâm đến CTR và chuyển đổi
• Bạn cần "lan can" định hướng cho marketer mới hoặc thành viên mới trong team
• Bạn muốn tiêu chuẩn hóa bố cục email và phong cách hình ảnh trên nhiều brand
• Bạn đã dùng, hoặc sẵn sàng cài đặt, infsh CLI để tạo banner HTML-to-image

Không lý tưởng khi:

• Bạn chỉ gửi email plain-text và không dùng template hay hình ảnh
• Bạn cần một nền tảng email service provider (ESP) đầy đủ hoặc hạ tầng gửi (kỹ năng này tập trung vào thiết kế, không phải gửi email hay quản lý danh sách)
• Bạn đang tìm một trình chỉnh sửa kéo-thả; đây là hướng dẫn về pattern và workflow, không phải web UI

Cách sử dụng

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

Để cài đặt kỹ năng email-design vào môi trường tương thích Agent Skills, chạy:

npx skills add https://github.com/inferen-sh/skills --skill email-design

Lệnh này sẽ lấy hướng dẫn email-design từ repository inferen-sh/skills và giúp kỹ năng sẵn sàng cho agent hoặc công cụ của bạn.

Đối với quy trình HTML-to-image, kỹ năng yêu cầu có inference.sh CLI (infsh):

# Hướng dẫn cài đặt (xem tài liệu chính thức):
# https://raw.githubusercontent.com/inference-sh/skills/refs/heads/main/cli-install.md

Khi infsh đã được cài và cấu hình, bạn có thể đăng nhập và bắt đầu tạo banner trực tiếp từ HTML snippet.

2. File chính và điểm bắt đầu

Sau khi cài đặt, hãy mở trước các tài nguyên sau:

• SKILL.md – Mô tả cốt lõi về kỹ năng email-design, ghi chú sử dụng và các ràng buộc
• Thư mục guides/design/email-design – Hướng dẫn chi tiết về thiết kế bố cục, dòng tiêu đề và pattern email (đường dẫn có thể kèm thêm tài liệu tham chiếu tùy bản checkout)

Thứ tự đọc gợi ý:

1. SKILL.md – Nắm phạm vi: bố cục, dòng tiêu đề, quy tắc deliverability.
2. Các file hướng dẫn dưới guides/design/email-design – Áp dụng pattern vào chiến dịch của bạn (ví dụ: chuỗi welcome, promo, email giao dịch).

3. Sử dụng quy trình banner HTML-to-image

Kỹ năng email-design bao gồm ví dụ về cách tạo visual header email từ HTML bằng app infsh/html-to-image.

Ví dụ từng bước

1. Đăng nhập inference.sh:

infsh login

2. Chạy app HTML-to-image với HTML inline:

infsh app run infsh/html-to-image --input '{
  "html": "<div style=\"width:600px;height:250px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-family:system-ui;color:white;text-align:center\"><div><h1 style=\"font-size:36px;margin:0\">Spring Sale — 30% Off</h1><p style=\"font-size:18px;opacity:0.9\">This weekend only</p></div></div>"
}'

3. Dùng hình ảnh tạo ra làm hero banner hoặc header trong template email khuyến mãi của bạn.

Bạn có thể tùy biến block HTML cho các chiến dịch khác nhau (ví dụ: ra mắt tính năng mới, webinar, khuyến mãi theo mùa) nhưng vẫn giữ đúng độ rộng email được khuyến nghị.

4. Áp dụng quy tắc bố cục trong template

Kỹ năng email-design mô tả các ràng buộc bố cục thực tế, phù hợp với hành vi hiển thị của các email client. Bạn có thể đưa trực tiếp vào cấu trúc HTML/CSS của mình.

Các ràng buộc cốt lõi được nhấn mạnh trong hướng dẫn

• Độ rộng tối đa: 600px – Chuẩn hiển thị cho các client lớn như Gmail và Outlook
• Độ rộng mobile: 320–414px – Dải fallback responsive cho smartphone
• Ưu tiên layout một cột – Hoạt động ổn định hơn trên mobile và các app desktop cũ

Trong thực tế, điều đó nghĩa là:

• Canh giữa nội dung chính trong một container table rộng 600px
• Hạn chế grid nhiều cột phức tạp; nếu cần nhiều cột, hãy stack chúng trên mobile
• Đặt nội dung quan trọng (ưu đãi, CTA, thông điệp chính) ở gần phía trên và trong cột chính

5. Tích hợp vào quy trình email marketing của bạn

Bạn có thể dùng email-design theo nhiều cách:

• Giai đoạn lập kế hoạch:

  • Dùng các quy tắc bố cục và dòng tiêu đề trong tài liệu để brief cho designer và copywriter.
  • Xây dựng template chuẩn cho bản tin, khuyến mãi và email giao dịch.

• Giai đoạn thiết kế và triển khai:

  • Áp dụng các ràng buộc về độ rộng và bố cục khi code email HTML.
  • Dùng pipeline HTML-to-image để nhanh chóng tạo header hình ảnh đồng bộ.

• Giai đoạn tối ưu:

  • Test biến thể dòng tiêu đề dựa trên các công thức được nhắc trong SKILL.md.
  • Tinh chỉnh thứ bậc thị giác (ví dụ: inverted pyramid layout) để tăng click vào CTA chính.

6. Tùy biến kỹ năng cho stack của bạn

Hướng dẫn trong repository chủ ý không ràng buộc vào bất kỳ công cụ gửi hay ESP cụ thể nào. Để điều chỉnh email-design cho môi trường của bạn:

• Template độc lập ESP:

  • Export HTML và hình ảnh được tạo theo pattern email-design rồi upload lên các hệ thống như Mailchimp, SendGrid, Braze, Customer.io hoặc nền tảng email nội bộ.

• Onboarding cho team:

  • Đưa các ràng buộc và pattern quan trọng từ SKILL.md vào design system hoặc playbook nội bộ.

• Tự động hóa:

  • Nếu bạn tự động hóa việc tạo campaign bằng script hoặc agent, hãy gọi infsh app run infsh/html-to-image với HTML động để tạo banner riêng cho từng chiến dịch.

Câu hỏi thường gặp (FAQ)

email-design là công cụ gửi email hay chỉ là kỹ năng thiết kế?

email-design là kỹ năng về design và pattern, không phải nền tảng gửi email. Nó giúp bạn thiết kế bố cục, dòng tiêu đề, banner và template hoạt động tốt trên các email client phổ biến. Bạn vẫn cần một ESP hoặc hạ tầng gửi (ví dụ: Mailchimp, SendGrid, SMTP riêng) để gửi email.

Tôi có bắt buộc phải dùng inference.sh CLI mới tận dụng được email-design không?

Không. Giá trị cốt lõi của email-design—các mẫu bố cục, cách viết dòng tiêu đề và quy tắc deliverability—vẫn hữu ích ngay cả khi không dùng infsh. inference.sh CLI chỉ cần thiết nếu bạn muốn sử dụng workflow HTML-to-image cho header và banner email.

Những khuyến nghị bố cục chính trong email-design là gì?

Kỹ năng này nhấn mạnh:

• Độ rộng email tối đa 600px để hiển thị ổn định trên Gmail và Outlook
• Độ rộng mobile 320–414px để đảm bảo responsive trên smartphone
• Ưu tiên layout một cột để hiển thị dễ đoán hơn và tối ưu trên mobile dễ dàng hơn
  Các ràng buộc này giúp giảm lỗi bố cục và khiến chiến dịch của bạn ổn định hơn trên nhiều thiết bị.

Tôi có thể dùng email-design cho cả email giao dịch lẫn email marketing không?

Có. Kỹ năng này đề cập cụ thể đến template email giao dịch (như hóa đơn, reset mật khẩu, cảnh báo) bên cạnh email marketing. Bạn có thể áp dụng cùng nguyên tắc về độ rộng, thứ bậc nội dung và dòng tiêu đề, đồng thời vẫn đảm bảo tính tuân thủ và tập trung cho nội dung giao dịch.

email-design hỗ trợ tôi về dòng tiêu đề như thế nào?

email-design cung cấp hướng dẫn và công thức viết dòng tiêu đề để bạn tạo subject rõ ràng, hấp dẫn và phù hợp với nội dung, mục đích của từng loại email (welcome, promo, newsletter, transactional). Kỹ năng này không tự gửi email hay chạy thí nghiệm cho bạn, nhưng mang đến một khung khởi đầu có cấu trúc cho thử nghiệm A/B.

Designer và developer có thể dùng email-design cùng nhau không?

Có. Kỹ năng này được thiết kế để marketing, design và frontend dùng chung:

• Marketer dùng pattern để lập kế hoạch campaign và viết subject line.
• Designer dùng quy tắc bố cục để sắp xếp thứ bậc thị giác.
• Developer triển khai template HTML trong các ràng buộc kỹ thuật được mô tả trong hướng dẫn.

Tôi có thể xem đầy đủ chi tiết kỹ thuật của email-design ở đâu?

Sau khi cài kỹ năng, hãy mở Files và xem:

• SKILL.md – để nắm định nghĩa kỹ năng, phạm vi và các quy tắc cô đọng
• Thư mục guides/design/email-design – để đọc toàn bộ hướng dẫn thiết kế
  Những tài liệu này là bản tham chiếu đầy đủ đứng sau phần tóm tắt biên tập trên trang này.