Back to Details

webflow-designer-api

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Webflow Designer API

Webflow Designer API

This skill helps users work with the Webflow Designer API through two workflows. Start by asking the user which workflow they'd like to use, or infer from context if it's obvious.
本技能可通过两种工作流帮助用户使用Webflow Designer API。首先询问用户想要使用哪种工作流，如果上下文明确也可直接推断。

Workflows

工作流

1. Designer Extensions

1. Designer Extensions

Build full extensions with a UI that run inside the Webflow Designer as iframes. Best for reusable tools, complex workflows, and apps you want to ship to a team or the Marketplace. → See references/designer-extension-workflow.md
构建带有UI的完整扩展，以iframe形式在Webflow Designer内运行。最适合用于可复用工具、复杂工作流，以及想要交付给团队或上架Marketplace的应用。 → 查看 references/designer-extension-workflow.md

2. Designer API Playground

2. Designer API Playground

Write and run standalone code snippets directly in the Playground app inside the Designer. Best for quick prototyping, testing API methods, learning the API, and one-off automations. → See references/playground-workflow.md
在Designer内的Playground应用中直接编写并运行独立代码片段。最适合快速原型开发、测试API方法、学习API以及一次性自动化任务。 → 查看 references/playground-workflow.md

Reference Documentation

参考文档

Each reference file includes YAML frontmatter with 
name
, 
description
, and 
tags
for searchability. Use the search script available in 
scripts/search_references.py
to quickly find relevant references by tag or keyword.
每个参考文件都包含带有
name
、
description
和
tags
的YAML前置元数据，用于搜索。可使用
scripts/search_references.py
中的搜索脚本，通过标签或关键词快速找到相关参考内容。

Designer API References

Designer API参考内容

Both workflows use the same 
webflow.*
Designer API. Once you know the workflow, use these references to write the actual code:
  • references/designer-apis-reference.md — All 
    webflow.*
    methods in one table (start here)
  • references/elements-api.md — Element selection, insertion, presets, and the element builder
  • references/styles-api.md — Creating styles, setting CSS properties, breakpoints, and pseudo-states
  • references/components-api.md — Component definitions, instances, and editing context
  • references/pages-api.md — Page and folder management
  • references/variables-api.md — Design token variables and collections
  • references/assets-api.md — Asset upload and management
  • references/extension-utilities.md — Site info, events, notifications, app discovery, authentication
  • references/error-handling.md — Error structure, cause tags, and recovery patterns
  • references/code-examples.md — Cross-API workflow examples combining multiple APIs
两种工作流都使用相同的
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工作流示例

Design & Marketplace References

设计与Marketplace参考内容

  • references/design-guidelines.md — UI design for native Webflow look
  • references/register-app.md — Registering a Webflow App and configuring capabilities
  • references/marketplace-guidelines.md — Marketplace review criteria
  • references/app-submission-and-listing.md — Submitting your app and creating a listing
  • references/faq.md — FAQ and troubleshooting
  • references/design-guidelines.md — 贴合Webflow原生外观的UI设计
  • references/register-app.md — 注册Webflow应用并配置功能
  • references/marketplace-guidelines.md — Marketplace审核标准
  • references/app-submission-and-listing.md — 应用提交及列表创建
  • references/faq.md — 常见问题及故障排除

Searching References

搜索参考内容

bash
undefined
bash
undefined

List all references with metadata

列出所有带元数据的参考内容

python scripts/search_references.py --list
python scripts/search_references.py --list

Search by tag (exact match)

按标签搜索（精确匹配）

python scripts/search_references.py --tag <tag>
python scripts/search_references.py --tag <tag>

Search by keyword (across name, description, tags, and content)

按关键词搜索（覆盖名称、描述、标签和内容）

python scripts/search_references.py --search <query>
undefined
python scripts/search_references.py --search <query>
undefined

Scripts and Assets

脚本与资源

  • scripts/search_references.py
    : Search reference files by tag, keyword, or list all with metadata
  • assets/webflow-variables.css
     — CSS variables for Webflow's design system
  • assets/install-playground-prompt.md
     — Copyable prompt for installing the Designer API Playground via Claude Cowork or the Claude Chrome Extension
  • scripts/search_references.py
    : 按标签、关键词搜索参考文件，或列出所有带元数据的参考内容
  • assets/webflow-variables.css
     — Webflow设计系统的CSS变量
  • assets/install-playground-prompt.md
     — 可复制的提示语，用于通过Claude Cowork或Claude Chrome扩展安装Designer API Playground