让 AI 帮你生成界面，最烦的是哪一步？我的答案是中间那段搬运：它给你吐一段代码，你复制、粘贴、跑起来，看着差不多，说"往左挪一点"，它又吐一段，你又复制粘贴。这个动作一周怎么也得有个七八回，每次都一样，每次都烦。
去年七月有个印度工程师做了个东西，把这段搬运整个删了。FlowChat，一个聊天应用，AI 的回答不是文本、不是 Markdown，是带着 CSS 和 JavaScript 的原始 HTML，浏览器直接注入 DOM。你在聊天框里说"把这个格子变成蓝色"，屏幕上的格子当场就蓝了——这个"当场"的瞬间，我知道自己回不去了。
先别急着说这不就是 AI 生成网页的套壳。它跟你见过的那些不一样。区别不在"AI 能写 HTML"，这个谁都能，而在整个应用的前提变了：模型返回什么，界面就被重写成什么。不是模型写代码、前端框架去渲染，模型直接就是那个界面。
这背后是一堆小决定叠出来的。最狠的一个，是它把默认值换了。
我们大多数人跟 AI 工具相处的模式是：模型的输出是文本，你人在中间当翻译——把它的意思转成操作，把它的代码搬进工程。FlowChat 把翻译这个岗位裁掉了。输出格式从文本换成 HTML 的那一刻，"聊天"这个动作的性质就变了，你在跟一个能直接操作你屏幕的东西说话。
但自由的代价是它真的会乱来。作者自己就踩过：AI 把消息标记放错容器，后续消息全注入到错的位置；生成的背景层盖住导航栏。听着像"AI 写代码 bug 多"的老问题，但在这里严重程度不一样——普通 AI 写错代码，你的编译器会拦；它直接改 DOM 改错了，屏幕上只有一堆错位的东西，没有报错、没有边界。
所以这个项目的真正工作量，不在"让 AI 生成界面"，而在"给 AI 的自由画围栏"。它的系统提示词大概 300 行，不只有"你要设计得好看"这种话，还把所有 CSS 变量的精确十六进制值、边框圆角、动画时长全给它钉死。评论里有人问样式怎么隔离，作者说靠四层：设计令牌、作用域样式、主题标记、结构隔离。听着像安全架构，其实就是因为 AI 一旦开始自由发挥，它真的什么色都敢用！背景层被限定在聊天视口里，z-index 设成 0，消息层 2，就这么个朴素的数字，把 AI 想画满全屏的冲动摁住了。⚡这一下才是这项目最值钱的地方：护栏不是靠约束提示词写的，是靠在结构上让 AI 没有越界的路。
还有个细节我特别想拆开看：它的流式协议支持在一条响应里更新页面多个区域，比如只更新一个游戏格子。用我们自己跑过的思路说，就是给 AI 的输出加了一套路由——标记哪个部分去哪，服务器在转发前把路由指令剥掉。它还借此拆了公开消息和私有消息：同一条响应里，对所有人广播一段，再单独给某个人传一句私话。反正模型返回的是一个能执行的东西，区分收件人这种逻辑也顺带交给输出格式自己带了。
得说句实话，聊到这儿我本来想写"这思路无敌，抄"。但有件事它真没解决。评论区有人捅了一刀，Ofri Peretz，说得挺准：AI 生成物直接进 DOM，AI 就成了你的安全信任边界；模型要是被人拿提示注入一忽悠，脚本就能拿页面完整权限干活。作者自己也没躲，承认没做沙箱化 iframe，提示注入可能有效。还有评论补了一句，这种模式上生产有可预测性的问题，当内部工具耍耍挺好，真要放出去得"AI 给建议、人来拍板"。我怎么看？一个炫酷 demo 不做沙箱，我完全能接受——当年的炫酷 demo 谁做安全了。但要是有人照着这个思路去做生产环境的东西，这道坎躲不掉。这就是我常说的那条线：自动化到"你还能一眼看懂发生了什么"就该踩刹车。你让 AI 直接操作你的 DOM，就得能看懂它每一步操作；做不到的话，就得让它待在笼子里。那个笼子，是下一步该有人做的事，不是这个项目缺了什么。
我不知道你会不会真的去部署它。倒是挺容易的，代码在 GitHub 上，一条 Wrangler 命令部署到 Cloudflare 免费层，密钥用 secret 命令存，不进仓库。但我猜大多数读者看完就是"哦还挺酷"，然后关掉标签页。没关系，这项目的真价值不是让你部署一个 AI 聊天室，是它提醒你：你天天用的那个 AI 工具，它的"输出格式"这个默认值，你换过吗。你还在花多少时间，把模型吐出来的抽象描述翻译回你的实际工作流？你可能不换聊天软件，但你八成还在干搬运的活。
我研究这个项目的时候看了大半天 CSS 变量和 z-index，纯属想知道一个人怎么给 AI 画围栏——研究了三个小时，省下来的时间大概能抵五秒。这笔账亏不亏？老实说，挺值的。
你要是想到了比"300 行系统提示词"更轻的护栏写法，教教我，留个抄作业的位置给你。