用 Claude Design 做像小雜誌的電子報：先找參考、先生照片，一段 prompt 拿到淺色和深色兩版

為什麼別人用 Claude 做的電子報像一本小雜誌，你的只是一封純文字？不是平台範本不好，是你沒先給它參考和照片。這篇用 Claude Design，替一間虛構的花店「日常花事 Everyday Bloom」做了一封 11 月號電子報，淺色和深色各一版。下面每一張圖，都是 Claude Design 實際做出來的畫面，照片是我們先用 ChatGPT 生的。

01先打開 Claude Design（1 分鐘）

打開 claude.ai/design，用你的 Claude 帳號登入。Claude 官方 2026 年 10 月 8 日的文章寫到：Design 已經結束 beta，每個方案都能用，包括免費方案。
也可以直接在一般的 Claude 對話裡用 Claude Design。claude.ai/design 這個獨立網站會開到 2026 年 12 月 14 日。
新增專案，選「HTML email」模板。
先別急著打字，下面兩步先把參考和照片準備好。

Claude Design 官方介紹 — 包含免費方案

02第 1 步：先去 Pinterest 找 3–5 封參考，寫下「好在哪」

沒給參考和照片，Claude Design 會給你一封很整齊、但很像範本的信：照片位置是灰色佔位框，標題小小的置中。給了參考和照片之後，同一封信就變成雜誌的樣子。

到 Pinterest 搜尋「florist newsletter email design editorial」。做別的行業，就把 florist 換成你的行業，例如 cafe、bakery。
挑 3–5 封你喜歡的。
每一封寫一句「好在哪」。不用寫得很專業，寫你看到的就好。

我們看完 5 封花店電子報，寫下來的是這幾句，後面全部放進 prompt：

照片當主角：主視覺是一張真的花束照，不是一塊色塊。
一行很大的襯線標題，加一個斜體的英文點綴。內文字小小的就好。
全封只有一個米白底和一個主色，不加卡片框線，照片直接相接。
折扣、日期、價格這些資訊集中在一個框裡，其他地方留白。

03第 2 步：照片先在 ChatGPT 生好

雜誌感有一大半來自照片。我們先在 ChatGPT 生好 4 張：3 款花束當主視覺和商品照，1 張做花圈的照片給課程區用。

照片提示詞範例（把［］換成你的）

拍一張［商品］的產品照：［擺放方式，例如 陶瓶裡的一束乾燥花］，放在［場景，例如 木桌上］，暖色自然光、米白色背景，正方形。畫面裡不要有任何文字。
接下來的［3］張用一樣的光線和色調。

04第 3 步：附上照片，貼一段 prompt

回到 Claude Design 的 HTML email 專案，先附上照片，再貼這段 prompt。第 1 步寫下的「好在哪」，就是 prompt 裡的「參考方向」。

電子報提示詞（把［］換成你的）

做一封［品牌名］［月份］號電子報，600px 寬。參考方向：真實照片當主視覺，上面一行大襯線標題；全封一個米白底＋一個［主色］；照片直接相接不加框；折扣、優惠碼、期限集中在一個票券區塊。另外做同一封的深色版（深綠底、米白字）。全部繁體中文，不要灰色佔位框。

它排出來的是一封完整的電子報：最上面是店名和選單，接著是主視覺、本月三款花束、花藝課程報名、會員優惠，最下面是社群連結和取消訂閱。

Claude 在專案裡也註明：螢幕比較窄的時候，三款花束會變成一欄往下排，手機上不會擠成一團。

05第 4 步：從頭看一遍，一次只改一件事

第一版不一定就對。我們的第一版，標題壓在照片下面，字也不大，看起來不像雜誌封面。改成大標題放在照片上方，再加一行斜體英文，封面感就出來了。

日期也要自己對。第一版的課程日期是 11.15 和 11.29，標成週六，但 2026 年的這兩天是星期日。我們改成 11.14 和 11.28，這兩天才真的是週六。

修改提示詞範例（把［］換成你的）

只改［主視覺區］：［標題改成兩行大襯線字，放在照片上方，下面加一行斜體英文］。其他區塊和深色版的版面都不要動。

06第 5 步：同一封，多一個深色版

prompt 最後那句「另外做同一封的深色版」，讓我們一段 prompt 就拿到兩個版本。照片完全一樣，底色換成深綠，字換成米白。

優惠票券在深色版裡還是米白色，像一張真的票卡放在深綠底上，反而更顯眼。

07第 6 步：匯出 HTML，放進寄信工具

在 Claude Design 用匯出功能存成獨立 HTML 檔。官方列出的匯出格式還有 PDF、PPTX，也可以送到 Canva。
把信裡的照片換成你放在網路上的圖片網址（https 開頭）。電腦裡的照片，收件人是看不到的。
以 Mailchimp 為例：Campaigns → Email templates → Code your own，選貼上程式碼，或用 Import HTML 上傳檔案。
用 Preview and Test 先寄一封測試信給自己，用電腦和手機各打開一次。

Mailchimp：Import a Custom HTML Template — 貼上或上傳 HTML 電子報的步驟

08要注意

日常花事 Everyday Bloom 是虛構品牌。版面由 Claude Design 生成，照片由 ChatGPT 生成，花束、價格、課程日期和優惠碼 BLOOM11 都是示範內容。
郵件 App 不一定支援網頁字型。Mailchimp 說明頁寫到，不支援時會換成一般字型，所以大襯線標題在某些信箱可能長得不一樣。
電子報裡不能放 JavaScript 或表單，大部分信箱都不會執行。報名、訂購用按鈕連到你的網頁就好。
背景圖片不是每個信箱都會顯示。重要的字不要只放在背景圖上。
取消訂閱連結要留著。Mailchimp 規定每封信都要有 *|UNSUB|* 標籤；Google 也寫明，每天寄超過 5,000 封到 Gmail 的寄件者，行銷信要支援一鍵取消訂閱，內文也要有清楚的取消訂閱連結。
claude.ai/design 獨立網站開到 2026 年 12 月 14 日，重要的專案記得先匯出。