Back to Details

webflow

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Webflow Skill

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

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:
  1. Complete the Browser Automation Setup using CDP mode
  2. Login to the service manually in the Playwright-controlled Chrome window
  3. Claude will use your authenticated session without ever seeing your password
如果你不想与Claude Code共享凭据：
  1. 使用CDP模式完成浏览器自动化设置
  2. 在Playwright控制的Chrome窗口中手动登录服务
  3. 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

认证流程

  1. Navigate to webflow.com via Playwright MCP
  2. Click "Log in" and enter email
  3. Enter password
  4. Handle Google SSO if configured
  5. Complete 2FA if required (via iMessage)
  1. 通过Playwright MCP导航到webflow.com
  2. 点击"登录"并输入邮箱
  3. 输入密码
  4. 如果配置了Google单点登录，则进行处理
  5. 如果需要，完成双因素认证（通过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:
  1. Document new design features
  2. Update CMS management workflows
  3. Track editor interface changes
  4. Log e-commerce feature updates
当Webflow更新时：
  1. 记录新的设计功能
  2. 更新CMS管理工作流
  3. 跟踪编辑器界面变化
  4. 记录电商功能更新

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用于预览