Vibe 畫布 AI Coding

Vibe 畫布是秒站提供的自由頁面。你可以用 AI 協作產生 HTML、CSS 或 JavaScript，再把成果放進 Vibe 畫布；也可以搭配秒站原生區塊完成文字、圖片、表單與動態內容。

Vibe Coding 是製作方法，不是特定編輯器。秒站同時保留頁面編輯器與 Gutenberg，兩邊都能放入 AI 生成的程式碼。請依內容結構與自己的編輯習慣選擇。

Vibe 畫布可使用頁面編輯器原生區塊、頁面編輯器自訂 HTML 或 Gutenberg 自訂 HTML 三種工作流
同一種 Vibe Coding 方法，可以在頁面編輯器的自訂 HTML 或 Gutenberg 的自訂 HTML 中完成。

先選擇適合的工作流#

工作流適合情況主要優點
頁面編輯器＋原生區塊一般品牌頁、服務頁與活動資訊不用處理程式碼，內容容易維護
頁面編輯器＋自訂 HTML原生區塊中需要一段 AI 客製效果能控制程式碼在區塊清單中的位置
Gutenberg＋自訂 HTML已有整頁程式碼，或習慣原本的 Vibe 畫布流程可集中編輯完整 HTML、CSS 與 JavaScript

如果頁面大部分是標題、圖片、按鈕或表單，只有局部需要客製互動，建議選頁面編輯器。若 AI 已產出完整頁面，而且你習慣在 Gutenberg 管理整份程式碼，則可以繼續使用直接編輯。

建立 Vibe 畫布#

  1. 進入「網站設定 → 頁面編輯器」。
  2. 點擊上方頁面列旁的「＋」，選擇「Vibe 畫布頁」。
  3. 輸入頁面標題與網址代稱。網址代稱只能使用英文小寫、數字與連字號。
  4. 點擊「下一步」，選擇「頁面編輯器」或「直接編輯（Vibe Coding）」。

想先看完整建立流程與兩個選項的差異，請參考〈新增頁面與 Vibe 畫布〉。

做法一：在頁面編輯器進行 Vibe Coding#

  1. 建立 Vibe 畫布時選擇「頁面編輯器」，或開啟已有頁面編輯器區塊的畫布。
  2. 在左側按「新增區塊」，選擇「自訂 HTML」。
  3. 貼入已檢查的 HTML、CSS 或 JavaScript。
  4. 按「套用預覽」，確認程式碼與相鄰區塊的顯示結果。
  5. 拖曳自訂 HTML，將它放到需要的位置。
  6. 完成後按右上角「儲存」，再到前台檢查桌機與手機畫面。

這個做法適合混合使用。你可以先用主視覺與圖文區塊完成基本架構，再用自訂 HTML 加入計算器、互動卡片或特殊視覺，最後接上表單或行動呼籲區塊。

自訂 HTML 只有管理員可使用。一般文字、圖片與按鈕仍建議使用原生區塊，讓日後修改更直覺。

做法二：在 Gutenberg 直接編輯#

  1. 建立 Vibe 畫布時選擇「直接編輯（Vibe Coding）」。
  2. 閱讀畫面上的程式碼安全提醒與 Vibe 開發提示。
  3. 在預設的「自訂 HTML」區塊貼入 AI 生成的完整程式碼。
  4. 使用預覽確認版面，並依需要調整畫面寬度與間距設定。
  5. 更新頁面後，到前台檢查桌機與手機畫面。

這是 Vibe 畫布原本的操作方式。熟悉 Gutenberg 或已經建立舊畫布的使用者，不必改變工作習慣。既有畫布可從 WordPress 後台的「Vibe 畫布」清單開啟。

請 AI 產生程式碼時要說清楚什麼#

  • 使用目的：例如活動介紹、報價計算器或互動式比較表。
  • 內容與行動：列出標題、文案、欄位、按鈕文字與連結。
  • 版面要求：說明品牌色、字級、欄數、留白與手機版行為。
  • 隔離要求：請 AI 使用專屬外層 class，避免修改全站的 body、標題、段落或按鈕樣式。
  • 交付格式：要求提供可直接貼入自訂 HTML 的完整程式碼。

可直接搭配〈Vibe 畫布 Prompt 範本〉使用，再依自己的內容替換欄位。

貼上程式碼前後的檢查#

  • 只使用自己建立或來源可信的程式碼，不貼入來路不明的腳本。
  • 不要把 API 金鑰、後台密碼或其他機密資訊寫進前端程式碼。
  • 保留原始碼備份，方便在修改失敗時回復。
  • 檢查按鈕、表單、動畫與互動功能是否正常。
  • 確認桌機與手機沒有橫向捲動、文字截斷或元素重疊。
  • 若 JavaScript 因載入時機找不到頁面元素，改用該頁面的頁尾腳本欄位。操作方式請看〈Vibe 畫布頁尾腳本設定〉。

同一張畫布混用兩套工具時的順序#

同一張 Vibe 畫布可以同時保留 Gutenberg 內容與頁面編輯器區塊，但前台會先顯示 Gutenberg 內容，再顯示頁面編輯器區塊。這兩組內容無法在同一份清單中交錯排序。

如果要把 AI 元件放在主視覺與聯絡表單之間，請在頁面編輯器中新增自訂 HTML。若整張頁面都由一份完整程式碼組成，則使用 Gutenberg 直接編輯會更單純。

延伸閱讀#

常見問題

Vibe Coding 一定要使用 Gutenberg 嗎？

不用。頁面編輯器也提供自訂 HTML 區塊，可以貼入 AI 生成的 HTML、CSS 或 JavaScript，並與原生區塊混合排版。Gutenberg 則適合已有整頁程式碼或習慣原本工作流的使用者。

頁面編輯器的自訂 HTML 和 Gutenberg 自訂 HTML 怎麼選？

如果程式碼只占頁面的一部分，而且要放在原生區塊之間，選頁面編輯器的自訂 HTML。若整張頁面主要由一份完整程式碼組成，或你習慣 Gutenberg，則使用直接編輯。

同一張 Vibe 畫布可以同時使用兩套工具嗎？

可以，但前台會先顯示 Gutenberg 內容，再顯示頁面編輯器區塊。兩組內容不能交錯排序，因此需要精確安排位置時，建議在頁面編輯器中使用自訂 HTML。

貼入 AI 生成的程式碼前要注意什麼？

先確認程式碼來源，避免寫入 API 金鑰、密碼或其他機密資料，並要求 AI 使用專屬外層 class，避免改動全站樣式。上線前還要測試桌機、手機、連結與互動功能。

JavaScript 找不到頁面元素時怎麼處理？

這通常與程式碼執行時機有關。可把需要等待頁面內容出現的 JavaScript 改放到該頁面的頁尾腳本欄位，再重新測試。