上传一张图，说一句话：扣子空间让网页设计进入「所见即所得」时代
2025 年 7 月 22 日，WaytoAGI 社区「晚八点共学」邀请社区成员 AJ 和扣子官方的高雁（一枚扣子），围绕扣子空间（Coze Space）最新上线的网页设计功能进行了一场实操分享。两位讲师现场演示了如何通过上传参考图或 Figma 设计稿，用自然语言快速生成完整网页，并展示了大量真实案例。无论你是零基础小白、设计师，还是想快速验证产品概念的开发者，这篇文章都能帮你快速上手这个新功能。
两种核心玩法：参考图与 Figma 设计稿
扣子空间的网页生成功能目前完全免费，入口在 code.cn，打开网页版即可使用。AJ 强调，整个操作流程极其简单，核心就两种方式。
方式一：上传参考图
在 Pinterest、花瓣等设计灵感网站找到喜欢的页面风格，下载保存后上传到扣子空间。提示词可以非常简单，AJ 分享了自己的经验：「根据上传的附件图片样式制作一个一模一样的可互动的网页」。他特别提到，最初发现生成结果对参考图的遵循度不够，于是加上了「一模一样」这个关键词，效果立刻改善。
方式二：导入 Figma 设计稿
Figma 是在线的 UI 协作设计工具，很多公司的设计师尤其是 UI/UX 岗位会使用。操作步骤是：先在 Figma 中打开设计文件，选中画板（Frame），右键点击「Copy link to select」复制链接，然后将链接粘贴到扣子空间的 Figma 导入框中，再告诉它生成需求即可。AJ 展示了一个案例：他下载了一份 Figma 文件，让扣子空间「完全按照文件内容生成一个扣子空间的说明书」，最终还原度非常高。
生成后的编辑与微调
网页生成后，扣子空间提供了所见即所得的编辑能力，这是它区别于普通大模型生成网页的关键优势。
点击页面上的「编辑」按钮，可以直接框选任意元素，然后对它说话。比如选中一个按钮，告诉它「我不喜欢蓝色，把所有按钮改成淡蓝色」，系统就会自动修改代码并更新样式。高雁现场演示了这个过程，按钮不仅变了色，还加上了动态效果。
如果对整体布局或细节不满意，也可以直接在对话中提出修改要求。AJ 补充说，生成后的网页链接可以直接使用，无需重新发布，所见即所得。
案例展示：从工具站到点餐系统
高雁作为扣子空间的深度用户，分享了大量实战案例，展示了这个功能对不同需求的理解和实现能力。
AI 工具站：她与社区成员小白老师探讨做 AI 工具站时，仅提供了简单需求描述和几张配图，扣子空间就生成了一个具备完整登录注册、列表页面、工具介绍页面、分类检索功能的网站，甚至包含课程分类切换。
复刻 Product Hunt：高雁截了几张 Product Hunt 网站的图片上传，要求复刻，生成结果包含产品详情页、提交表单和完整的验证流程。
A 股数据大盘：她上传了一张配色好看的网页截图作为风格参考，要求开发一个 A 股数据大盘。生成结果不仅包含图表和配色，还集成了指数切换按钮，移动端适配也已完成。
花店点餐系统：高雁给了一张花店静态页面图片，要求「加一点点餐功能」，结果生成了可以浏览咖啡、添加购物车、结算的完整点餐系统。她指出，这类小型系统做前端演示和效果验证完全够用，支付接口和后台数据管理则需要后续自行接入。
AI 回忆录网站：为纪念抗战胜利 80 周年，高雁尝试做了一个给老兵用的回忆录网站，包含图片墙、分类浏览、照片放大切换等功能。
设计工具箱：她让 AI 先帮忙撰写详细需求，包括调色板、字体编辑、CSS 生成器、SVG 编辑器和图标库等模块，然后丢给扣子空间，生成的设计工具箱网站功能完整，配色、布局、导出 SVG 等都能实际操作。
数据接入与部署
针对大家最关心的「生成的网页如何连接真实数据」问题，高雁给出了几种方案：
- 下载代码后接入：将生成的代码下载，用 Tree（AI 编程工具）结合 API 或数据库地址，让 AI 生成增删改查的访问代码并绑定到页面。
- 通过扣子 API 调用多维表格：用扣子 API 调用飞书多维表格的 API，将数据返回到页面，比直接调用多维表格 API 更简单，因为扣子中间层已经处理了鉴权。
- 使用扣子自己的数据库：对于不懂数据库的用户，可以把扣子当成数据库，用智能体节点做增删改查，再通过智能体方式接到网页上，实现纯低代码操作。
高雁提醒，复杂的数据交互涉及安全性问题，建议交给专业程序员处理。部署方面，代码下载后可以直接放到 Tree、GitHub 或自己的服务器上运行，也可以将自有域名做映射指向生成的网页。
现场问答
Q：扣子空间生成网页需要提前加插件吗？ A：完全不需要。新建任务选「网页」即可，只有两个功能：导入 Figma 画板链接和上传多个附件。
Q：扣子空间和扣子有什么区别？ A：扣子空间属于超级智能体的范畴，集成了很多专家系统；扣子是包含扣子空间、开发平台、罗盘、代码框架的完整产品体系。普通人用扣子空间做小功能，想做智能体用开发平台，需要调优用罗盘，想自己开发扣子则用代码框架。
Q：用豆包或其他大模型直接生成 HTML 可以吗？ A：可以，但静态 HTML 文件无法进行二次开发。扣子空间生成的是完整的代码结构（如 React 框架），方便后续接入 AI 编程工具做系统开发。
Q：如何让按钮不那么呆板？ A：两种方式：一是用编辑功能选中按钮，直接提出修改需求；二是自己找好看的图标作为附件上传，让它参考。
要点回顾
- 扣子空间网页生成功能免费使用，入口
code.cn，支持网页版和安卓客户端，iOS 即将上线。 - 两种核心玩法：上传参考图（来自 Pinterest、花瓣等）或导入 Figma 设计稿链接。
- 提示词可以极简，如「根据上传的附件图片样式制作一个一模一样的可互动的网页」。
- 生成后可用「编辑」功能框选任意元素进行局部修改，所见即所得。
- 支持生成网页、APP、PPT、播客等多种模式，底层模型为豆包。
- 数据接入有三种方式：下载代码后用 Tree 接 API、用扣子 API 调多维表格、用扣子自己的数据库。
- 案例提交入口在 WaytoAGI 知识库首页的「直播共学」板块，优秀案例可能被官方收录并获得辅导。