开源界面搭建器支持 AI 局部修改

搭页面的 AI 工具不少，openconstructor 想解决的是另一件事：先用现成组件和 AI 拼出可编辑界面，再把结果带到 React、Vue、Svelte，甚至 Roblox 和 LÖVE 2D。它免费、免安装，源码采用 MIT 协议。

这款工具最值得看的是导出思路：网页框架拿组件文件，游戏引擎则拿浏览器实际渲染后的布局快照。但能还原外观，距离可交付的应用还有多远？作者给出的能力边界，比支持多少种格式更有参考价值。

先用组件搭骨架，再让 AI 改局部

openconstructor 是浏览器里的界面搭建器，内置 145 个组件，分为 12 个类别，覆盖 AI & Chat、仪表盘与图表、定价与交易、登录认证、导航、落地页区块和视觉效果等。聊天窗口、提示词输入框、「思考中」指示器、Agent 步骤都有现成素材，动画组件在目录中悬停即可预览。

这些组件使用普通 HTML + CSS，不绑定某个前端框架。用户可以直接双击文字修改内容，也能通过属性面板调整颜色、尺寸、字重、圆角和内边距。它提供的是一条混合工作流：确定的改动用面板操作，需要生成或重设计时再找 AI。

AI 采用自带密钥的方式，支持 OpenRouter、Google Gemini、Groq、Cerebras、Mistral、DeepSeek、OpenAI、Anthropic、xAI 和 Together。输入「包含三个套餐的定价区块」，结果就会进入画布；先选中元素，则只修改该元素。作者表示，密钥保留在浏览器中，只发送给用户选择的提供商。

作者还推荐 Groq 免费方案中的 GPT-OSS 120B，以及 Gemini Flash，但没有给出质量、延迟或成本对照。这只能视为作者的使用经验。

另外两个入口更偏探索：粘贴截图，视觉模型会将其重建为可编辑 HTML/CSS，支持 Ctrl+V；Fusion 则通过「右键组件 → fuse with… → 点击另一组件」，把前者的功能与后者的视觉风格结合。例如登录表单配上玻璃拟态卡片，生成新的玻璃风格登录界面。作者也把 Fusion 明确称为实验，没有提供成功率或稳定性数据。

导出到 Roblox，靠的是渲染结果

openconstructor 的导出能力需要分开看：

• HTML 导出为一个自包含文件，React、Vue、Svelte 导出为可用的组件文件。
• Roblox 导出 Luau LocalScript，放进 StarterPlayerScripts 后按 Play 即可查看。
• LÖVE 2D 导出 main.lua，通过 love.graphics 绘制布局。
• Flutter、SwiftUI、Jetpack Compose、Tailwind 属于 AI 辅助迁移，作者将其定位为需要审查的起点。

Roblox 和 LÖVE 的转换方式最有意思。它们读取浏览器里已经渲染完成的元素位置、尺寸、颜色、圆角、边框和文字，再生成目标平台的原生 UI 代码。可以把它理解为：先量好网页上每个元素的实际外观，再到另一个环境中重建。

Roblox 侧会用到 ScreenGui、Frame、TextLabel、TextButton、UICorner、UIStroke、UIGradient，以及适配屏幕的 UIScale。

游戏引擎导出目前只覆盖视觉，按钮和文本框尚未连接交互逻辑。

响应式也有明确条件：用户需要从 free layout 切换到 stack，组件才会自上而下流动，导出结果随屏幕适配。编辑器可并排预览手机、平板和桌面效果。不要仅凭「默认响应式」几个字，就假定任意自由布局都能自动处理好。

全页主题则负责统一外观：一键替换强调色，保留灰色、透明度和颜色表示法，也支持全局替换某一种颜色、统一字体与圆角。

我的判断

我认可它把「可编辑的 HTML/CSS」放在工作流中间。相比只生成截图，这条路线能继续改文字、调样式，也能输出前端代码。相比完全靠提示词反复修改，组件库和属性面板为确定性操作提供了更直接的入口。

用渲染快照连接网页与游戏 UI，也是一种务实选择：浏览器已经算出了布局，转换器可以直接读取结果。不过，原文没有展示复杂页面的还原对照，也没交代溢出内容、复杂效果和动态状态如何转换。现阶段更适合把它当作视觉原型和代码起点，不能据此判断它能替代完整开发。

安全设计有具体措施：编辑器采用 Vite + vanilla JS，React 19 只用于落地页和聊天输入；每个元素放在独立的 sandboxed iframe 中，配置严格 CSP 并禁用脚本。作者称，这能阻止 AI 生成代码接触编辑器与密钥。发布页面由 Cloudflare Worker 提供，同样使用 script-src 'none'。

这些措施收紧了生成内容的执行权限，但原文没有给出安全审计结果。「密钥只发给指定提供商」也是作者对实现的说明，不能当成已经独立验证的结论。

项目使用 Supabase 处理 Google、GitHub、邮箱登录及存储，Cloudflare 承载托管。无需账号也能使用主要功能；登录后可把项目存到云端跨设备打开，发布后获得类似 openconstructor.pw/p/my-page 的公开地址。便利性已经具备，导出代码的可维护性仍需要实际检查。

能拿来做什么

• 做前端页面原型时，可以先用现成区块搭定价页、登录页或聊天界面，再导出 React、Vue、Svelte 组件，检查结构和样式后接入业务。
• 手头只有设计截图时，可以尝试重建为 HTML/CSS，重点核对文字、间距和响应式，再决定哪些部分值得保留。
• 制作 Roblox 或 LÖVE 2D 界面时，可以用它生成第一版视觉布局，再补按钮事件、输入处理和状态逻辑。
• 想探索组件风格时，可以让 Fusion 组合已有组件；先评估可读性与一致性，再决定是否放进正式页面。