一、背景
事情起因
继上次我为“灵犀助手”项目添加认证授权相关功能后，为了让项目更完整丰富，更具有竞争力，最重要的是吸引用户的“眼球”，所以我打算将AI对话界面优化一下，使之符合现代网页AI的特点，比如独立会话管理、思考模式下展示思考内容等等
当前项目存在问题
- UI界面色彩单调，全部以蓝色为主，并且没有主题切换功能
- 前端未实现版本控制，新版本发布后旧的登录态依然存在（比如账号密码方式登录已经废弃，新版本发布后依然使用账号密码方式的状态进行登录，导致出现不必要的错误）
- 会话url地址不符合市面上的AI网页版对话
- 没有独立会话功能，在一个正在进行中的会话点击新建会话/另一个历史会话，再切换回当前会话，输出就中断了，只能等这一轮会话结束后通过刷新页面，进行持久化查询后才能得到信息
- 未实现会话中断功能
- 对话历史直接持久化到Redis，数据有丢失风险，需要落库
开发环境
- 前端：glm-5.1+cc-vscode插件
- 后端：glm-5.1+cc-cli
- Skill：frontend-design + ui-ux-pro-max
- MCP：webSearchPrime、webReader、context7、chrome-devtools、zai-mcp-server
优化前后对比
优化前
优化后
二、前端UI优化
编写页面优化提示词
```markdown
你是一位专业的UI设计师，请你帮我设计方案、然后找我人工确认、按需分步骤完成开发、自主执行测试验证。
## 需求
在众多AI智能体流行的时代，用户不仅局限于跟AI对话，还能让AI处理复杂的任务等等，因此我想要设计一个AI智能体网站，用户可以自主选择可用智能体进行交互
## 当前任务
现在已有的UI界面太单一，很难吸引用户的目光。现在请你重新设计本项目的UI界面，在不改变功能的前提下，能够更好的吸引用户的目光
## 我提供给你的资料
1）@当前项目代码
## 注意事项
1）如果你有任何不明确的内容，一定要找我人工确认，才能进行下一步的动作
2）我的后端接口不会改变，注意新的UI功能要适配现有的后端接口
```
读取文件，分析现状
不得不说，每次看到这个界面都给我一种心旷神怡的感觉 ☜(ˆ▽ˆ)
分析完毕，进行总结阶段
补充信息
AI会向我们询问，需要实现哪种风格、优先级（这里我让AI优先实现对话交互页的重构）、以及主体模式（明亮/暗色主体，还是两种都要随时切换）
生成方案
最终AI生成了优化方案文档，但有一个问题就是为什么AI没有自主调用frontend-design或者ui-ux-pro-max这两个skill呢？
不管了，先开发一版尝尝咸淡 （‐＾▽＾‐）
实施计划，进行编码
直接告诉AI按计划文档执行即可。经过一杯奶茶的时间，最终优化后效果如下
怎么说呢，虽然去掉了蓝色背景，但现在这一版明显是后台管理系统的经典模版，深黑色的侧边栏，甚至还不如优化前呢。显然，这肯定不符合我的需求！
接下来就要探寻一下为什么在生成过程中没有调用到frontend-design或者ui-ux-pro-max这两个skill，这是根本原因！
问题溯源
这次我们进一步看看到底有没有进行skill的调用
你现在这一版不符合我的预期，并且你也没有调用任何skill，现在我要求你彻底放弃这一版方案，重新进行设计（使用frontend-design或者ui-ux-pro-max）
这里看到关键原因了⚠️，AI只是去cc的插件（plugins）目录去寻找而不去在用户目录下查找
那么，我就手动指定这两个skill的存放地址
这次正常调用skill了
最终正确使用这两个skill生成新的优化方案文档
然后看一下之前未正确调用skill的原因，便于以后避免这种情况发生（可以将注意事项写入用户级的CLUADE.MD中）
第二版开发
到了这里估计剩余上下文已经不充足了，并且现在处于新的优化的阶段（第一版代码已经回滚），所以最优的方案是新开一个对话窗口，并将AI生成的优化方案作为记忆发送给它
你是一位专业的前端开发工程师，请你按我提供给你的设计文档，按需分步骤完成开发、自主执行测试验证。
## 我提供给你的资料
1）@设计文档
2）@当前项目代码
又是经过一段时间的等待，也是完成了代码的编写。✅️感觉这一版才有优化后的意味~
优化后效果（暗/亮）
细节微调
优化后存在的问题
- 因为第二次的提示词提供的信息过少，导致没有对优化范围进行控制，最终登录页面也进行了相应优化，但是！优化后存在标题看不见的问题（颜色一致）
- 参考其他网页AI的样式，当前项目还少一个主题切换的按钮
- 按钮圆角出现双重样式
- 暗色主体下“提问案例”按钮背景默认是紫色，鼠标放上去的一瞬间，按钮背景色就消失
- 但面板模式下隐藏回答panel
- 整体风格呈现为蓝紫色，需要去“AI味”
你是一位专业的前端开发工程师，请你帮我设计方案、然后找我人工确认、按需分步骤完成开发、自主执行测试验证。
## 需求
在众多AI智能体流行的时代，用户不仅局限于跟AI对话，还能让AI处理复杂的任务等等，因此我想要设计一个AI智能体网站，用户可以自主选择可用智能体进行交互
## 当前任务
1）登录页你改为暗色后，“灵犀AI助手”这几个字就看不见了，你需要改为原来的样式
2）再增加一个自动适配的主题，根据用户系统当前的主题进行适配
3）亮色主体下，“新建对话”按钮周围有蓝紫色包围，你进行了圆角的设置，这没问题，但按钮最外层貌似还有一个直角的样式，导致既有圆角也有直角，你需要去除直角或者统一修改为圆角
4）对话发送那个按钮的颜色需要调整一下，自动适配当前的主题
5）暗色主体下“提问案例”按钮背景默认是紫色，鼠标放上去的一瞬间，按钮背景色就消失了，你需要修改一下（可以参考亮色主体下的逻辑）
6）现在对话界面会显式展示“回答panel”和“思考panel”，现在你需要在只有“回答panel”时隐藏掉“回答panel”这个tab的名称（标志），只有两个tab同时存在时再显示
7）现在整体风格是紫色，换成尊贵的橙色
## 我提供给你的资料
1）UI重构文档
2）当前项目代码
## 注意事项
1）如果你有任何不明确的内容，一定要找我人工确认，才能进行下一步的动作
2）我的后端接口不会改变，注意新的UI功能要适配现有的后端接口
最终效果（暗/亮）
到这一步，可以提交一次代码了，下次功能优化/新增应该重新开启一个对话窗口，避免新功能的开发收到历史记忆的影响，降低开发的准确性；同时防止触发最大上下文限制
实现版本控制
问题根源：如果我先发布第一版本，并登录。然后短期内（登录未失效）发布第二版本，这就导致可以直接以第一版本的登录信息直接登录，而看不到第二版本对登录的变更
你是一位专业的前端开发工程师，请你帮我设计方案、然后找我人工确认、按需分步骤完成开发、自主执行测试验证。
## 需求
在众多AI智能体流行的时代，用户不仅局限于跟AI对话，还能让AI处理复杂的任务等等，因此我想要设计一个AI智能体网站，用户可以自主选择可用智能体进行交互
## 当前任务
1）现在这个前端项目没有版本控制功能，如果我先发布第一版本，并登录。然后短期内（登录未失效）发布第二版本，这就导致可以直接以第一版本的登录信息直接登录，而看不到第二版本对登录的变更，你需要自主思考解决方案，编写计划文档
2）不只是登录，你同时需要实现有关前端版本发布控制的其他相关问题（可以进行网页搜索或者检索开源的github仓库）
3）设计方案完成后直接放到/docs目录下，等我人工确认后在执行开发
## 我提供给你的资料
1）当前项目代码
2）往期文档
## 注意事项
1）如果你有任何不明确的内容，一定要找我人工确认，才能进行下一步的动作
2）我的后端接口不会改变，注意新的UI功能要适配现有的后端接口
3）确保检索到的信息具有时效性，避免使用过时的信息/api/包导入/已废弃特性
进行人工确认，只需要实现MVP功能即可
继续开发 ~
AI根据方案文档自主拆分任务进行多阶段执行
✅️最终，可以通过使用版本号机制对版本进行控制，包括但不限于本地build构建、vercel部署方式会触发github工作流自动构建，都会进行版本号校验
三、后端接口开发&&调整
当前存在的问题
- 用户与AI的对话是临时存储在Redis中的，容易造成会话的丢失
- AI网页会话URL不规范
后端开发
你是一位专业的后端开发工程师，请你帮我设计方案、然后找我人工确认、按需分步骤完成开发、自主执行测试验证。
## 需求
在众多AI智能体流行的时代，用户不仅局限于跟AI对话，还能让AI处理复杂的任务等等，因此我想要设计一个AI智能体网站，用户可以自主选择可用智能体进行交互
## 当前任务
1）现在我已实现大致的功能设计，但当前存在如下问题
- 用户与AI的对话是临时存储在Redis中的，容易造成会话的丢失
- 然后对于用户会话内容，采用的是`https://lxzs.wanyj.cn/agent-chat`的形式，通过@RequestParam("session_id")的形式进行接受，我后续需要将前端传递方式改为`https://lxzs.wanyj.cn/agent-chat/69c8ab37-2390-839b-8402-f27ba1933c64`的形式，你需要判断这个接口是否需要更改
2）参考有关开源项目，以及分析主流的AI平台（比如GPT、豆包等）的相关功能的实现思路，看看当前项目有哪些需要优化/完善的地方
3）你需要先生成优化方案，保存在/docs目录下，等我人工确认后在执行代码的编写
## 我提供给你的资料
1）当前项目代码
## 注意事项
1）如果你有任何不明确的内容，一定要找我人工确认，才能进行下一步的动作
2）确保检索到的信息具有时效性，避免使用过时的信息/api/包导入/已废弃特性
废话不多说，甩几张执行过程图吧 \ (•◡•) /
（Vibe Coding的最大优点就是很多问题不需要自己动手动脑，大多数情况下只要稍微指点一下即可，至于生成的质量，完全取决于你的需求描述能力）
生成好了，我们来检查一下，确认AI的7个问题
继续 ~
✅️经过一阵操作终于是完成了开发，然后让他自己总结一份修改文档供前端使用
为你本次修改做一下总结，并形成一份文档放到/docs目录下
四、前端接口更新
现在后端接口变更完毕，前端当然也要跟着变更一下，使之适配后端API
你是一位专业的前端开发工程师，请你帮我设计方案、然后找我人工确认、按需分步骤完成开发、自主执行测试验证。
## 需求
在众多AI智能体流行的时代，用户不仅局限于跟AI对话，还能让AI处理复杂的任务等等，因此我想要设计一个AI智能体网站，用户可以自主选择可用智能体进行交互
## 当前任务
1）后端接口已经进行更新，我会给你提供后端的更新文档，你需要调整涉及到的方法/页面，以此来适配后端新功能/新特性
## 我提供给你的资料
1）前端项目代码
2）后端项目代码
3）后端更新文档
## 注意事项
1）如果你有任何不明确的内容，一定要找我人工确认，才能进行下一步的动作
2）确保检索到的信息具有时效性，避免使用过时的信息/api/包导入/已废弃特性
✅️完美，优化后的历史会话列表效果如下（新增了智能体类型以及对话的条数，便于用户快速区分以及查找）
五、会话状态优化
当前存在的问题
- 当我开启一个对话时，切换到其他的对话再切换回来，不会继承之前的状态，只有后端全部输出完毕再次刷新才能看到最终的数据
- 进行中的会话无法进行中断操作
前端开发
你是一位专业的全栈开发工程师，请你帮我设计方案、然后找我人工确认、按需分步骤完成开发、自主执行测试验证。
## 需求
在众多AI智能体流行的时代，用户不仅局限于跟AI对话，还能让AI处理复杂的任务等等，因此我想要设计一个AI智能体网站，用户可以自主选择可用智能体进行交互
## 当前任务
1）现在当我开启一个对话时，切换到其他的对话再切换回来，不会继承之前的状态，只有后端全部输出完毕再次刷新才能看到最终的数据，为了避免这一问题，我强制在一个对话开启时禁止切换到其他对话/新开对话
2）这样对于用户体验很不好，你需要帮我计划一下，如何进行更改才能使得各个会话状态相互不影响（比如两个对话都有自己单独的状态，各自输出，从一个对话切换到另一个对话在切换回来还会继续保持当前的状态）
3）如果前端不能实现，需要涉及到后端代码的更改，请你一并列出后端的实现方案文档
4）可以随时中断对话
5）你可以参考gpt/豆包/千问等AI的实现方式
6）将前后端文档都存储在/docs目录下
## 我提供给你的资料
1）前端项目代码
2）后端项目代码
3）前端历史文档
4）后端历史文档
## 注意事项
1）如果你有任何不明确的内容，一定要找我人工确认，才能进行下一步的动作
2）确保检索到的信息具有时效性，避免使用过时的信息/api/包导入/已废弃特性（可以使用context7）
这里需要人工确认四个问题
AI表明无需变更后端服务（我很怀疑 ☹），因为当停止正在进行的会话时，后端依然正在进行啊，因为后端从未提供终止对话的操作！
✅️经过实测下来，前端点击停止按钮仅仅是对前端进行停止，后端任务依然会正常执行，正常记录对话数据到数据库，所以当前端刷新时，数据就会显示出来，没有做到真正的停止，还是需要后端提供接口才行
现在我点击停止按钮后，只是前端进行了停止，后端依然在进行中，后续的回答依然会进行持久化，这样就导致用户刷新后对应的内容又会出现了。是需要我后端提供什么接口才能保证点击停止后，后端也同步停止吗
后端开发
编写后端提示词，因为只需要增加一个中断sse流式输出的功能，提示词可以写的简单一点
现在对于autoAgent这个方法，没有提供中断输出的功能，当我在前端点击停止按钮后，任务依然会继续执行，然后将消息进行持久化/存到数据库，这样就导致任务结束后，前端界面一刷新，还能看到中断后的内容，请你添加一个专门的用于中断输出的接口，前端调用后，实现真正的中断
六、整体细节优化
- 如果AI回复中有思考部分（xxx），你应该单独处理区分思考部分的内容，注意要兼容无思考的版本
- 停止按钮中间的方框有点小
需求不大，直接接着上下文用就行，也是一次改对✅️，省心
最后，经过一大下午的优化，也是达到了我预期的目标，成品图已经在开头放过了，这里就不再重复放了
最后的最后，今天智谱发布了首个多模态 Coding 基座模型“GLM-5V-Turbo”，给AI装上了眼睛👀，不再依赖于视觉理解MCP，可惜这次没用上。编程效果下次展示，敬请期待 ~
最后的最后的最后，放个优惠连接 点击跳转->立减5% 互利你我他 ✌ (>‿◠)✌
