Webflow Development

MCPツールとブラウザ自動化を使用して、Webflow Designerでピクセルパーフェクトなウェブサイトを構築します。

前提条件

• Webflow MCP Bridge Chrome拡張機能が接続済み（mcp__webflow__*ツールを提供）
• Claude in Chrome 拡張機能がブラウザ自動化用にインストール済み（ナビゲーション、クリック、JS注入）
• Webflow Designerが Chrome で開かれ、対象サイトがロード済み

コアワークフロー

1. 探索 — element_toolを使用して現在のページ構造を探索し、スタイル名で要素を検索
2. 構築 — element_builderを使用して新しい要素（DivBlock、Heading、Paragraph、LinkBlock、Image など）を作成
3. スタイル設定 — style_toolを使用して各ブレークポイントで CSS プロパティを適用
4. コンテンツ — element_toolのset_textを使用して Heading/Paragraph 要素にテキストコンテンツを設定
5. コンポーネント — componentパラメータ付きのelement_builderを使用してコンポーネントインスタンスを挿入
6. Code Embeds — ブラウザ自動化を使用して SVG、カスタム CSS、複雑なパターン用の Code Embed 要素を追加
7. QA — element_snapshot_toolを使用してスクリーンショットをキャプチャし、レスポンシブチェック用にブラウザをリサイズ
8. 公開 — data_sites_toolを使用してサイトを公開

ツールクイックリファレンス

ツール	目的
element_tool	要素を選択/検索、要素ツリーを取得、テキストを設定、要素を移動/削除
element_builder	新しい要素を作成（タイプ、親、位置、コンポーネントインスタンス）
style_tool	特定のブレークポイントでスタイルクラスの CSS プロパティを読み書き
element_snapshot_tool	要素またはページのビジュアルスクリーンショットをキャプチャ
variable_tool	デザイン変数を管理（色、フォント、スペーシング）
data_pages_tool	ページをリスト/管理
data_sites_tool	サイトを公開、サイト情報を取得
de_page_tool	ページレベルの設定（タイトル、スラッグ、SEO）
de_component_tool	コンポーネントを管理（作成、名前変更、インスタンスをリスト）
style_toolのget_styles	サイト上のすべての既存スタイルクラスをリスト
webflow_guide_tool	Webflow 固有の質問に回答（ドキュメント参照）

ブレークポイントシステム（重要）

Webflow はデスクトップファーストのカスケードを使用します。mainに設定されたスタイルは、オーバーライドされない限り下位に継承されます。

ブレークポイント	名称	幅	カスケード
main	デスクトップ	≥992px	デフォルト — すべての画面が継承
medium	タブレット	≤991px	main をオーバーライド
small	モバイルランドスケープ	≤767px	medium をオーバーライド
tiny	モバイルポートレート	≤478px	small をオーバーライド
xl	ワイド	≥1440px	main を上向きに拡張

ローカルのモバイルファースト コードベースから転送する場合は、references/breakpoints-and-styles.mdの対応表を参照してください。

ブレークポイントでスタイルを設定

style_tool → set_styles:
  styleName: "my-element"
  breakpoint: "main"          # または "medium", "small", "tiny", "xl"
  pseudo: "noPseudo"          # main ブレークポイントで既存プロパティを更新する場合は必須
  properties:
    font-size: "18px"
    color: "#1A2332"

既知の注意事項（必知）

1. pseudo: "noPseudo"は必須です — mainブレークポイントで既存プロパティを更新する場合。これがないと、値の変更が静かに失敗します。
2. overflowはショートハンドです — overflow-xとoverflow-yを個別に使用してください。
3. TextBlockタイプは DivBlock を作成します — set_textをサポートしません。テキスト要素にはHeadingまたはParagraphタイプを使用してください。
4. component: ""（空文字列）を使用したelement_builder はタイムアウトを引き起こします。常に有効なコンポーネント ID を渡すか、パラメータを省略してください。
5. 大きな要素ツリー — 複雑なページでget_elementsを使用したelement_toolは 100K+ 文字を返す可能性があります。スタイル名でフィルタリングするか、ファイルに保存して jq/Python で解析してください。
6. Designer がプレビューモード — workflow=sitePreviewを含む URL はスタイル編集をブロックします。このパラメータなしで Designer URL に移動してください。
7. MCP 接続が切断される — 「Unable to connect to Webflow Designer」というエラーが表示される場合は、?app=パラメータ付きで Designer URL に移動して MCP Bridge を再接続してください。
8. インラインスタイルが CSS をオーバーライド — 一部の Webflow インタラクション（アニメーションなど）は、transform: translate3d(...)のようなスタックインラインスタイルを残します。Code Embed で!importantを使用してオーバーライドしてください。

完全な注意事項リファレンスと解決策については、references/gotchas.mdを参照してください。

セクションコンテナパターン

すべてのページセクションには、コンテンツがビューポート端に接しないようにするためのコンテナ制約を含める必要があります：

• main: max-width: 1200px、margin-left: auto、margin-right: auto
• medium: padding-left: 40px、padding-right: 40px
• small: padding-left: 20px、padding-right: 20px

ワークフロー：ローカルプロジェクトを Webflow に転送

ユーザーがローカルウェブプロジェクト（React、Vue、HTML/CSS など）を持っていて、それを Webflow で複製したい場合：

1. ローカルコンポーネントを読む（TSX/HTML + CSS）構造、スタイル、コンテンツを理解するために
2. CSS 変数をマップ 各ブレークポイントでピクセル値に（var(--x)を実際の値に解決）
3. ローカルブレークポイントをマップ Webflow ブレークポイントに（ブレークポイント対応表を参照）
4. Webflow で要素ツリーを構築 element_builderを使用
5. スタイルを適用 style_toolを使用して、各 Webflow ブレークポイントで解決されたピクセル値を適用
6. テキストコンテンツを設定 element_tool → set_textを使用
7. SVG/カスタムコードを処理 Code Embed 経由（references/code-embeds-and-svgs.mdを参照）
8. QA — スクリーンショットを撮影し、ローカル開発サイトと比較

詳細なガイドについては、references/local-to-webflow.mdを参照してください。

ワークフロー：スクラッチから構築（Figma またはデザインなし）

1. デザイントークンを確立 — variable_tool経由で Webflow 変数を色、フォント、スペーシング用に作成
2. ページ構造を構築 — element_builder経由でセクション、コンテナ、グリッドを作成
3. トップダウンでスタイル設定 — mainブレークポイントから開始し、medium、small、tiny用にオーバーライド
4. 繰り返しパターンをコンポーネント化 — de_component_tool → transform_element_to_componentを使用
5. インタラクション/アニメーションを追加 — Code Embed で CSS アニメーション、または Webflow ネイティブインタラクションを使用
6. レスポンシブ QA — 各ブレークポイントをチェック、1440px、992px、768px、480px、375px でスクリーンショットを撮影

ワークフロー：再利用可能なコンポーネントを作成

1. 要素を通常の要素として最初に構築してスタイル設定
2. element_tool経由でルート要素を選択
3. de_component_tool → transform_element_to_componentを名前付きで使用
4. element_builderでcomponent: "<component-id>"を使用して、他のページにインスタンスを挿入
5. element_tool → set_text経由でインスタンスのテキストコンテンツをオーバーライド

デザイン変数を使用

一貫性のため、ハードコーディングされた値より Webflow 変数を優先します：

variable_tool → set_variable:
  collection_id: "<collection-id>"
  variable_id: "<variable-id>"
  value: "#FF4733"

スタイルで変数を参照：

style_tool → set_styles:
  properties:
    color: "var(--variable-id)"

variable_tool → get_variablesで既存の変数を検出します。

リファレンスファイル

• references/breakpoints-and-styles.md — ブレークポイント対応表、タイポグラフィスケールパターン、style_tool 例
• references/local-to-webflow.md — ローカルウェブプロジェクトを Webflow に転送するための詳細ガイド
• references/code-embeds-and-svgs.md — Code Embed 挿入、SVG 変換（JSX→HTML）、CodeMirror 注入、カスタム CSS パターン
• references/gotchas.md — 既知の問題、エラーメッセージ、回避策の完全なリスト