webflow

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Webflow Skill

Overview

概述

Enables Claude to use Webflow for professional website creation including designing pages, managing CMS content, configuring site settings, and publishing to production.

使Claude能够使用Webflow进行专业网站创建，包括设计页面、管理CMS内容、配置站点设置以及发布到生产环境。

Quick Install

快速安装

bash

curl -sSL https://canifi.com/skills/webflow/install.sh | bash

Or manually:

bash

cp -r skills/webflow ~/.canifi/skills/

bash

curl -sSL https://canifi.com/skills/webflow/install.sh | bash

或者手动安装：

bash

cp -r skills/webflow ~/.canifi/skills/

Setup

设置

Configure via canifi-env:

bash

undefined

通过canifi-env进行配置：

bash

undefined

First, ensure canifi-env is installed:

首先，确保已安装canifi-env：

curl -sSL https://canifi.com/install.sh | bash

canifi-env set WEBFLOW_EMAIL "your-email@example.com" canifi-env set WEBFLOW_PASSWORD "your-password"

undefined

canifi-env set WEBFLOW_EMAIL "your-email@example.com" canifi-env set WEBFLOW_PASSWORD "your-password"

undefined

Privacy & Authentication

隐私与认证

Your credentials, your choice. Canifi LifeOS respects your privacy.

你的凭据，你做主。 Canifi LifeOS尊重你的隐私。

Option 1: Manual Browser Login (Recommended)

选项1：手动浏览器登录（推荐）

If you prefer not to share credentials with Claude Code:

Complete the Browser Automation Setup using CDP mode
Login to the service manually in the Playwright-controlled Chrome window
Claude will use your authenticated session without ever seeing your password

如果你不想与Claude Code共享凭据：

使用CDP模式完成浏览器自动化设置
在Playwright控制的Chrome窗口中手动登录服务
Claude将使用你的已认证会话，且永远不会看到你的密码

Option 2: Environment Variables

选项2：环境变量

If you're comfortable sharing credentials, you can store them locally:

bash

canifi-env set SERVICE_EMAIL "your-email"
canifi-env set SERVICE_PASSWORD "your-password"

Note: Credentials stored in canifi-env are only accessible locally on your machine and are never transmitted.

如果你愿意共享凭据，可以将其存储在本地：

bash

canifi-env set SERVICE_EMAIL "your-email"
canifi-env set SERVICE_PASSWORD "your-password"

注意：存储在canifi-env中的凭据仅能在你的本地机器上访问，绝不会被传输。

Capabilities

功能

Design and edit website pages
Manage CMS collections and content
Configure site settings and SEO
Handle form submissions
Publish sites and staging versions
Access e-commerce features

设计和编辑网站页面
管理CMS集合与内容
配置站点设置与SEO
处理表单提交
发布站点和预发布版本
访问电商功能

Usage Examples

使用示例

Example 1: Add Blog Post

示例1：添加博客文章

User: "Add a new blog post to my Webflow site"
Claude: I'll create a new blog post.
1. Opening Webflow via Playwright MCP
2. Navigating to your project's CMS
3. Opening Blog Posts collection
4. Creating new item with content
5. Publishing the changes

用户："在我的Webflow站点上添加一篇新博客文章"
Claude：我将创建一篇新博客文章。
1. 通过Playwright MCP打开Webflow
2. 导航到你的项目CMS
3. 打开博客文章集合
4. 创建包含内容的新条目
5. 发布更改

Example 2: Update Product Info

示例2：更新产品信息

User: "Update the pricing on our premium plan page"
Claude: I'll update the pricing.
1. Opening your Webflow project
2. Navigating to the pricing page
3. Editing the premium plan component
4. Updating price values
5. Publishing to live site

用户："更新我们高级套餐页面上的定价"
Claude：我将更新定价。
1. 打开你的Webflow项目
2. 导航到定价页面
3. 编辑高级套餐组件
4. 更新价格数值
5. 发布到正式站点

Example 3: Check Form Submissions

示例3：查看表单提交记录

User: "Show me contact form leads from this week"
Claude: I'll retrieve this week's leads.
1. Accessing Webflow site settings
2. Opening forms section
3. Filtering to this week's submissions
4. Compiling lead information

用户："展示本周的联系表单潜在客户信息"
Claude：我将获取本周的潜在客户信息。
1. 访问Webflow站点设置
2. 打开表单部分
3. 筛选本周的提交记录
4. 整理潜在客户信息

Authentication Flow

认证流程

Navigate to webflow.com via Playwright MCP
Click "Log in" and enter email
Enter password
Handle Google SSO if configured
Complete 2FA if required (via iMessage)

通过Playwright MCP导航到webflow.com
点击"登录"并输入邮箱
输入密码
如果配置了Google单点登录，则进行处理
如果需要，完成双因素认证（通过iMessage）

Error Handling

错误处理

Login Failed: Retry up to 3 times, notify via iMessage
Session Expired: Re-authenticate automatically
Rate Limited: Implement exponential backoff
2FA Required: Send iMessage notification
Publish Failed: Check validation errors
CMS Error: Verify collection structure

登录失败：最多重试3次，通过iMessage通知
会话过期：自动重新认证
速率限制：实现指数退避策略
需要双因素认证：发送iMessage通知
发布失败：检查验证错误
CMS错误：验证集合结构

Self-Improvement Instructions

自我改进说明

When Webflow updates:

Document new design features
Update CMS management workflows
Track editor interface changes
Log e-commerce feature updates

当Webflow更新时：

记录新的设计功能
更新CMS管理工作流
跟踪编辑器界面变化
记录电商功能更新

Notes

注意事项

Webflow generates clean, production-ready code
CMS has item and collection limits by plan
Custom code can be added to pages
E-commerce requires specific plans
Staging URLs available for preview

Webflow生成干净的、可用于生产环境的代码
CMS根据套餐不同有条目和集合数量限制
可以向页面添加自定义代码
电商功能需要特定套餐
提供预发布URL用于预览