摘要

当前大语言模型（LLM）在代码生成领域展现出强大能力，但直接生成前端代码存在一致性差、可访问性问题和安全风险。本文提出一种约束式生成架构：LLM 生成结构化 JSON schema，再由预构建的组件渲染器转换为最终界面。

问题定义

传统表单构建工具存在两难：

  • 简单工具：功能有限，无法处理复杂逻辑
  • 企业工具：学习曲线陡峭，非技术用户难以使用

关键洞察：表单结构天然映射到自然语言描述。用户在描述表单时，已经隐含指定了字段类型、验证规则和条件逻辑。

方法论

1. 约束式生成架构

自然语言描述 → LLM → JSON Schema → React 渲染器 → 无障碍 UI

为什么约束？

  • 非约束代码生成产生不一致输出
  • 难以保证可访问性（ARIA labels、键盘导航）
  • 存在安全风险（XSS、注入攻击）

约束式生成确保每个表单都遵循最佳实践。

2. 透明度优于魔法

早期原型完全隐藏 AI——输入描述，输出表单。用户测试揭示问题：

  • 信任缺失：AI 误解时无法纠正
  • 不可预测：不知道为什么有效

解决方案：

  • 在生成前显示 AI 的解释
  • 显示解析的字段、验证规则、条件逻辑作为结构化预览
  • 允许用户编辑解释，而非仅编辑提示词

这创造了反馈循环：用户学习如何写更好的提示，系统学习用户期望。

3. 逃逸出口设计

AI 生成的表单是起点，非终点。每个元素必须可通过自然语言和直接操作编辑：

  • 优化提示词调整整个表单
  • 点击单个字段直接编辑属性
  • 导出代码（React/Vue/HTML）完全自定义
  • 导入现有表单进行 AI 辅助迭代

防止 AI 锁定。用户永远不会被 AI 生成的内容困住。

4. 渐进式复杂度

  • 简单表单（“联系表单：姓名、邮箱、留言”）立即生效
  • 复杂表单（多步流程、条件逻辑、自定义验证）需要更详细的提示或手动优化

关键决策：我们不尝试从模糊提示推断复杂逻辑。相反，让复杂度显式化：“仅当字段 A 为’是’时显示字段 B”直接映射到可读的条件逻辑。

这使系统可预测：用户理解 AI 能解析什么，什么需要手动指定。

技术实现

模型选择

  • 初始：GPT-4（准确但慢且贵）
  • 优化：在表单描述对上微调的 GPT-3.5
    • 推理时间：8s → 2s
    • 成本降低：80%
    • 准确度保持高水平

数据结构

interface FormSchema {
  fields: Field[];
  validation: ValidationRule[];
  conditionalLogic: ConditionalRule[];
  styling: StyleConfig;
}

JSON schema 送入 React 渲染器，输出符合 WCAG 2.1 AA 标准的组件。

结果

  • ~2000 个表单已创建
  • ~85% 无需编辑直接使用
  • 2.3s 平均生成时间

关键学习：透明度胜过魔法。看到 AI 推理的用户更信任它，即使不完美。逃逸出口将 85% 准确的工具转变为 100% 有用的工具。

未来方向

  • 扩展到工作流自动化（条件邮件、集成）
  • 自定义组件库
  • 核心洞察——自然语言到结构化 UI——适用于表单之外的领域

结论

约束式生成不是限制 AI，而是引导其能力产生可靠、可访问、可维护的输出。在构建 AI 产品时，透明度、逃逸出口和渐进式复杂度不是附加功能——它们是使 AI 工具真正有用的基础设计原则。