framerusercontent.com

Framer 开始听懂人话了 — Wireframer 10秒生成布局

Framer AI 工具，Wireframer，布局自动生成，响应式设计，无代码建站设计

面对空白画布，总是不知从何入手。这种感觉设计师都懂。Framer 显然深刻理解这个痛点——从零开始搭建布局框架既耗时又枯燥，每个项目都要重复一遍。Wireframer 就是为了消除这个问题而诞生的。

3秒总结

打开 Framer → 按下 W → 用文字描述布局 → 10秒生成响应式区块 → 编辑后直接发布

这是什么？

Wireframer 是 Framer 内置的 AI 布局生成功能。在 Insert 面板点击，或按快捷键 W，左侧边栏就会出现聊天界面。用文字描述你想要的布局，它就会帮你生成。

2025年5月 Framer Spring I/O 正式发布，发布即对全体用户开放，无需等待测试资格。核心价值在于：一句自然语言提示词，即可生成完整的响应式区块。导航栏、Hero 区块、图片占位符、文案——10秒内全部就位。

Framer 的规模让这个功能更有分量。目前超过 17.1 万个网站基于 Framer 构建，30% 以上的 YC 初创公司用 Framer 发布产品站。Perplexity、Miro、Superhuman 都在用。2025年8月，Framer 完成 D 轮融资 1 亿美元，估值达 20 亿美元。

10秒

布局区块生成时间

17万+

基于 Framer 的网站数量

30%+

使用 Framer 的 YC 初创公司

Wireframer 之外，同期发布的 AI 功能也值得关注，尤其是与 Workshop 的组合：

传统网页设计流程的问题是"开始阶段耗时太长"。Wireframer 之前，你要么在空白画布上一点点搭建，要么选一个模板再大改一番。一句提示词，直接跳过这整个阶段。

在一项基于 100+ 次实际生产构建的 Framer vs Webflow 对比中，速度方面 Framer 明显占优。从提示词到上线站点的时间实际更短，2025年11月谷歌趋势数据也显示 Framer(54) 已超越 Webflow(49)。

真实用户的评价

一位测试了 50 多次 Framer AI 的开发者总结：优点是 30 秒内生成、对多语言支持良好、免费上手。缺点是设计同质化、颜色识别不够精准。结论：「与其直接用于生产，不如作为快速原型工具。」

打开 Framer 项目
没有账号的话，在 framer.com 注册，免费计划即可上手。打开已有项目或新建一个。
启动 Wireframer
在 Insert 面板点击 Wireframer，或按快捷键 W。左侧边栏会打开 AI 聊天界面。
写具体的提示词
"做个落地页 Hero 区块"效果一般。"SaaS 应用落地页，深色背景，居中标题，2 个 CTA 按钮，下方附社会认可栏"效果会好得多。也可以选用预设提示词模板。
迭代完成后再手动编辑
重要提示：关闭聊天窗口，会话历史就会清空。先用 AI 把想要的效果搞定，再切到手动编辑。这个阶段也可以用 Workshop 添加交互组件。
发布
在 Framer 编辑器直接发布。连接自定义域名，确认响应式预览，点击上线。