email-design

概觀

email-design 技能的用途

email-design 技能是一套實務指南，協助你設計高轉換率的行銷電子報與 Email 範本。它結合了經驗驗證的版面配置範式、主旨撰寫方法，以及考量寄達率的設計規則，並提供一套可產出符合品牌風格頁首橫幅的 HTML-to-image 工作流程。

本技能特別聚焦在：

• 行銷電子報與促銷活動 Email
• 歡迎信序列與新手引導 Email（onboarding）
• 交易通知型範本（收據、提醒、確認信）
• 在 Gmail、Outlook 與主流郵件客戶端上穩定呈現的手機友善版面
• 使用 inference.sh CLI，從 HTML 產生視覺化 Email 標頭

如果你需要經常發送 Email 行銷活動、為 Email 設計 UI，或支援行銷團隊，email-design 能提供可立即套用的設計約束與範例，幫你擺脫「憑感覺」調整。

適合使用 email-design 的對象

適合使用 email-design 技能的情境包括：

• Email 行銷與成長團隊 規劃電子報、促銷活動或 drip campaign
• 設計師與前端工程師 負責撰寫 HTML Email 範本
• 產品與生命周期行銷人員 建立歡迎流程與交易通知型溝通
• 代理商與自由工作者 需要一套可重複使用的 Email 版面、主旨與橫幅設計方法

特別有幫助的情境如：

• 需要清楚、經客戶端驗證的版面規格（寬度、欄位、響應式規則）
• 希望獲得有助轉換率的主旨與結構撰寫指引
• 想要直接從 HTML snippet 產生 Email 標頭圖片

什麼時候適合／不適合使用 email-design

適合使用的情況：

• 你會定期發送行銷活動 Email，且在乎 CTR 與轉換率
• 需要為新進或初階行銷同仁提供作業護欄與標準
• 想要在不同品牌間統一 Email 版面與視覺風格
• 你已使用或願意安裝 infsh CLI 來產生 HTML-to-image 橫幅

不那麼適合的情況：

• 你只發送純文字 Email，不使用範本或視覺元素
• 你需要的是完整的 Email 服務供應商（ESP）或寄送基礎建設（本技能著重在設計，而非寄送或名單管理）
• 你正在尋找拖拉式可視化編輯器；本技能提供的是設計範式與工作流程指南，而非網頁 UI

使用方式

1. 安裝與環境設定

要在支援 Agent Skills 的環境中安裝 email-design 技能，請執行：

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

此指令會從 inferen-sh/skills repository 下載 email-design 指南，並讓你的 agent 或工具可使用它。

針對 HTML-to-image 工作流程，本技能預期系統中已安裝 inference.sh CLI（infsh）：

# Install instructions (see official guide):
# https://raw.githubusercontent.com/inference-sh/skills/refs/heads/main/cli-install.md

完成 infsh 安裝與設定後，你即可登入並開始從 HTML snippet 直接產生橫幅圖片。

2. 重要檔案與起始閱讀順序

安裝完成後，建議先查看以下資源：

• SKILL.md – email-design 技能的核心說明、使用注意事項與設計約束
• guides/design/email-design（目錄）– 詳細的版面、主旨與 Email 設計範式說明（實際路徑可能依你的 checkout 狀況包含更多參考資料）

建議的閱讀順序：

1. SKILL.md – 先掌握技能範圍：版面配置、主旨設計、寄達率相關規則。
2. guides/design/email-design 底下的設計指南檔案 – 將各種範式套用到你自己的活動中（例如歡迎信序列、促銷活動、交易通知 Email）。

3. 使用 HTML-to-image 橫幅工作流程

email-design 技能包含一個範例，示範如何使用 infsh/html-to-image app，從 HTML 產生 Email 標頭視覺。

操作步驟範例

1. 登入 inference.sh：

infsh login

2. 使用 inline HTML 執行 HTML-to-image app：

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. 將產出的圖片 作為促銷 Email 範本中的 hero banner 或標頭使用。

你可以依不同活動（如新功能發表、線上研討會、季節性促銷）調整此 HTML 區塊，同時維持建議的 Email 寬度設定。

4. 在範本中套用版面配置規則

email-design 技能整理了符合實際郵件客戶端行為的實用版面限制，你可以直接整合到你的 HTML/CSS 結構中。

指南中強調的核心限制

• 最大寬度：600px – 在 Gmail 與 Outlook 等主要客戶端上最常見且穩定的顯示寬度
• 手機寬度：320–414px – 手機裝置上常見的響應式 fallback 範圍
• 優先採用單欄版面 – 在行動端與較舊桌面客戶端上表現更穩定

實務上意味著：

• 將主要內容置中放在寬度 600px 的 container table 中
• 避免複雜多欄網格；如需要多欄，手機版面改採垂直堆疊
• 將關鍵內容（優惠、CTA、核心訊息）放在靠上方的位置，並置於主欄位

5. 與現有 Email 行銷流程整合

你可以用多種方式在流程中運用 email-design：

• 規劃階段：

  • 使用文件中的版面與主旨規則，作為設計師與文案的簡報與 brief。
  • 為電子報、促銷活動、交易通知 Email 定義標準範本。

• 設計與製作階段：

  • 在撰寫 HTML Email 時套用寬度與版面限制。
  • 使用 HTML-to-image pipeline 快速產出風格一致的視覺標頭。

• 優化階段：

  • 根據 SKILL.md 提到的公式測試不同主旨變化。
  • 微調視覺階層（例如倒三角／金字塔版面）以提高主要 CTA 的點擊率。

6. 將技能調整到你的技術堆疊

repository 中的說明刻意在寄送與 ESP 選擇上保持中立，你可以這樣把 email-design 套用到自己的環境：

• 與 ESP 無關的範本：

  • 將依照 email-design 範式產生的 HTML 與圖片匯出，再上傳到 Mailchimp、SendGrid、Braze、Customer.io 或自建 Email 平台。

• 團隊導入與教育訓練：

  • 把 SKILL.md 中的關鍵限制與模式，納入內部設計系統或 playbook。

• 自動化：

  • 若你透過 script 或 agent 自動建立活動，可呼叫 infsh app run infsh/html-to-image 搭配動態 HTML，為每個活動產生專屬橫幅。

常見問題（FAQ）

email-design 是寄信平台還是單純的設計技能？

email-design 是一個 設計與版面範式技能，不是 Email 寄送平台。它協助你設計在常見郵件客戶端中表現良好的版面、主旨、橫幅與範本。實際寄信仍需要 ESP 或寄送基礎建設（例如 Mailchimp、SendGrid 或自建 SMTP）。

一定要用 inference.sh CLI 才能從 email-design 受惠嗎？

不用。email-design 的核心價值在於 版面範式、主旨策略與寄達率規則，即使沒有 infsh 也很實用。只有在你想使用 HTML-to-image 工作流程來產生 Email 標頭與橫幅時，才需要 inference.sh CLI。

email-design 主要推薦哪些版面配置？

本技能重點說明：

• 建議使用 600px 的最大 Email 寬度，以在 Gmail 與 Outlook 等主要客戶端上維持一致呈現
• 建議採用 320–414px 的手機寬度，確保在智慧型手機上具有良好響應式表現
• 建議優先使用 單欄版面，讓顯示更可預測，也更容易針對手機優化
  這些限制有助於降低排版跑版問題，讓你的活動在不同裝置上更穩定。

email-design 可以同時應用在交易通知信與行銷活動信上嗎？

可以。本技能特別涵蓋 交易通知型範本（例如收據、重設密碼、提醒信）以及行銷 Email。你可以在確保交易內容合規且聚焦的前提下，套用相同的寬度設定、內容階層與主旨設計原則。

email-design 如何協助設計 Email 主旨？

email-design 提供 主旨撰寫指引與公式，幫助你為不同 Email 類型（歡迎信、促銷、電子報、交易通知）寫出更清楚、誘因更明確且與內容一致的主旨。雖然它不會代你寄信或自動執行實驗，但可作為你進行 A/B 測試時的結構化起點。

設計師與工程師可以一起使用 email-design 嗎？

可以。這個技能設計就是要讓 行銷、設計與前端工程 團隊共享：

• 行銷人員依照範式規劃活動與撰寫主旨。
• 設計師根據版面規則建立視覺階層與版型。
• 工程師在既定技術限制下實作 HTML 範本，並遵循指南中的細節。

在哪裡可以看到 email-design 的完整技術細節？

安裝技能後，開啟 Files 檢視並查看：

• SKILL.md – 了解技能定義、範圍與精簡規則
• guides/design/email-design 目錄 – 閱讀完整的設計說明與範例
  這些內容就是本頁摘要背後的完整技術與編輯參考資料。