AI已经成为替代编程工作的火热话题，本期本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】主要来聊一聊，如何在低代码平台的建设成果未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】上，利用LLM的能力，可以实现简单的智能【原创内容，转载请注明出处】【版权所有，侵权必究】化UI生成需求。
【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。本文作者：唐霜，转载请注明出处。在线收听
喜马拉雅：点击播放
【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】你还可以在苹果自带的 Podcast 应本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】用、小宇宙APP、QQ音乐中搜“Robu转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。st”找到我们的节目收听。
未经授权，禁止复制转载。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】捐赠支持
求打赏🙇如果你觉得 Ro本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】bust 这样一档技术类的谈话节目还不错原创内容，盗版必究。【本文首发于唐霜的博客】，希望我继续做下去，不妨打赏支持。
【转载请注明来源】未经授权，禁止复制转载。
内容摘要
过去1年，LLM-based已经成为AI【版权所有，侵权必究】【本文首发于唐霜的博客】的新范式，于此同时，自然语言生成图片、视本文作者：唐霜，转载请注明出处。【作者：唐霜】频、数字人等一系列关联领域都取得了巨大突著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。破。在今年2月，出现了被称为史上第一个全【本文首发于唐霜的博客】【本文首发于唐霜的博客】能AI程序员的Devin，而上周也有消息【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net称阿里入职了工号为AI001的全智能程序本文作者：唐霜，转载请注明出处。【转载请注明来源】员。通过AI替代以往的编程工作，已经是被【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。验证的可行路径，只不过目前的成熟度还不够【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net，后续的发展仍然有待观察。对于前端开发者本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net而言，我们需要有警惕感的同时，也应该思考【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net，如何利用AI技术，提升自己的开发效率，【版权所有，侵权必究】未经授权，禁止复制转载。以在激烈的竞争中出类拔萃。今天，我们就要【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】来聊一聊有关AI生成UI的话题。
【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】本文版权归作者所有，未经授权不得转载。在前端，我们在某一个无法用单一词汇来描述【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net的领域，有着非常执着的追求，那就是尽可能本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】的减少代码层面的编写，快速完成UI输出。【未经授权禁止转载】【未经授权禁止转载】在这一追求下，从古至今衍生出来很多技术，【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】例如最早的网页制作工具frontpage【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。以及其继承者dreamweaver，其后著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net的H5编辑工具及其继承者页面编辑器，过去【转载请注明来源】【本文首发于唐霜的博客】几年这一路径演变为风靡一时的低代码运动，本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】以及D2C（Design To Code【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】）运动。
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】前端界一直在寻求一种可以根据需要自动生成【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。UI界面及其交互效果的一劳永逸的方法，但【作者：唐霜】【原创不易，请尊重版权】即使出现了低代码这样的方案后，仍然无法成本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。为新的主流范式，直接通过code编程写U本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。I还是目前的主流。在低代码方案中，核心问转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】题在于，低代码平台无法满足灵活的UI效果著作权归作者所有，禁止商业用途转载。【本文受版权保护】需求，以及无法满足复杂的逻辑判断需求，而著作权归作者所有，禁止商业用途转载。【转载请注明来源】一旦一个平台尝试去解决这些问题，就会发现【作者：唐霜】【版权所有，侵权必究】低代码平台的使用困难度指数级上升，这种使转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。用学习成本，以及使用所消耗的时间，不亚于本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】直接使用代码来编写UI。
本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】【未经授权禁止转载】由此可见，在低代码的发展中，我们不能一味【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net的追求理想化的全能平台的目标，一旦追求全【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。能，就会陷入成本指数级上升的窘境。而通过【转载请注明来源】【作者：唐霜】低成本搭建一个可以满足当前业务需要场景的【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】低代码实现，虽然不能复用到其他场景中，但【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】是只要能在当下场景中被反复使用，赚回成本【作者：唐霜】原创内容，盗版必究。，就是不错的选择。因此，在过去两年中，我【原创内容，转载请注明出处】【本文受版权保护】们鲜有再见全能型低代码平台的产品出现，因本文作者：唐霜，转载请注明出处。【转载请注明来源】为任何全能型低代码平台，都无法绝对满足真【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】实的业务需求。
未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【本文受版权保护】【版权所有】唐霜 www.tangshuang.net在低代码运动中，我们收获了一些成果。而这【本文受版权保护】转载请注明出处：www.tangshuang.net些成果的沉淀，却在今天带来了转机。
【本文首发于唐霜的博客】【未经授权禁止转载】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。前几天，一个名为open webui的项本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。目引爆了社区，这个项目基于LLM，让开发著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net者可以通过自然语言来描述搭建web页面。【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。和以往D2C等一次性生成UI不同，ope原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】nwebui支持通过自然语言实时的连续的本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net反复的调整UI，以对话的形式逐步调整界面【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】，最终获得你满意的效果。
【本文受版权保护】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。告诉它哪里应该放什么元素，颜色是什么，高【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】度如何……有没有回忆起产品或设计同学站在【原创内容，转载请注明出处】【作者：唐霜】你的身后指着屏幕指导你修改界面的场景。基【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net于openwebui，你可以换一个身份体【本文受版权保护】【本文首发于唐霜的博客】验一下。
【原创内容，转载请注明出处】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【作者：唐霜】不过目前来看，openwebui还只能通未经授权，禁止复制转载。【转载请注明来源】过语言描述来工作，而不能把图像（设计稿）【本文首发于唐霜的博客】【转载请注明来源】、鼠标动作等因素囊括起来，功能上感觉还是转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。比较初级，毕竟语言所表达的往往不够准确。
【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。但是，我之所以对这个项目如此感兴趣，在于【作者：唐霜】著作权归作者所有，禁止商业用途转载。它基于LLM-based AI提供了一种【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】在AI时代进行UI生成的模式雏形。接下来【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。，我将基于我自己的一些经验和想法，分解利【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。用LLM-based AI实现UI生成的转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】技术原理。
本文作者：唐霜，转载请注明出处。【本文受版权保护】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net我们都知道，web UI界面是靠HTML著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net5、CSS3和ES标准完成的，我们用ui原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。框架，如react、vue等就是把这些最【原创不易，请尊重版权】【原创内容，转载请注明出处】底层的原生实现封装为高级的框架，从而提升【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】开发效率。而在这些框架的基础上，我们又出【未经授权禁止转载】【原创内容，转载请注明出处】现了很多组件，这些组件包含了UI的结构和未经授权，禁止复制转载。未经授权，禁止复制转载。样式，甚至交互效果都固定了，因此，这些组【未经授权禁止转载】【原创内容，转载请注明出处】件可以被抽象化，只要有组件名和对应的pr【本文受版权保护】【作者：唐霜】ops参数，即可得到对应的UI效果。而低转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。代码平台则可以利用这些组件，在平台上完成【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。布局，以及组件props参数的配置，从而转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。输出对应组件体系的界面。在低代码平台上，【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】我们通过某种Schema数据结构来描述布【作者：唐霜】原创内容，盗版必究。局和组件调用规则，在实际渲染或生成代码是著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。按照该数据结构真实的载入组件来完成渲染。转载请注明出处：www.tangshuang.net原创内容，盗版必究。而这里的Schema，往往可以是纯文本的【原创内容，转载请注明出处】原创内容，盗版必究。，因此，一个低代码应用原理，可以被认为本【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。质上就是一种配置文件的生成。既然是纯文本【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。，那么也就意味着我们可以让LLM来生成它著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。。
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net没错，讲了这么多，我们终于让LLM登场。【原创不易，请尊重版权】原创内容，盗版必究。现在，我们的目标切换成了，如何让我们的A【作者：唐霜】【作者：唐霜】I系统，可以通过LLM应用，实现从自然语【本文首发于唐霜的博客】【转载请注明来源】言描述到Schema数据的生成过程。
【原创不易，请尊重版权】【版权所有，侵权必究】【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netLLM应用的发展过程有好几个阶段，你可以【原创内容，转载请注明出处】【本文首发于唐霜的博客】关注我的公众号 wwwtangshuan转载请注明出处：www.tangshuang.net原创内容，盗版必究。gnet 阅读相关文章了解。如果是早期，【版权所有】唐霜 www.tangshuang.net【转载请注明来源】我们主要强调的是 prompt 工程，利【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。用大模型的推理、思维链等特性，想尽办法让【转载请注明来源】【关注微信公众号：wwwtangshuangnet】大模型可以在推理过程中按照Schema的未经授权，禁止复制转载。未经授权，禁止复制转载。特征进行生成。但是，这种方法效果非常差，本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。一方面我们需要提供庞大的example和原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。schema描述，toekns太多，性能【原创不易，请尊重版权】【转载请注明来源】扛不住，另一方面我们必须让自然语言是在描未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。述schema，而非描述UI，这显然是不【关注微信公众号：wwwtangshuangnet】【转载请注明来源】符合预期的。后来，我们尝试使用lora、【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netfine-tune等微调方案来让模型更懂【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。schema，这样就可以用更少token未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。，但是这种方案仍然是要求用户自然语言描述未经授权，禁止复制转载。【本文首发于唐霜的博客】中，必须是在熟知schema的前提下进行未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。，否则很难对应到schema中。
原创内容，盗版必究。【本文首发于唐霜的博客】可见，这一时期，想直接通过描述UI长什么【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】样子，到我们获得Schema文件之间，存著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】在着巨大的鸿沟，通过描述Schema信息原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。来生成Schema，虽然比拖拉拽看上去更【本文受版权保护】本文版权归作者所有，未经授权不得转载。快，但准确性却并不理想。总而言之，少那么【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。点意思。
【版权所有，侵权必究】【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net今年，也就是2024年，LLM的应用进入【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】到一个新阶段，通过设计大型工作流架构来完【原创不易，请尊重版权】【未经授权禁止转载】成任务目标成为新范式。过去，我们往往希望【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。通过LLM一次或几次对话就能一步到位得到【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】我们想要的数据，在经过这1年的社会毒打之本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】后，发现是不可行的，纯粹的LLM交互是无著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。法提升效果的。吴恩达在其研究中发现，如果【原创不易，请尊重版权】【本文首发于唐霜的博客】只是单独依靠一两次对话就想获得想要的目标【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net，其成功率，GPT-3.5能打3分，GP【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。T-4能打6分，但是如果设计出恰到好处的【原创内容，转载请注明出处】未经授权，禁止复制转载。工作流，即使GPT-3.5也能打到9分。
【版权所有，侵权必究】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。什么是工作流呢？简单讲，就是不妄想通过简【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】单的1个步骤就立马得到结果，而是有规划有转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。策略的进行多轮对话，让不同的Agent担【作者：唐霜】本文版权归作者所有，未经授权不得转载。任不同的角色，分工合作，再加入一些验证、原创内容，盗版必究。【未经授权禁止转载】调整等环节，从而让走完整个流程后出来的结【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。果更逼近我们想要的结果。
未经授权，禁止复制转载。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net可以说，2024年所有的AI应用都在利用【本文受版权保护】【转载请注明来源】这个思路，包括最新的大模型底座架构，也在【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。强调多专家模型的网络结构。也就是说，整个【本文首发于唐霜的博客】未经授权，禁止复制转载。业界都意识到，单纯靠一个LLM单打独斗是转载请注明出处：www.tangshuang.net【版权所有，侵权必究】无法高效实现目标的，通过系统化的任务拆分未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。能让效果瞬间翻倍。这种分工协作思想，是今【转载请注明来源】本文作者：唐霜，转载请注明出处。年AI应用架构的核心思想，也是我们这段时【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net间看到各类效果不错的AI产品令人惊艳的原著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。因。
【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】回到我们的主题，当用户在对UI进行描述时【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】，openwebui将整个任务进行了划分【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】，通过不同的阶段、不同的模型调用、不同的转载请注明出处：www.tangshuang.net【作者：唐霜】任务目标、不同的工具调用，最终让生成的代【原创内容，转载请注明出处】原创内容，盗版必究。码更为逼近用户描述的目标。如果再结合我们【原创不易，请尊重版权】原创内容，盗版必究。上文提到的，我们通过微调，可以让大模型可转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。以根据用户描述获得更逼近与我们Schem未经授权，禁止复制转载。未经授权，禁止复制转载。a结构的输出。这个过程本身就有点像一个开【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。发团队的工作过程，产品描述需求，产出交互本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。稿，设计根据需求产出设计稿，开发根据需求【关注微信公众号：wwwtangshuangnet】【本文受版权保护】和设计稿产出代码。通过这种分工协作，虽然未经授权，禁止复制转载。原创内容，盗版必究。用户不懂专业的编码过程，但是只要他可以描转载请注明出处：www.tangshuang.net【转载请注明来源】述正确自己的需求，就可以得到对应的结果。
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【本文受版权保护】由于我们已经有低代码的成果，因此，利用低【本文受版权保护】本文版权归作者所有，未经授权不得转载。代码平台现有的能力，把低代码平台作为一个【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。第三方工具，挂载在AI系统上，当上述工作本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net流运行到某个节点时，把低代码平台作为工具未经授权，禁止复制转载。【本文首发于唐霜的博客】进行调用，就形成了符合眼下Agent架构著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】的合理模式。
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net这里其实有一个细节，就是workflow转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。执行调用工具任务时，需要向工具传参，而这【未经授权禁止转载】本文作者：唐霜，转载请注明出处。个参数往往是上游的节点中的LLM生成的，本文版权归作者所有，未经授权不得转载。【转载请注明来源】这个参数应该就是我们需要的Schema文【版权所有，侵权必究】【原创不易，请尊重版权】件。
原创内容，盗版必究。原创内容，盗版必究。转载请注明出处：www.tangshuang.net【未经授权禁止转载】这样，就形成了一个完整的闭环。
著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】不过这里我没有详细展开当下业界主流的wo【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】rkflow架构模式，以后有机会的话，会【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】专门做一起节目来讲。
【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】可以看到，从路径上讲，用自然语言描述来生【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net成UI是完全可以实现的，而且openwe【本文首发于唐霜的博客】原创内容，盗版必究。bui还有一个特点，就是可以通过自然语言【未经授权禁止转载】【未经授权禁止转载】来对界面进行调整，这一点也是非常友好。如【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net果可以在加入鼠标控制的能力，配合上语音识未经授权，禁止复制转载。【原创不易，请尊重版权】别，那就更加有意识了，我们可以通过鼠标点著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】击某处，然后说话“这个地方改为蓝色”，就【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。可以修改出我们需要的效果。这样的场景相信【原创不易，请尊重版权】原创内容，盗版必究。也并不难实现。
【本文受版权保护】【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】好了，本期详细阐述了用AI生成UI的技术【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。实现原理。随着LLM技术的不断发展，我们转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。前端会逐渐受到影响，只有不断学习和进步，【原创内容，转载请注明出处】【作者：唐霜】才能重复利用更为先进的工具提升我们的开发【版权所有，侵权必究】未经授权，禁止复制转载。效率，让我们的开发更加有意思。
【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】
