HTML email dựng một email sống sót qua các client email — markup cấu trúc bảng, style inline mà các renderer cổ xưa cần, kiểm tra ở độ rộng client email và export sẵn để gửi. Đây là mẫu cho định dạng nơi CSS hiện đại đi chết.
Một lượt chạy email dựng gì
Brief nó như một chiến dịch — "email launch cho tầng mới: headline, ba tính năng, một nút, footer" — và agent dựng email: header, các khối body, call to action, footer, tất cả trong markup an toàn client. Kết quả mở trong email viewer: message ở độ rộng client email, như nó sẽ render.
Client email không phải trình duyệt — Outlook vẫn render HTML của Word, Gmail cắt email dài, dark mode đảo màu bạn không đặt. Mẫu dựng cho thực tế đó: bảng thay flexbox, style inline thay stylesheet, fallback thay feature.
HTML email · Devin · e2e · gate PASS
The Launch Email — The announcement email for this very product — one clear CTA, inlined tables, dark-mode safe.
▸ the prompt that made it▾ the prompt that made it
“Design an HTML email: a launch announcement for a desktop design tool — one clear CTA.”
Kiểm tra độ rộng client
Viewer hiển thị message ở các độ rộng client thật dùng — một pane inbox hẹp, một app mail mobile — nên thiết kế đọc ở đúng kích thước nó thực sự được đọc. Cổng kiểm tra luật email: fallback ảnh, cấu trúc bảng, font an toàn.
Điều hướng một email
Điều hướng giống mọi kết quả:
- ⌥-click một khối, bình luận đúng chỗ ("nút nên cảm giác nặng hơn")
- Follow-ups cho cấu trúc ("thêm một dòng PS dưới footer")
- Tweaks cho các tham số — màu accent, mật độ, kích thước ảnh
- Versions — một bản có ảnh hero, một bản nghiêng về chữ
Nó giỏi gì
- Email launch và chiến dịch — thông báo phải trông đúng
- Newsletter — layout định kỳ, đọc được trong mọi client
- Thiết kế transactional — các hóa đơn và email chào mang theo brand
- Mẫu email — nền cho một loạt chiến dịch
Export
Email export ra HTML — markup an toàn client sẵn dán vào trình gửi — và PNG để kiểm tra trực quan hoặc doc thiết kế. File nằm lại trong dự án cho chiến dịch tiếp theo hoặc bản tiếp theo.
Mẹo: Nói "client-safe" trong brief kể cả khi mẫu đã bắt buộc điều đó — nó giữ các brief tiếp theo khỏi trôi lại về CSS hiện đại mà renderer Outlook sẽ strip mất.