低代码 + AI:从对话交互到UI自动生成的工程实践

0 阅读6分钟

最近AI的热度持续攀升,我也一直在思考如何将大语言模型的能力真正融入到低代码开发框架中,而不只是停留在“接入API”的表面功夫。年前因为皮下细菌感染在医院躺了半个月,反倒给了我完整的时间去系统研究AI相关的技术实现。目前的结论是:让AI直接生成一个完整、严谨的企业级应用,还有很长的路要走;但在特定领域内,通过精心设计的提示词和工具链,让AI辅助生成UI模型、数据实体甚至业务逻辑,已经具备了工程可行性

一、技术实现的核心逻辑

我们目前的实现方案,本质上是一个领域特定的AI代理。低代码框架不再是简单的UI拖拽工具,而是扮演了“指挥官”的角色:

  1. 意图识别与上下文封装:当开发者在模型设计器中输入自然语言需求时(例如“生成一个带背景图的登录界面”),框架会将这个需求与当前模型的类型(如View模型)、可用组件列表、框架的UI布局规范等,一起封装成结构化的系统提示词
  2. 模型交互与输出解析:封装后的提示词发送给大语言模型。根据目标模型的不同,我们会要求模型以特定的格式输出——可能是直接生成符合框架规范的DSL代码,也可能是输出结构化的JSON描述(包含组件类型、属性、布局信息等)。
  3. 动态转换与模型实例化:框架内的模型设计器解析模型的输出结果,将其转换为框架内部可识别的UI模型对象,并最终渲染到设计界面中。开发者看到的是一个可编辑、可微调的UI,而非一段冰冷的代码。

二、操作演示:以JNPF平台的AI生成为例

我们以JNPF平台的View模型设计器为例,看看这个交互闭环是如何运作的。

image.png

场景一:从零生成登录界面

在JNPF的模型设计器中,新建一个View模型。底部的“AI生成”面板是我主要交互的入口。输入提示词:“生成一个美观的用户登录界面,包含一张图片作为背景”。

框架会执行以下动作:

  • 提示词增强:框架自动追加系统级约束,例如“使用Element Plus组件库规范”、“用户名和密码输入框必须包含图标”、“遵循JNPF的响应式布局规则”。
  • 模型交互:将增强后的提示词发送至配置的大模型(可对接通用模型或私有化模型)。
  • 输出解析:模型返回一个结构化的JSON描述,框架解析后,在画布上渲染出包含背景图、表单容器、用户名/密码输入框、登录按钮的完整界面。

场景二:通过对话微调UI

生成只是第一步。更关键的是,后续的调整可以通过自然语言对话来完成,并且上下文是保持的。例如,我在面板中继续输入:“把图片放在左侧,表单放在右侧”。

AI理解到这是一个布局调整的需求,会重新生成描述UI布局的JSON结构,框架实时更新渲染。在JNPF的实践中,我们通过维护一个会话上下文,确保AI能理解每一次调整都是在前一次基础上的迭代,而非重新生成。

场景三:动态添加组件与交互

再进一步,我可以要求:“在登录按钮右侧添加一个重置按钮,点击时重置用户名及密码”。

这里涉及两个层面的生成:

  1. UI组件生成:在指定位置添加一个“重置”按钮。
  2. 交互逻辑生成:为按钮绑定一个点击事件,并生成对应的事件处理逻辑(清空用户名和密码输入框的值)。

在JNPF中,这对应着UI模型与逻辑模型的联动。AI生成UI的同时,可以在底层创建一个对应的事件处理函数骨架,或者直接生成符合JNPF自动化规则配置的逻辑描述,由框架将其解析为可执行的业务规则。

三、技术难点与演进方向

目前的实现虽然跑通了流程,但距离理想状态仍有距离,我们正在几个方向上推进:

  1. 系统提示词的精细化:不同模型类型(View、Data Entity、Workflow、Report)需要完全不同的系统提示词。我们在构建一个提示词模板库,针对UI生成,会约束组件使用规范、布局栅格规则;针对数据实体生成,则会强制要求遵循范式设计和命名规范。
  2. 工具感知能力的增强:目前的AI相当于“盲人摸象”,它不知道低代码框架内已经有哪些可复用的组件、哪些已有的数据模型。下一步我们计划开发一系列工具函数,让AI能够通过函数调用去查询框架内的现有资源,实现“感知-生成-复用”的闭环。
  3. 从UI到全栈的扩展:UI生成只是起点。我们的目标是实现数据实体、业务服务、分析报表的全链路AI生成。例如,用户输入“创建一个客户订单管理的数据模型”,AI能自动生成包含客户、订单、订单明细的对象模型,并建立它们之间的关联关系。
  4. 终极目标:需求驱动的完整应用生成:这是最远的愿景。用户描述一个业务场景(如“为销售团队搭建一个项目报备和商机跟进应用”),AI经过多轮澄清和确认后,输出一套完整的应用——包括数据模型、UI页面、业务流程、权限配置。这本质上是一个AI作为业务分析师+架构师+开发者的复合体,其技术挑战在于需求的歧义消除大规模生成结果的一致性维护

四、小结

将大模型的能力嵌入低代码开发框架,不是在已有系统上简单叠加一个“AI助手”,而是重构人机交互的方式。目前的“对话生成UI”只是一个开端,它验证了意图理解→结构化输出→模型实例化这一技术路径的可行性。

未来的低代码开发,可能不再是开发者手动拖拽每一个组件,而是更像与一位熟悉框架所有能力的资深工程师对话:你描述需求,他生成原型;你提出修改,他精准调整。而我们作为框架的设计者,核心工作就是构建好连接人类语言和机器模型的这座桥梁——这包括设计更精巧的提示词、开发更强大的感知工具、以及打磨更健壮的模型解析与转换引擎。

这条路还很长,但方向已经清晰。