webflow-mcp:figma-to-webflow

Figma → Webflow

将 Figma 设计转换为上线的 Webflow 项目：包含真实元素、样式、 资源、字体，以及（可选的）自定义代码和交互。

说明

请严格按以下顺序操作。当某个步骤要求读取参考文件时，请先读取文件 再执行该步骤；这些文件包含该步骤中可能遇到的失败情况。

不可妥协的关卡

请将以下内容视为构建关卡，而非建议。如果无法满足其中任何一项，请停止 并说明需要权衡的事项，而不是默默替换方案。

• 桥接关卡： Designer Bridge 是默认构建模式。如果选择该模式，请提供 Designer 启动链接（打开时会在 Designer 中启动 MCP Bridge App），并等用户在该标签页置于前台时打开链接，然后再执行依赖桥接的步骤。如果桥接断开，请继续在无头模式下进行结构工作，并在截图或画布检查前重新连接。
• 原生样式关卡： 使用 data_style_tool 应用样式，绝不要使用 data_whtml_builder 的 css 参数或原始 var() 字符串。否则样式会落入 Custom properties，而不是原生控件。使用 variable_as_value 绑定 Webflow 变量。
• 可见元素关卡： 使用 Designer 中可见的真实元素和原生类进行构建。对于常规布局或装饰元素，不要使用 embed <style> 块、::before / ::after 或其他隐藏结构。
• 类存在关卡： 在 WHTML/元素类列表中使用类之前，先用 data_style_tool create_style 创建每个类。Webflow 可能会悄无声息地丢弃尚不存在的类名。
• 变量关卡： 创建样式前，确定 Webflow 变量/设计系统策略。除非用户明确选择硬编码输出，否则不要对重复使用的颜色/字体/间距/圆角进行硬编码。
• 矢量关卡： Logo、图标和标志必须使用内联 SVG embed，而不是上传 PNG/JPG，除非用户明确同意使用栅格图像作为备用方案。
• 栅格质量关卡： 对于对清晰度要求较高的 Hero/产品/样机图片，必须使用已确认的 2x 源文件。
• 虚线点缀关卡： 虚线、分隔线、网格、点缀线和下划线必须使用 repeating-linear-gradient，而不是 border-style:dashed，除非用户明确接受浏览器默认的虚线节奏。
• 导航栏关卡： 自定义导航栏的移动端行为必须仅使用 CSS，不得使用 JavaScript。请使用 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、publish	否
Designer Bridge	element_snapshot_tool、designer_tool 画布/选择/导航、asset_tool upload_image_by_url	是 — 必须打开 Designer 标签页并置于前台

• 在使用其他 Webflow 工具之前，先调用一次 webflow_guide_tool。通过 whoami + get_site 确认身份验证和站点。
• 默认优先使用 Bridge 辅助构建，以便获得更好的视觉反馈，同时使用 data_* 工具处理 DOM、类/样式、文本、语义标签、响应式覆盖、字体、脚本、页面和资源记录。
• 如果 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 之前，请先询问以下四个问题：

• 构建模式： 构建期间使用 Designer Bridge（默认，视觉质量检查更好；需要打开 Designer 标签页并置于前台），还是先使用无头模式（速度更快，但在需要 Bridge 之前只能进行结构检查）。
• 变量/设计系统： 读取现有变量并创建缺失项（默认）、从头创建新的设计系统、仅使用现有变量，或不使用 Webflow 变量并硬编码。
• 样式命名： FlowKit 命名（默认；参考 webflow-mcp:flowkit-naming）、现有 Webflow 设计系统命名，或清晰的语义 kebab-case 名称。
• 单位： px（默认）、rem 或 em。单位应保持一致；只有在理由充分时才混用。

如果用户未作选择，请使用上述默认选项。对于空白站点，建议从头创建新的设计系统，并说明原因。

2. 构建基础和版块

创建变量/类/样式之前，请阅读 CSS 规则。

1. 按照选定的策略创建或映射 Webflow 变量。
2. 先创建可复用的基础元素：页面包装器、容器、排版、间距、按钮、图片填充、卡片和导航。
3. 使用 data_style_tool create_style 创建所需的类，然后再在 WHTML/元素类列表中引用它们。
4. 使用 data_whtml_builder 仅处理 DOM/结构：每次操作创建一个根版块、语义标签、嵌套、文本和现有类名。
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，上传到预签名 S3，然后确认文件大小和变体均非零后再放置。
2. 放置主视觉／产品／模型图片前，确认源文件为 2 倍尺寸。
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 原生导航栏无法通过 API/WHTML 创建。请构建语义化的自定义导航，或请用户在 Designer 中添加原生元素。
• 仅使用 CSS 实现的组件行为应放在组件根节点内的 HtmlEmbed 中。自定义导航栏不要使用 JavaScript。

5. 响应式和 QA

在响应式／最终验证前，请阅读 验证。

1. 使用 data_style_tool update_style 和断点 ID（main、medium、small、tiny）。采用桌面优先：先设置基础样式，再向下覆盖。
2. 如果选择了 Designer Bridge，请对分组／包装器进行快照，而不是对每个元素都拍快照。保持 Designer 标签页在前台。
3. 使用整页合成图验证覆盖层／图层关系，而非孤立的分区快照。
4. 不要轻信首次快照中的字体显示；预热缓存并重新拍摄快照后，再修改字体实现方式。
5. 在断言功能受限之前，先测试工具的功能。如果无法测试，请说明“未经测试”，并描述不确定性。
6. 不要声称已在你这边验证嵌入内容、自定义代码、模糊效果、WebGL、动画或移动端宽度。请用户在预览／已发布的网站中确认。
7. 提供发布／审核的后续步骤。默认仍为不发布。

声明完成前的检查清单

• 已在需要时阅读所需的参考文件。
• CSS 均使用长属性；断点正确；优先使用 flexbox。
• 样式通过 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 嵌入（已移除背景），或用户已明确批准使用栅格图作为备用方案。
• 虚线点缀／分隔线／网格使用 repeating-linear-gradient，而非 border-style:dashed；除非用户明确批准使用浏览器默认虚线。
• 字体已上传，并通过准确的字体系列名称引用；临时 <head> 链接已移除。
• 运行时切换的类名有保证可用的 CSS（不会被移除）。
• 已在 medium／small／tiny 断点设置响应式覆盖样式。
• 已通过视觉检查验证渲染结果，或已明确告知用户未经验证的项目。
• 没有将未经测试的功能限制说成事实。
• 如果已发布到子域名，请用户确认你无法自行验证的内容（嵌入内容、WebGL、模糊效果、移动端）。