Divi 5 技能
将 Divi 5 页面布局生成为有效的构建器标记。该技能是模块化的：此文件将路由到重点参考文件 — 仅读取任务需要的文件。
🚦 构建页面的强制性工作流程（请勿跳过）
构建页面是一个有门控、多步骤的过程。不要直接跳到标记或调用 divi_create_page / POST /pages。
▸等待意味着：结束您的消息并等待用户实际回复。 不要提问后自己回答，也不要在同一轮中继续执行下一步。询问 → 停止 → 让用户回复 → 然后继续。这是模型在此处最容易出错的地方 — 您必须真正暂停。
- ▸等待 — 连接模式。 询问：是实时站点（Divi Connect）还是仅 JSON？如果是实时站点，获取站点 URL + API 密钥并调用
/design-system以加载真实令牌。（如果上下文明确，则跳过。） - ▸等待 — 发现（几乎总是需要）。 提出一组聚焦、批量的问题 — 目标/产品、受众、关键模块、品牌/风格、必需内容、主要 CTA（大约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 | 博客、作品集、文章模块、菜单、搜索、登录、侧边栏、评论、地图、循环生成器 |
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
- 博客/作品集/主题生成器： + MODULES-DYNAMIC
- WooCommerce 商店： + MODULES-WOOCOMMERCE
版本
V0.6.9 — 构建器版本 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 个现成的、主要原生的模块模式（英雄、定价、评价、常见问题、时间线、画廊、对比等），加上 divi_list_patterns 发现工具和 divi_build_page 保真度原语（背景图像覆盖、徽章、倾斜、可变字体）。v0.6.3 添加了 Divi 5.9.0 网格编辑器（gridOffsetRules；LAYOUT §5b）和一个“避免 AI 设计陈词滥调”章节。v0.6.0 添加了工具提示模块 + 高级文本样式批量。请参阅 DIVI5-COVERAGE.md 了解哪些内容是经过实际渲染测试的，哪些是经过源码验证的。