Back to Details

framer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Framer Skill

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:

First, ensure canifi-env is installed:

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

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:
  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

功能

  • 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

认证流程

  1. Navigate to framer.com via Playwright MCP
  2. Click "Log in" and enter email
  3. Enter password
  4. Handle SSO if configured
  5. Complete 2FA if required (via iMessage)
  1. 通过Playwright MCP导航至framer.com
  2. 点击“登录”并输入邮箱
  3. 输入密码
  4. 若已配置则处理SSO（单点登录）
  5. 若需要则完成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:
  1. Document new design capabilities
  2. Update component creation workflows
  3. Track publishing process changes
  4. Log new integration features
当Framer更新时：
  1. 记录新的设计功能
  2. 更新组件创建工作流
  3. 跟踪发布流程的变化
  4. 记录新的集成功能

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功能以支持动态内容
  • 站点可导出为代码