用户说一句话，表单就自动生成了

大家好，我是涛哥。在「智枢矩阵」表单编辑器中，最核心也最亮眼的功能就是AI生成表单：用户输入“做一个活动报名表，需要姓名、手机号、邮箱”，几秒钟后，一张包含这三个字段的表单就自动生成了。

这个功能看起来简单，但背后涉及 Prompt 设计、大模型调用、JSON 解析、字段渲染等多个环节。今天我就把完整的实现思路拆解出来，分享给大家。

---

一、为什么要做AI生成表单？

传统的表单设计器（金数据、问卷星等）采用的是“拖拽式”设计：左边是字段库，右边是预览区，用户需要手动拖拽一个个字段，然后挨个修改标签、选项、必填等属性。

对于一个包含 10 个字段的表单，熟练用户也要花 3-5 分钟。而且很多用户根本不知道“应该设计哪些字段”——比如做一个“活动报名表”，新手可能只想到“姓名”和“电话”，漏掉“邮箱”、“参加人数”等。

AI 生成表单解决的就是这两个问题：速度慢和不知道设计什么。

---

二、整体架构

用户输入自然语言需求 → 后端构造 Prompt → 调用大模型 → 解析返回的 JSON → 渲染成表单预览。

整个流程是同步的，用户点击“生成”后等待几秒，直接看到结果。

---

三、Prompt 的设计与迭代

这是最核心、也最花时间的一步。大模型不会主动输出符合我们要求的 JSON，必须通过 Prompt 严格约束。

初始版本

你是一个表单生成器。根据用户需求，返回 JSON 格式的表单结构。

问题：模型返回的内容千奇百怪，有时候带 markdown 代码块，有时候返回纯文本解释，有时候字段类型乱写。

迭代过程

1. 强制只输出 JSON：
   只返回 JSON，不要包含任何其他文字、解释或 markdown 标记。

2. 提供示例：
   示例：用户说“做一个活动报名表，需要姓名、手机号、邮箱”
输出：{"title":"活动报名表","fields":[{"type":"text","label":"姓名","required":true},{"type":"tel","label":"手机号","required":true},{"type":"email","label":"邮箱","required":false}]}

3. 明确字段类型枚举：
   支持的 type：text, textarea, number, email, tel, date, select, radio, checkbox

4. 处理选项字段：
   对于 select、radio、checkbox，要求模型同时输出 options 数组。

最终 Prompt 模板

你是一个表单生成器。根据用户需求，返回 JSON 格式的表单结构。

输出格式必须是纯 JSON，不要包含任何其他文字、解释或 markdown 标记。

JSON 结构：
{
  "title": "表单标题",
  "fields": [
    {
      "type": "text",
      "label": "字段标签",
      "placeholder": "提示文字",
      "required": true,
      "options": []     // 仅 select/radio/checkbox 需要
    }
  ]
}

支持的 type：text, textarea, number, email, tel, date, select, radio, checkbox

示例：
用户说"做一个活动报名表，需要姓名、手机号、邮箱"
输出：{"title":"活动报名表","fields":[{"type":"text","label":"姓名","required":true},{"type":"tel","label":"手机号","required":true},{"type":"email","label":"邮箱","required":false}]}

现在开始，只返回 JSON。

经过十几轮调整，这个 Prompt 基本能稳定输出合法 JSON，成功率达到 95% 以上。        

---

四、后端实现：调用大模型

智枢矩阵使用的是火山方舟的 doubao-seed-1-6-251015 模型。后端实现很简单：

const response = await fetch('https://ark.cn-beijing.volces.com/api/v3/chat/completions', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${ARK_API_KEY}`
  },
  body: JSON.stringify({
    model: 'doubao-seed-1-6-251015',
    messages: [
      { role: 'system', content: systemPrompt },
      { role: 'user', content: userInput }
    ],
    temperature: 0.3,
    max_tokens: 2000
  })
});

const data = await response.json();
const aiContent = data.choices[0].message.content;
const schema = JSON.parse(aiContent);

关键点：

• temperature 设为 0.3，降低随机性，保证输出稳定。

• max_tokens 足够大，防止 JSON 被截断。

• 对 AI 返回的内容做清洗，去除可能的 markdown 标记。

---

五、前端渲染

后端返回的 JSON 结构如下：

{
  "title": "活动报名表",
  "fields": [
    { "type": "text", "label": "姓名", "required": true },
    { "type": "tel", "label": "手机号", "required": true },
    { "type": "email", "label": "邮箱", "required": false }
  ]
}

前端拿到后，直接更新 formData 和 fields 数组，预览区自动刷新。

const { title, fields } = response.data;
currentForm.title = title;
currentForm.fields = fields;

整个过程不需要额外处理，Vue 的响应式系统会自动重新渲染。

---

六、踩坑记录

6.1 JSON 解析失败

大模型偶尔会返回带 markdown 代码块的 JSON：

` ` `json
{ "title": "..." }
` ` `

解决：清洗字符串，去掉 ```json 和 ```。

let cleanJson = aiContent.replace(/```json\n?/g, '').replace(/```\n?/g, '');
const schema = JSON.parse(cleanJson);

6.2 字段类型映射

AI 返回的 type 可能不在我们支持的列表中（比如 integer、string）。解决：建立映射表，未知类型默认降级为 text。

6.3 复杂需求处理

当用户输入“做一个带条件跳转的表单”时，大模型无法一步生成复杂的条件逻辑。我们的策略是：AI 只负责生成基础字段，复杂逻辑由用户在编辑器中手动配置。这也符合“AI 辅助，人工微调”的设计理念。

---

七、优化方向

目前智枢矩阵已经支持以下增强功能：

• 多轮对话生成：用户可以在 AI 助手中连续对话，逐步修改表单（如“再加一个备注字段”、“把手机号改成必填”）。

• 文件辅助生成：用户上传图片或文档（PDF/Word），AI 提取其中的需求信息，辅助生成更精准的表单。

这些功能的实现会在后续文章中分享。

---

八、总结

AI 生成表单的核心是Prompt 设计 + 稳定解析 + 前端渲染。不需要复杂的模型训练，直接调用大模型 API 即可实现。

这套方案已经稳定运行在智枢矩阵中，用户只需输入一句话，几秒就能得到一张可用的表单。如果你也在开发类似的 AI 应用，希望这篇文章能给你一些启发。

演示站：https://zhishujuzhen.com
开源仓库：https://gitcode.com/weixin_44479230/zhishu-matrix-open