本文へ移動
cccskills
無料GitHub で公開

49-html-email-template

Dung khi can FILE HTML email chay duoc tren moi email client — cau truc table, CSS inline, be ngang 600px, dark mode, spec rieng cho Gmail, Outlook, Apple Mail va checklist test truoc khi gui. Mau va font lay tu brand guideline. Kich hoat khi user nhac 'email HTML', 'code email', 'template email', 'email responsive', 'email vo bo cuc tren Outlook', 'anh trong email khong hien', 'paste vao Brevo bi vo'. Khong dung cho — noi dung va chuoi gui email thi dung skill 14-email-marketing; trang web dat sau nut CTA thi dung skill 12-brief-landing-page; quy dinh mau va font thuong hieu thi dung skill 46-brand-guideline.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md7.8 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

HTML Email Template

Email HTML khac website HTML: phai dung table layout, inline CSS, tranh moi thu client khong support. Tieu chi: dep tren Gmail, Outlook, Apple Mail, doc duoc tren mobile 375px — khong co exception. Noi dung va sequence lay tu 14-email-marketing; skill nay lo phan code.

Thu thap thong tin

Doc brand guideline (46-brand-guideline) va noi dung email tu 14-email-marketing neu co. Neu thieu, hoi toi da 4 cau:

  1. Loai email + layout? Welcome / broadcast / nurture / offer / transactional — 1 cot don gian, 2 cot co hinh san pham, hay newsletter nhieu muc?
  2. Sections can co? Header / hero / body / social proof / CTA / footer — co anh hero khong?
  3. Copy da co chua? Hay can viet placeholder? CTA chinh link den dau?
  4. Gui bang tool nao? Brevo / Mailchimp / GetResponse / khac — de dung dung merge tag ({{first_name}}...).

Nguyen tac

  1. Table layout, khong div/flexbox/grid/float/position:absolute — Outlook desktop render bang Word engine, khong support.
  2. Toan bo CSS inline — Gmail co the strip the <style> (chi giu <style> cho media query mobile va dark mode, phan con lai inline het).
  3. Width toi da 600px, responsive ve 375px.
  4. Font he thong lam fallback: '[font body]', Arial, Helvetica, sans-serif — khong phu thuoc web font (nhieu client khong load Google Fonts).
  5. Moi the img phai co alt text + width/height attribute — nguoi doc chan anh van hieu email.
  6. Unsubscribe link bat buoc (phap ly) + dia chi cong ty o footer.
  7. Test mobile truoc — phan lon nguoi Viet doc email tren dien thoai.
  8. 1 file .html duy nhat, self-contained, duoi 100KB.

Quy trinh

Buoc 1 — Chon layout

LayoutDung cho
Simple 1 cotBroadcast, nurture — de doc nhat, it loi nhat
2 cot (hinh + text)Offer email co hinh san pham
Newsletter nhieu mucDigest, update — moi muc 1 block table rieng

Buoc 2 — Code theo spec ky thuat

Container: 600px desktop / 100% mobile
Background ngoai: mau xam nhat (vd #F4F4F4)
Background body: [mau nen] (thuong trang)
Font: '[font body]', Arial, Helvetica, sans-serif
Body font-size: 16px / line-height: 1.6
Mobile breakpoint: max-width 480px

Design tokens doc tu brand guideline:

  • Header: nen [mau primary], logo ban sang, padding 20px.
  • Hero: nen [mau primary] hoac gradient [mau primary] sang [mau secondary]; headline bold 28px mau sang; subtext 16px; CTA button.
  • Body: nen sang, padding 40x48px desktop / 24x20px mobile; H2 bold 22px [mau text dam]; body 16px line-height 1.7.
  • CTA button: nen [mau primary], text bold 16px mau sang, padding 14x32px, radius 8px, display inline-block, text-decoration none. (Outlook khong ve border-radius — chap nhan nut vuong fallback, khong dung anh lam button.)
  • Social proof: quote nen [mau nen nhe], border-left 4px [mau primary], ten + role nguon quote.
  • Footer: nen xam nhat, text 13px [mau text phu] — logo nho ~80px, links website/social, dia chi, unsubscribe, copyright.

Buoc 3 — Dien sections

  • Header: logo, can giua.
  • Hero: pre-header text (optional), headline (toi da 60 ky tu), subtext (toi da 100 ky tu), CTA button, hero image optional 600x300px co alt text.
  • Body: "Chao {{first_name}}," → opening 2-3 cau → main content (doan ngan, toi da 4 cau/doan) → bullet list neu co (dung table, khong dung ul de an toan render) → CTA thu hai neu can.
  • Footer bat buoc: dia chi cong ty [dia chi], unsubscribe "Ban nhan email nay vi da dang ky tai [website] | Huy dang ky", copyright © [nam] [ten thuong hieu].

Buoc 4 — Mobile responsive + dark mode

@media only screen and (max-width: 480px) {
  /* container: 100% */
  /* body font: 15px */
  /* CTA: width 100%, can giua */
  /* padding: 24px 20px */
  /* image: 100% width */
}

Dark mode:

  • Them <meta name="color-scheme" content="light dark"> va <meta name="supported-color-schemes" content="light dark">.
  • @media (prefers-color-scheme: dark) chi duoc ho tro mot phan: Apple Mail ho tro tot; Gmail thuong tu dao mau va bo qua media query; Outlook co the tu invert.
  • Quy tac an toan khi khong kiem soat duoc dark mode: logo PNG nen trong phai du tuong phan tren ca nen sang lan toi (hoac them vien sang); khong dung text den thuan tren background trong suot; vung quan trong (CTA) dung mau nen solid; test tren it nhat 1 client dark mode truoc khi gui.

Buoc 5 — Placeholders bat buoc truoc khi gui

  • {{first_name}} — ten nguoi nhan (doi cu phap theo tool gui)
  • {{unsubscribe_link}} — bat buoc phap ly
  • [dia chi cong ty] — dien that
  • [CTA_LINK] — dien link that (kem UTM theo 14-email-marketing)

Spec cac email client

ClientDac diem renderLuu y khi code
Gmail (web/app)Co the strip <style> trong mot so ngu canhInline toan bo CSS; media query co the bi bo qua — layout 1 cot van phai doc duoc
Outlook desktop (Windows)Render bang Word engineChi table; khong border-radius, khong background-image day du (dung mau solid thay the); test rieng
Apple Mail / iPhone MailWebKit, render tot nhatHo tro media query + dark mode
Yahoo / webmail khacHo tro kha, khac nhau tung banGui test that de kiem tra
Mobile apps noi chungMan hinh 375pxFont >= 15px, CTA cao toi thieu 44px de bam bang ngon tay

Test checklist truoc khi gui

  • Gmail desktop + Gmail app mobile
  • iPhone Mail app
  • Outlook desktop (neu tep nguoi nhan co dan van phong)
  • Dark mode preview it nhat 1 client
  • Tat ca link hoat dong — dac biet CTA va unsubscribe
  • Alt text cho moi img; email van hieu duoc khi anh bi block
  • File size HTML < 100KB
  • Merge tag dung cu phap tool gui ({{first_name}} khong bi in tho)
  • Gui test that toi 2-3 hop thu khac nhau truoc khi gui ca list
  • Subject + preheader da dien (lay tu 14-email-marketing)

Lien ket skill

  • 14-email-marketing: chien luoc, sequence, noi dung, subject line — viet truoc, code sau.
  • 46-brand-guideline: mau, font, logo cho email tokens.
  • 47-design-review: review email truoc khi gui (brand + readability + CTA + platform fit).
  • 12-brief-landing-page: CTA email thuong tro ve landing page — dong bo message giua 2 ben.

Checklist chat luong

  • Table layout, khong flexbox/grid/float/absolute
  • CSS inline het (tru media query + dark mode trong style)
  • Width 600px, mobile ve 375px khong vo layout
  • Font fallback he thong, khong phu thuoc web font
  • CTA button dat chuan: solid, >= 44px chieu cao tren mobile
  • Footer du: dia chi + unsubscribe + copyright
  • Dark mode meta tags + quy tac an toan da ap dung
  • Da chay het test checklist tren
  • 1 file .html duy nhat, self-contained

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Dung khi can ke hoach marketing tong the cho mot ky — muc tieu, phan khuc, kenh, ngan sach, timeline, KPI va ma tran rui ro. Co ca che do ban day du va che do ke hoach 1 trang cho chu doanh nghiep nho. Kich hoat khi user nhac 'lap ke hoach marketing', 'ke hoach MKT', 'marketing plan', 'chien luoc marketing nam', 'plan quy toi', 'ke hoach 1 trang'. Khong dung cho — tinh nguoc ngan sach tu doanh thu thi dung skill 10-tinh-kpi-nguoc; phan bo ngan sach chi tiet theo kenh thi dung skill 61-budget-planning; brief mot chien dich cu the thi dung skill 02-brief-chien-dich.

日本語の概要は準備中です。原文の説明を表示しています。

minhnv0807/ai-business-skills6132026年9月12日 更新

Use when the user needs an overall marketing plan for a period — objectives, segments, positioning, channel mix, content direction, budget, timeline, KPIs, and a risk matrix, adapted to US, EU, SEA, or LATAM. Trigger on 'marketing plan', 'marketing strategy for next year', 'go-to-market roadmap', 'plan for Q3', 'we have no marketing plan', 'where should we spend next quarter'. Also use when a founder only says the business needs to grow and has no idea which channel to start with. Not for — one specific campaign, see `02-campaign-brief-global`; working backward from a revenue goal to spend, see `10-reverse-kpi-global`; splitting a budget across channels and months, see `61-budget-planning-global`; taking a brand new product to market, see `59-go-to-market-global`.

日本語の概要は準備中です。原文の説明を表示しています。

minhnv0807/ai-business-skills6132026年9月12日 更新

Use when the user needs a monthly or weekly content calendar — posting schedule per channel, funnel ratio, content pillars, repurposing matrix, and an owner per slot. Trigger on 'content calendar', 'posting schedule', 'what should we post this month', 'editorial calendar', 'social media plan', 'we post randomly with no plan'. Also use when the user only says the team keeps running out of things to post. Not for — the brief for one specific post, see `36-content-brief-global`; the caption text itself, see `37-social-caption-global`; deciding next period content from last period data, see `40-next-content-plan-global`; a paid campaign timeline, see `02-campaign-brief-global`.

日本語の概要は準備中です。原文の説明を表示しています。

minhnv0807/ai-business-skills6132026年9月12日 更新

Dung khi can lich dang bai cho ca thang — chot content pillar va ti le, xep bai theo ngay va khung gio, ma tran tai su dung noi dung, va gan muc tieu cho tung tru cot. Kich hoat khi user nhac 'lich noi dung', 'content calendar', 'thang nay dang gi', 'len lich dang bai', 'ke hoach content thang', 'phan bo noi dung'. Khong dung cho — brief tung bai truoc khi viet thi dung skill 36-content-brief; viet caption thanh pham thi dung skill 37-caption-social; lap plan ky sau tu data thi dung skill 40-next-content-plan.

日本語の概要は準備中です。原文の説明を表示しています。

minhnv0807/ai-business-skills6132026年9月12日 更新

Dung khi can brief mot chien dich cu the cho ca team thuc thi — muc tieu, thong diep, deliverable, timeline phan cong theo tuan, gate duyet va ma tran rui ro. Kich hoat khi user nhac 'brief chien dich', 'ke hoach campaign', 'len brief cho team', 'chien dich thang toi', 'phan cong campaign', 'timeline chien dich'. Khong dung cho — ke hoach marketing ca ky thi dung skill 00-ke-hoach-mkt; danh sach asset can thiet ke thi dung skill 41-campaign-asset-list; giao viec cho tung nguoi thi dung skill 64-team-brief.

日本語の概要は準備中です。原文の説明を表示しています。

minhnv0807/ai-business-skills6132026年9月12日 更新

Use when a specific campaign needs a brief the whole team can execute from — context, objective, audience, core message, creative direction, channels, deliverables, week-by-week timeline, approval gates, and risks. Trigger on 'campaign brief', 'creative brief', 'launch brief', 'brief the team on this campaign', 'we are running a promo next month', 'what is the plan for this campaign'. Also use when the user describes a promotion out loud and asks for something the team can actually run. Not for — the whole period plan, see `00-marketing-plan-global`; the list of design files needed, see `41-campaign-asset-list-global`; assigning work to one person, see `64-team-brief-global`; a new product launch sequence, see `59-go-to-market-global`.

日本語の概要は準備中です。原文の説明を表示しています。

minhnv0807/ai-business-skills6132026年9月12日 更新

minhnv0807 のスキルをすべて見る

このスキルの問題を報告する