用大模型做一个「表单配置助手」

wuwj 收录于 AI 应用

2024-02-05 约 236 字预计阅读 2 分钟

在很多中台系统里，「加一个表单页面」是非常常见的需求：

运营要配活动
风控要配规则
产品要加信息收集表单

常规流程比较重：写需求 → 画原型 → 前端实现 → 联调 → 上线。
对于那些只是字段多、变更频率高的小表单，其实有点浪费。

所以我们尝试做了一个小工具：

运营用自然语言描述表单，大模型帮忙产出一份「表单配置 JSON」，前端根据配置自动渲染。

这篇文章就简单记录一下实现思路。

1. 目标：从一句话到一份表单配置

我们给自己的目标很克制：

输入：一段自然语言描述，例如

“做一个录入投资人基本信息的表单，需要姓名、手机号、证件类型和证件号，手机号必填要校验格式，证件类型从下拉里选身份证/护照。”
输出：一份前端能直接使用的配置 JSON：
- 字段列表
- 字段类型、标签、占位
- 是否必填、校验规则
- 下拉选项等

前端只负责：

把描述提交给后端
拿到配置 JSON
交给通用 <FormRenderer :config="formConfig" /> 渲染

2. 配置格式：先把「机器读得懂」定义好

要让大模型产出可用结果，首先要有一份清晰的配置格式。示例：

{
  "title": "投资人信息录入",
  "layout": "vertical",
  "fields": [
    {
      "name": "name",
      "label": "姓名",
      "type": "input",
      "required": true,
      "placeholder": "请输入姓名"
    },
    {
      "name": "mobile",
      "label": "手机号",
      "type": "input",
      "required": true,
      "rules": [
        {
          "type": "regex",
          "pattern": "^1\\d{10}$",
          "message": "请输入 11 位手机号"
        }
      ]
    },
    {
      "name": "idType",
      "label": "证件类型",
      "type": "select",
      "required": true,
      "options": [
        { "label": "居民身份证", "value": "ID_CARD" },
        { "label": "护照", "value": "PASSPORT" }
      ]
    },
    {
      "name": "idNo",
      "label": "证件号码",
      "type": "input",
      "required": true
    }
  ]
}

前端已经有配套组件：

<FormRenderer :config="formConfig" @submit="onSubmit" />

所以只要拿到符合约定的 JSON，页面就能跑起来。

3. Prompt 设计：教会模型「怎么写配置」

核心工作在 Prompt 设计。一个简化版系统提示大概是：

你是一个表单配置助手。
用户会用自然语言描述一个表单需求，你需要输出一段 JSON，符合下面要求：

只输出 JSON，不要解释文字

字段名用简短的英文（驼峰或下划线）

标签、占位符使用中文

type 只能是：input / textarea / select / date / number / checkbox / radio

需要校验的字段，在 rules 里描述规则

下面是一个示例：
……（放 1～2 个完整示例）

实践里有几个坑：

没有示例时，模型很容易输出「半自然语言半 JSON」的东西
不强调“只输出 JSON”，就会自动加解释
不限制可选类型，它会发明很多你前端根本不支持的 type

把这些在 Prompt 里说清楚之后，稳定性会好很多。

4. 后端校验：不要全信大模型

拿到 JSON 之后，后端会做一层校验，而不是直接丢给前端：

校验结构：字段是否齐全、类型是否符合约定
白名单过滤：type / 规则类型是否在允许范围内
安全过滤：限制正则表达式等高风险内容

如果校验失败：

返回一个通用提示（配置有误，请重试或联系同事）
或在内部工具里展示具体错误，帮助业务侧改描述

不要直接把模型原始输出丢给浏览器。

5. 前端渲染 + 人工微调

即使大模型给出的配置八九不离十，业务上往往还需要微调：

字段顺序调整
文案更贴近具体业务场景
某些字段默认值/交互细节修改

所以我们做了一个简单的「配置可视化编辑」页面：

左侧是实时预览表单
右侧是字段列表 + 属性编辑
支持拖拽排序、勾选必填、修改标签等

AI 负责给一个可用的草稿，人来做最后的决定。

6. 实际使用中的一些经验

描述越具体，结果越好
- 一开始运营只写「做个投资人表单」，模型只能瞎猜
- 后来在输入框下面加了引导：建议写清字段、必填、校验方式等
复杂逻辑拆两步
- 比如「机构投资人与自然人字段不同」，先生成基础字段
- 再在低代码规则里做显隐控制，而不是全靠模型推理
模板 + AI 的混合模式更稳
- KYC、开户、地址这类高频表单先做成模板
- AI 在模板上做增删，而不是每次重造轮子

7. 小结

这次表单配置助手的改造，让我更确认一件事：

大模型最适合做的是「从 0 到 0.7」，而不是「从 0 到 1」。

关键几点回顾：

先把「机器读得懂的配置格式」设计好
用 Prompt + 示例约束输出
后端必须有一层校验与安全过滤
前端提供可视化微调，而不是全自动生成

这样搞下来，前端不会消失，但会少掉很多重复、机械的配置工作，把精力更多放在「交互设计」和「整体体验」上。

目录