AI 生成能力正从效果演示走向能进生产管线。作者拿一张工作中的原型线框图，在 Qoder 里从空目录开始，把构建、预览、发布、反馈、改版、重新发布完整跑了一遍，并验证了反馈数据的持久化与同链接更新。

到2026年9月为止，大家对 AI 的要求好像发生了不小的变化，AI 生成需要从“效果演示”走到了“能进生产管线”。做出来只是开头，能被人接着用才算完成。

这句话我在 Qoder 上线 Sites 能力后又想了一遍。对设计师来说，真正麻烦的往往不是把原型画出来，而是后面的几步：让它跑起来、变成链接、别人也可以点开体验、收到反馈后再改一版。

这次我拿一张工作中的原型线框图，在 Qoder 里从空目录开始，把“构建—预览—发布—反馈—改版—重新发布”完整跑了一遍。这里把完整过程记录下来进行分享。

发布不该是设计流程之外的另一件事

我的输入是一张很朴素的三屏线框图：欢迎页、选择兴趣、开启通知，右侧留一个反馈面板。这个需求背景其实很简单，就是公司的一个内容型产品（类似头条）在用户首次打开时，去让用户选择一些内容方向，来增加内容推荐的精准度。

但是这类方案也有一个问题，很多用户会嫌麻烦。所以我们想通过一个简单的原型来收集用户的满意度反馈来进一步确定方案。

我在 Qoder 里新建空项目

上传线框图然后输入：

参考这张线框图，用 React 和 Tailwind 做一个手机尺寸的三屏引导流程可点击原型：第一屏“欢迎”带插图占位和“开始”按钮；第二屏“选择兴趣”有六个可多选的兴趣标签和“下一步”按钮；第三屏“开启通知”有一个开关和“完成”按钮。页面右侧固定一个可折叠的反馈面板，测试者可以选择当前屏幕、打分 1 到 5、填写一句话反馈并提交。保持移动端可用，先在本地跑起来。

Qoder 随后创建 Vite、React 和 Tailwind 项目，安装依赖并启动本地预览。这些步骤 Qoder 都能自动完成，不用再手动折腾依赖环境，相对于以前安装依赖折腾半天，进步非常多。

更有意思的是，它在预览时发现窄屏下面板会挡住手机模型，于是直接继续修改 App.jsx，把反馈面板改成窄屏默认收起。

图｜Qoder 生成代码、启动本地预览并继续修复布局

我没有停在“页面看起来像那么回事”，而是把完整流程操作了一遍：

操作过程：

接着我回到对话框，只说了一句：把这个应用发布到 Sites，给我一个可访问的链接。

Qoder Sites立即完成构建、准备草稿和发布，然后就给出了固定域名：

同时提示了用户当前用户的设置为私有访问，如果想要分享给他人，你也能访问的话，需要在设置中改为任何人都可以访问。

（公众号现在放链接会违规这里就不展示出来了，实际上点Qoder中给出的链接就能直接打开）

Qoder Sites 把本地原型变成了一个可管理、可继续发布的在线站点；完成设置后同事就能直接打开。一份本地原型直接变成了在线链接，直接就能查看。

然后我继续测试了进阶的玩法，就是在查看原型的基础上，能否做到把数据都保存下来。这样这份内容就不仅仅是原型了，还可以用来做可用性测试。这在产品研发流程中同样非常有价值。

反馈确实能保存

随后我在Qoder中继续布置任务

第一版反馈面板使用 localStorage 保存记录。我在独立浏览器中选择“第二屏”、打 5 分并填写“标签好点了”，提交后列表从 0 条变成 1 条。随后刷新页面，这条记录仍然存在。

这证明了两件事：表单提交逻辑有效，浏览器刷新不会丢数据。这样一来，很多用户的真实反馈就能被产品开发团队拿到，来不断优化产品了。

以往需要研发配合的工作，现在借助Qoder懂需求的人也能独立完成大部分任务。

给这个原型加上后端与数据库：反馈面板提交的内容（屏幕编号、评分、一句话反馈、提交时间）要写入数据库并持久保存；页面底部加一个“全部反馈”列表，按时间倒序显示所有人提交的反馈，打开页面时自动加载最新数据。完成后重新发布到 Sites。

前端修改与同链接重新发布

在实际工作中，我们输出的原型会由于各方的修改意见不断变化。之前一个很大的痛点是文档修改前后链接会发生变化。所以查看原型的同事有的时候会搞混，降低沟通效率。

这次使用Qoder的过程中，我同样遇到了需要修改的情况：

第一、二屏的兴趣标签在移动端放大到至少 44 像素高，标签之间的间距加大，改成三行两列排布；第二，反馈面板默认收起为屏幕右侧的一个小标签，点击后再展开，展开时不遮挡底部主按钮。改完后重新发布到 Sites。

Qoder 修改了标签布局和面板逻辑。中途一次 JSX 替换造成结构错误，它重新读取相关代码并修复，随后构建成功。修改前，六个标签较小并挤在两行；修改后，每个标签至少 48px 高，变为三行两列。

重新发布后，我在 Sites 预览里再次点选“科技”，按钮进入选中状态，“下一步”恢复可点击；继续进入第三屏也正常。反馈面板默认收起，展开后手机模型会向左让位，底部主按钮没有被遮住。

这次更新沿用了原来的域名，没有另起地址。对原型评审来说，这一点非常实用：同事拿到的仍然是同一条链接，版本变化由发布流程承接，不需要重新导出和解释“请看第二个附件”。

实际上这种构建—发布—生成可访问链接的能力除了发布原型，还有很多应用场景，例如我在做一些公司的研究报告时，同样可以使用这个能力。

我继续测试使用Qoder + QWEN3.8-flash制作了阿里巴巴2026年的一份研究报告。

调研的过程收集了多个可信来源的信息，汇总形成了分析

而使用Qoder的另一项优势则是：生成的报告是带有精美排版的可访问链接，以往一些其他产品同样可以生成研究报告，但是生成的可能是 Word 格式的文档，那个排版真是一言难尽。

给大家看一下Qoder生成的报告有多精美

我仔细读了一遍这份报告，可以说无论是从内容上还是视觉样式上都非常优秀。而且这份内容就像前面的原型一样，是可以直接变成一个可访问链接的。

也就是说，当我们想把这份报告发给老板看，无论在任何渠道发送，都能够保持这样精美的排版。同时 使用链接的方式访问也非常方便。

从一个人的原型，到团队可使用的站点

这轮实测之后，我对 Qoder Sites 的判断比“发布很快”又有了更深刻的理解。

第一，它确实把构建和发布连成了一个对话流程。原型从空目录到本地可点击，再到固定域名，中间没有跳去另一套部署工具。第二，同链接重新发布是真的好用。

反馈一旦转化为前端修改，旧地址刷新就能看到新版，这直接降低了小步迭代的心理成本。第三，后端、数据库和 Cloud Agent 不是一句提示词就一定自动拥有的能力，它们受账户套餐与配额约束；做团队试用前，应该先确认站点访问权限和后端能力是否已开通。

如果你准备拿 Qoder Sites 做第一个真实项目，我建议不要一上来就堆很多功能。可以试试本周真的要评审的原型，按下面顺序验收：

一个想法只有被做出来、被别人真正使用，才有机会继续变好。Qoder Sites 已经把“从本地成果到在线站点”的距离压得很短；至于能不能走到多人共享数据和 Agent 协作，关键不是看演示，而是把权限、套餐和端到端证据一起验完。

如果你想试试的话现在还有“指定模型免费用”活动，9月18日至9月30日，Qwen-3.8-flash 免费用（国际版、CN 版同享）。每日登录Qoder客户端还能再领 100 通用Credits（新老用户都有份）。