designer-tools

ページ構造

Webflow Designer でページ要素とコンポーネントを構築、検査、管理します。

重要な注意事項

すべての操作には必ず Webflow MCP ツールを使用してください：

• 他のツールを呼び出す前に、Webflow MCP の webflow_guide_tool を使用してベストプラクティスを確認してください
• Webflow MCP の data_sites_tool をアクション list_sites で使用し、対象サイトを特定してください
• Webflow MCP の de_page_tool を使用して、現在のページを取得したり、ページを切り替えたり、ページやフォルダーを作成したりしてください
• Webflow MCP の element_tool をアクション get_all_elements で使用し、ページ要素を取得してください
• Webflow MCP の element_tool をアクション select_element で使用し、特定の要素を選択してください
• Webflow MCP の element_tool をアクション add_or_update_attribute で使用し、要素の属性を更新してください
• Webflow MCP の element_builder を使用して、新しい要素を作成してください
• Webflow MCP の element_snapshot_tool を使用して、変更の前後に要素のビジュアルプレビューを取得してください
• Webflow MCP の style_tool を使用して、要素のスタイルを作成、更新してください
• Webflow MCP の de_learn_more_about_styles を使用して、サポートされているスタイルプロパティを確認してください
• Webflow MCP の data_components_tool をアクション list_components で使用し、サイトのすべてのコンポーネントを一覧表示してください
• Webflow MCP の data_components_tool をアクション get_component_content で使用し、コンポーネントを確認してください
• Webflow MCP の data_components_tool をアクション update_component_content で使用し、コンポーネントのコンテンツを更新してください
• Webflow MCP の data_components_tool をアクション get_component_properties で使用し、コンポーネントのプロパティを取得してください
• Webflow MCP の data_components_tool をアクション update_component_properties で使用し、コンポーネントのプロパティを更新してください
• Webflow MCP の de_component_tool を使用して、Designer 内のコンポーネントインスタンスを管理してください
• Webflow の操作には、他のツールや方法を使用しないでください
• すべてのツール呼び出しには、必須の context パラメーターを含めてください（15〜25語、三人称の視点）
• Designer への接続が必要です — ユーザーは Webflow Designer を開いて接続している必要があります

手順

フェーズ 1：調査

1. 最初に webflow_guide_tool を呼び出してください — どのワークフローでも、最初の MCP ツール呼び出しは必ずこれにしてください
2. サイトを取得します：data_sites_tool をアクション list_sites で使用し、対象サイトを特定します。サイトが 1 つだけの場合は、自動的にそれを使用してください。
3. 現在のページを取得します：de_page_tool を使用して、Designer でどのページがアクティブかを特定します
4. ユーザーが別のページを指定した場合：作業を進める前に、de_page_tool を使用してそのページに切り替えます
5. タスクの種類を特定します：
   • 検査：要素の一覧表示、構造の確認、プレビュー → フェーズ 2 に進みます
   • 構築／変更／削除：追加、更新、再構成、削除 → フェーズ 3 に進みます
   • コンポーネント：一覧表示、確認、更新 → 読み取りか書き込みかに応じて、フェーズ 2 またはフェーズ 3 に進みます

フェーズ 2：検査（読み取り専用の操作）

5. ページ要素を一覧表示します：de_page_tool を使用し、続けて element_tool を get_all_elements で使用して、ページ構造を取得します。セクション、要素、ネスト構造の概要を提示します。
6. 要素をプレビューします：element_snapshot_tool を使用して、特定のセクションのビジュアルプレビューを取得します
7. コンポーネントを一覧表示します：data_components_tool をアクション list_components で使用し、サイトのすべてのコンポーネントを一覧表示します
8. コンポーネントを確認します：data_components_tool をアクション get_component_content で使用するか、Designer のインスタンスには de_component_tool を使用します

フェーズ 3：計画（変更を加える前）

何かを作成、更新、削除する前に： 9. 現在の状態をキャプチャします：element_snapshot_tool を使用して、変更対象の領域をキャプチャします 10. 計画を提示します：作成、変更、削除する内容を具体的に説明します 11. 明示的な確認を求めます：作業を進める前に、ユーザーに確認します： - 「これらの変更を適用してもよろしいですか？」 - 「この作成を進めてもよろしいですか？」 - 「これらの変更を適用しますか？」 - 「変更を加える前に、実施内容を説明します：[plan]。続行する場合は確認してください。」 12. 破壊的な操作（削除、再構成）の場合：「confirm」または「delete」による確認を必須とし、子要素にも影響が及ぶことを警告します

フェーズ 4：実行（確認後のみ）

13. 要素を構築する：element_builder を使用して新しい要素を作成します（最大 3 階層）。より深い構造は、複数回に分けて構築します。
14. 要素にスタイルを適用する：style_tool を使用して、作成済みまたは既存の要素にスタイルを適用または更新します
15. 要素を変更する：element_tool の add_or_update_attribute を使用して、属性、テキスト、リンクを更新します
16. コンポーネントを更新する：data_components_tool の update_component_content または update_component_properties を使用します。Designer レベルのインスタンス変更には de_component_tool を使用します。
17. ページを作成する：de_page_tool を使用して、新しいページまたはフォルダーを作成します

フェーズ 5：検証

18. 結果のスナップショットを取得する：element_snapshot_tool を使用して、新しい状態をキャプチャします
19. 変更内容を報告する：行った変更を要約します

例

例 1：ページ要素を一覧表示する

ユーザー：「ホームページのすべての要素を表示してください」

1. webflow_guide_tool を呼び出してベストプラクティスを確認します
2. data_sites_tool で list_sites を呼び出し、サイトを特定します
3. de_page_tool を呼び出して、現在のページがホームページであることを確認します（必要に応じて切り替えます）
4. element_tool で get_all_elements を呼び出し、ページ構造を取得します
5. セクション、要素、階層を整理して要約を提示します

例 2：ヒーローセクションを構築する

ユーザー：「見出しと CTA ボタンを含むヒーローセクションを追加してください」

1. webflow_guide_tool を呼び出してベストプラクティスを確認します
2. data_sites_tool で list_sites を呼び出し、サイトを特定します
3. de_page_tool を呼び出して現在のページを取得します
4. element_snapshot_tool を呼び出して現在の状態をキャプチャします
5. 次の計画を提示します：「セクションに見出しとボタンを配置します。進めてもよろしいですか？」
6. 確認後、ネストされた構造を指定して element_builder を呼び出します
7. style_tool を呼び出してスタイル（パディング、背景、タイポグラフィ）を適用します
8. element_snapshot_tool を呼び出して結果を表示します

例 3：コンポーネントを更新する

ユーザー：「フッターの著作権表示を 2026 に更新してください」

1. webflow_guide_tool を呼び出してベストプラクティスを確認します
2. data_sites_tool で list_sites を呼び出し、サイトを特定します
3. data_components_tool で list_components を呼び出し、フッターを探します
4. data_components_tool で get_component_content を呼び出して内容を確認します
5. 次のように提示します：「著作権表示を「2025」から「2026」に更新します。進めてもよろしいですか？」
6. 確認後、data_components_tool で update_component_content を呼び出します
7. 変更内容を報告します

例 4：セクションを再構成する

ユーザー：「ヒーローセクションのレイアウトを再構成してください」

1. webflow_guide_tool を呼び出してベストプラクティスを確認します
2. data_sites_tool で list_sites を呼び出し、サイトを特定します
3. de_page_tool を呼び出して現在のページを取得します
4. element_snapshot_tool を呼び出して現在のヒーローセクションをキャプチャします
5. element_tool を呼び出して現在の構造を確認します
6. 変更前と変更後の説明を含む再構成計画を提示します
7. 確認後、element_tool および／または element_builder を使用して変更を適用します
8. element_snapshot_tool を呼び出して結果を表示します

例 5：2 列レイアウトを作成する

ユーザー：「左側にテキスト、右側に画像を配置した 2 列レイアウトを作成してください」

1. webflow_guide_tool を呼び出してベストプラクティスを確認します
2. data_sites_tool で list_sites を呼び出し、サイトを特定します
3. de_page_tool を呼び出して現在のページを取得します
4. element_snapshot_tool を呼び出して現在の状態をキャプチャします
5. 次の計画を提示します：「2 列のグリッドを作成し、左側にテキストブロック、右側に画像を配置します。進めてもよろしいですか？」
6. 確認後、グリッド構造を指定して element_builder を呼び出します
7. style_tool を呼び出してグリッドレイアウトのプロパティを設定します
8. element_snapshot_tool を呼び出して結果を表示します

ガイドライン

• すべてのワークフローで、最初に必ず webflow_guide_tool を使ってください — 他の MCP ツールを使う前に実行します
• 変更の前後にスナップショットを取得してください — 変更前と変更後に element_snapshot_tool を使い、結果を示します
• 黙って変更しないでください — 書き込み操作には、すべてユーザーの明示的な確認が必要です
• element_tool の前に de_page_tool を使ってください — 要素を調べる前に、必ずページを確認または切り替えます
• 一括変更の前に項目ごとのプレビューを提示してください — 複数の要素を変更する場合は、変更内容をそれぞれ列挙します
• 手動での配置よりも、Webflow のネイティブなレイアウトツール（Grid、Flexbox）を優先してください
• 複数のページで共有されるコンポーネントは、data_components_tool を使って更新してください（変更が反映されます）
• 特定のページにあるコンポーネントインスタンスには、de_component_tool を使ってください
• element_builder は、1 回の呼び出しにつき最大 3 階層まで対応します。より深い構造は段階的に構築してください
• 対応しているスタイルプロパティが不明な場合は、de_learn_more_about_styles を確認してください