webflow-designer-api

Webflow Designer API

此技能可帮助用户通过两种工作流使用 Webflow Designer API。首先询问用户想使用哪种工作流；如果上下文已明确，也可以据此判断。

工作流

1. Designer 扩展

构建带有 UI 的完整扩展，以 iframe 的形式在 Webflow Designer 中运行。适用于可复用工具、复杂工作流，以及希望提供给团队或 Marketplace 的应用。 → 参见 references/designer-extension-workflow.md

2. Designer API Playground

直接在 Designer 内的 Playground 应用中编写并运行独立代码片段。适用于快速原型开发、测试 API 方法、学习 API 和一次性自动化。 → 参见 references/playground-workflow.md

参考文档

每个参考文件都包含 name、description 和 tags YAML frontmatter，便于搜索。使用 scripts/search_references.py 中的搜索脚本，可按标签或关键词快速查找相关参考资料。

Designer API 参考

两种工作流使用相同的 webflow.* Designer API。确定工作流后，使用这些参考资料编写实际代码：

• references/designer-apis-reference.md — 所有 webflow.* 方法汇总于一张表中（从这里开始）
• references/elements-api.md — 元素选择、插入、预设和元素构建器
• references/styles-api.md — 创建样式、设置 CSS 属性、断点和伪状态
• references/components-api.md — 组件定义、实例和编辑上下文
• references/pages-api.md — 页面和文件夹管理
• references/variables-api.md — 设计令牌变量和集合
• references/assets-api.md — 资源上传和管理
• references/extension-utilities.md — 站点信息、事件、通知、应用发现、身份验证
• references/error-handling.md — 错误结构、原因标签和恢复模式
• references/code-examples.md — 结合多个 API 的跨 API 工作流示例

设计与 Marketplace 参考

• references/design-guidelines.md — 打造原生 Webflow 风格的 UI 设计
• references/register-app.md — 注册 Webflow App 并配置功能
• references/marketplace-guidelines.md — Marketplace 审核标准
• references/app-submission-and-listing.md — 提交应用并创建列表
• references/faq.md — 常见问题和故障排除

搜索参考资料

# List all references with metadata
python scripts/search_references.py --list

# Search by tag (exact match)
python scripts/search_references.py --tag <tag>

# Search by keyword (across name, description, tags, and content)
python scripts/search_references.py --search <query>

脚本和资源

• scripts/search_references.py：按标签或关键词搜索参考文件，或列出所有文件及其元数据
• assets/webflow-variables.css — Webflow 设计系统的 CSS 变量
• assets/install-playground-prompt.md — 可复制的提示词，用于通过 Claude Cowork 或 Claude Chrome Extension 安装 Designer API Playground