Prompt 设计与前端联动：让 AI UI 真正可控

传统的 UI 通常基于静态逻辑树：点击 → 跳转 → 渲染。

但在 AI 时代，前端的交互流程变得动态、语义驱动：用户用一句话就能触发一个复杂流程、配置一个界面、组合多个组件。

如何实现这样的“AI UI”？答案是 —— Prompt 设计 + Function Calling + 前端联动策略。

一、什么是“AI 可控 UI”？

用户输入自然语言指令 → 解析为结构化 JSON → 映射到组件或页面行为。

即：语义 → 结构 → UI

例如用户输入：

“我想查看 2023 年销售数据的柱状图，并和去年同比。”

经过 AI → 返回：

{
  "chart_type": "bar",
  "dataset": "sales",
  "year": "2023",
  "compare_to": "2022"
}

前端根据这些结构字段自动构建图表组件，切换数据源、渲染对比图。

二、OpenAI Function Calling 的优势

通过 function calling，你可以定义函数结构，让 GPT 直接输出结构体，而非自由文本。

1. 定义函数结构

{
  name: "render_chart",
  description: "生成一个数据图表",
  parameters: {
    type: "object",
    properties: {
      chart_type: { type: "string", enum: ["bar", "line", "pie"] },
      year: { t