電子報
根據主題或內容簡報，撰寫並設計一份完整的 HTML 電子報。輸出可直接貼入 Loops、Mailchimp、Beehiiv、Resend 或任何標準電子郵件平台。
關鍵規則： 僅使用基於表格的 HTML 與內聯樣式。不得使用 CSS 類別、flexbox、grid 或 <style> 區塊。每個元素都必須直接加上 style="" 屬性。這不是選擇性的——郵件客戶端會忽略其他所有內容。
第一步：簡報收集
需要三項資訊才能開始。如果訊息中已有這三項資訊，請直接跳到第二步。
若缺少任何一項，請明確提問：
「要開始製作，我需要三項資訊：
- 主題 —— 這封電子報的主題是什麼？
- 受眾 —— 閱讀者是誰？（角色、公司規模、他們如何認識你）
- 主要行動呼籲（CTA） —— 你希望讀者採取的一個行動是什麼？」
等待使用者提供所有三項資訊後再繼續。
第二步：完整資訊收集
將所有問題打包成一則訊息，並按類別分組。使用者可以跳過任何問題——將使用預設值。
「在開始撰寫前，還有幾個問題想請教你——請回答你知道的部分，不確定的可以跳過：
內容
- 篇幅 —— 簡短（約 300 字，精煉）/ 標準（500-700 字）/ 深度（800 字以上）？
- 格式 —— 社論文章 / 編號式解說 / 個人故事 / 數據報告？
- 期別背景 —— 單次發送 / 每週系列的一部分 / 每月摘要？
- CTA 網址 —— 實際的連結是什麼？（或我會使用佔位符）
品牌 5. 公司 / 品牌名稱 —— 用於頁首與頁尾 6. 標語 —— 一行描述（選擇性，用於頁尾） 7. 城市與國家 —— 用於頁尾（例如「台北，台灣」） 8. 主要品牌色 —— 十六進制色碼？（例如 #856FE6） 9. 次要強調色 —— 保留預設的黃綠色（#D8F90A）/ 使用品牌色 / 其他顏色？
設計 10. 背景 —— 深色（社論/SaaS 風格）/ 淺色（乾淨/企業風格）/ 自訂十六進制色碼？ 11. 顯示字體 —— 社論襯線字體（Instrument Serif）/ 乾淨現代無襯線字體 / 僅系統字體？ 12. 按鈕樣式 —— 藥丸形（非常圓潤）/ 柔和圓角 / 尖角？ 13. 視覺風格 —— 社論風 / 技術+數據風 / 溫暖創辦人風 / 大膽活動風？
平台與技術 14. 平台 —— Loops / Mailchimp / Beehiiv / Resend / 其他？ 15. 語氣 —— 教育性 / 對話式 / 大膽直接 / 正式 / 俏皮？ 16. 個人化 —— 無 / 名字 / 名字 + 公司？ 17. 主旨行 —— 已經有想法了 / 希望我提供 3 個選項？ 18. 次要區塊 —— 廣告商區塊 / 產品宣傳 / 活動 / 快速連結 / 無？ 19. 純文字版本 —— 是（建議）/ 否？」
若跳過則使用以下預設值：
| 問題 | 預設值 |
|---|---|
| 篇幅 | 標準（500-700 字） |
| 格式 | 社論文章 |
| 期別背景 | 單次發送 |
| CTA 網址 | [CTA_URL] 佔位符 |
| 公司名稱 | [YOUR BRAND] 佔位符 |
| 標語 | 無 |
| 城市與國家 | [CITY, COUNTRY] 佔位符 |
| 品牌色 | 無（所有強調色使用 #D8F90A） |
| 次要強調色 | #D8F90A（預設黃綠色） |
| 背景 | 深色 |
| 顯示字體 | Instrument Serif（社論襯線字體） |
| 按鈕樣式 | 藥丸形 |
| 視覺風格 | 社論風 |
| 平台 | 通用 |
| 語氣 | 對話式 |
| 個人化 | 無 |
| 主旨行 | 生成 3 個選項 |
| 次要區塊 | 無 |
| 純文字 | 是 |
第二點五步：設計方向（內部使用——不向使用者顯示）
根據第二步的回答，決定：
- 視覺特性（來自問題 13，或若跳過則從語氣與格式推斷）
- 一個不容錯過的元素——在第三步前確定
- 模板路徑（見第五步）
若問題 13 被跳過，則依據以下規則決定特性預設值：
- 教育性 / 正式語氣：社論風
- 強調指標的內容（統計、基準、報告）：技術/數據導向風
- 產品發布、活動、活動：大膽活動風
切勿要求使用者單獨提供設計方向——從他們的回答中推導出來。
第三步：結構設計
在選擇區塊之前，請先閱讀 references/html-email-guide.md 中的佈局規則。
根據主題 + 受眾 + CTA + 要求的次要區塊，從以下區塊庫中選擇：
| 區塊 | 何時包含 |
|---|---|
| header（頁首） | 永遠——商標佔位符 + 期號或日期 |
| hero（主視覺區） | 永遠——大字標題 + 1-2 句引言 |
| intro（引言） | 對話式或教育性語氣——簡短的個人備註 |
| main-content（主要內容） | 主要文章或見解（以文字為主） |
| stat-callout（數據強調） | 有令人注目的統計、引言或數據點 |
| secondary-section（次要區塊） | 要求了次要 CTA |
| product-cta（產品 CTA） | 有品牌背景且合適的軟性產品宣傳 |
| sponsor-block（廣告商區塊） | 要求了廣告商區塊 |
| quick-links（快速連結） | 要求了精選連結區塊 |
| footer（頁尾） | 永遠——取消訂閱連結 + 公司名稱 |
以編號列表格式輸出所選結構，每個區塊附上一行用途說明：
建議結構：
1. Header（頁首）—— 商標 + 第 1 期 / [日期]
2. Hero（主視覺區）—— 標題 + 引言段落
3. Intro（引言）—— 簡短的個人鋪陳
4. Main Content（主要內容）—— [主題] 解說
5. Stat Callout（數據強調）—— 故事中的關鍵數據點
6. CTA（行動呼籲）—— [cta 文字]
7. Footer（頁尾）—— 取消訂閱 + 公司
這個結構可以嗎？還是需要調整任何區塊？
等待使用者確認後再進行第四步。
第四步：內容草稿
依序為每個區塊撰寫文案。尚未使用 HTML——只需乾淨的散文。
每個區塊的規則：
- Header（頁首）：期號 + 日期。無需文案。
- Hero 標題：最多 8 個字，以結果為導向，開頭不要用「我/我們/我們的」
- Hero 引言：1-2 句，製造問題或好奇心缺口，吸引讀者
- Intro（引言）：2-3 句，個人或情境式，避免企業腔，可以使用縮寫
- Main content（主要內容）：250-400 字，易於掃讀——使用粗體短語強調重點，段落簡短（1-3 行），避免文字牆，不要過度使用項目符號
- Stat callout（數據強調）：一則統計或引言，最多 20 個字，簡潔有力
- Product CTA（產品 CTA）：2-3 句，以價值為導向，不是「看看我們的產品」——告訴他們這對他們有什麼改變
- CTA 按鈕文字：3-5 個字，行動動詞 + 利益點（「閱讀完整解析」、「預留我的席位」、「獲取指南」）
- Footer（頁尾）：取消訂閱連結佔位符 + 公司名稱
閱讀 references/subject-line-formulas.md，然後撰寫 3 個主旨行選項（若使用者未提供主旨行）：
- 選項 A：好奇心缺口公式
- 選項 B：直接利益公式
- 選項 C：數字/列表公式
不要使用全形破折號（em dash）。不要使用這些詞：「powerful」、「seamless」、「game-changing」、「leverage」、「innovative」、「unlock」、「transform」、「elevate」、「cutting-edge」、「robust」。
第五步：HTML 生成
在生成 HTML 之前，請先閱讀 references/design-system.md 和 references/html-email-guide.md。
選擇模板或自訂生成——根據第二步的回答決定：
當以下所有條件成立時，使用 templates/dark-newsletter.html 作為基礎：
- 背景 = 深色（或未指定）
- 顯示字體 = Instrument Serif（或未指定）
- 未提供自訂背景十六進制色碼
當以下所有條件成立時，使用 templates/light-newsletter.html 作為基礎：
- 背景 = 淺色 或 語氣 = 正式
- 顯示字體 = Instrument Serif（或未指定）
- 未提供自訂背景十六進制色碼
當以下任何條件成立時，從頭開始生成自訂 HTML：
- 提供了自訂背景十六進制色碼（非深色、非白色）
- 顯示字體 = 現代無襯線字體 或 僅系統字體
- 回答的組合無法由任一個模板提供設計
對於自訂生成：使用 references/design-system.md 中的自訂生成指南作為完整的 token 規範。在整個過程中套用使用者的背景/字體/按鈕/強調色選擇。
然後（對於模板路徑）：
- 僅從模板中選擇所需的區塊（根據第三步的結構）
- 使用第四步的內容替換所有
[佔位符]值 - 套用品牌色替換（見下方規則）
- 確認所有
[UNSUBSCRIBE_URL]佔位符仍然存在（平台調整將在第六步進行）
品牌色替換規則：
若提供了 brand_color：
- 將品牌條的
bgcolor（height:2px那一行中的#D8F90A）替換為 brand_color - 將 stat callout 左邊框顏色替換為 brand_color
- 將類別標籤顏色替換為 brand_color
- 若 brand_color 亮度高（黃色、綠色、橙色——大多數霓虹色）：將步驟徽章中的
#D8F90A也替換為 brand_color - 若 brand_color 亮度低（深海軍藍、森林綠、木炭色）：保留步驟徽章和 CTA 按鈕的
#D8F90A，僅在條和 stat 邊框使用 brand_color
若未提供 brand_color：保持所有 #D8F90A 值不變。
內容替換規則（根據第二步的回答）：
- 若提供了
company_name：替換所有[YOUR BRAND]和[COMPANY NAME]佔位符 - 若提供了
city_country：替換[CITY, COUNTRY]佔位符 - 若提供了
tagline：在公司名稱之後，新增一行副標題至頁尾 - 若提供了
cta_url：替換所有[CTA_URL]佔位符為實際網址 - 若
personalization = first_name：在 hero 問候語中加入適合平台的姓名變數 —— 例如在 Beehiiv 中使用Hey %%first_name%%,，在 Loops 中使用Hey {{first_name}},，在 Mailchimp 中使用Hey *|FNAME|*, - 若
personalization = first_name + company：在語境合適的地方加入這兩個變數
品牌色視覺對比檢查（針對深色郵件）：
品牌色在 #111111 背景上是否足夠醒目？在腦中測試：它作為 2px 的條是否可見？
- 高飽和度顏色（紫色、藍色、青色、粉色、黃色、橙色、綠色）：可以——用於條、stat 邊框和類別標籤
- 低飽和度 / 接近中性色（暖灰色、米色、米白色）：僅用於條；類別標籤恢復為
#555555 - 接近黑色（非常深的深海軍藍、森林綠、木炭色，亮度低於 ~
#2A2A2A）：在所有強調用途中跳過 brand_color，所有元素都回退到#D8F90A
強調色紀律規則： brand_color 最多出現在 3 個地方：品牌條、stat 邊框、類別標籤。切勿出現在正文、標題、按鈕背景或區塊背景中。過度使用品牌色會破壞高級感。
CTA 按鈕文字顏色：
- 在
#D8F90A按鈕背景上：始終使用#0A0A0A文字（這是一種淺色） - 在
#111111按鈕背景上（位於黃色 callout 卡片內）：始終使用#F2F2F2文字 - 在 brand_color 按鈕上：若品牌色為淺色則使用
#0A0A0A，若品牌色為深色則使用#FFFFFF
每個具有背景色的 <td> 都需要的屬性：
同時使用 HTML 的 bgcolor= 屬性和內聯的 background-color: 樣式。例如：
<td bgcolor="#D8F90A" style="background-color:#D8F90A;">
bgcolor 屬性處理 Outlook。style 屬性處理其他所有客戶端。切勿只使用其中一個。
設計卓越性（前端設計原則，針對電子郵件調整）：
電子郵件表格的限制不應限制設計的野心。在這些限制內力求突破：
-
將字體排版推向極致：4-5 字的標題使用 60px，
-0.04em字距。6-7 字的標題使用 56px，-0.03em。8 字的標題使用 48px。切勿為了安全而縮小字體——標題是一張海報，不是一個標籤。在 stat 引言上使用 Instrument Serif 斜體，能增添其他元素無法比擬的文學重量。 -
密度對比作為工藝信號：Hero 區 = 最大留白（頂部 64px）。正文段落 = 緊湊且密集。CTA callout 卡片 = 再次最大留白（頂部 64px）。留白 → 緊湊 → 留白的節奏，呈現出的不是模板輸出，而是有意的設計。
-
透過區塊交替營造背景深度（全部電子郵件安全）：
- Header（頁首）：
#0A0A0A - Hero（主視覺區）：
#111111 - Stat callout 外層：
#111111，內部提升卡片：#1A1A1A - 正文段落：
#161616（微妙的提升創造深度，無需使用顏色） - 步驟卡片：
#111111（與正文形成對比） - CTA callout 卡片：
#D8F90A（唯一明亮的元素——絕不稀釋） - Footer（頁尾）：
#080808
- Header（頁首）：
-
強調色的稀缺 = 奢侈：在一片深色中出現一個黃色 callout 卡片，給人高級感。黃色出現在六個地方則顯得廉價。CTA 卡片的力量完全來自於它是深色郵件中唯一明亮的元素。
-
令人難忘的測試：在儲存之前，用一句話描述讀者在 3 小時後會如何向同事形容這封信。如果描述很模糊（「它看起來是深色且乾淨的」）——那麼視覺錨點還不夠強。讓它具體化（「那個帶有大標題襯線字體的黃色卡片」）。
-
Stat callout 作為社論式引言：4px 左邊框（不是 3px）。引言文字使用 26px 斜體 Instrument Serif。內部填充 32px。這是電子郵件中最接近雜誌引言的形式。請像對待它一樣來處理。
第六步：平台調整
閱讀 references/platform-compat.md 並套用平台特定的調整：
| 平台 | 操作 |
|---|---|
| Loops | 將 [UNSUBSCRIBE_URL] 替換為 {{unsubscribe_url}}。將 [FIRST_NAME] 引用替換為 {{first_name}} |
| Mailchimp | 將 [UNSUBSCRIBE_URL] 替換為 `* |
| Beehiiv | 將 [UNSUBSCRIBE_URL] 替換為 %%unsubscribe_url%%。將 [FIRST_NAME] 替換為 %%first_name%% |
| Resend | 將 [UNSUBSCRIBE_URL] 替換為 {unsubscribeUrl}。注意：可依要求提供 React Email .tsx 輸出 |
| 通用 / 其他 | 保留 [UNSUBSCRIBE_URL] 作為佔位符，並加上註解：<!-- Replace with your unsubscribe link --> |
第七步：自我品質檢查
在輸出前檢查生成的 HTML。修正發現的每一個問題——不要跳過。
渲染檢查：
- 所有樣式皆為內聯——沒有
<style>區塊，沒有任何class=屬性 - 所有
<table>都有cellpadding="0" cellspacing="0" border="0" - 圖片（若有）都有
alt=""、border="0"、以及display:block樣式 - 容器表格強制設定最大寬度 600px
- CTA 按鈕使用
<table>+<td>結構並帶有bgcolor=屬性，而非僅使用<a>搭配display:block - 在任何內聯樣式中都沒有
flexbox、grid、position:、float:、CSS 變數（--var）、min-height、max-height -
border-radius僅用於<td>—— 不用於<table>或<a>（Outlook 會渲染<td>的圓角半徑） - 頁尾有取消訂閱連結，並使用正確的平台變數
內容檢查：
- Hero 標題不多於 8 個字
- CTA 按鈕文字為 3-5 個字
- 無全形破折號（em dash）（使用 -- 是可以的，而不是 —）
- 無禁用詞：「powerful」、「seamless」、「game-changing」、「leverage」、「innovative」、「unlock」、「transform」、「elevate」