我先举一个简单的例子。很多时候，我会在脑海中想象一件非常漂亮的裙子，但当我真正找到类似的实物时，却并没有达到预期效果。这并不只是个人的问题——在编程中也常常遇到类似的情况。客户可能在脑中构想出很棒的UI界面，但当它被实现出来时，效果却与想象不符。这样的问题带来的后果是什么？时间和资源被浪费，客户也可能因此感到不满意。

幸运的是，这个问题现在有了新的解决方案。Weights & Biases（W&B）开发了OpenUI，这是一款开源工具，可以用简单的英文指令将你的想象变成UI原型。UI的创建变得快速、有趣且灵活。你还可以将设计转换为React、Svelte或Web Components等主流框架的代码。例如，我可以说：“创建一个带有侧边栏和图表的暗色主题仪表盘”，OpenUI就会实时生成它。你还可以用简单的英文指令进行编辑。

在本文中，我们将探讨OpenUI为何重要、它的工作原理，以及如何用它在几秒钟内创建令人惊艳的UI界面。

为什么选择OpenUI？

自然语言创建UI：你无需成为专业开发者，只需用描述说出你的想法，OpenUI就能帮你实现。 实时预览变更：当你修改描述时，UI会即时更新——类似于网页开发中的实时预览，但无需手动编写或修改代码。 灵活的输出：当你对设计满意后，可以将其转换为主流框架的代码，便于在实际项目中使用。 开源免费：完全免费，社区也可以参与改进。 展开剩余77%

OpenUI的工作原理

其实实现方式并不复杂，但想法非常巧妙——你甚至可以自己构建类似的工具！它利用OpenAI、Groq或Ollama等开源或商用语言模型，来理解你的描述并生成HTML代码。在此基础上，你可以进一步编辑、优化，或转换为你喜欢的前端框架代码。

如何开始使用OpenUI

让我们来试一试。根据你的环境，有几个不同的方式，不过都很简单！

选项一：在线体验Live Demo

最简单的方式是在OpenUI演示页面体验。只需用你的GitHub账号登录。例如，我让它生成了一个“带标题和按钮的红色卡片”的UI，得到的效果如下：

你可以切换明暗模式、在不同设备屏幕上预览UI、选择主题，或者根据需要进行编辑。点击“<>”图标，还能查看UI的HTML代码，如上图所示。

选项二：用Docker本地运行

如果你想在自己的电脑上运行OpenUI，Docker是最简便的方式。它就像一个包含了OpenUI所有运行所需内容的预制盒子。操作步骤如下：

安装Docker：根据你的电脑系统（Windows、Mac或Linux）下载并安装Docker Desktop。 获取API密钥：OpenUI支持多种模型（OpenAI、Groq、Anthropic、Gemini、Cohere、Mistral等）。这里以OpenAI API为例。注册一个免费的API密钥并保存好。 运行命令：打开终端，输入以下命令（将xxx替换为你的API密钥）： exportOPENAI_API_KEY=xxx

docker run --rm --name openui -p 7878:7878 -e OPENAI_API_KEY ghcr.io/wandb/openui

稍等片刻，等待下载完成。 打开浏览器：访问 http://localhost:7878 ，你就可以像在线演示那样开始创建UI了。

docker run --rm --name openui -p 7878:7878 -e OPENAI_API_KEY ghcr.io/wandb/openui

选项三：源码运行（适合进阶用户）

如果你想从源码运行OpenUI，需要安装Git和uv（一个快速的Python包管理器）。

克隆项目：git clone https://github.com/wandb/openui 进入项目文件夹：cd openui/backend 同步依赖并激活虚拟环境：uv sync --frozen --extra litellm

source .venv/bin/activate

设置环境变量并运行：export OPENAI_API_KEY=your_openai_key

python -m openui

source .venv/bin/activate

python -m openui

进阶设置选项

Ollama设置（用于开源模型）

安装Ollama。 拉取模型（如带图像支持的llava）：docker exec -it openui-ollama-1 ollama pull llava 用Ollama运行OpenUI：docker run --rm --name openui -p 7878:7878 -e OLLAMA_HOST=http://host.docker.internal:11434 ghcr.io/wandb/openui

总结

还等什么呢？快去OpenUI的GitHub页面，体验在线演示或本地安装吧。用描述、编辑和转换功能，轻松搞定炫酷UI设计。这里还有一些小建议供你参考：

描述越详细（比如“一个白字紫底按钮”），结果越符合预期。 尝试不同的描述，并逐步增加复杂度，看看会出现什么效果。 尽量使用常见的UI术语。 点击齿轮图标可以在不同AI模型之间切换（比如速度更快的Groq或本地使用的Ollama）。

发布于：重庆市