【2026 最新】AI 海報怎麼去 AI 味？新手必學 7 步 HTML／SVG 實作

AI 海報最容易露出「AI 味」的地方，往往不是畫風，而是資訊失控：日期像裝飾、地點縮在角落、繁中文字被烤進圖片，臨時改一天就得整張重生。這個問題在 2026 年 9 月重新受到關注；Hacker News 上一則相關討論於 9 月 19 日出現，截至 9 月 21 日 06:47（台北時間）的官方資料快照為 1,764 points、908 descendants。熱度只代表需求，不代表方法已被證明；被討論的 John Hartnup 風格實驗其實發布於 6 月 7 日，這次是舊文重新浮上檯面，不是新文章。

這篇會帶你完成一張繁中活動海報：先把資訊壓成可掃讀的層級，再讓生成模型只做無文字主視覺，最後用 HTML／SVG 疊上可改、可搜尋的真文字。你不需要先懂設計軟體；跟著七步做完，就會得到可保留來源、可改單一欄位，也能輸出 PNG 與 A4 PDF 的交付檔。

先說結論：AI 海報讓模型當插畫師，HTML／SVG 當排字師

整套方法可以記成一個式子：AI 海報＝主視覺（氣氛）＋真文字層（資訊）＋驗收（交付）。生成圖不承擔日期、票價、地址、QR Code 或贊助商名稱；這些會影響行動的事實全部留在 DOM 或 SVG <text>。需要修改時，改資料而不是重抽整張圖。

這不是在教你隱藏使用 AI，而是把責任邊界畫清楚：模型負責不需要逐字正確的素材，人負責資訊、語境、授權與最後判斷。W3C 對 SVG 的說明指出，SVG 可包含向量、影像與可搜尋文字，也能由 DOM 操作；但若把文字轉成 path 或輸出 PNG，它就不再是可編輯文字。

第一步：先做資訊預算，不要先挑風格

先把正式資訊寫成結構化欄位，並禁止模型自由改寫：

{
  "title": "午夜字體實驗室",
  "date": "2026-10-18",
  "time": "19:30–22:00",
  "venue": "Warehouse 08",
  "cta": "example.com/type-night"
}

接著做 AlphaLab 的「3 秒掃讀」編輯測試：請一位沒看過海報的人只看三秒，收起畫面後回答活動名、日期與地點。這不是國際標準，而是快速抓重大階層問題的本地規則。答不出來就先刪裝飾、放大必要資訊，不要再加圖示。最後才安排次要資訊，如講者、主辦單位與完整網址。

一個實用的字數預算是：主標一到兩行；日期、時間、地點各一欄；行動指令一句。地址太長時，可讓紙本保留必要地名，完整交通資訊放到可核對的短網址；QR Code 必須由真正網址產生並實掃，不能交給生圖模型畫。

請把這份資料檔視為唯一真相來源。海報上的日期不能手動複製一份、社群圖又複製另一份；所有尺寸都應由同一組欄位渲染。這樣臨時改期時，只要核對一筆變更；若把資料檔納入 Git 等版本控制，也能用 diff 與 commit history 追出誰在何時改了什麼。設計不再只是畫面，而是一套可以重跑、審核與交接的內容系統。

第二步：用「方向卡」選視覺，不用藝術家姓名當捷徑

風格菜單的用途是打開選項，不是保證設計品質。John Hartnup 的案例也承認成品仍有 AI 感；HN 的反對意見則指出，換了表面風格，常常還是同一套 icon＋條列＋滿版裝飾。比較可靠的做法，是先從活動任務選一張方向卡：

• 資訊格線：適合講座、招生、工作坊。用一個主標、固定閱讀順序與大量留白，不替每個條目配圖示。
• 雙色觸感：適合市集、社區與藝文活動。材質只留在背景層，正式字維持乾淨；不要把「復古」等同全面泛黃磨損。
• 大形狀拼貼：適合親子或創意活動。只留三到五個大形狀與一個焦點，刪掉填滿空位的小物件。
• 真實照片主導：適合需要信任的場地、人物與社群活動。使用有權利的真實照片，不生成看似已發生的假現場。
• 單一記號留白：適合資訊少、品牌成熟的活動。用一個可辨識主形與單一強調色；不能只用「日系」之類國族標籤代替設計理由。

每次只選一張方向卡，寫清楚適用場景、色彩、形狀、留白、禁止事項，再生成兩到三個候選。若你想把視覺規格做成可重跑資料，可延伸閱讀GPT-Image 2 Prompt as Code 教學；重點不是綁定某個模型，而是把規則與版本留下來。

第三步：只生成主視覺，Prompt 明確禁止正式文字

提示詞要描述版面需要的空間，而不是要求模型把整張海報做完。以下模板可替換中括號內容：

製作 A4 直式活動海報的背景主視覺。
方向：[資訊格線／雙色觸感／大形狀拼貼／真實照片／單一記號]
主題：[活動的真實主題與觀眾]
構圖：上方或左側保留 35% 乾淨負空間給標題，底部保留資訊帶。
色彩：[2–3 個品牌色]，背景與文字區要能形成高對比。
禁止：任何可辨識文字、字母、數字、Logo、QR Code、假地圖、假活動照片。
只輸出背景與非文字主視覺，不要完成排版。

生成後先檢查是否藏有偽字、假標誌、不合理物件或與活動不符的文化符號。即使圖很漂亮，只要文字負空間不夠，仍應淘汰。反過來，沒有生圖工具也能用合法照片、幾何色塊完成同一套流程；AI 不是必要條件。

第四步：讓 Claude Code／Codex 建立真文字 HTML／SVG

建立 poster-data.json、poster.html、styles.css 與 background.png 四個檔案。HTML／CSS 適合快速調版與多尺寸輸出；SVG 適合固定畫布與精確座標。兩者的共同底線是：標題、日期、地點與 CTA 都要是可選取的文字節點，不可藏在背景圖。

<main class="poster" lang="zh-Hant">
  <img class="poster__visual" src="background.png" alt="">
  <section class="poster__copy">
    <p class="eyebrow">ALPHALAB DESIGN NIGHT</p>
    <h1 data-field="title">午夜字體<br>實驗室</h1>
    <div class="facts">
      <p data-field="date">10.18 SAT</p>
      <p data-field="time">19:30–22:00</p>
      <p data-field="venue">Warehouse 08</p>
    </div>
  </section>
</main>

@page { size: A4 portrait; margin: 0; }
.poster {
  position: relative;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.poster__visual { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster__copy { position: relative; z-index: 1; }
@media print { html, body, .poster { width: 210mm; height: 297mm; margin: 0; } }

交給 coding agent 時，規格要寫成驗收條件：「文案 JSON 不得被改寫；背景只能作為 image；所有正式文字留在 DOM；欄位溢出就報錯，不能無限縮字；輸出前等待 document.fonts.ready。」CSS Font Loading 規範說明，document.fonts.ready 會在相關字型載入與版面作業完成後才 fulfill，適合在此時量文字尺寸；但它不證明每個繁中字形都存在，仍要看成品與 PDF。

若你想理解如何讓 AI 代理直接改檔、反覆檢查，可接著看用 Claude Code／Codex 擺脫 AI 味；若還在兩個工具間選擇，則先讀Claude Code vs Codex 客觀比較。工具不同不影響這個檔案 contract。

第五步：做受控 A/B，不要把兩張完全不同的圖叫實驗

最小、最好解釋的 A/B，是只改一個欄位或一個設計因素。本次示範以同一背景、同一文案與同一 renderer 產出 A、B 兩版，只把日期從 10.18 改成 10.25。兩張 1200 × 1697 PNG 的像素差異約占 0.10%，差異框集中在日期欄；這證明此範例沒有為了改日期重抽背景。它不是「B 比 A 更好」的統計實驗，而是單欄位可回改的 regression test。

要比較可讀性，讓不同受試者在固定時間只看 A 或 B，先回答活動名、日期、地點與下一步，再問喜好。主要指標應是答對率、找資訊時間與誤讀率；點擊率與「我比較喜歡」只能當次要訊號。小型測試適合抓明顯問題，不足以宣稱普遍提升多少百分比。

第六步：用四關驗收 AI 海報，把「看起來可以」變成 Pass／Fail

1. 掃讀：縮到 320px 寬與實際觀看距離各測一次，讀者能依序找出主題、日期、地點與 CTA。
2. 單欄位修改：只改 JSON 的日期，重新渲染後差異應留在日期 slot；若換行或溢位就 fail。
3. A4 列印：@page { size: A4; } 指定的是 210 × 297 mm。MDN 的 @page 文件提醒，部分 paged-media 能力仍有瀏覽器差異；margin: 0 也不會讓印表機自動支援無邊列印。
4. 輸出：逐一打開 PNG、SVG 與 PDF，檢查缺字、裁切、背景與連結。PDF 再確認只有一頁、頁面為 A4、字型有嵌入且關鍵繁中可擷取。

數位版文字可用 WCAG 2.2 的對比基準做最低 proofing floor：一般字 4.5:1、大字 3:1。這是網頁可及性基準，不保證紙張、油墨、環境光與距離下都清楚，所以仍要 100% 尺寸實印。本次示範匯出的 PDF 為一頁 A4，且可擷取標題、日期、時間與場地；瀏覽器 PDF 通過這些檢查，也不等於已符合印刷廠的 bleed、ICC 或 PDF/X 規格。

第七步：保存來源，不要只交一張漂亮 PNG

最小交付包應包含：原始背景、資料 JSON、HTML／SVG、字型與授權紀錄、PNG、PDF，以及一張記錄尺寸與測試結果的 README。PNG 是方便分享的扁平點陣，不是可編輯母檔；SVG 裡若嵌了低解析背景，容器也不會替它創造新細節。

同一份 HTML 之後還能延伸成社群尺寸或動畫；可參考用 HTML 變成可重跑 MP4。若要把流程圖、圖說與海報一起交付，Diagram Design 的 SVG／PNG 交付方法也能沿用相同的「來源可改、成品逐檔驗收」觀念。

想把這類可重跑流程擴充到更多 AI 工具與實作題，也可以從 AlphaLab 的AI 課程整理挑選下一個練習；仍請先用本文的交付 gate 檢查自己的成品，而不是只照著畫面抄步驟。

常見問題：AI 海報製作的 8 個實務答案

1. 這樣做就一定沒有 AI 味嗎？

不一定。真文字能解決正確性與回改性，不能自動帶來好品味。仍要刪除無關裝飾、建立階層，並確認視覺語言符合活動。

2. 可不可以直接叫模型生成完整海報？

可以拿來探索，不宜當唯一母檔。若日期、價格或地址需要精確與日後修改，就應另外保留真文字來源。

3. HTML 與 SVG 該選哪一個？

多尺寸與快速調版選 HTML/CSS；固定畫布與座標控制選 SVG。兩者都能混用，但正式流程要鎖定 renderer 並實測每種輸出。

4. SVG 文字要不要轉外框？

母檔不要。印務若要求 outline，可另存交付副本；保留含 <text> 的來源，才有搜尋、複製與單欄位修改能力。

5. print-color-adjust: exact 能保證顏色嗎？

不能。它只是要求瀏覽器盡量保留顏色，使用者與輸出設定仍可覆寫；要檢查最終 PDF，商業印刷再依供應商色彩規格 proof。

6. A4 PNG 一定要 2480 × 3508 嗎？

不是 A4 的定義。A4 是 210 × 297 mm；2480 × 3508 是用 300 PPI 換算後的常用輸出目標。真正需求仍看印刷商、觀看距離與紙張。

7. A/B 要多少人才能測？

沒有適用所有情況的神奇人數。少量讀者可做形成性測試、抓出明顯誤讀；要宣稱轉換率提升，則需先定指標、樣本與停止規則。

8. 沒有 Claude Code 或 Codex 還能做嗎？

可以。任何能建立 HTML／SVG 的編輯器都能完成；coding agent 的價值是把重複排版、欄位替換與驗收自動化，不是取代設計判斷。