framer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Framer Skill

Overview

概述

Enables Claude to use Framer for website design and development including creating pages, managing components, configuring settings, and publishing sites.

让Claude能够使用Framer进行网站设计与开发，包括创建页面、管理组件、配置设置以及发布站点。

Quick Install

快速安装

bash

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

Or manually:

bash

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

bash

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

或手动安装：

bash

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

Setup

设置

Configure via canifi-env:

bash

undefined

通过canifi-env进行配置：

bash

undefined

First, ensure canifi-env is installed:

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

canifi-env set FRAMER_EMAIL "your-email@example.com" canifi-env set FRAMER_PASSWORD "your-password"

undefined

canifi-env set FRAMER_EMAIL "your-email@example.com" canifi-env set FRAMER_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

功能

Create and edit website pages
Manage design components
Configure site settings and SEO
View and respond to form submissions
Publish sites to live URLs
Access analytics and performance data

创建和编辑网站页面
管理设计组件
配置站点设置与SEO
查看并回复表单提交内容
将站点发布到在线URL
访问分析与性能数据

Usage Examples

使用示例

Example 1: Update Page Content

示例1：更新页面内容

User: "Update the homepage hero text on my Framer site"
Claude: I'll update your hero section.
1. Opening Framer via Playwright MCP
2. Navigating to your project
3. Selecting the homepage
4. Editing the hero text component
5. Publishing the changes

用户："更新我的Framer站点上的首页英雄文本"
Claude：我将更新您的英雄区域。
1. 通过Playwright MCP打开Framer
2. 导航至您的项目
3. 选择首页
4. 编辑英雄文本组件
5. 发布更改

Example 2: Check Form Submissions

示例2：查看表单提交内容

User: "Show me recent contact form submissions"
Claude: I'll retrieve your form data.
1. Opening your Framer project
2. Navigating to forms section
3. Accessing contact form submissions
4. Listing recent entries with details

用户："显示我最近的联系表单提交内容"
Claude：我将获取您的表单数据。
1. 打开您的Framer项目
2. 导航至表单板块
3. 访问联系表单提交内容
4. 列出包含详情的最新条目

Example 3: Publish Site Updates

示例3：发布站点更新

User: "Publish my site changes to production"
Claude: I'll publish your updates.
1. Opening the Framer project
2. Reviewing pending changes
3. Clicking publish button
4. Confirming deployment
5. Verifying live site is updated

用户："将我的站点更改发布到生产环境"
Claude：我将发布您的更新。
1. 打开Framer项目
2. 查看待处理更改
3. 点击发布按钮
4. 确认部署
5. 验证在线站点已更新

Authentication Flow

认证流程

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

通过Playwright MCP导航至framer.com
点击“登录”并输入邮箱
输入密码
若已配置则处理SSO（单点登录）
若需要则完成2FA（双因素认证）（通过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 for errors and retry
Component Error: Debug and fix before publish

登录失败：最多重试3次，通过iMessage发送通知
会话过期：自动重新认证
速率限制：实现指数退避机制
需要2FA：发送iMessage通知
发布失败：检查错误并重试
组件错误：调试修复后再发布

Self-Improvement Instructions

自我改进说明

When Framer updates:

Document new design capabilities
Update component creation workflows
Track publishing process changes
Log new integration features

当Framer更新时：

记录新的设计功能
更新组件创建工作流
跟踪发布流程的变化
记录新的集成功能

Notes

注意事项

Framer combines design and development
Code components use React
Custom domains require paid plans
CMS features available for dynamic content
Sites can be exported as code

Framer兼具设计与开发功能
代码组件使用React
自定义域名需要付费计划
提供CMS功能以支持动态内容
站点可导出为代码