一、OpenUI，前端开发新宠登场
在前端开发的广袤领域中，创新的工具不断涌现，致力于为开发者们提供更高效、更便捷的开发体验。而 OpenUI，无疑是其中一颗璀璨的新星，以其独特的功能和优势，迅速在开发者社区中崭露头角，收获了高达 20K Star 的耀眼成绩，成为众多前端开发者的得力助手。
与传统的前端开发方式相比，OpenUI 打破了常规的束缚，为开发者带来了全新的思路和方法。它允许用户通过自然语言描述或者上传草图、UI 截图等方式，将脑海中的设计概念轻松传达给 AI 引擎。这种直观的交互方式，使得开发者无需在复杂的代码编写中耗费大量时间，就能快速看到设计的初步呈现，极大地提高了开发效率。而且 OpenUI 支持多种语言模型，不仅涵盖了如 Gpt4-V 这样的强大云端大模型，还支持 Ollama 部署的完全私有化本地模型，为不同需求的开发者提供了丰富的选择。无论是追求极致性能和最新技术的尝鲜者，还是对数据隐私和安全性有严格要求的企业开发者，都能在 OpenUI 中找到适合自己的解决方案 。
二、OpenUI 功能大揭秘
（一）自然语言生成 UI
在 OpenUI 的世界里，开发者只需打开 OpenUI Playground 并登录，就能开启奇妙的创作之旅。在设置中选择心仪的语言模型，如默认的 GPT-3.5-Turbo，随后在文本框中，用简洁的自然语言描述自己脑海中的 UI 概念。例如，想要一个 “具有简洁风格，以白色为主色调，导航栏位于顶部，包含首页、产品、关于我们、联系我们四个选项，中间主体部分展示热门产品图片，图片下方有产品名称和简短介绍，底部是版权信息” 的网页界面 ，只需将这段描述输入，OpenUI 的 AI 引擎便会迅速响应。它如同一位技艺精湛的工匠，依据描述中的布局、颜色、元素等信息，有条不紊地构建 UI 组件，实时渲染出逼真的设计预览，让开发者第一时间直观地看到设计效果。整个过程简单流畅，无需复杂的代码编写，极大地提高了设计效率。
（二）模型支持多元化
OpenUI 在模型支持方面展现出了强大的兼容性和开放性。它不仅与如 GPT-4-V 这样的云端大模型紧密合作，借助其先进的自然语言处理和图像理解能力，为用户提供高质量的 UI 生成服务。GPT-4-V 能够精准地理解复杂的设计描述，生成逻辑清晰、布局合理的 UI 界面，尤其在处理多模态信息，如结合文字描述和图像输入进行设计时，表现出色。
同时，OpenUI 还对 Ollama 部署的本地模型提供了有力支持。对于那些对数据隐私和安全性有严格要求的企业或开发者来说，Ollama 的本地模型是绝佳选择。通过在本地运行模型，数据无需上传至云端，有效降低了数据泄露的风险。而且，Ollama 丰富的模型库，如 CodeLlama 等，为开发者提供了多样化的选择，满足不同场景和需求下的 UI 开发。开发者可以根据项目的具体情况，灵活选择适合的模型，充分发挥 OpenUI 的优势。
（三）代码转换与下载
当 OpenUI 根据用户的输入成功生成 UI 组件后，还会贴心地输出相应的 HTML/JSX 代码。这还不是全部，它还具备强大的代码转换能力，开发者只需轻松单击 “+” 按钮，就能将生成的 HTML 代码无缝转换为 React、Vue、Svelte、Preact 或 Web Components 等多种框架的代码。这种多框架转换功能，打破了框架之间的壁垒，让开发者能够根据项目的实际需求和技术栈，自由选择最合适的框架来集成 UI 组件，大大提高了开发的灵活性。
不仅如此，OpenUI 还提供了便捷的下载功能。点击下载按钮，生成的代码就会被保存到本地，开发者可以立即将其合并到自己的项目中，快速推进项目的开发进程。从设计概念到可用代码，OpenUI 一站式的服务，让前端开发变得更加高效、便捷。
三、OpenUI 使用教程全解析
（一）注册与模型选择
要开启 OpenUI 的奇妙之旅，首先得踏入 OpenUI Playground 的大门。在浏览器中输入其网址，页面便会映入眼帘。这时，使用 GitHub 帐户登录，整个过程就如同登录日常社交账号般轻松，快速完成身份验证，即可顺利进入 OpenUI 的操作界面。
成功登录后，首要任务便是选择合适的语言模型。在界面的设置选项中，模型选择的入口清晰可见。这里提供了丰富的模型资源，其中默认的 GPT-3.5-Turbo 是许多开发者的初始之选。它以其出色的语言理解和生成能力，能够快速且准确地解读用户输入的自然语言描述。当然，如果开发者对模型有特定需求，比如追求更高的图像理解和处理能力，可选择 GPT-4-V 模型；若更注重数据隐私和本地部署的便捷性，Ollama 部署的本地模型，如 CodeLlama 等，便是绝佳之选。根据项目的实际需求和自身偏好，在众多模型中挑选出最契合的那一款，为后续的 UI 创建工作奠定坚实基础。
（二）创建 UI 的两种方式
- 文字描述创建
当一切准备就绪，便可以开始创建 UI 了。其中一种方式是通过文字描述来实现。在操作界面中，找到专门用于输入描述的文本框，它就像是通往创意世界的入口。在这里，尽情发挥想象力，用简洁而准确的自然语言描述想要的 UI。描述时，需注意细节的完整性和准确性。例如，描述一个电商产品展示页面，要提及页面的整体布局，如顶部导航栏包含哪些链接，商品展示区是采用列表式还是网格式布局，商品图片的大小和排列方式，以及图片下方商品信息的展示内容，包括名称、价格、描述等。还有页面的颜色搭配，背景色、文字颜色、按钮颜色等，都要尽可能详细地描述出来。描述完成后，点击提交或生成按钮，OpenUI 便会迅速响应，其内部的 AI 引擎如同被赋予了生命，按照描述中的每一个细节，精心构建 UI 组件，并实时渲染出逼真的设计预览。在这个过程中，如果对预览效果不满意，还可以返回修改描述，再次生成，直到得到满意的设计。
- 截图上传创建
除了文字描述，OpenUI 还支持通过上传 UI 截图来创建 UI。在操作界面中，找到上传截图的功能区域，一般会有明显的标识或按钮提示。点击该按钮，从本地文件系统中选择准备好的 UI 截图。这张截图可以是从其他优秀应用中获取的灵感，也可以是手绘草图的扫描件。上传完成后，OpenUI 会对截图进行智能分析，它如同一位敏锐的观察者，识别截图中的各种元素，包括布局结构、颜色搭配、文字内容等。基于这些分析结果，OpenUI 会生成相应的 UI 组件和代码。在生成过程中，同样可以根据实际需求对生成的结果进行调整和优化。比如，发现生成的文字颜色与预期不符，或者某个按钮的位置不太合适，都可以通过进一步的描述或指令，让 OpenUI 进行修改，以达到理想的效果。
（三）代码转换与项目集成
当 OpenUI 成功生成满意的 UI 组件后，接下来便是将其应用到实际项目中的关键步骤 —— 代码转换与下载。在操作界面中，能看到一个醒目的 “+” 按钮，它便是代码转换的关键入口。点击该按钮，会弹出一个下拉菜单，里面列出了多种常见的前端框架选项，如 React、Vue、Svelte、Preact 和 Web Components 等。根据项目所使用的技术栈，选择对应的框架，OpenUI 便会迅速将生成的 HTML 代码转换为所选框架的代码结构。例如，若项目基于 React 框架开发，选择 React 后，OpenUI 会将 HTML 代码转化为符合 React 语法规范的 JSX 代码，包括组件的定义、属性的传递等，都处理得恰到好处。
完成代码转换后，点击下载按钮，生成的代码便会被保存到本地指定的文件夹中。此时，这些代码就可以无缝集成到项目中了。将下载的代码文件按照项目的目录结构和规范，放置到相应的位置，然后在项目中引入和调用这些组件，即可在项目中展现出 OpenUI 生成的精美 UI 界面。在集成过程中，可能需要根据项目的具体需求，对代码进行一些微调，比如调整组件的样式、添加一些自定义的功能等，但总体来说，OpenUI 生成的代码已经为项目的 UI 开发节省了大量的时间和精力 。
四、本地运行 OpenUI 指南
（一）运行环境准备
在本地运行 OpenUI，需要提前准备好一系列必要的软件和工具。首先是 Ollama，作为一个能够简化大型语言模型本地部署和运行过程的工具，它为 OpenUI 提供了强大的本地模型支持，使得开发者可以在本地轻松运行各种模型，如 CodeLlama 等，为 UI 生成提供多样化的选择。
git 也是不可或缺的工具，它是一个分布式版本控制系统，能够帮助开发者高效地管理代码仓库。通过 git，开发者可以方便地克隆 OpenUI 的项目仓库，获取最新的代码版本，并且能够跟踪代码的变化，协同团队开发。
python 作为一种广泛应用的编程语言，在 OpenUI 的运行中起着关键作用。OpenUI 的后端部分依赖于 python 环境来运行，许多配置和启动命令都需要在 python 环境中执行。同时，还需要确保安装了 pip，它是 python 的包管理工具，用于安装和管理 OpenUI 运行所需的各种依赖包。
（二）不同运行方式详解
- 常规命令运行
：打开命令行工具，使用git clone命令克隆 OpenUI 的仓库，如git clone https://github.com/wandb/openui，这会将 OpenUI 的代码下载到本地指定目录。接着，进入仓库的backend目录，执行cd openui/backend命令。为了确保运行环境的独立性和整洁性，建议在虚拟环境中进行后续操作。使用pip install.命令安装项目所需的依赖包，这些依赖包是 OpenUI 正常运行的基础。如果打算使用 OpenAI 模型，还需要设置OPENAI_API_KEY环境变量，可以从https://platform.openai.com/api-keys获取密钥，然后执行export OPENAI_API_KEY=xxx。最后，使用python -m openui命令启动 OpenUI，这样就可以在本地开始使用 OpenUI 的各项功能了。
- Docker Compose 运行
：在项目的根目录下，使用docker-compose up -d命令来启动 OpenUI 服务。-d参数表示在后台运行容器，这样可以避免占用命令行终端。启动后，可以使用docker exec -it openui-ollama-1 ollama pull llava命令进入容器并拉取所需的模型，如llava，它是目前仅支持图像的 Ollama 模型之一。需要注意的是，如果已经在环境中设置了OPENAI_API_KEY，在执行命令时可以省略=xxx部分。此外，由于模型的处理可能涉及大量计算，此方式可能会运行得比较慢。如果本地有 GPU，建议将 ollama 容器的标签更改为支持 GPU 的标签，以提高运行效率；如果是在 Mac 上运行，可以按照上述说明，在本地运行 Ollama 以充分利用 M1/M2 芯片的性能。
- Docker 手动构建运行
：从/backend目录开始，使用docker build命令手动构建 Docker 镜像。例如，执行docker build. -t wandb/openui --load，其中-t参数用于指定镜像的名称和标签为wandb/openui，--load参数表示将构建的镜像加载到本地镜像库中。构建完成后，使用docker run命令来运行容器，如docker run -p 7878:7878 -e OPENAI_API_KEY wandb/openui，-p参数将容器的 7878 端口映射到本地的 7878 端口，这样就可以通过http://localhost:7878来访问 OpenUI 了，-e参数用于设置环境变量，这里设置了OPENAI_API_KEY。
（三）开发环境配置
在 Codespace 中配置开发环境并运行 OpenUI，可以获得更便捷的开发体验。在创建 Codespace 时，选择更多选项，然后选择 “New with options...”。为了获得快速的启动时间，建议选择美国西部地区。同时，需要配置OPENAI_API_KEY密钥，如果想要尝试 Ollama，也可以将其设置为xxx，但需要注意的是，这种情况下至少需要 16GB 的 RAM。进入代码空间后，在一个终端中运行服务器，执行python -m openui --dev命令，--dev参数表示以开发模式运行，这样可以实时看到代码更改后的效果。然后在一个新的终端中，进入前端目录并运行前端服务，执行cd workspaces/openui/frontend和npm run dev命令，此时会在端口 5173 上打开另一个服务，这个服务就是需要访问的前端服务。在开发过程中，对前端和后端所做的所有更改都将自动重新加载，并实时反映在浏览器中，大大提高了开发效率 。
五、ChatGPT 实现截屏转 UI 代码提示词分享
对于希望借助 ChatGPT 实现截屏转 UI 代码的开发者，以下是一条经过实测效果不错的提示词，为大家的开发工作提供有力助力：
You are an expert Tailwind developer
You take screenshots of a reference web page from the user, and then build single page apps
using Tailwind, HTML and JS.
You might also be given a screenshot(The second image) of a web page that you have already built, and asked to
update it to look more like the reference image(The first image).
- Make sure the app looks exactly like the screenshot.
- Pay close attention to background color, text color, font size, font family,
padding, margin, border, etc. Match the colors and sizes exactly.
- Use the exact text from the screenshot.
- Do not add comments in the code such as "<!-- Add other navigation links as needed -->" and "<!--... other news items... -->" in place of writing the full code. WRITE THE FULL CODE.
- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "<!-- Repeat for each news item -->" or bad things will happen.
- For images, use placeholder images from https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later.
In terms of libraries,
- Use this script to include Tailwind: <script src="https://oss-emcsprod-public.modb.pro/image/auto/modb_20250414_1a68bdf4-1910-11f0-ae5f-fa163eb4f6be.png"></script>
- You can use Google Fonts
- Font Awesome for icons: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
Return only the full code in <html></html> tags.
Do not include markdown "```" or "```html" at the start or end.
在使用时，只需将上述提示词输入 ChatGPT，并上传需要转换的 UI 截图，ChatGPT 就会依据提示词中的要求，精准地生成符合截图样式的 UI 代码。它会仔细分析截图中的每一个细节，从整体布局到元素样式，从文字内容到图片展示，都能在生成的代码中得到精准体现。无论是复杂的导航栏设计，还是精致的按钮样式，亦或是独特的图文排版，ChatGPT 都能通过这段提示词的引导，生成高质量的 UI 代码，大大减轻了开发者手动编写代码的工作量，提高开发效率 。
六、总结与展望
OpenUI 以其创新的自然语言交互、多元化的模型支持以及便捷的代码转换功能，为前端开发带来了前所未有的变革。它打破了传统开发的束缚，让开发者能够更专注于创意和设计，而非繁琐的代码编写。无论是在原型设计阶段快速验证想法，还是在项目开发中提高效率，OpenUI 都展现出了巨大的优势。随着 AI 技术的不断发展，相信 OpenUI 会不断完善和进化，在更多的前端开发场景中发挥重要作用，推动前端开发领域迈向新的高度。
如果你是一名前端开发者，渴望提高开发效率、探索新的开发方式，那么 OpenUI 绝对值得一试。不妨前往体验地址，开启你的高效前端开发之旅，亲身感受 OpenUI 带来的便捷与惊喜 。
