很久以前，我们介绍了一个名为Open UI的项目。在我看来，这个项目肯定启发并影响了类似工具的创建，比如Clawdep，甚至是Claw Engineer。

它是一款革命性的产品，可以完全根据你提供的屏幕截图和提示生成UI组件。但是，唯一的问题是，由于Open UI更注重标准化不同的UI组件，因此在创建和高效迭代方面存在延迟。

但如果我告诉你，有一个比Open UI更快的替代方案，它可以更有效地创建和迭代UI组件 —— RapidPages。

这是一个以速度为先的IDE，允许开发人员使用React和Tailwind快速生成UI组件。只需用自然语言描述你需要的内容，就可以在40秒内生成。

我使用RapidPages创建了一个简单的AI公司官网，它首先渲染出设计，然后在另一个选项卡中提供代码。

你可以通过请求添加某些组件来进一步迭代它。你与AI合作生成你想要的东西。比如我改变字符为Aitrainee而不是原来的Ai：

除此以外你当然也可以去添加新的组件。只需要在下面的对话框中告诉他就行。

现在要说明的是，这个工具是完全开源的，所以你不需要付费来访问它。这只是一个让你访问它的方式，虽然你需要支付20美元，但我绝对不建议这样做。我只是简单地在本地安装它。

让我们解释一下UI，你可以访问以前的历史记录，你可以访问以前的生成内容。

你可以将它Fork并分享，这样其他人就可以真正地在你的生成内容上进行协作。

现在，最让我印象深刻并让我想尝试这个框架的一件事是，他们有一个有趣的工具，叫做Snap。它基本上可以将实时网页设计转换为代码。

这是一个浏览器扩展，可以让你截取网页的随机Web组件的屏幕截图，直接从网页中提取设计元素，并且它与你在CSS或其他方面的编码偏好相匹配。

本质上，它是一个带有RapidPages的简单截图工具，它作为Web扩展构建，可以轻松编写你想要的任何代码。

在他的社区页面可以看到其他人的作品

?️本地安装 · Action

那么你如何开始呢？你可以在本地安装它，因为这是一个开源框架，

你无需购买任何东西，只需使用免费版本，并且你可以轻松利用所有这些功能的本地模型。

因此，要在本地安装它，你需要安装某些先决条件。首先，你需要确保你的编程语言是Python，你需要确保你拥有Node.js和npm。我会把所有不同的链接放在文末的链接中。

你还需要确保你安装了Git，这是一个帮助你克隆这个仓库到桌面上的应用程序。你将需要Supabase作为你的数据库，你还需要VS Code作为代码编辑器，并且需要Docker来包含环境。

所以你首先要做的是前往RapidPages的GitHub仓库克隆它，然后前往RapidPages文件夹，简单地输入`cd rapidPages`。

接下来，我们要输入API密钥。打开VS Code，点击打开文件夹，打开刚刚克隆的文件夹。一旦找到RapidPages文件夹，前往`.env`文件。在开始粘贴内容之前，右键点击此文件，选择重命名，去掉“.example”。

接下来，前往Supabase设置你的数据库API密钥。创建一个账户，这完全是免费的，所以只需简单地创建你的账户，创建你的数据库，点击“创建新项目”，

然后复制数据库API：

把数据库的api和OpenAI API密钥填入env中：

接下来，你需要创建你的GitHub OAuth应用程序。为此，点击这个按钮，

这会带你到这个链接，给它命名。在这个例子中，我会把它命名为RapidPages。

对于主页URL，回到这个GitHub仓库，复制这个URL（这是localhost），将其粘贴到主页URL中。对于授权回调URL，复制第二个URL。

完成这些步骤后，你就可以注册应用程序了。

最后，你只需要创建自己的客户端密钥ID和密钥。点击这个按钮，

一旦你创建了这两个变量，就可以将它们粘贴到客户端密钥和客户端ID中。

完成所有更改后，回到VS Code，点击文件，然后简单地点击保存。接下来，你只需在命令提示符中运行这两个命令，

就可以轻松在localhost上启动了。这是你可以立即开始创建所有应用程序的地方。

你可以看到生成的组件质量，这就是为什么我认为RapidPages是一个不错的选择。

最后，让我们看看Open UI与RapidPages的比较。

我只是想说，这两个应用程序各有优点，都是不错的选择。

但对于我个人的使用目的，或者我想要利用这类应用程序的方式，我可能会选择Open UI，而不是RapidPages。我并不是说RapidPages不好，它们非常相似，几乎水平相当。