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 は RAW で渡されます（<p>,<strong>）— 決して事前エスケープしないでください。 ❌"value":"<p>Hello.</p>"✅"value":"<p>Hello.</p>"また、非ASCIIの字体は数値HTMLエンティティ（emダッシュ—、スマートクォート’/“/”）として記述するか、プレーン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 | ビデオ、ギャラリー、スライダー、ビデオスライダー、ロッティ、オーディオ、ビフォーアフター画像 |
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 — Builder Version 5.11.1（Divi 5.11.x ラインを追跡）。生成されたマークアップの builderVersion スタンプは、あなたのサイトの Divi バージョンと一致する必要があります（現在のインストールでは "5.11.1"、古い値でも後方互換でインポート可能）。
🆕 v0.6.9 ではデザインのフォントサイズを推測ではなく質問にしました — Figma からエクスポートされたベクターPDF、またはユーザーがキャンバス幅を指定したスクリーンショットは、実際の正確なタイプサイズを保持するため、参照ラダーに4番目のラングとフォントサイズゲートが追加されました: 一度質問し、size_policy に exact | snap | presets を渡して divi_build_page に通知し、どれが使用されたかを中継します。DIVI5-CONNECT §「参照と一致させる」を参照。
🆕 v0.6.8 は Divi 5.11 の4つの新しいモジュール — divi/charts、divi/gravity-forms、divi/imagely-gallery、divi/payment-button — とそのネイティブな backdrop-filter コントロールをカバーします。これは、このスキルの初期バージョンで教えていたカスタムCSS回避策に取って代わります。DIVI5-BASE §0 を参照。
🚨 v0.6.7 はモバイルスタイリングを静かに無効にするブレークポイントエラーを修正しました: phoneWide はデフォルトで無効であり、CSSを出力しません — phone を使用してください。DIVI5-BASE §6 を参照。
v0.6.6 は正確性リリースです（同じ5.9.0スキーマ）。0.6.5 以前にダウンロードされたすべてのコピーで間違っていた2つのルールを修正しました。どちらも静かに失敗します: text-transform は capitalization からのみ取得されます（レガシー style:["uppercase"] は cleanly に保存されますが何も出力しません）、そして 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（4レベルプリセットモデル）、および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 を参照してください。