RapidPages：40秒生成AI网站！实时生成 UI 组件、比Open UI 更快 & 开源

很久以前，我们介绍过一个叫 Open UI 的项目。从后续发展来看，这类工具确实启发了不少同类产品的诞生，比如 Clawdep，甚至

。它们都有一个共同目标：让 UI 组件的生成更自动化、更高效。

Open UI 本身是一款革命性产品，能根据屏幕截图和提示词直接生成 UI 组件。但问题也很明显：它更侧重于标准化不同 UI 组件，导致在创建和快速迭代上存在延迟。换句话说，它不太适合那种“边试边改”的高频操作场景。

那么，有没有更快、更灵活的选择？答案是肯定的——

就是这样一个以速度为核心的替代方案。

RapidPages 是一个速度优先的 IDE，专门面向 React 和 Tailwind 开发者。你只需要用自然语言描述需求，

。实际测试中，用它创建一个简单的，它先在画布上渲染出设计，随后在另一个标签页里给出对应的代码。整个过程流畅得不像话。

更实用的是，你可以通过追加指令来持续迭代。比如把原本的“AI”改成“Aitrainee”：

当然，添加全新组件也不在话下，直接在对话输入框里告诉它就行。

——重点来了：这个工具是

，所以根本不需要付费。虽然官方提供了一个需要支付20美元的访问方式，但完全没必要。最简单的方法是，既免费又自由。

来看看界面设计：左侧可以访问历史记录，随时回退到之前的生成版本；右侧支持 Fork 和分享，

。

最让人眼前一亮的功能叫

。它是一个浏览器扩展，能直接截取任意网页上的 UI 组件截图，然后自动提取设计元素并生成代码。更厉害的是，它会，比如 Tailwind 类名、自定义变量等，几乎就是“所见即所得”的逆向工程。

在社区页面还能看到其他人分享的作品，灵感源源不断。

?️ 本地安装 · 实战步骤

既然开源，那怎么开始？先在本地跑起来。你需要准备几个先决条件：

• Python（确保已安装）
• Node.js 和 npm
• Git（用于克隆仓库）
• Supabase 作为数据库（免费账户即可）
• VS Code 作为代码编辑器
• Docker（用于容器化环境）

第一步：前往 RapidPages 的 GitHub 仓库，克隆到本地：

git clone <仓库地址>
cd rapidPages

第二步：用 VS Code 打开克隆的文件夹。找到 .env.example 文件，右键重命名，去掉

后缀。

第三步：配置 API 密钥。先注册 Supabase（免费），创建新项目：

复制数据库 API 地址和密钥，填入 .env 文件中对应的位置；同时填入 OpenAI API 密钥。

第四步：配置 GitHub OAuth。点击 GitHub 开发者设置中的“创建 OAuth 应用”：

• 应用名称：比如 “RapidPages”
• 主页 URL：粘贴本地 localhost 地址（从仓库 README 复制）
• 授权回调 URL：同样从仓库复制第二个链接

点击注册后，生成 Client ID 和 Client Secret，将它们填入 .env 文件中对应的字段。

所有修改完成后，在 VS Code 中保存文件。接着在命令行中依次运行：

docker-compose up
npm run dev

稍等片刻，浏览器自动打开 localhost，一个功能完整的 RapidPages 实例就运行起来了。可以立即开始创建组件，而且所有生成的组件都支持实时预览和代码导出。

从实际生成的组件质量来看，RapidPages 完全胜任日常开发中的原型快速搭建。

Open UI vs RapidPages：怎么选？

两个项目各有千秋，都是优秀的工具。但若单论个人偏好，Open UI 可能更适合需要严格标准化组件库的场景；而 RapidPages 则胜在速度和灵活性，尤其适合快速验证想法、频繁调试的环节。并不是说 RapidPages 不好——事实上它们水平相当——只是侧重点不同。