聊聊天就搞定UI，开源的AI网页生成工具

 

做网页可以是个难者不会，会者不难的活，我就只会找找模版来解决。

今天我们分享一个开源项目，用户只需用自然语言描述理想的UI，它就能实时渲染出设计预览，并输出可用的代码，它就是：OpenUI

OpenUI 的目标是让这个过程变得有趣、快速且灵活。它是一款开源的AI代码生成器，根据描述生成UI界面，并能够输出HTML、CSS等前端代码，支持React、Svelte等框架，简化前端开发流程，通过生成式AI降低前端开发门槛，提高设计和编码效率，推动人机协作成为未来的常态。

使用OpenUI非常简单，只需在文本框中输入对所需界面的描述，即可生成对应的UI效果图，并可通过指令进行实时修改和添加简单的动态效果。

本项目的背后是 Weights & Biases，一家做机器学习工具的公司，目前做各种大模型的开发工具，之前他们出过一个训练大模型最佳实践的白皮书，还挺不错，有兴趣的朋友可以私信，我发给你。

首先OpenUI有个在线的demo环境可以直接体验，建议大家可以先去上面玩玩，不需要绑key，直接能用。地址：https://openui.fly.dev/

除了在线demo外，你也可以自己在本地部署，可以参考如下命令来安装 OpenUI：

git clone <https://github.com/wandb/openui>cd openui/backend# You probably want to do this from a virtual environmentpip install .# This must be set to use OpenAI models, find your api key here: <https://platform.openai.com/api-keys>export OPENAI_API_KEY=xxxpython -m openui

默认情况下是使用OpenAI，当然你也可以使用本地的 Ollama 提供的模型。例如安装 Ollama 并拉取像 CodeLlama 模型。使用本地模型时把OPENAI_API_KEY设成xxx。

项目还支持Docker的方式运行。Docker compose启动可以参考如下：

docker-compose up -ddocker exec -it openui-ollama-1 ollama pull llava

使用OpenUI的的话可以有2种方式，交互对话和从图片生成。

而OpenUI相较于一般的代码生成工具所不同的是，可以在生成结果的基础上持续的进行改进，一直到满意为止，这样的使用体验的比较好的。

• 一种交互对话是从描述入手，比如我说要创建一个用户登录页面，那么OpenUI会帮我们返回一下的结果。

之后还可以针对不满意的地方进行局部修改，比如我们希望把标题变得更大、变个颜色等。

openui默认生成HTML和JSX的代码，也可以转换为Svelte、vue等，这点还不错。

生成的代码还可以，看起来挺规整。

• 另外一种使用方法是通过图片来生成初步的设计。我上传这样一张图片到openui。

生成的结果是下面这样的，感觉识别度不是太高。

当然到这里和前面一样，是可以继续通过自然语言描述来改进页面内容的。

这里顺带提一下，我使用在线的demo环境，默认是gpt3.5-turbo，也可以更具需要换成gpt4.0-turbo。

了下openui的源代码结构，它主要分为前端frontend和后端backend两部分。

frontend就是UI，包括指令输入区、图片输入区、生成代码浏览区和前端页面绘制区。

backend则负责与大模型交互，默认情况下调用的是openAI的GPT4，所以会要求输入openAI的key，GPT4具有多模态能力，既能理解图片又能生成代码。

整体体验下来，openui目前还处于开发的前期，虽然有了一个不错的架子，但是离实际应用还是有些差距。它的定位应该是希望成为v0.dev的开源替代，它已经具备了通过逐步对话来完善项目的功能，但是细节方面还有不够，希望可以快速发展真的成为v0.dev的替代。