Framer

设计师用的可视化建站工具，AI生成整站并一键发布

核心功能

Framer由荷兰团队打造，从React原型工具演进为可视化建站与托管平台，画布即网站。内置Agent可按提示生成整页、改造CMS、写代码组件与翻译多语言，并支持切换GPT与Claude模型；也可经MCP让Cursor等外部工具直接操作站点。设计师、独立开发者与营销团队常用它做作品集与落地页。

功能亮点

画布即网站

编辑器里改什么，发布出去就是什么，无需交付研发

动效开箱即用

视差、入场、悬停等交互用面板配置即可完成

外部Agent接入

经MCP从Cursor改站点，不占用Framer积分额度

错了退积分

生成结果不满意点Mark as Bad可退回消耗

自定义模型 / 模型接入

第三方桥接

站内Agent可在多个大模型间切换，按倍率扣积分；也可经MCP接入自有Claude或OpenAI订阅运行External Agents，不消耗Framer积分。

接入方式

站内Agent面板直接切换模型
开启External Agents经MCP桥接
复用自有Claude/OpenAI订阅
积分按所选模型倍率计费

支持模型

GPT 5.5（默认基准）Claude Sonnet 4.6Claude Opus 4.8

bash

站点设置开启External Agents后接入MCP

适用场景

• 个人作品集与独立站
• SaaS产品落地页与官网
• 营销活动页快速上线
• 设计稿转可交互原型

安装配置

无需安装，浏览器打开 framer.com 注册即用；提供 macOS/Windows 桌面客户端与 iOS 预览App；外部Agent需在站点设置中开启 External Agents 并在 Cursor、Claude Code 等客户端配置 Framer MCP。

使用方法

bash

1) 注册后新建站点，选空白画布或从模板库起步
2) 在Agent对话框描述需求（如「SaaS落地页，含定价与FAQ」）生成首版
3) 回到画布用图层树和右侧样式面板调排版，切换断点做移动端适配
4) 新建CMS集合录入博客或案例，页面绑定集合模板批量出详情页
5) 给区块加Scroll、Appear、Hover等内置动效，预览模式实时验证
6) 需要多语言时购买Localization额度，让AI翻译各locale后逐条校对
7) 绑定自有域名，Pro计划先推Staging预览，确认后点Publish上线

关键指标

尚未核验对标产品，此处只列本工具自身指标，不做对比结论。

指标Framer

价格免费增值

开源否

上手难度进阶

Token 消耗中

优点

画布所见即所得，动效交互不写一行代码
自带全球CDN托管与SEO设置，发布即上线
Agent结果不满意可标记退还积分
编辑席位已降至约20美元/月，团队扩员便宜

缺点

CMS关系型能力弱于Webflow，电商仅能接简单Stripe
站点难以完整导出迁移，CMS内容与动效会丢失
AI积分有限，生成一个落地页约耗300积分
非设计背景用户容易在画布上误改布局