微信扫码
添加专属顾问
做网页可以是个难者不会,会者不难的活,我就只会找找模版来解决。
今天我们分享一个开源项目,用户只需用自然语言描述理想的UI,它就能实时渲染出设计预览,并输出可用的代码,它就是:OpenUI
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
使用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的替代。
53AI,企业落地大模型首选服务商
产品:场景落地咨询+大模型应用平台+行业解决方案
承诺:免费POC验证,效果达标后再合作。零风险落地应用大模型,已交付160+中大型企业
2026-07-03
开发者转向 AI 应用工程,真正要迁移的是工程判断力
2026-07-02
不改一行代码,看透 AI Agent 的每一次调用
2026-07-02
AI 不缺智商缺纪律:一场 Harness 工程化实践
2026-07-02
天工 3.2 重磅升级:Skywork Tags 上线,给 Agent 一张工牌,邀其加入你的工作群聊
2026-07-02
Context Infra 会是 AI 领域的下一个热点
2026-07-01
一文了解|SkillScan 智能体技能安全扫描最佳实践
2026-07-01
协作的逆向演进:从 Agent 逻辑重构团队管理
2026-07-01
港科大郭毅可谈Agentic AI时代的核心命题:人机共生,人不可能退场
2026-04-15
2026-04-07
2026-04-07
2026-04-24
2026-04-17
2026-04-05
2026-04-05
2026-04-14
2026-04-24
2026-04-22
欢迎您使用【53AI 官方网站】(以下简称“本网站”或“我们”)。本《会员服务协议》(以下简称“本协议”)是您(以下简称“会员”或“用户”)与【深圳市博思协创网络科技有限公司】之间关于注册、登录及使用本网站会员服务所订立的法律协议。
在您注册或登录前,请务必审慎阅读、充分理解各条款内容,特别是免除或限制责任的条款、知识产权条款、争议解决条款等。此类条款将以加粗形式提示您注意。 当您通过微信公众号授权、手机验证码验证或其他方式成功登录本网站时,即视为您已完全理解并同意接受本协议的全部内容。
一、 定义
本网站:指由【深圳市博思协创网络科技有限公司】运营的,域名为【53ai.com】的网站及相关移动端页面。
会员服务:指本网站向注册会员提供的知识库文章查阅、内容检索及其他相关增值服务。
知识库内容:指本网站发布的包括但不限于文字、图表、数据、研究报告、行业分析等数字化内容资源。
二、 账号注册与登录
登录方式:本网站支持以下登录方式,您可根据实际情况选择:
微信公众号授权登录:您同意将您的微信OpenID信息授权给本网站,用于创建或关联会员账号。
手机验证码登录:您需提供真实有效的手机号码,并通过短信验证码完成身份验证与登录/注册。
账号安全:您的账号仅限您本人使用,禁止赠与、借用、租用、转让或售卖。因您保管不善导致的账号被盗、密码泄露等损失,由您自行承担。
实名认证:根据相关法律法规要求,我们可能要求您在特定功能下完成实名认证。如您拒绝提供,可能无法使用部分或全部服务。
未成年人保护:若您未满18周岁,请在法定监护人的陪同下阅读本协议,并在征得监护人同意后使用本服务。
三、 服务内容与规范
知识库查阅权限:会员登录后,有权按照其会员等级对应的权限范围,在线浏览、检索本网站知识库中的相关文章及内容。
服务变更:我们有权根据业务发展需要,调整、变更或终止部分服务内容,并将以网站公告、公众号消息等方式提前通知。
禁止行为:您在使用服务时不得实施以下行为:
利用技术手段批量爬取、下载、转存知识库内容;
将知识库内容用于商业目的或未经授权地向第三方传播;
干扰本网站正常运行或侵犯其他用户合法权益;
发布违法违规信息或从事违反公序良俗的活动。
四、 知识产权声明
权利归属:本网站知识库中的排版设计、软件代码等内容的知识产权均归【公司全称】或原权利人所有,受《中华人民共和国著作权法》等法律保护。
有限许可:本网站授予会员一项非独占、不可转让、不可转授权的普通许可,仅限于个人学习、研究之目的在线查阅知识库内容。
侵权追责:未经书面许可,任何单位或个人不得以任何形式复制、转载、摘编、镜像、汇编或以其他方式使用上述内容。一经发现,我们保留追究其法律责任的权利。
五、 个人信息保护
我们重视对您个人信息的保护。关于我们如何收集、使用、存储和保护您的个人信息,请单独阅读 《隐私政策》。
您通过微信公众号授权或手机号验证所提供的信息,我们将严格按照《个人信息保护法》的规定处理,仅用于身份识别、服务提供及安全验证等必要用途。
您可以随时通过网站设置或联系客服行使查阅、更正、删除个人信息及撤回授权同意的权利。
六、 免责声明
内容准确性:知识库内容仅供参考,不构成专业建议。我们不对其完整性、准确性、时效性作任何明示或暗示的保证,您应自行判断并承担使用风险。
不可抗力:因自然灾害、政策法规变化、网络故障、第三方平台接口异常(如微信接口维护、运营商短信通道故障)等不可抗力导致的服务中断或延迟,我们不承担违约责任。
第三方链接:本网站可能包含指向第三方网站的链接,该等网站的内容和服务不受我们控制,请您自行甄别风险。
七、 违约责任
如您违反本协议约定,我们有权视情节采取警告、限制功能、暂停服务、注销账号等措施,并保留要求赔偿损失的权利。
如因您的违约行为导致我们遭受行政处罚、第三方索赔或商誉损失,您应承担全部赔偿责任(包括但不限于罚款、赔偿金、律师费、公证费等)。
八、 法律适用与争议解决
本协议的订立、执行和解释均适用中华人民共和国大陆地区法律。
因本协议产生的或与本协议有关的任何争议,双方应友好协商解决;协商不成的,任何一方均可向【公司所在地】有管辖权的人民法院提起诉讼。
九、 其他
本协议构成双方就本服务达成的完整协议,取代此前任何口头或书面约定。
本协议任一条款被认定为无效或不可执行的,不影响其他条款的效力。
我们对本协议享有最终解释权,并在法律允许的范围内保留随时修改的权利。修改后的协议一经公布即生效,继续使用服务即视为同意修订内容。