![image](https://developer.qcloudimg.com/http-save/yehe-6026141/e6aefd03ad40f0838749565cf077fa3b.png)
## 一、那个惊艳的 Demo，为什么没人敢用

"让大模型写一个管理页面"这件事，你大概已经见过十几个 Demo 了。

输入一句"做个商品列表页，带搜索和分页"，十几秒后一个像模像样的界面出现在屏幕上。截图发到群里，一片叫好。

然后就没有然后了。

因为你把它接到真实系统上，会连着撞五面墙：

**第一面：字段名是编的。** 模型不知道你的商品表长什么样，它写 `row.productName` 写得非常自信，而你的字段其实叫 `name`。页面打开，一片空白。

**第二面：接口也是编的。** 它顺手写了个 `fetch('/api/product/list')`，你的系统根本没这个路由。

**第三面：权限没了。** 页面裸跑，要么带不上登录凭据，要么图省事用了管理员权限——你辛辛苦苦建的"销售 A 只能看自己客户"，一夜清零。

**第四面：数字是假的。** 你说要个销售看板，它拉了一页 20 条明细，在前端加了个总和，KPI 卡片和趋势图都渲染得很好看。**然后每一个数字都是错的**——它只反映当前这一页。更糟的是，它不报错，就那么静静地错着，等着被人拿去开会。

**第五面：改一次全崩。** 第二轮你说"把状态列换成标签"，它把整页重写了一遍，之前手调的样式全没了。第八轮它甚至把你第五轮明确要求删掉的东西又加回来了。

这五面墙，没有一面能靠"把 prompt 写得更长"翻过去。

**Erupt Canvas** 是我们在 Erupt（一个注解驱动的 Java 低代码框架）里给这五个问题的答案。它已经随 Erupt 2.1 开源。这篇文章讲的不是"我们做了个 AI 生成页面的功能"，而是**为了让这件事真的敢用在生产上，我们做了哪五个不那么直觉的决定**。

---

## 二、决定一：生成物就是一份完整的 HTML，存在数据库里

先说最基础的形态选择。

生成物不是 Vue 组件源码，不是一份 JSON 配置再由前端渲染器解释。就是一份 `<!DOCTYPE html>` 开头、`</html>` 结尾的完整文档，Vue 3 和 Element Plus 都本地内置，**离线环境也能跑**，整份存进数据库一个字段里。

代价是文档不小，几十 KB 量级。换来三件事：

- **零构建**——没有 npm，没有 webpack，没有产物目录。
- **零重启**——页面不是 Java 类也不是模板文件，改它就是改一行数据库记录。
- **天然可回滚**——整份文档就是一个不可变快照。

访问路径也很轻。每条记录新建时分配一个 6 位短码，页面就挂在 `#/ai/canvas/{短码}` 上。

顺带一个小到不值得说、但我们还是做了的细节：短码的字符表剔掉了 `0`、`o`、`1`、`l`。因为这个码会出现在 URL 里，也会被人**念给同事听**。歧义字符是纯粹的运维成本。

---

## 三、决定二：不给模型"猜"的机会

字段瞎编、接口瞎编，本质是同一个问题——**模型不知道，但它不会承认自己不知道**。

所以每次生成，我们给模型的 system prompt 是**实时拼装**的四段：


![image](https://developer.qcloudimg.com/http-save/yehe-6026141/98821f3843db69f45e6bc1013f0f63ec.png)


**① 输出契约。** 一份写死的说明书：只输出一个完整 HTML 文档、资源路径必须保留占位符（服务端渲染时替换成真实部署路径，这样应用挂在 `/` 还是 `/admin` 都不会断链）、必须引入取数 SDK。

**② 页面风格。** 19 套官方风格，从 TDesign 企业风到赛博朋克、包豪斯、终端绿、新粗野主义。每套都带一份约 5KB 的示例页作为视觉参考。

这里有句措辞很小心的提示词：*"抄它的视觉语言——布局、配色、字体、组件形状；不要抄它的内容、资源和取数代码。"*

不写这句，模型会连示例页里的假数据一起搬过来。

**③ 取数指南。** 讲清楚这个数据源怎么查。开头第一句就是禁令：*"只用 SDK，永远不要自己发 HTTP 请求。"*

SDK 只有 5KB，做的事很少但很关键——它是唯一的取数出口，帮页面处理好了部署路径、登录凭据和请求头。模型只需要写 `Erupt.table('Product', {...})`，剩下的不用管，也不许管。

**④ 数据模型。** 运行时把目标模型的完整字段结构序列化进 prompt。

第四段是关键。**Erupt 是注解驱动的框架——后台界面本来就是从注解元数据生成出来的，所以这份元数据天生就是一份完整、准确、机器可读的领域描述。**

这是注解驱动在 AI 时代白拿的一份红利：不需要额外维护一份"给 AI 看的 schema"，现成的元数据直接喂进去就行。

### 还有一类模型绝对猜不到的东西

Erupt 的列表接口返回的行是**扁平的**——关联字段会按展示列打平。比如商品关联的部门，展示列是名称，那么读的时候是 `row.dept_name`，而不是 `row.dept.name`（后者会直接抛异常）。

这种"你不说他一定错"的约定，我们在提示词里用了整节篇幅，一条一条写清楚：哪种字段读什么键、几层关联怎么拼、列表接口和详情接口的返回形状为什么不一样、什么字段根本不会出现在列表行里。

朴素但有效。**面向 LLM 写的文档，和面向新同事写的文档，本质是一回事——把"老手才知道的隐含约定"显式写出来。**

---

## 四、决定三：不许猜，让它验

前面三节做的都是"把已知信息喂全"。但提示词写得再细都有边界。

条件表达式用错了、某个字段你以为有展示列其实没有、枚举值猜成了中文标签——这些错误，提示词防不住。

所以有了整个模块里最核心的一条设计：

> **生成过程中，模型必须把每一条计划中的查询，用工具真实执行一遍。跑通了，才允许写进页面。**


![image](https://developer.qcloudimg.com/http-save/yehe-6026141/bcaed0bbd1aa4a0d9f183d0fd5048ad6.png)


流程是这样的：模型先规划页面需要哪几个请求；发现缺信息（某个关联模型的结构、某个枚举的选项列表）就调元数据工具去查，**不许猜**；然后逐个调校验工具，把查询参数原封不动地丢过去真跑；失败或者结果不对，就改查询再验；全部通过，才输出最终页面。

提示词里最狠的一句是：**页面只能读取在校验结果里真实观察到的字段键。**

这一条把前面"扁平行键"那套规则从"讲给模型听"升级成了"让模型亲眼看到"。它不用理解为什么是 `row.dept_name`，它在校验返回里看见了这个键，就照着写。

几个刻意的设计：

- **校验只取 10 行。** 目的是"观察行的形状"，不是拉数据。模型就算传了 `pageSize: 1000` 也会被压回 10——不然生成上下文直接冲爆。
- **校验环境和运行环境必须字节级一致。** 比如查询条件没写比较符时，SDK 默认按"等于"处理，那校验工具也必须按"等于"补。"校验通过、上线报错"是最恶心的一类 bug。
- **元数据工具的说明里写了"什么时候不要调"。** 目标模型的结构已经在提示词里了，只有页面触达了别的模型才需要调。省 token，也省往返。
- **生成期间把其他工具全关掉。** Erupt 本身有一整套 AI 工具箱和 MCP 接入，但生成页面这一轮里全部关闭，模型唯一能碰的就是这把校验工具。理由很朴素：生成一个页面不需要能删库、能跑 shell、能调外部服务。**最小工具面 = 最小事故面。**

还有个产品层面的处理：工具调用会实时推给前端。一次带校验的生成大概几十秒到两分钟，如果界面上什么都不显示，用户会以为卡死了然后刷新——所以设计器里能看到"正在校验第 2 条查询"这样的进度。

---

## 五、决定四：宁可不做，也不做错的

这是我个人觉得最反直觉、但最正确的一条。

回到第四面墙：Erupt 的列表接口只能返回一页明细，没有求和、没有分组。那用户说"给我做个销售看板"怎么办？

大部分实现会让模型硬做。反正拉到数据了，前端算一下，图表渲染出来，Demo 效果拉满。

我们的选择是：**不做。**

提示词里这段是全文语气最重的地方（原文是英文，这里译出来）：

> **绝对不要生成统计或分析类组件**——总计、求和、平均、比率、排名、趋势图、分布图、KPI 卡片，或任何靠聚合已取回的行算出来的数字。它们只会静默地反映当前一页，**是错的**。
>
> 唯一可用的全量数字是列表接口返回的记录总数，显示它没问题。
>
> 如果需求要统计或图表，**就把页面做成没有那部分**——列表、详情、表单都行，但不要用分页数据伪造统计。

注意 "**静默地**错" 这个措辞。报错你会去修；一个看起来合理、其实基于一页数据算出来的销售额，会被人截图发到周会上。

同一节里还顺手把写操作管住了：**页面默认只读**，只有需求明确说了要增删改才用写接口；**每个删除必须有二次确认弹窗**；**写完必须刷新列表并给成功提示**；被服务端权限拒绝时，**把错误显示给用户，不要吞掉**。

这三条不是安全边界（真正的边界在服务端），是产品质量的下限。

### 那统计到底怎么做？换个数据源

数据源是插件化的——实现一个接口、注册成 Spring Bean，就是一个新数据源。整个生成流程、设计器、校验机制都能复用。

于是 Erupt 的 OLAP 语义层模块挂了第二个数据源上来：

![image](https://developer.qcloudimg.com/http-save/yehe-6026141/b8b0ae41163231217cdf2f465df3a70a.png)

它讲的是完全不同的一套话：这是个**只读的分析立方体**，每次查询都是聚合，维度就是 GROUP BY 的键，度量是预先定义好的聚合值；维度上的过滤变成 WHERE，度量上的过滤变成 HAVING。校验工具也换成了聚合版。

**明细归明细数据源，统计归语义层。**

同一个设计器，换数据源就换了一整套能力边界和话术。这比在一个提示词里写"如果是统计场景就……否则就……"要干净得多——**因为能力边界本来就该由数据源自己声明，不该由提示词去打补丁。**

---

## 六、决定五：权限不给 AI 开后门

这是"能不能上生产"的分水岭。

![](https://developer.qcloudimg.com/http-save/yehe-6026141/3261f228c99ecea4823f270e16ee8123.png)


生成的页面**不带任何服务端凭据**。它用的是当前访问者自己的登录凭据。

所以：

- 行级数据权限完全跟随登录人，AI 生成的页面绕不过去；
- 非管理员打开页面只需登录，但页面里**每一次取数**都要求他拥有目标模型的菜单权限——校验点在数据接口上，不在页面接口上，所以"能打开页面"不等于"能看到数据"；
- 写操作的权限校验同样在服务端；
- 页面发布给谁看，走 Erupt 原有的菜单授权体系，**没有第二套权限模型**。

一句话：**一个 AI 生成的页面，权限行为和一个手写页面完全一致。**

从数据库里那份 HTML 到浏览器里能看的页面，中间服务端做三件事：把部署路径占位符换成真实路径；万一模型忘了引入 SDK 就补上；把访问者的凭据注入进去交给 SDK。

顺带说个小坑：静态资源缓存了一个月，SDK 升级后浏览器不会重新拉。解法是用后端启动时间戳做 SDK 的 URL 版本号，一重启就自然失效。这种小事没人会写在设计文档里，但它决定了你线上到底能不能顺利升级。

---

## 七、决定六（补一条）：不回放历史对话

回到第五面墙——改一次全崩。

直觉做法是把历史对话全部带上，让模型"记得"之前说过什么。我们明确不这么做。

**当前页面源码才是唯一事实源。** 它已经包含了历史所有轮次的产出，包括你手动调过的部分。回放历史需求的风险是复活被放弃的指令：你第 2 轮说"加个导出按钮"，第 5 轮说"算了去掉"，历史全带上，第 8 轮它可能又给你加回来。

每一轮生成都存成一个独立版本，只增不改。聊崩了？切回上一版，一次点击。

改动范围失控的问题，我们用另一个办法解决——**在预览里直接点选一个元素**，把需求锚定到它上面。系统只把这个元素的定位信息告诉模型（元素本身就在页面源码里，没必要重复传），并明确要求"只改这里，别动其他地方"。

这里还有个特别啰嗦但必要的提示：选择器是从**渲染后的 DOM** 推出来的，而浏览器会自动补一些节点（典型的是表格里的 `<tbody>`），源码里未必有。所以得显式告诉模型："如果选择器对不上，就按结构去匹配。"

---

## 八、上手

```xml
<dependency>
    <groupId>xyz.erupt</groupId>
    <artifactId>erupt-ai-canvas</artifactId>
    <version>${erupt.version}</version>
</dependency>
```

前置条件：Erupt 的 AI 模块里至少配好一个可用的大模型。

四步：

1. **AI Canvas** 菜单 → 新建一条记录，填个名字。
2. 点 **Designer** 进设计器 → 选数据源、数据模型、页面风格 → 用自然语言描述页面 → 逐版迭代。
3. 满意了，点 **Send to Menu** 发布成菜单。
4. 列表里的 **Path** 列点开是全屏预览。

Java 17 + Spring Boot 3.5，Apache 2.0。

---

## 九、六条可以搬走的经验

抛开具体实现，这套东西里真正可复用的是这几条：

**1. 元数据比提示词值钱。** 如果你的系统本来就有一份完整、准确的结构描述（注解、schema、IDL 都算），直接喂给模型，别再手写一份"给 AI 看的文档"。

**2. 别让模型猜，让它验。** 提示词再细都有边界，"调用工具真跑一遍"是硬约束。ReAct 在这里不是为了让模型更聪明，是为了让它**不能**输出跑不通的东西。

**3. 生成期间收窄工具面。** 干一件具体的事，就只给干这件事必需的工具。事故面小一个数量级。

**4. 宁可不做，不做错的。** 静默错误比报错危险得多。牺牲一点 Demo 观感，换数字可信。

**5. 能力边界让数据源自己声明。** 别在提示词里写一堆 if-else 去适配不同场景，换一个数据源实现更干净。

**6. 权限不给 AI 开后门。** 用访问者自己的凭据，让 AI 生成的东西和手写的东西走同一套权限。这一条不做，前面五条都白搭。

---

**开源地址**：https://github.com/erupts/erupt
**文档**：https://docs.erupt.xyz
**在线体验**：https://www.erupt.xyz

如果你也在做类似的事，欢迎在评论区聊聊你怎么解决"字段瞎编"的——我挺好奇除了"让它自己验"之外，还有没有别的路子。


输入一句"做个商品列表页，带搜索和分页"，十几秒后一个像模像样的界面出现在屏幕上。截图发到群里，一片叫好。

Erupt Canvas：AI 生成的后台页面，凭什么敢上生产

Erupt 是注解驱动的框架——后台界面本来就是从注解元数据生成出来的，所以这份元数据天生就是一份完整、准确、机器可读的领域描述。

低代码

人工智能

后端

EruptCanvas解决AI生成页面无法上生产的五大难题：字段名与接口不真实、权限缺失、统计错误、迭代崩溃。通过生成完整HTML存档、注入实时元数据、强制工具校验、禁止伪造统计、沿用原权限体系，实现可交付的生产级AI页面。已随Erupt2.1开源。

数据接口

代码解释

数据库

路由

JSON

OLAP

Java

腾讯云BI特惠9.9元起！


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Erupt Canvas：AI 生成的后台页面，凭什么敢上生产-腾讯云开发者社区-腾讯云

Erupt Canvas：AI 生成的后台页面，凭什么敢上生产

Erupt Canvas：AI 生成的后台页面，凭什么敢上生产

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐