電子郵件行銷技能
產出一個置中、單欄、無多餘外框的單一HTML電子郵件。將其視為行銷素材：一個大概念、一個CTA。
工作流程
- 讀取當前的 DESIGN.md（已置入於上方）。電子郵件比其他任何介面都更依賴顯示字型——從設計系統中選取最搶眼的字型記號作為標題組合。
- 從需求中選取品牌與產品。產生真實的字標、真實的產品名稱及一句真實的好處說明——不得使用佔位符。
- 佈局，按順序，全部置中於600–680px寬的欄位內，頁面背景使用淺色（使郵件本體看起來像郵件，而非頁面）：
- 報頭——左側字標 + 右側3個短導覽連結（SHOP、JOURNAL、MEMBERS）。下方細線。
- 主圖區塊——一張16:9的產品圖片佔位符。使用設計系統中的漸層或產品的簡化SVG輪廓（鞋、瓶、耳機等，依需求而定）。左上角加一個小型品牌標記，左下角加上色系標籤。
- 眉毛文字——小型大寫、強調色，以「·」分隔（例如「NEW · MAX-CUSHION TRAINER · EMBER FLARE」）。
- 標題組合——使用顯示字型、全大寫、字距極緊的2–3行標題。對其中一個強調詞應用輕微傾斜（
transform: skew(-6deg)），呈現運動感平行四邊形效果。 - 內文——左對齊的2–3句段落，使用內文字型。
- 主要CTA——實心藥丸形或方塊按鈕。僅一個。
- 規格表格——2×2網格，包含（大數字 + 單位 + 標籤）的區塊，數字使用顯示字型。
- 頁尾——字標、地址行、取消訂閱與線上瀏覽連結。
- 撰寫單一HTML文件：
- 從
<!doctype html>到</html>，CSS行內嵌入。 - 使用
margin: 0 auto置中欄位。設定body { background: <色調> }使郵件在頁面上的隱喻讀起來更直觀。 - 不使用外部圖片——對於產品照片，使用行內SVG或設計系統色調的漸層區塊。
- 在報頭、主圖、標題、CTA、規格上設定
data-od-id。
- 從
- 自我檢查：
- 電子郵件從上到下閱讀時間約8–10秒。
- 僅一個CTA。強調色最多使用兩次（眉毛文字 + CTA，或標題中的一個詞）。
- 在480px寬的視窗上仍可清晰閱讀（欄位重新排列，字型大小降一級）。
輸出合約
在 <artifact> 標籤之間輸出：
<artifact identifier="email-slug" type="text/html" title="電子郵件 — 主旨行">
<!doctype html>
<html>...</html>
</artifact>
在artifact之前加上一句話，之後不加任何內容。