1. 基本信息
| 项目 | 内容 |
|---|---|
| 名称 | Figma → Webflow（figma-to-webflow-webflow-webflow-skills） |
| 作者/维护者 | Webflow, Inc.（webflow 官方 GitHub 组织），该技能主要提交者为具名员工 Keegan Leary（learyjk），仓库另有 viratatwebflow、jallegretti-webflow 等 9 名具名 Webflow 员工共同维护 |
| 来源链接 | github.com/webflow/webflow-skills/tree/main/plugins/webflow-skills/skills/figma-to-webflow |
| 许可证 | MIT（GitHub API 确认） |
| GitHub Stars | 合集仓库整体 105、Forks 16（GitHub API）；该数字属整个 webflow-skills 插件包，不代表本技能自身热度 |
| 最新版本 | 所属插件包 plugin.json 标注 “1.0.7”；技能自身未单独发版本号，随仓库滚动更新 |
| 安装方式 | Claude Code 插件市场一键安装，或 npx skills 跨 Agent CLI，或手工复制技能目录 |
2. 功能介绍与亮点
Figma → Webflow 是 Webflow 官方发布的设计稿落地技能：同时驱动 Figma MCP 与 Webflow MCP（Designer Bridge + Data API），把一个 Figma 文件/画板转译为 Webflow 项目里真实存在的页面、区块或组件——包含原生元素、样式、变量绑定、字体、素材，以及可选的自定义代码与交互，而不是一段贴过去就完事的代码片段。
核心能力：
- 双 MCP 编排：先用 Figma MCP 读取画板结构、设计变量（色彩/字号/间距/圆角）与背景，再用 Webflow MCP 在目标站点里逐步搭建，支持“Designer Bridge 实时可视化校对”与“headless 纯结构搭建”两种模式切换
- 12 条强制构建闸门：SKILL.md 明文列出一系列“不可协商”的构建规则，逐条对应 AI 辅助设计转建站过程中常见的失真点——例如样式必须用原生
data_style_tool写入而非硬编码 CSS 变量（否则会落入自定义属性而非原生控件）、引用的 class 必须先显式创建（Webflow 会静默丢弃未声明的 class）、图标/Logo 必须为内嵌 SVG 而非位图、移动端导航必须用纯 CSS 而非 JavaScript 实现 - 分阶段引用文档：css-rules、assets-and-svg、navbar、verification 四篇独立参考文档不会一次性全部载入，而是在对应构建步骤才提示读取，降低单次上下文负担
- 默认不自动发布：构建完成后仅提供
.webflow.io预览发布选项，需用户明确确认才会执行发布动作；同时要求在声明“完成”前必须做过可视化校验，无法校验的部分需如实告知用户
3. 适用场景
所属分类：前端与设计
适用于已有 Webflow 站点、需要把设计师交付的 Figma 稿件转换为可编辑真实页面的初中级前端开发者、独立站点搭建者与设计师——尤其是接单落地设计稿的自由职业者/小型建站团队，以及不写代码但希望把 Figma 原型直接变成可发布 Webflow 页面的非技术用户。
4. 跨 Agent 兼容性
- Claude Code：原生支持 ✅——README 提供插件市场安装命令，仓库另含
.claude-plugin清单 - Codex：原生支持 ✅——仓库另含
.codex-plugin清单，README 列出~/.codex/skills/手工安装路径 - OpenClaw：未验证 ❓——README 未点名，仅泛称“支持 Agent Skills 标准的任意 Agent”
- Hermes Agent：未验证 ❓——README 未点名
补充：README 另明确列出 Cursor、OpenCode、Pi 的安装路径，多平台覆盖面在同类厂商技能包中较完整。
5. 推荐理由
把 Figma 设计稿转成 Webflow 真实页面，原本容易在 AI 自动化过程中出现变量硬编码、语义标签丢失、class 静默失效、素材遗漏等一系列不易察觉的偏差——SKILL.md 里的 12 条构建闸门正是逐条针对这些失真点写下的强制规则，而不是泛泛的风格建议。对于经常要把客户/设计师交付的 Figma 稿落地成可发布 Webflow 站点的初中级从业者来说，这相当于把一份资深工程师的验收清单直接嵌进了 AI 的执行流程里，同时默认不自动发布、要求可视化校验，降低了“AI 自信满满交付了错误结果”的风险。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 7 | Webflow 为知名建站 SaaS 厂商，技能由官方组织发布；仓库有 10 名具名员工持续提交，且该技能本身在近一个月内有多次实质性文档修订；作为插件包内较新的子技能，尚未见独立于官方渠道之外的第三方平台具名讨论 |
| 可用性 | 7 | 需分别接入 Figma MCP 与 Webflow MCP 两个官方服务并完成各自授权，且 Designer Bridge 模式要求用户保持浏览器 Designer 标签页前台常开，配置门槛高于同插件包内的只读审计类技能；SKILL.md 与四篇独立参考文档结构完整、含具体操作步骤，技能目录近期仍有实质更新 |
| 安全性 | 9 | 见下方安全检查清单 |
安全检查清单：
| 检查项 | 结果 |
|---|---|
| ① Shell 命令与权限范围 | 无本地 Shell 命令；技能目录内仅含 SKILL.md 与四篇 Markdown 参考文档，全部操作通过用户自行接入的 Figma MCP / Webflow MCP 工具调用完成 |
| ② 运行时联网外发 | 仅与用户自行接入的 Figma 官方 MCP 端点与 Webflow 官方 MCP 端点（mcp.webflow.com）通信，读取/写入用户自己的设计稿与站点数据，目标透明；默认不自动发布上线 |
| ③ API Key/凭据存储 | 采用两个官方 MCP 服务各自的标准 OAuth 认证流程，技能本身不要求用户手动填写或存储密钥 |
| ④ 可疑指令排查 | 通读 SKILL.md 及四篇参考文档全文未发现提示注入或隐蔽指令迹象；文中反而多处明文约束 AI 行为边界，如“不得默认发布”“不得断言未经测试的能力为事实” |
| ⑤ 作者/组织信誉 | Webflow, Inc. 为知名建站 SaaS 公司，技能提交者为具名员工账号，无刷星或自我造假迹象 |
| ⑥ License | MIT，GitHub API 确认 |
| ⑦ 最近维护 | 该技能目录近一个月内仍有多次实质性文档修订，仓库整体近日持续提交，非弃置项目 |
7. 跟同类 Skills 相比的优势
| 方案 | 定位 | 与 Figma → Webflow 的差异 |
|---|---|---|
| Webflow Designer 内置的手工图层复制/粘贴 | 在 Designer 界面里手动重建 Figma 图层与样式 | 完全依赖人工逐层核对，无法被 Agent 对话式调用，也没有构建闸门约束一致性 |
| 通用设计转代码工具（如 Locofy、Anima、Builder.io Visual Copilot 一类产品） | 把 Figma 设计导出为通用 React/HTML/CSS 代码或独立托管页面 | 产出的是通用前端代码，不理解 Webflow Designer 原生的 Class、变量绑定与 Style 系统，导出结果通常需要二次改造才能接入 Webflow 项目 |
| 同插件包内的 Site Audit 技能 | 只读审计已有 Webflow 站点的页面与 CMS 结构，输出健康评分 | 功能方向互补而非重叠：Site Audit 面向“审计已存在的站点”，Figma → Webflow 面向“从设计稿出发搭建新页面/组件” |
Figma → Webflow 的差异化在于：它是少数专门理解 Webflow 原生元素/样式/变量体系、且以强制构建闸门系统性规避常见转译失真的设计落地技能，而非通用代码生成或纯人工操作。
8. 用户评价
该技能目前在第三方平台尚无具名用户评价。
9. 其他补充
该技能是 webflow-skills 官方插件包的一部分，同一插件包内还含 CMS 管理、站点审计、资源优化、Code Components、CLI 工作流、安全发布等二十余项其他 Webflow 技能，供有相关需求的用户在同一插件市场条目下按需触发。
10. 安装使用方式
Claude Code：
claude plugin marketplace add webflow/webflow-skills
claude plugin install webflow-skills@webflow-skills跨 Agent 安装 CLI：
npx skills add https://github.com/webflow/webflow-skills手工安装：
git clone https://github.com/webflow/webflow-skills.git
# 将 plugins/webflow-skills/skills/figma-to-webflow 目录（含 references/ 子目录）复制到对应 Agent 的 skills 目录安装后需分别接入两个官方 MCP 服务并完成授权：
claude mcp add --transport http webflow https://mcp.webflow.com/mcp
claude mcp add --transport http figma https://mcp.figma.com/mcp随后按提示分别完成两次 OAuth 认证，即可用类似“把这个 Figma 设计做成我的 Webflow 页面”的提示语触发；若选择 Designer Bridge 模式，需按提示打开 Designer 标签页并保持前台。
11. 注意事项
- 需要同时拥有 Webflow 账号与 Figma 账号，并分别完成两个官方 MCP 服务的一次性接入与授权，纯静态本地站点或未托管在 Webflow 的项目无法使用
- Designer Bridge 模式下若浏览器标签页被切到后台，连接会中断，需重新前台化后再继续构建
- Webflow 原生 Navbar 组件无法通过 API/结构化工具创建，涉及导航栏时技能会退而使用自定义语义化结构或提示用户在 Designer 里手动添加原生组件
- 目前仅验证了 Claude Code 与 Codex 的官方安装路径，OpenClaw 与 Hermes Agent 的兼容性未经验证
- 作为插件包内的一个子技能，安装后该插件包内其余二十余项技能会一并进入 Agent 的技能列表