Vibe 畫布 prompt 模板：用一段 prompt 產出可貼進秒站的 HTML

2026 年用 ChatGPT、Claude、Gemini 寫一段網頁 HTML 已經是常識——但把 AI 給你的 HTML 直接貼進 WordPress 後端，十次有八次會發生：樣式跑掉、跟主題打架、JS 不動、SEO 結構崩。

關鍵不在 AI 本身，而在你「怎麼問」——一段結構良好的 prompt 模板，能讓 AI 直接產出**純靜態、內嵌 CSS、不衝突 WordPress 主題、含 JSON-LD 結構化資料**的 HTML 區段，貼進秒站「Vibe 畫布」就是一個專業頁面。

本文提供一份直接可複製的 prompt 模板、4 個欄位怎麼填、為什麼這份模板能產出 SEO 友善 HTML，以及從 AI 拿到 HTML 後貼進 Vibe 畫布的 3 步驟。如果你還沒用過 Vibe 畫布，建議先讀 Vibe 畫布完整教學 再回來看這篇深用版。

為什麼用 Vibe 畫布 + AI prompt 是 2026 最快的頁面製作法#

來源：Anthropic Claude、OpenAI ChatGPT、Google AI Gemini（更新時間：2026-05-10）

傳統做頁面 vs Vibe 畫布 + AI#

傳統做一個活動頁，要：找設計師畫稿（5-7 天）→ 切版前端（3-5 天）→ 串到 WordPress（1-2 天）。整套 10 天起跳，預算 NT$ 2 萬到 10 萬不等。

用 Vibe 畫布 + AI prompt：跟 AI 描述需求 5 分鐘 → 拿到完整 HTML → 貼進 Vibe 畫布 → 預覽調整 30 分鐘。同一個下午能上線一個專業頁面，預算只是 AI 訂閱費。

為什麼選 Vibe 畫布而非 WordPress「自訂 HTML 區塊」#

WordPress 文章內的「自訂 HTML 區塊」會被佈景主題（Header、Sidebar、Footer）包住——你的純靜態頁面被擠進主題的版心寬度、邊邊有主題側欄、樣式互相打架。

Vibe 畫布是 page-level（整頁）容器，不被主題包住，可以承載完整 viewport 寬度的設計、JS 自由運作、CSS 不會被主題覆蓋。對「我要做一個獨立活動頁／落地頁」，Vibe 畫布是正解。

一鍵複製：可直接用的 Prompt 模板#

下面這段 prompt 把所有「對齊 WordPress + SEO + 不踩雷」的條件全部寫進去。複製整段，把 4 個 [ ] 框框換成你的需求，丟給 ChatGPT／Claude／Gemini，AI 就會產出可直接用的 HTML 區段。

📋 完整 Prompt 模板（給 AI 用） 
請幫我做一個可以直接貼進 WordPress「自訂 HTML 區塊」的頁面區段，主題是：[你的主題]

技術要求（重要，請嚴格遵守）：
1. 純靜態 HTML + 內嵌 CSS（<style>），JavaScript 僅用於互動效果，不可用於渲染主要內容
2. 所有文字內容必須直接寫在 HTML 標籤內，不可透過 JS 動態插入
3. 不使用任何前端框架（React、Vue 等），不引入外部 JS library（除非明確指定）
4. CSS 使用 scoped class（前綴例如 .myhero-）避免與 WordPress 主題衝突
5. 不可包含 <html>、<head>、<body> 標籤（會被 WordPress 重複包住）

SEO 結構要求：
1. 使用語意化標籤：<section>、<article>、<h2>（h1 留給 WordPress 頁面標題）、<p>、<ul>
2. 標題層級遵守 h2 → h3 → h4，不可跳級
3. 所有圖片必須有 alt 屬性，描述圖片內容（非裝飾圖才需要）
4. 重要連結用 <a> 而非 onclick
5. 結構化資料（JSON-LD）：如果是文章/產品/FAQ，請附上對應 schema.org 標記

設計要求：
1. RWD 響應式設計，斷點 768px / 1024px
2. 字體使用系統字體 stack，不引入 Google Fonts（避免拖慢載入）
3. 顏色：[填你的品牌色]
4. 風格：[簡約 / 科技 / 活潑 / ...]

內容大綱：
- [第一區塊主題]
- [第二區塊主題]
- ...

4 個 placeholder 怎麼填#

Prompt 裡 4 個 [ ] 框框是讓你客製的位置。填得越具體，AI 產出越貼近需求。

1. 主題（Topic）#

用一句話描述頁面用途，別只寫名詞。

  • ❌ 模糊：「形象頁」「活動頁」
  • ✅ 具體：「設計工作室作品集首頁，聚焦 5 個成功案例 + CTA 導到聯絡表單」

2. 品牌色#

給具體 hex code，不要只說「藍色」。AI 對顏色的個體差異很大，給 hex 才精準。

  • ❌ 「藍色」
  • ✅ 「主色 #2563eb（藍）、輔色 #16a34a（綠）、文字 #0f172a」

3. 風格#

選 1 個主風格，不要混搭太多形容詞。

  • 簡約：大量留白、無漸層、極少裝飾線
  • 科技：深色背景、漸層文字、細節線條
  • 活潑：對比色、圓角、emoji 點綴
  • 專業：襯線字體、保守佈局、深藍／深灰主色

4. 內容大綱#

列 3-6 個區塊，每個區塊用一句話描述要呈現什麼。AI 會自動把區塊轉成 H2 結構，補配色與排版。

範例：

  • Hero 區：標語 + 副標 + CTA 按鈕
  • 3 個服務介紹卡片
  • 客戶見證 3 則（含照片、姓名、職稱）
  • FAQ 區（5 題、含 JSON-LD schema）
  • 聯絡 CTA 區（手機點擊撥號 + email）

為什麼這份 prompt 能產出 SEO 友善 HTML：5 個關鍵設計#

1. 純靜態 HTML + 內嵌 CSS#

禁止用 JS 動態插入主要文字。原因：Google 跟 AI 搜尋引擎雖然能執行 JS，但**抓取優先順序仍是 HTML 原始碼**。文字寫在 HTML 標籤內，抓取速度快，排名訊號強。

2. CSS scoped class（防主題衝突）#

要求 AI 用 .myhero- 之類前綴 class，避免使用 .button、.card 這種太通用的 class——這些 99% 會跟 WordPress 主題的全域 CSS 打架。

3. 不引入 Google Fonts#

用系統字體 stack（system-ui, -apple-system, "PingFang TC", ...），不從 Google Fonts CDN 載入。原因：Google Fonts 增加 100-300 ms 首字節載入時間，影響 Core Web Vitals 跟 LCP 分數。

4. 語意化 H2 → H3 → H4 不跳級#

WordPress 頁面標題已用 H1，區段內容從 H2 開始，不能跳級。AI 容易自動寫 H1（覆蓋 WordPress H1）或從 H3 開始（漏 H2），這份 prompt 明確指定避免。

5. JSON-LD schema 結構化資料#

當區塊是文章／產品／FAQ 類型，AI 自動加 schema.org 標記。對 AI 搜尋引擎（ChatGPT、Perplexity、Google AI Overview）的引用率有顯著幫助。

從 AI 拿到 HTML 後 → 貼進 Vibe 畫布的 3 步驟#

步驟 1：建立 Vibe 畫布#

秒站後台 → 左側選單「Vibe 畫布」→ 新增。填頁面標題、slug（會成為 URL 的一部分，用英文連字號）。

步驟 2：貼入 AI 給的 HTML#

編輯器有「自訂 HTML」區塊（Vibe 畫布內已預設好），把 AI 回應的整段 HTML 貼入。**包含 <style> 跟 <script> 也一起貼**——Vibe 畫布支援完整 HTML（不像文章內的「自訂 HTML 區塊」會被主題框住）。

步驟 3：預覽 + Rank Math 設定 + 發布#

右側「預覽」按鈕看實際顯示。RWD 斷點（768px / 1024px）都試過再下方填 Rank Math：focus keyword、meta description、primary category。最後發布。

常見坑：3 個 AI 回應後要修的地方#

坑 1：AI 偷偷加 <html>／<body> 標籤#

就算 prompt 明確說不要，AI 還是會偶爾加。貼進 WordPress 前**手動刪掉開頭的 <!DOCTYPE>、<html>、<head>、<body> 跟結尾對應的 close tag**。只保留實際區段內容。

坑 2：JS 用了 ES6 import / export#

AI 有時會用 import { ... } from ES module 寫法——這在 inline <script> 不會跑。請 AI 改寫成「純 vanilla JS、不要 import / export」。

坑 3：圖片 src 用 placeholder.com 連結#

AI 預設用 via.placeholder.com 假圖網址。實際上線前要換成你自己的圖（可以從 Openverse 抓免費商用圖、見 Vibe 畫布 + Openverse 教學），否則前端會載入到外部假圖網址，影響 SEO 跟載入速度。

掌握 Vibe 畫布 + AI prompt 模板，你做頁面的時間從「兩週」壓縮到「一個下午」。秒站客戶可以直接用本文上方的 prompt 模板開始——複製、填 4 個欄位、丟給 AI、貼回 Vibe 畫布。整個流程跑熟後，未來活動頁／落地頁／產品介紹頁都能 1 小時內上線。延伸推薦看 Vibe 畫布完整教學 補基礎、看 Vibe 畫布 + Openverse 圖庫 學免費圖搭配。

常見問題

為什麼要用這份 prompt 模板，直接叫 AI 寫 HTML 不行嗎？

可以、但 AI 預設會做出「自由發揮」的 HTML——可能含 / 標籤、用 Google Fonts、CSS class 跟主題打架、甚至漏掉 SEO 結構。這份模板把所有「貼進 WordPress 不會出包」的條件都先寫死、AI 不需自己猜。

Vibe 畫布跟「自訂 HTML 區塊」有什麼差別？

自訂 HTML 區塊在文章／頁面內、會被佈景主題（Header／Sidebar／Footer）包住，CSS 跟 JS 容易跟主題打架。Vibe 畫布是 page-level 容器、不被主題包住、可承載完整 viewport 寬度的設計。對「我要做獨立活動頁／落地頁」、Vibe 畫布是正解。

我可以用 ChatGPT 免費版跑這個 prompt 嗎？

可以，ChatGPT 免費版能處理。不過產出品質跟一致性、Claude、Gemini或是ChatGPT的付費版較佳。總之，如果要做企業級頁面、建議用付費版 AI。

AI 給的 HTML 貼進 Vibe 畫布後不會跑、怎麼辦？

最常見 3 個原因：(1) AI 偷偷加 / 標籤、要手動刪 (2) JS 用了 ES module 的 import 寫法、要請 AI 改成 vanilla JS (3) CSS 用了太通用的 class（如 .button、.card）跟主題打架、要請 AI 加更具體的前綴。

產出的 HTML 對 Google SEO 真的有幫助嗎？

是。這份 prompt 強調語意化標籤、H2 → H3 → H4 不跳級、含 JSON-LD 結構化資料、不引入 Google Fonts（提升 Core Web Vitals）。這些都是 Google 排名因素跟 AI 搜尋引擎引用的關鍵訊號。

Prompt 模板會過時嗎？需要定期更新嗎？

會、建議每季回頭檢查一次。原因：第一、HTML／CSS 標準會升級（例如 2026 年 CSS Container Queries 已成主流、舊 prompt 沒提到、AI 產出可能還用 media query 老寫法）；第二、Google Core Web Vitals 評分項目會變動（INP 取代 FID、新增 fold-out 評分等）、prompt 應該跟著更新指令；第三、AI 模型本身在升級（GPT-5、Claude 4.5 對 prompt 細節敏感度不同）。秒站官方 prompt 模板會在每季季初發布更新版、訂閱秒站電子報會收到通知。