五个 Webflow 代理技能，让 AI 编码代理真正能够与 Webflow 合作
Source: Dev.to
什么是代理技能？
代理技能是包含指令、脚本和参考文档的文件夹，AI 代理可以按需发现并加载——可以把它们视为知识包。当代理遇到缺乏上下文的任务时（例如，构建 Webflow Designer 扩展），它会读取相关技能并快速了解。
该格式最初由 Anthropic 开发并作为开放标准发布。现在它已被越来越多的代理产品支持，包括：
- OpenAI Codex
- Claude Code
- Cursor
- GitHub Copilot
- Gemini CLI
- OpenCode
- Roo Code
- Factory’s Droid
- …and many others.
每个技能包含一个 SKILL.md 入口文件、参考文档和辅助脚本。代理会解析这些文件，以了解 API 的工作方式、应遵循的模式以及需要避免的错误。
为什么我们构建这些
224 Industries 是一家位于澳大利亚布里斯班的 Webflow 高级合作伙伴。自 2016 年以来，我们为技术和 SaaS 公司打造了营销网站，例如：
我们在工作流中每天使用 AI 编码代理。问题在于：Webflow 的 API 在其网站上有详尽的文档，但代理在编写代码时并没有这些文档在上下文窗口中。于是只能靠猜测，导致出现幻觉式的方法和错误的输出。
Agent Skills 解决了这个问题。 代理不再需要猜测 Webflow Designer API 的工作方式，而是可以在需要时准确读取结构化的参考文档。自从我们在内部使用这些技能后，团队的产出质量立刻提升，于是我们决定将其开源。
五项技能
webflow-designer-api
使用 Webflow Designer API——可以通过构建 Designer 扩展（嵌入在 Webflow Designer 中的 iframe）或为 Designer API Playground 生成代码片段来操作。涵盖内容：
- 元素操作、样式、组件、页面、变量、资产
- 错误处理、CLI 使用、UI 设计模式
这是我们使用最频繁的技能。它包含每个 webflow.* 方法的参考以及针对构建扩展与在 Playground 中原型设计的工作流专用指南。
webflow-browser-api
通过 Browser API 在 JavaScript 中控制 Webflow Analyze 和 Optimize。涵盖内容：
- 全局
wf对象 - 同意管理（针对 OneTrust 和 TrustArc 的 CMP 集成）
- 实验变体跟踪
- 自定义访客属性
当需要管理跟踪同意、集成 CMP，或基于访客属性个性化体验时，此技能非常有用。
webflow-code-components
使用 DevLink 构建、定义并导入 React 代码组件到 Webflow。涵盖内容：
declareComponent定义及全部 11 种 prop 类型- Shadow DOM 样式、Webpack 打包、SSR 行为
- CLI 导入工作流
如果你在为 Webflow 构建自定义 React 组件，这项技能为代理提供完整的 DevLink 背景——从 prop‑type 定义到 Tailwind、Emotion、Material UI 等框架的特定样式指南。
webflow-webhooks
接收并验证 Webflow webhook。包括：
- HMAC‑SHA256 签名验证
- 所有 14 种事件类型及其负载模式
- 仪表盘创建和 API 创建 webhook 的设置指南
- 常见调试模式
该技能提供了带有正确签名验证和时间戳校验的 Express.js webhook 处理程序的可运行代码示例。
webflow-enterprise-api
仅限企业版的 API 端点，涉及工作区管理、审计日志、站点活动、301 重定向、robots.txt 配置以及常用文件。涵盖内容：
- 所有端点、必需的作用域、分页
仅对 Webflow Enterprise 工作区相关，但它填补了代理在这些端点上几乎没有上下文的空白。
Source: …
如何安装
最快的方式是使用 Vercel Skills CLI：
# 安装全部五个技能
npx skills add 224-industries/webflow-skills
# 只安装一个
npx skills add 224-industries/webflow-skills --skill webflow-designer-api
# 查看可用的技能
npx skills add 224-industries/webflow-skills --list如果你使用 Claude Code 或 Factory 的 Droid，可以将它们作为插件添加：
/plugin add 224-industries/webflow-skills它们同样适用于 Playbooks 和 Context7 的 CLI：
# Playbooks
npx p ...
# Context7
npx c7 ...（将省略号替换为相应工具的命令。）
Laybooks / Context7 安装
# Laybooks
laybooks add skill 224-industries/webflow-skills
# Context7
npx ctx7 skills install /224-industries/webflow-skills结构概述
每个技能都遵循 Agent Skills 规范。目录布局如下：
skills/webflow-designer-api/
├── SKILL.md # 入口文件，包含概览和参考索引
├── references/ # 详细的 API 文档、指南和示例
│ ├── elements-api.md
│ ├── styles-api.md
│ ├── components-api.md
│ └── …
├── scripts/
│ └── search_references.py # 按标签或关键字搜索参考文档
└── assets/
└── webflow-variables.css # 设计系统变量SKILL.md 文件充当目录索引。它为代理提供高级概览，并指明在何处可以找到详细的参考文档。代理通常先读取技能文件，然后根据手头任务拉取所需的具体参考资料。
每个参考文件都包含带有 name、description 和 tags 的 YAML 前置元数据，方便代理（以及人类）进行搜索：
python scripts/search_references.py --search "consent"
python scripts/search_references.py --tag "styles"我们在构建这些时学到的
- 简洁胜过详尽。 我们技能的早期版本太冗长。代理的上下文窗口有限，把每个边缘情况都塞进一个文件会让它们变慢且不够准确。将内容拆分为聚焦的参考文件，按需加载，产生了更好的结果。
- 结构比散文更重要。 表格、代码示例和清晰的标题比解释性段落对代理更有用。代理更快解析结构化内容，并在能够对示例进行模式匹配时生成更准确的代码。
- Front‑matter 有助于可发现性。 为每个参考文件添加标签和描述，使代理能够搜索所需内容，而不是阅读全部。每个技能中的搜索脚本进一步简化了这一过程。
贡献
该仓库接受贡献。如果您发现不准确之处、想添加更多示例，或对新的 Webflow 相关技能有想法，欢迎提交 PR。
您也可以使用随附的脚本来创建新技能的脚手架：
node scripts/add-skill.js ""这将自动创建文件夹结构并更新所有清单文件。
常见问题解答
哪些代理支持 Agent Skills？
Agent Skills 格式受到 Claude Code、Cursor、GitHub Copilot（via VS Code）、Gemini CLI、Roo Code、OpenHands、Goose、Factory Droid 等众多代理的支持。兼容代理的完整列表可在 agentskills.io 查看。
使用这些技能需要 Webflow Enterprise 计划吗？
不需要。五个技能中有四个可在任何 Webflow 计划下使用。webflow-enterprise-api 技能覆盖仅 Enterprise 可用的端点，因此需要 Enterprise 工作区才能使用该技能。webflow-browser-api 技能则需要在站点上启用 Analyze 或 Optimize 附加组件。
可以在没有 Claude Code 的情况下使用这些技能吗？
可以。Agent Skills 是开放标准，可在任何兼容的代理上使用。您可以根据所使用的代理，通过 npx skills CLI、Playbooks 或 Context7 来安装它们。
这些技能是 Webflow 官方维护的吗？
不是。这些技能由 224 Industries 构建并维护，224 Industries 是 Webflow 高级合作伙伴。参考内容来源于 Webflow 官方文档，并由我们的团队保持最新。
npx build‑skill
使用 npx build‑skill 构建您自己的 Agent Skills。
Memberstack Agent Skills
将 Memberstack Agent Skills 集成到 Memberstack CLI 以及 Memberstack 生态系统的其他部分——这是在 Webflow 和 Memberstack 上构建的开发者的完美技能。
由 Ben Sabic 构建，224 Industries 的兼职 CTO