两天,562个访客,没有投一分钱广告。这是 openconstructor 上线后的第一组数字。它是一个免费、开源的浏览器编辑器:你描述一个界面,AI 在画布上把它搭出来,之后你可以手动继续改,也可以让 AI 只改其中某一块。 整套东西跑在 Cloudflare Worker、Supabase 和免费开源模型上。真正有意思的不是它做出来了,而是做的过程中几个和直觉相反的发现。 小模型不会设计,那就别让它设计 内置的 AI 通过 Workers AI 调用开源模型(GPT-OSS 120B、Llama 3.3 70B)。它们能写出合法的 HTML,但你如果要一个"获奖级的电影感网站",每次给你的东西都不一样:有时不错,更多时候是一个平淡的 hero 加三张卡片。 靠提示词工程,大概只能再多挤出 20% 的效果。真正管用的是把活拆开:设计是一组手工做好的区块(带 CSS 3D 物体的 hero、滚动点亮的宣言、服务、案例、logo 墙等),模型只负责写内容,而且以 JSON 形式返回。 模型拿到一份带默认值的 schema,只回填这些字段:品牌名、色相、两行标题、服务列表、hero 配图描述。页面再由这些区块拼装起来。色相会旋转模板的强调色,咖啡烘焙商拿到琥珀色,AI 实验室拿到紫色。同一个模型,结果从"偶尔好看"变成稳定精致,耗时大约 6 秒。 结论很直接:模型弱的时候,把审美搬进代码,让模型去填空。 发布出去的页面,一行 JavaScript 都不跑 用户把页面发布到 openconstructor.pw/p/ 下。因为谁都能发布,每个页面都带着这样一条响应头:Content-Security-Policy: sandbox allow-forms ...; script-src 'none'。脚本完全禁用。 那页面为什么还像活的?现代 CSS 能覆盖的比想象中多。滚动驱动的动画靠 animation-timeline: view() 和 animation-range 实现,浮动的 3D 物体靠 perspective 加 preserve-3d,跑马灯用遮罩渐隐。全都不需要一行 JS。不支持这些特性的浏览器,就老老实实显示内容。 截图不需要服务器 沙箱有个副作用:页面处在不透明源下,画廊没法在 iframe 里测量或截图它。在服务器上跑无头 Chrome 成本又太高。 于是编辑器自己在发布时截图:先把页面放进隐藏 iframe 量出高度,再把 HTML 塞进一个 SVG,把 SVG 画到 canvas 上,导出 JPEG。Worker 在 KV 里存两张图,一张 1200×630 用于链接预览(og:image),一张整页图给画廊,鼠标悬停时滚动展示。每张大约 40 KB。 最大的错误:一道自己没看见的注册墙 上线后看数据:几百个访客,两个账号。查下来才发现,免费 AI 功能要求登录。大多数人打开编辑器,敲完提示词,迎面撞上一个登录表单。 现在的规则改了:访客不注册每天有 3 次免费生成(按哈希后的 IP 在 KV 里计数,IP 本身不存储);注册账号每天 20 次,外加云项目和发布权限。友好的引导出现在第一次好结果之后,而不是之前。 教训是:每次发布之前,用无痕窗口、以未登录状态把自己的产品走一遍。 它还能导出到 React、Vue、Svelte,甚至 Roblox UI 和 LÖVE 2D。作者说最想听的反馈,是 AI 输出在哪些地方崩了。 特别