AI Agent 课程文档

切换日光/暗黑模式

039. 系统提示词与 AI 修改模板代码 ​

学习目标 ​

这一节继续完善聊天助手，让它支持系统提示词，并开始让 AI 修改简历模板代码。

学完后，你应该能理解：

  • 官方默认消息方式设置系统提示词有什么问题；
  • 为什么更适合在请求中间件里动态插入系统提示词；
  • 系统提示词为什么可以是字符串，也可以是函数；
  • 如何监听流式响应和最终完整消息；
  • 模板详情页如何切换预览和代码视图；
  • 为什么要提供“复制生成模板提示词”；
  • AI 修改代码为什么通常是整段替换；
  • 如何用开始和结束标记提取 AI 返回的代码。

官方系统提示词方案的问题 ​

有些聊天 SDK 通过默认消息设置系统提示词。

也就是在默认消息列表里放一条 system 消息。

这种方式能生效，但会带来几个问题：

  • system 消息可能显示在界面里；
  • 没有用户消息时，空白状态会被破坏；
  • 默认欢迎区域可能异常；
  • 系统提示词更新不够灵活；
  • UI 和请求逻辑混在一起。

系统提示词不应该被用户当成普通聊天内容看到。

所以这里不采用直接塞默认消息的方式。

用请求中间件插入提示词 ​

更合适的方式是在请求发出前拦截请求。

聊天 provider 的请求对象通常支持 middleware。

可以在 onRequest 里处理消息数组：

  1. 拿到即将发送的 messages；
  2. 读取当前系统提示词；
  3. 在 messages 开头插入 system 消息；
  4. 再继续发送请求。

这样系统提示词只存在于请求里，不会污染页面消息列表。

系统提示词可以动态生成 ​

AI 修改模板时，系统提示词并不是固定文本。

它可能需要根据当前模板源码、当前表单数据、当前主题色动态生成。

所以系统提示词字段可以支持两种形式：

  • 字符串；
  • 函数。

函数形式可以每次发送消息时重新计算最新提示词。

这样用户修改模板后，再发送消息时，AI 拿到的是最新模板代码。

解决闭包问题 ​

系统提示词如果依赖当前状态，要避免拿到旧值。

可以使用稳定回调或 useCallback，让函数在合适时更新。

重点是：每次发送请求时，都要能拿到最新的模板源码和页面状态。

如果系统提示词闭包里还是旧数据，AI 就会基于旧模板修改，结果会不对。

清理无用缓存逻辑 ​

早期组件可能带有前端内存消息缓存。

当前阶段先不实现聊天历史保存，也不把消息缓存到 localStorage 或后端。

所以可以删除不需要的 provider cache 和 factory 逻辑。

先让当前会话跑通，再考虑历史记录。

监听最终完整消息 ​

AI 回复完成后，可以拿到最终完整消息。

这个回调用来处理完整结果。

例如 AI 修改模板代码时，需要等它完整回复后，再从回复里提取代码。

如果只看流式片段，代码可能还没结束，无法稳定解析。

监听流式更新 ​

除了最终消息，还可以监听每个流式 chunk。

这对后续功能很重要。

例如 AI 修改简历文案时，可以边生成边填表单，让用户看到内容逐步出现。

所以聊天助手需要两个关键回调：

  • 流式更新；
  • 最终完成。

前者适合实时 UI，后者适合解析完整结果。

预览和代码视图切换 ​

模板详情页需要两个视图：

  • 预览；
  • 代码。

可以用分段控件切换。

预览视图展示模板渲染效果。

代码视图展示源码编辑器。

修改源码后，再切回预览，就能看到渲染变化。

代码编辑器 ​

模板源码使用代码编辑器展示和编辑。

语言类型可以设置为 TypeScript 或 TSX。

代码编辑器通常加载较重，所以前面已经做过动态加载和预加载相关准备。

这里要保证：

  • 编辑器高度正确；
  • 内容能绑定到表单字段；
  • 切换视图不丢数据；
  • 保存时能拿到最新源码。

复制生成模板提示词 ​

项目提供一个按钮，用来复制生成模板代码的提示词。

它的作用是方便用户把提示词复制到外部模型里，让模型生成模板初稿。

原因是当前国内模型在 UI 还原成代码上的效果可能不稳定。

外部更强模型生成的模板初稿，效果可能更接近预期。

这个按钮不是直接调用模型，而是把提示词复制到剪贴板。

AI 修改模板代码 ​

核心功能是让 AI 根据用户要求修改模板源码。

例如用户说：

  • 把头像改小；
  • 调整标题颜色；
  • 增加项目经历模块；
  • 保持其他模块位置不变。

系统提示词会把当前源码和修改规则发给模型。

模型返回新的完整代码。

前端解析出代码后，更新源码字段，再重新渲染预览。

为什么通常是整段替换 ​

代码修改很难做到稳定局部增量更新。

多数模型更擅长返回完整文件，而不是给出可靠的局部补丁。

所以模板源码修改时，通常让模型返回完整代码，然后整体替换。

如果担心代码太长，可以从工程结构上拆分文件，让模型每次只修改较小的文件。

但在当前模板场景里，先采用完整替换更直接。

用标记提取代码 ​

为了稳定提取 AI 返回的代码，可以在提示词里约定开始和结束标记。

例如：

txt
CODE_START
...代码...
CODE_END

前端收到完整消息后：

  1. 找到开始标记；
  2. 找到结束标记；
  3. 截取中间内容；
  4. 去掉 Markdown 代码块包裹；
  5. 得到真正源码；
  6. 写回表单。

这样比直接猜测回复里哪一段是代码更可靠。

提示词强调技巧 ​

如果某条规则很重要，可以在提示词里重复强调。

例如：

  • 不要改其他模块；
  • 保持内容结构；
  • 只修改用户要求的部分。

重复、加粗、放进单独区域，都能提高模型注意到这条规则的概率。

但提示词不是绝对约束。前端仍然要做错误处理和预览校验。

这一节的重点 ​

这一节让聊天助手从“能对话”进入“能修改模板”。

你需要理解：

  • 系统提示词要放进请求，不放进 UI；
  • 动态提示词要拿最新状态；
  • 流式更新和最终消息用途不同；
  • 模板源码修改先采用完整替换；
  • 用开始 / 结束标记稳定提取代码。

后续会继续处理 AI 返回错误、代码校验和更完整的模板编辑体验。

AI Agent 课程学习文档。

Copyright © 2026