webflow-mcp:figma-to-webflow

Figma → Webflow

Figma のデザインを、実際の要素、スタイル、アセット、フォント、（必要に応じて）カスタムコードとインタラクションを備えた、公開可能な Webflow プロジェクトに変換します。

手順

必ずこの順序で進めてください。手順に参考ファイルを読むよう記載されている場合は、その作業に着手する前に読んでください。各ファイルには、その手順で発生しやすい失敗が記載されています。

必ず守るゲート

これらは提案ではなく、ビルドの必須条件として扱ってください。条件を満たせない場合は、黙って代替手段を使うのではなく、作業を中断してトレードオフを説明してください。

• ブリッジのゲート： Designer Bridge をデフォルトのビルドモードとします。選択した場合は、Designer の起動リンク（MCP Bridge App を開く）を提示し、ブリッジに依存する手順を始める前に、ユーザーがそのリンクを開き、タブをフォアグラウンドに表示するまで待ちます。ブリッジが切断された場合は、構造に関する作業はヘッドレスのまま進め、スナップショットの取得やキャンバスの確認の前に再接続してください。
• ネイティブスタイルのゲート： スタイルの適用には data_style_tool を使用し、data_whtml_builder の css パラメーターや生の var() 文字列は使用しないでください。そうしないと、スタイルがネイティブのコントロールではなく、Custom properties に設定されます。Webflow 変数のバインドには variable_as_value を使用してください。
• 表示要素のゲート： Designer 上で実際に表示される要素とネイティブクラスを使ってビルドしてください。通常のレイアウト要素や装飾要素に、埋め込みの <style> ブロック、::before / ::after、その他の非表示の構造を使用しないでください。
• クラス作成のゲート： WHTML や要素のクラスリストで使用する前に、すべてのクラスを data_style_tool create_style で作成してください。存在しないクラス名は Webflow によって黙って削除されることがあります。
• 変数のゲート： スタイルを作成する前に、Webflow の変数やデザインシステムの方針を決めてください。ユーザーがハードコードされた出力を明示的に選択しない限り、繰り返し使う色、文字組み、間隔、角丸の値をハードコードしないでください。
• ベクターのゲート： ユーザーがラスター形式での代替を明示的に承認しない限り、ロゴ、アイコン、マークには PNG/JPG のアップロードではなく、インライン SVG の埋め込みを使用してください。
• ラスター品質のゲート： 鮮明さが重要な場合、ヒーロー画像、製品画像、モックアップ画像には、2 倍解像度のソースであることを確認した画像を使用してください。
• 破線アクセントのゲート： 破線、区切り線、グリッド、アクセント、下線には、ユーザーがブラウザーのデフォルトの破線パターンを明示的に許容しない限り、border-style:dashed ではなく repeating-linear-gradient を使用してください。
• ナビゲーションバーのゲート： カスタムナビゲーションバーのモバイル時の動作は、JavaScript ではなく CSS のみで実装してください。references/navbar.md のチェックボックス／兄弟セレクターのパターンを使用してください。
• 検証のゲート： レンダリング結果を検証するまでは、ビルドが完了したと判断しないでください。視覚的な検証ができない場合は、未検証の内容を伝え、ユーザーに確認を依頼してください。
• 機能確認のゲート： 該当するツールの経路をテストするか、未テストであることを明確に示すまでは、Webflow や MCP では何かが「できない」と断言しないでください。
• 公開のゲート： デフォルトでは公開しないでください。ビルドとレビューの完了後に限り、.webflow.io への公開を提案し、ユーザーから明示的な確認があった場合にのみ進めてください。

ツールの種類

種類	例	Designerを開く必要がありますか？
Data API（ヘッドレス）	data_whtml_builder、data_element_builder、data_element_tool、data_style_tool、data_fonts_tool、data_pages_tool、data_scripts_tool、data_assets_tool、公開	いいえ
Designer Bridge	element_snapshot_tool、designer_tool のキャンバス／選択／ナビゲーション、asset_tool upload_image_by_url	はい — Designerのタブを開き、前面に表示する必要があります

• 他のWebflowツールを使う前に、webflow_guide_toolを一度呼び出してください。whoamiとget_siteで認証とサイトを確認します。
• 視覚的なフィードバックを得やすいため、デフォルトではBridgeを活用して構築してください。そのうえで、DOM、クラス／スタイル、テキスト、セマンティックタグ、レスポンシブの上書き、フォント、スクリプト、ページ、アセットレコードにはdata_*ツールを使用します。
• Designerが切断された場合は、query_styles、get_all_elements、query_elementsを使ってヘッドレスで構造の作業を続けます。スナップショット、キャンバスの確認、Bridge接続が必要な画像処理のフォールバックがまだ必要な場合は、Bridgeを再接続します。
• Bridgeツールがstatus:falseまたは「Unable to connect to Webflow Designer」を返した場合は、Designer起動リンク（MCP Bridge Appを使ってDesignerを開きます）を提示し、ユーザーにリンクを開いてブラウザーのタブを前面に表示したままにするよう依頼します。バックグラウンドではアイドル状態になり、切断されるためです。問題が起きたと判断する前に、再試行してください。

ワークフロー

1. 情報を集めて方針を決める

1. Figma MCPを使用します。
   • 構造にはget_metadataを使用します。
   • 主要なフレーム／セクションにはget_design_contextを使用します。
   • 色、書体、間隔、角丸にはget_variable_defsを使用します。
   • ページ／キャンバスの背景色を確認します。白だと決めつけないでください。
2. Webflow MCPを使用します。
   • 最初にwebflow_guide_toolを使用します。
   • 対象のサイト／ページを確認し、既存の変数／スタイルを調べます。
3. 以下の必須設定に関する質問をします。
4. 構築前に、曖昧なデザイン意図を確認します。Figmaのコンポーネントインスタンスにプレースホルダーのラベルが繰り返し含まれている場合は、それをコピーせず、使用する文言を確認します。

必須の質問

Webflowの変数、クラス、CSSを作成する前に、次の4つの質問をします。

• 構築モード： 構築中にDesigner Bridgeを使用する（デフォルト。視覚的な品質確認に適していますが、Designerのタブを開いて前面に表示する必要があります）、または最初にヘッドレスで構築する（より高速ですが、Bridgeが必要になるまでは構造の確認のみ）。
• 変数／デザインシステム： 既存の変数を読み込み、不足分を作成する（デフォルト）、新しいデザインシステムを一から作成する、既存の変数のみを使用する、またはWebflowの変数を使わずに値を直接指定する。
• スタイルの命名： FlowKitの命名規則（デフォルト。webflow-mcp:flowkit-namingを参照）、既存のWebflowデザインシステムの命名規則、または明確で意味のあるケバブケースの名前。
• 単位： px（デフォルト）、rem、またはem。単位は一貫させ、明確な理由がある場合にのみ混在させます。

ユーザーが選択しない場合は、上記のデフォルトを使用します。空のサイトでは、新しいデザインシステムを一から作成することを推奨し、その理由を説明します。

2. 基盤とセクションを構築する

変数／クラス／スタイルを作成する前に、CSS rulesを読みます。

1. 選択した方針に従って、Webflowの変数を作成または対応付けます。
2. 再利用可能な基本要素を先に作成します。ページラッパー、コンテナー、タイポグラフィ、間隔、ボタン、画像の塗りつぶし、カード、ナビゲーションなどです。
3. WHTML／要素のクラスリストで参照する前に、data_style_tool create_styleで必要なクラスを作成します。
4. data_whtml_builderはDOM／構造のみに使用します。1回の操作につきルートセクションは1つとし、セマンティックタグ、入れ子構造、テキスト、既存のクラス名を指定します。
5. data_style_tool update_styleでスタイルを設定します。この手順を繰り返します。通常のスタイル設定にWHTMLのcssパラメーターを使ったり、<style>ブロックを埋め込んだりしないでください。
6. 返された要素IDを記録します。後でquery_elementsで再検索し、操作前にクラス／タイプが完全一致するものに絞り込みます。
7. セクション単位で構築します。視覚確認の合間には、query_elements／query_stylesでの構造確認を優先します。

3. アセットを添付する

画像やベクターを扱う前に、アセットと SVG を読んでください。

1. ラスターアセットには data_assets_tool create_asset を使用します。ソースのバイトデータをローカルにダウンロードし、MD5 を計算してから、署名付き URL の S3 に POST し、配置する前にサイズとバリアントが 0 でないことを確認します。
2. ヒーロー画像／製品画像／モックアップ画像は、配置前に 2x のソースを確認します。
3. set_image_asset でアセット ID を使って画像をバインドします。生の <img src="..."> に頼らないでください。
4. ベクターのマークは HtmlEmbed の SVG としてインライン化し、data_element_tool set_settings で埋め込みコードを設定します。
5. data_fonts_tool でフォントをアップロードします。<head> に Google Fonts の <link> タグを追加しないでください。

4. ナビバーとカスタム動作

ビルドにナビバーが含まれる場合は、構築する前にナビバーを読んでください。

• どのブレークポイントでハンバーガーメニューに切り替えるか確認します。
• Webflow ネイティブの Navbar は API/WHTML では作成できません。セマンティックなカスタムナビゲーションを構築するか、Designer でネイティブ要素を追加するようユーザーに依頼します。
• CSS のみで実現するコンポーネントの動作は、コンポーネントのルート内の HtmlEmbed に記述します。カスタムナビバーに JavaScript を使用しないでください。

5. レスポンシブ対応と QA

レスポンシブ／最終確認の前に、検証を読んでください。

1. ブレークポイント ID（main、medium、small、tiny）を指定して data_style_tool update_style を使用します。デスクトップファーストで、ベースを設定してから下位のブレークポイントで上書きします。
2. Designer Bridge が選択されている場合は、すべての要素ではなく、グループ／ラッパーのスナップショットを取得します。Designer のタブを前面に表示したままにします。
3. オーバーレイ／レイヤー構造は、セクション単体のスナップショットではなく、ページ全体の合成画像で確認します。
4. フォントについては最初のスナップショットを信用しないでください。キャッシュをウォームアップしてから再度スナップショットを取得し、その後でフォントの実装を変更します。
5. 制限があると断言する前に、ツールの機能をテストします。テストできない場合は「未テスト」と伝え、不確実な点を説明します。
6. 埋め込みの動作、カスタムコード、ぼかし、WebGL、アニメーション、モバイルの幅を、こちらで検証済みだと主張しないでください。プレビュー／公開サイトでユーザーに確認を依頼します。
7. 公開／レビューの次の手順を提案します。デフォルトは引き続き公開しないことです。

完了を宣言する前のチェックリスト

• 必要な参考ファイルを、それぞれ使用する時点で読んだ。
• すべての CSS がロングハンドで記述され、ブレークポイントが正しく、フレックスボックスを優先している。
• スタイルは data_style_tool（ネイティブコントロール）で適用し、変数は variable_as_value でバインドしている。カスタムプロパティとして残しているのは、真に非ネイティブな CSS（backdrop-filter、aspect-ratio、repeating-linear-gradient など）のみである。
• WHTML／要素のクラスリストで使用するすべてのクラス名が Webflow のスタイルとして存在し、暗黙に削除されたものがない。
• 通常のレイアウト／装飾要素に、埋め込みの <style> ブロックや ::before／::after 疑似要素を使用していない。
• ビルドモードに従っている。デフォルトでは Designer のタブを開いて前面に表示したブリッジ支援モードを使い、ユーザーが選択した場合はヘッドレスファーストで進めている。
• 選択した方針に従って Webflow の変数を扱っている。ハードコードを明示的に選択した場合を除き、繰り返し使う色／タイポグラフィ／間隔／角丸はマッピングまたは作成している。
• 画像はアセット ID で添付している（孤立した <img src> は使用していない）。鮮明さが重要な場合は 2× のソースを確認している。
• ベクターのマークは、背景を除去したクリーンなインライン SVG 埋め込みとしているか、ラスターへのフォールバックについてユーザーの明示的な承認を得ている。
• 破線のアクセント／区切り線／グリッドには、ユーザーがブラウザーのデフォルトの破線を明示的に承認した場合を除き、border-style:dashed ではなく repeating-linear-gradient を使用している。
• フォントをアップロードし、正確なファミリー名で参照している。一時的な <head> のリンクは削除している。
• 実行時に切り替わるクラスには、保証された CSS がある（削除されない）。
• medium／small／tiny にレスポンシブなオーバーライドを設定している。
• レンダリング結果を視覚的に検証したか、未検証の項目をユーザーに明確に報告している。
• 未テストの機能制限を事実として述べていない。
• サブドメインに公開した場合、自分では検証できない項目（埋め込み、WebGL、ぼかし、モバイル）について、ユーザーに確認を依頼している。