Divi 5 技能
將 Divi 5 頁面佈局建立為有效的 builder 標記。此技能是模組化的：此檔案會導向至專門的參考檔案 — 僅讀取任務所需的檔案。
🚦 建立頁面的強制工作流程（不可跳過）
建立頁面是一個有閘門、多步驟的流程。不要直接跳到標記或呼叫 divi_create_page / POST /pages。
▸等待意味著：結束您的訊息並等待使用者的實際回覆。 不要自行提問後又自行回答，也不要在同一輪對話中繼續進行下一步。提問 → 停止 → 讓使用者回應 → 然後繼續。這是模型在此常犯的第一號錯誤 — 您必須真正暫停。
- ▸等待 — 連線模式。 詢問：即時網站（Divi Connect）或僅 JSON？如果是即時網站，取得網站 URL + API 金鑰並呼叫
/design-system以載入實際的代碼。（若從上下文可明顯判斷則跳過。） - ▸等待 — 探索（幾乎總是必要）。 提出一組集中的問題 — 目標/提案、受眾、關鍵區段、品牌/調性、必要內容、主要行動呼籲（約 4–6 個，每個附帶合理的預設值），然後停止並等待。 簡短或籠統的摘要不足以跳過此步驟 — 例如「為一位商業導師建立頁面」並未告訴您提案、受眾、區段或 CTA 的任何資訊，因此您必須先提問，而非猜測。 僅在使用者提供了真正詳細的需求，或明確表示「直接做 / 直接建立」時，才能跳過探索。
- ▸等待 — 頁面計畫 + 核准。 呈現一份簡潔的書面頁面計畫（意圖 → 敘事 → 區段藍圖 → 哪些設計系統代碼對應到什麼）以及一行自我批評。然後明確要求使用者核准或修改，並停止。在使用者核准之前，不要產生標記或建立頁面。 如果使用者提供回饋，請修改、重新呈現並再次要求 — 反覆進行直到獲得核准。
- 建立。 僅在核准後：產生標記（使用真實代碼），然後建立頁面（即時模式）並回傳 URL。建立後，使用者仍可要求修改 — 套用修改（編輯/重新建立）並重新確認。
這是此技能的核心價值 — 計畫是思考過程；標記只是轉錄。完整方法：
DIVI5-DESIGN-PROCESS.md（請閱讀）。 唯一的繞過方式：使用者明確表示「直接建立 / 直接做」 — 然後以陳述的假設繼續進行，但仍須先顯示 2 行計畫。
建立時要讀取的參考檔案
- 始終：
DIVI5-BASE.md（規則/驗證）+DIVI5-DESIGN-PROCESS.md（上述工作流程）。 - 即時發布：
DIVI5-CONNECT.md（設計系統代碼、建立頁面）。 - 模組/樣式： 下表的功能檔案。
- 使用真實的設計代碼產生標記；在建立之前根據 BASE 進行驗證。
⚠️ 關鍵區塊標記規則（這些會導致頁面在無錯誤情況下空白）
即使您不讀取其他內容，也請閱讀這些規則。Divi Connect 伺服器端驗證器會拒絕違反規則 1–3 的頁面，因此正確處理它們可以避免呼叫失敗。
-
永遠不要將模組屬性包裝在
attrs中。 區塊名稱後的 JSON 就是屬性物件 — 將title/content/module/builderVersion放在頂層。 ❌<!-- wp:divi/heading {"attrs":{"title":{...}}} /-->→ 呈現為空白 ✅<!-- wp:divi/heading {"title":{...},"builderVersion": "5.11.1"} /-->（attrs僅在預設集定義中作為一個鍵 — 永遠不會出現在模組區塊中。） -
divi/text的內容鍵完全是content— 永遠不要使用body或text。 ❌"body":{...}或"text":{...}→ 呈現為空白 ✅"content":{"innerContent":{"desktop":{"value":"<p>Hello.</p>"}}}（body僅作為bodyFont樣式群組存在。） -
value中的 HTML 為原始傳遞（<p>、<strong>）— 永遠不要預先跳脫。 ❌"value":"<p>Hello.</p>"✅"value":"<p>Hello.</p>"同時將非 ASCII 排版字符編寫為數字 HTML 實體（長破折號—、彎引號’/“/”），或使用純 ASCII（-、直引號）。claude.ai 連接器會損壞原始的多字節字符，而 JSON\uXXXX跳脫序列會原封不動地通過傳輸，因此訪客會直接讀到它。 -
每個模組都需要
"builderVersion": "5.11.1"。自閉合模組結尾為/-->。 將整個頁面包裹在<!-- wp:divi/placeholder --> ... <!-- /wp:divi/placeholder -->中。
完整細節 + 所有其他陷阱：請閱讀 DIVI5-BASE.md。
⚠️ 當連線到即時網站時（Divi Connect / MCP）
呼叫 divi_get_design_system 後，您必須使用其代碼來建構：
- 對於每種顏色和尺寸 — 字型大小、間距、內距/外距、間隙、圓角 — 使用確切的
token字串（整個$variable(...)$），而不僅僅是顏色。當存在匹配的代碼時，不要硬編碼值（標題是第一號違規者 — 永遠不要硬編碼標題大小）。 - 永遠不要發明
gvid-/gcid-ID。僅使用/design-system回傳的 ID（除非回傳了確切的 ID，否則不要使用gcid-primary、gcid-heading、gvid-h1等）。發明的 ID 呈現為空白。 - 透過
label匹配（例如H1 Desktop、Section Gap）。僅在沒有代碼存在時才硬編碼。 詳情：DIVI5-CONNECT.md§3。
參考檔案
| 檔案 | 何時讀取 |
|---|---|
DIVI5-BASE.md | 始終 — 核心規則、巢狀結構、驗證、常見錯誤 |
DIVI5-DESIGN-PROCESS.md | 始終 — 在 JSON 之前的探索問題 + 頁面規劃 |
DIVI5-CONNECT.md | 透過 Divi Connect 外掛即時發布（讀取設計系統、建立頁面、管理代碼） |
DIVI5-WORDPRESS.md | 透過 REST API / WP-CLI 以程式方式建立頁面 |
DIVI5-LAYOUT.md | 頁面結構（區段/行/欄/群組）、網格佈局、全域佈局 |
DIVI5-STYLING.md | 背景、漸層 + 漸層變數、間距、邊框、排版、文字效果、長寬比、取景、變數、偽類別 |
DIVI5-MODULES-CONTENT.md | 標題、文字、按鈕、圖片、簡介、CTA、推薦、團隊、圖示、分隔線、程式碼、全寬頁首、SVG、時間軸、麵包屑 |
DIVI5-MODULES-INTERACTIVE.md | 手風琴、切換、分頁、聯絡表單、註冊、下拉式選單、Contact Form 7、互動 |
DIVI5-MODULES-MEDIA.md | 影片、畫廊、滑桿、影片滑桿、Lottie、音訊、前後比較圖片 |
DIVI5-MODULES-DATA.md | 計數器、定價表、社群、目錄、Instagram 動態 |
DIVI5-MODULES-DYNAMIC.md | 部落格、作品集、文章模組、選單、搜尋、登入、側邊欄、留言、地圖、Loop Builder |
DIVI5-MODULES-WOOCOMMERCE.md | 商店、單一產品、購物車與結帳模組 |
DIVI5-PRESETS.md | 全域預設集 — 儲存格式、attrs 鍵路徑、REST 端點、輔助工具 |
DIVI5-PATTERNS.md | 真實世界的佈局模式 + Python 產生輔助工具 |
DIVI5-COVERAGE.md | 哪些已確認、哪些已從來源驗證、哪些未測試 |
典型組合
始終從 BASE + DESIGN-PROCESS 開始。
- 登陸頁面（僅 JSON）： BASE + DESIGN-PROCESS + LAYOUT + STYLING + MODULES-CONTENT + PATTERNS
- 建構並即時發布（Divi Connect）： + CONNECT
- 透過 REST API / WP-CLI 匯入： + WORDPRESS
- 互動式區段： + MODULES-INTERACTIVE
- 媒體/影片： + MODULES-MEDIA
- 定價 / 計數器： + MODULES-DATA
- 部落格 / 作品集 / Theme Builder： + MODULES-DYNAMIC
- WooCommerce 商店： + MODULES-WOOCOMMERCE
版本
V0.6.9 — Builder 版本 5.11.1（追蹤 Divi 5.11.x 系列）。產生的標記上的 builderVersion 戳記應與您網站的 Divi 版本相符（目前安裝為 "5.11.1"；較舊的值仍可透過向後相容性匯入）。
🆕 v0.6.9 讓設計的字型大小從猜測變為提問 — 從 Figma 匯出的向量 PDF，或使用者提供了畫布寬度的螢幕截圖，確實帶有確切的字型大小，因此參考階梯增加了第四階和一個字型大小閘門：提問一次，然後將 size_policy exact | snap | presets 傳遞給 divi_build_page，並告知使用了哪一個。請參閱 DIVI5-CONNECT §「匹配參考」。
🆕 v0.6.8 涵蓋 Divi 5.11 的四個新模組 — divi/charts、divi/gravity-forms、divi/imagely-gallery、divi/payment-button — 以及其原生的 backdrop-filter 控制，它取代了此技能舊版本所教授的 Custom CSS 解決方法。請參閱 DIVI5-BASE §0。
🚨 v0.6.7 修復了一個讓行動裝置樣式在無錯誤情況下失效的中斷點錯誤： phoneWide 預設為停用且不發出任何 CSS — 請使用 phone。請參閱 DIVI5-BASE §6。
v0.6.6 是一個正確性發行版（相同 5.9.0 架構）。它修復了在 0.6.5 或更早版本下載的每個副本中錯誤的兩個規則，兩者都會無聲地失敗：text-transform 僅來自 capitalization（舊的 style:["uppercase"] 會乾淨地儲存但不發出任何內容），以及 htmlAttributes 將中斷點放在最外層 — htmlAttributes.desktop.value.{id, class}，而不是 htmlAttributes.id.desktop.value，後者不會呈現任何 id，因此頁面內的 #anchor 連結會失效。它還將豐富文字的跳脫規則統一到一個地方（原始 HTML，永遠不要預先跳脫），並記錄了原生的尺寸 → 對齊控制（module.decoration.sizing.{bp}.value.alignSelf），它取代了舊的 sizing.alignment 預設集路徑。新增了 DESIGN-PROCESS §11b（建立後的潤飾檢查）和 §8c（登陸頁面啟發式規則）、CONNECT §5（匹配參考）、PRESETS §1b（四層預設集模型），以及一個 Adobe Typekit / 非 Divi 字型區段（STYLING）。
v0.6.5 僅在 Divi Connect 外掛套件中發布 — 從未作為儲存庫發行版或下載提供 — 因此其說明已歸納在此：豐富文字內容記錄為原始 HTML，因為 JSON \uXXXX 跳脫序列會原封不動地通過 MCP 傳輸（舊的指導原則將字面上的 \u003cp\u003e 放在頁面上），而非 ASCII 排版字符基於相同原因使用數字 HTML 實體（—）。
v0.6.4 是一個文件/模式發行版（相同 5.9.0 架構）：它記錄了 Divi Connect 區段模式庫 — 28 個現成的、主要是原生的區段模式（英雄、定價、推薦、FAQ、時間軸、畫廊、比較表等），以及 divi_list_patterns 探索工具和 divi_build_page 保真度基元（背景圖片疊加、徽章、傾斜、可變字型）。v0.6.3 新增了 Divi 5.9.0 網格編輯器（gridOffsetRules；LAYOUT §5b）和一個「避免 AI 設計陳腔濫調」區段。v0.6.0 新增了工具提示模組 + 進階文字樣式批次。請參閱 DIVI5-COVERAGE.md 以了解哪些已進行實際渲染測試，哪些僅從來源驗證。