webflow-mcp:designer-tools

ページ構造

Webflow Designer でページ要素やコンポーネントを作成、検査、管理します。

重要な注意事項

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

• ほかのツールを呼び出す前に、Webflow MCP の webflow_guide_tool を使用してベストプラクティスを確認してください
• Webflow MCP の data_sites_tool でアクション list_sites を使用し、対象のサイトを特定してください
• Webflow MCP の data_pages_tool でアクション list_pages を使用し、名前またはスラッグで対象のページを見つけてください — ヘッドレスで、どのページにも対応します
• Webflow MCP の data_pages_tool でアクション create_page を使用して新しいページを作成してください — ヘッドレスです
• Webflow MCP の data_element_tool でアクション get_all_elements または query_elements を使用して、ページ要素を取得または絞り込んでください — ヘッドレスで、ページの ID を直接渡します
• Webflow MCP の data_element_builder を使用して新しい要素を作成してください — ヘッドレスで、ページの ID と親要素の ID を渡します
• Webflow MCP の data_element_tool でアクション set_attributes、set_text、set_style、または set_link を使用して要素を変更してください — ヘッドレスです
• Webflow MCP の element_snapshot_tool を使用して、変更前後の要素の視覚的なプレビューを取得してください — これは Designer ツールであり、Designer への接続が必要です
• Webflow MCP の data_style_tool を使用して、要素のスタイルを作成、更新してください — ヘッドレスです
• Webflow MCP の webflow_guide_tool を使用して、サポートされているスタイルプロパティを確認してください
• Webflow MCP の data_component_tool でアクション get_all_components または query_components を使用して、サイトのコンポーネントを一覧表示してください — ヘッドレスです
• Webflow MCP の data_component_tool でアクション get_component を使用して、コンポーネントのメタデータを調べてください — ヘッドレスです
• Webflow MCP の data_element_tool で scope_component_id を指定し、コンポーネントの内部要素（「コンテンツ」）を調べるか編集してください — ヘッドレスです
• Webflow MCP の data_component_props_tool を使用して、プロパティ定義を管理し、コンポーネントインスタンスにプロパティ値を設定してください — ヘッドレスです
• Webflow MCP の data_component_variants_tool を使用して、バリアントとバリアントごとのスタイル上書きを管理してください — ヘッドレスです
• Webflow MCP の data_component_tool でアクション insert_component_instance または unlink_component_instance を使用して、ページ上のコンポーネントインスタンスを管理してください — ヘッドレスで、Designer の接続は不要です
• Webflow MCP の designer_tool は、ライブキャンバスが必要な操作にのみ使用してください：get_current_page／switch_page（現在 Designer で開いているページ）、select_element／get_selected_element（キャンバス上でのインタラクティブな選択）、create_page_folder（ページフォルダーは Designer 専用で、ページ自体の作成とは異なります）、および open_component_view（コンポーネントのキャンバス表示）
• Webflow の操作には、ほかのツールや方法を使用しないでください
• すべてのツール呼び出しに、必須の context パラメーターを含めてください（第三者視点で、15～25 語）
• designer_tool の操作と element_snapshot_tool には Designer への接続が必要です。 要素、コンポーネント、プロパティ、バリアントの作成、スタイル設定、検査、更新（data_ ツール）は、data_pages_tool の list_pages から取得した明示的なページ ID を使ってヘッドレスで実行できます。ただし、このスキルが安全な変更のために使用する変更前後の視覚的なスナップショットには、Designer を開いて接続しておく必要があります。Designer を利用できない場合は、スナップショットの手順を省略し、代わりに query_elements の出力を使って変更を説明してください。

手順

フェーズ 1：調査

1. まず webflow_guide_tool を呼び出します — すべてのワークフローで、最初に呼び出す MCP ツールです
2. サイトを取得します：data_sites_tool のアクション list_sites を使用して、対象サイトを特定します。サイトが 1 つだけの場合は、自動的にそれを使用します。
3. 対象ページを取得します：data_pages_tool のアクション list_pages を使用して、名前またはスラッグからページを探します — Designer への接続は不要です。ユーザーが開いている Designer セッションで作業中で、「開いているページ」を求めている場合は、代わりに designer_tool のアクション get_current_page を使用します。
4. ユーザーが別のページを指定した場合：後続の呼び出しでは、そのページの ID を直接使用します — ヘッドレス操作ではページの「切り替え」は不要です。ユーザーが Designer キャンバス自体をそのページに移動したい場合にのみ、designer_tool のアクション switch_page を使用します。
5. タスクの種類を特定します：
   • 調査：要素の一覧表示、構造の確認、プレビュー → フェーズ 2 へ
   • 作成／変更／削除：追加、更新、再構成、削除 → フェーズ 3 へ
   • コンポーネント：一覧表示、調査、更新 → 読み取りか書き込みかに応じてフェーズ 2 またはフェーズ 3 へ

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

6. ページ要素を一覧表示します：data_element_tool の get_all_elements（またはタイプ／テキスト／属性で絞り込む場合は query_elements）を使用して、フェーズ 1 で取得したページ ID を渡し、ページ構造を取得します。セクション、要素、ネスト構造の概要を提示します。
7. 要素をプレビューします：element_snapshot_tool を使用して、特定のセクションのビジュアルプレビューを取得します — Designer が必要です
8. コンポーネントを一覧表示します：data_component_tool のアクション get_all_components または query_components を使用して、サイトのすべてのコンポーネントを一覧表示します
9. コンポーネントを調査します：メタデータ（props、バリアント）には data_component_tool のアクション get_component を使用します。または、コンポーネントの ID を scope_component_id に設定して data_element_tool を使用し、内部要素を調査します

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

何かを作成、更新、削除する前に、次の手順を実行します。 10. 現在の状態をスナップショットします：element_snapshot_tool を使用して、変更対象の領域を記録します — Designer が必要です。利用できない場合は、代わりに query_elements の出力から現在の状態を説明します 11. 計画を提示します：作成、変更、削除する内容を具体的に説明します 12. 明示的な確認を求めます：続行する前にユーザーに確認します。 - 「これらの変更を進めてもよろしいですか？」 - 「このまま作成してもよろしいですか？」 - 「これらの変更を適用してもよろしいですか？」 - 「変更を加える前に、実施内容をご説明します：[計画]。続行する場合は確認してください。」 13. 破壊的な操作（削除、再構成）の場合：「confirm」または「delete」という確認を必須とし、影響を受ける子要素について警告します

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

14. 要素を作成します：data_element_builder を使用して新しい要素を作成します（最大 3 階層）。ページ ID と親要素 ID を渡します。より深い構造は、複数回に分けて作成します。
15. 要素にスタイルを適用します：data_style_tool を使用して、作成済みまたは既存の要素にスタイルを適用または更新します
16. 要素を変更します：data_element_tool の set_attributes、set_text、set_style、または set_link を使用して、属性、テキスト、リンクを更新します
17. コンポーネントを更新します：data_element_tool（scope_component_id でスコープを指定）を使用してコンポーネントの内部要素を編集します。data_component_props_tool を使用して prop の定義またはインスタンスの prop 値を変更します。data_component_variants_tool を使用してバリアントを管理します。data_component_tool の insert_component_instance／unlink_component_instance を使用して、ページ上のインスタンスを追加またはリンク解除します
18. ページを作成します：data_pages_tool のアクション create_page を使用します。ページのフォルダーを作成するには、designer_tool のアクション create_page_folder を使用します — この特定のアクションには Designer への接続が必要です

フェーズ 5：確認

19. 結果のスナップショットを取得する：element_snapshot_tool を使用して新しい状態を取得します。Designer が必要です。利用できない場合は、代わりにツールの応答から変更内容を要約します
20. 変更内容を報告する：行った変更を要約します

例

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

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

1. ベストプラクティスを確認するため、webflow_guide_tool を呼び出します
2. サイトを特定するため、list_sites を指定して data_sites_tool を呼び出します
3. ホームページのページ ID を見つけるため、list_pages を指定して data_pages_tool を呼び出します
4. ページ構造を取得するため、そのページ ID を使用して get_all_elements を指定し、data_element_tool を呼び出します
5. セクション、要素、階層構造を整理して要約します

例 2：ヒーローセクションを作成する

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

1. ベストプラクティスを確認するため、webflow_guide_tool を呼び出します
2. サイトを特定するため、list_sites を指定して data_sites_tool を呼び出します
3. 対象ページの ID を見つけるため、list_pages を指定して data_pages_tool を呼び出します
4. 現在の状態を取得するため、element_snapshot_tool を呼び出します
5. 次の計画を提示します：「Section に Heading と Button を作成します。進めてもよろしいですか？」
6. 確認後：ネスト構造を指定して data_element_builder を呼び出します
7. スタイル（パディング、背景、タイポグラフィ）を適用するため、data_style_tool を呼び出します
8. 結果を表示するため、element_snapshot_tool を呼び出します

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

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

1. ベストプラクティスを確認するため、webflow_guide_tool を呼び出します
2. サイトを特定するため、list_sites を指定して data_sites_tool を呼び出します
3. フッターコンポーネントを見つけるため、query_components を指定して data_component_tool を呼び出します
4. 内部要素を調べて著作権表示のテキスト要素を見つけるため、scope_component_id を指定して data_element_tool を呼び出します
5. 次のように提示します：「著作権表示を「2025」から「2026」に更新します。進めてもよろしいですか？」
6. 確認後：scope_component_id を指定して set_text とともに data_element_tool を呼び出します
7. 変更内容を報告します

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

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

1. ベストプラクティスを確認するため、webflow_guide_tool を呼び出します
2. サイトを特定するため、list_sites を指定して data_sites_tool を呼び出します
3. 対象ページの ID を見つけるため、list_pages を指定して data_pages_tool を呼び出します
4. 現在のヒーローセクションを取得するため、element_snapshot_tool を呼び出します
5. 現在の構造を調べるため、query_elements を指定して data_element_tool を呼び出します
6. 変更前と変更後の説明を含む再構成計画を提示します
7. 確認後：data_element_tool（move_element、set_style など）や data_element_builder を使用して変更を適用します
8. 結果を表示するため、element_snapshot_tool を呼び出します

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

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

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

ガイドライン

• webflow_guide_tool は常に最初に使用します — すべてのワークフローで、ほかの MCP ツールを使う前に実行します
• 変更の前後にスナップショットを取得します — 変更前と結果の表示のため変更後に、element_snapshot_tool を使用します
• 通知せずに変更を加えてはいけません — 書き込み操作のたびに、ユーザーの明示的な確認が必要です
• 構築と編集にはヘッドレスを使用します — data_pages_tool の list_pages でページ ID を一度取得し、その ID を data_element_tool、data_element_builder、data_style_tool に直接渡します。ライブキャンバスが必要なタスク（現在のページの検出、インタラクティブな選択、ページフォルダー、コンポーネントのキャンバス表示）に限り、designer_tool を使用します
• ビジュアルスナップショットには Designer が必要です — element_snapshot_tool は Designer ツールです。Designer が接続されていない場合は、変更前後の確認を省略せず、代わりに query_elements／ツールの応答データから変更内容を説明します
• 複数の変更には項目別のプレビューが必要です — 複数の要素を変更する場合は、変更内容をそれぞれ列挙します
• 手動配置よりも、Webflow のネイティブなレイアウトツール（Grid、Flexbox）を優先します
• 複数のページで共有されるコンポーネントは、コンポーネントに範囲を限定して data_element_tool で更新します（変更はすべてのインスタンスに反映されます）
• コンポーネントインスタンスの管理（insert_component_instance、unlink_component_instance）は、data_component_tool を使ってヘッドレスで行います — Designer の接続は不要です
• data_element_builder は1回の呼び出しにつき最大3階層まで対応します — それより深い構造は段階的に構築します
• 対応するスタイルプロパティが不明な場合は、webflow_guide_tool で確認します