GLM-5.1 重构AI项目实战测评与推荐榜单

灵犀助手UI与服务优化实录：从“蓝色老土”到“现代AI对话体验”

最近持续打磨“灵犀助手”AI Agent项目——继完成认证授权后，本轮聚焦用户体验。技术架构虽已就绪，但满屏蓝色调、简陋的会话管理以及若干交互痛点，严重影响留存率。于是决定做一次彻底重构，翻新UI与对话逻辑。

一、背景

成品速览

先看最终效果：支持明亮/暗色主题自由切换，会话以独立卡片形式管理，思考过程与回答内容分开展示，URL路径符合现代AI平台规范，会话状态可独立保持、随时中断。具体图片见下方优化前后对比章节。

事情起因

上次为“灵犀助手”增加认证授权后，为了提升项目完整度与竞争力，尤其是吸引用户留存，决定优化AI对话界面，使其契合现代网页AI的典型特征——独立会话管理、思考模式下实时展示推理过程等。

当前项目存在的问题

1. UI色彩单一，全蓝为主，缺乏主题切换能力
2. 前端未实现版本控制，旧登录态在新版本发布后仍生效（例如密码登录方式废弃后仍被使用，触发不必要的错误）
3. 会话URL格式不符合主流AI网页版规范
4. 无独立会话功能：正在进行的会话中切到新建对话或历史会话，再切回时输出中断，只能等本轮结束刷新页面后通过持久化查询才能获取数据
5. 缺少会话中断功能
6. 对话历史直接持久化到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优化

编写页面优化提示词

第一步，向AI下达清晰的优化指令：

你是一位专业的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，这是根本原因。

问题溯源

这次验证AI是否真的调用了skill。

你现在这一版不符合我的预期，并且你也没有调用任何skill，现在我要求你彻底放弃这一版方案，重新进行设计（使用frontend-design或者ui-ux-pro-max）

关键原因浮现：AI只去cc的插件（plugins）目录寻找，不去用户目录下查找。

手动指定这两个skill的存放路径后，AI正常调用skill。


最终正确利用这两个skill生成了新的优化方案文档。

再看一下之前未正确调用skill的原因，以便后续避免（可将注意事项写入用户级CLAUDE.md）。

第二版开发

此时上下文可能不足，且处于新优化阶段（第一版已回滚），最佳方案是新开一个对话窗口，将AI生成的优化方案作为记忆发送给它。

你是一位专业的前端开发工程师，请你按我提供给你的设计文档，按需分步骤完成开发、自主执行测试验证。

## 我提供给你的资料
1）@设计文档
2）@当前项目代码

又经过一段等待，代码编写完成。这一版才真正有优化后的味道。

优化后效果（暗/亮）：

细节微调

优化后存在的问题：

1. 第二次提示词信息过少，AI未控制优化范围，导致登录页也被改动，标题颜色与背景融为一体不可见
2. 参考其他网页AI样式，缺少主题切换按钮
3. 按钮圆角出现双重样式
4. 暗色主题下“提问案例”按钮默认背景为紫色，鼠标悬停时背景色瞬间消失
5. 只有单个面板时应隐藏回答panel的标签
6. 整体风格偏蓝紫色，需去除“AI味”

针对这些问题，补充提示词：

你是一位专业的前端开发工程师，请你帮我设计方案、然后找我人工确认、按需分步骤完成开发、自主执行测试验证。

## 当前任务
1）登录页你改为暗色后，“灵犀AI助手”这几个字就看不见了，你需要改为原来的样式
2）再增加一个自动适配的主题，根据用户系统当前的主题进行适配
3）亮色主体下，“新建对话”按钮周围有蓝紫色包围，你进行了圆角的设置，但按钮最外层好像还有一个直角的样式，导致既有圆角也有直角，需要去除直角或统一改为圆角
4）对话发送按钮的颜色需要调整，自动适配当前主题
5）暗色主体下“提问案例”按钮背景默认是紫色，鼠标放上去一瞬间背景色消失，需要修改（可参考亮色主体下的逻辑）
6）现在对话界面会显示“回答panel”和“思考panel”，需要在只有回答panel时隐藏它的tab名称（标志），当两个tab同时存在时再显示
7）整体风格从紫色换成尊贵的橙色

## 注意事项
1）有任何不明确的，一定要人工确认
2）后端接口不变

最终效果（暗/亮）：

到此，可以提交一次代码。下次功能优化或新增应重新开启对话窗口，避免历史记忆影响新功能准确性，同时防止触发最大上下文限制。

实现版本控制

问题根源：如果先发布第一版并登录，而后在短期内（登录未失效）发布第二版，会导致直接以第一版的登录信息登录，看不到第二版对登录的变更。

你是一位专业的前端开发工程师，请你帮我设计方案、然后找我人工确认、按需分步骤完成开发、自主执行测试验证。

## 当前任务
1）现在这个前端项目没有版本控制功能，问题描述如上，需要自主思考解决方案，编写计划文档
2）不只是登录，同时需要实现有关前端版本发布控制的其他相关问题（可进行网页搜索或检索开源的github仓库）
3）设计方案完成后直接放到/docs目录下，等我人工确认后再执行开发

## 注意事项
1）不能改变后端接口
2）确保检索到的信息具有时效性

人工确认：只需实现MVP功能即可。

继续开发。

AI根据方案文档自主拆分任务进行多阶段执行。

最终通过版本号机制对版本进行控制，包括本地build构建、Vercel部署触发GitHub工作流自动构建，均会进行版本号校验。

三、后端接口开发与调整

当前存在的问题

1. 用户与AI的对话临时存储在Redis中，容易造成会话丢失
2. AI网页会话URL不规范

后端开发

你是一位专业的后端开发工程师，请你帮我设计方案、然后找我人工确认、按需分步骤完成开发、自主执行测试验证。

## 当前任务
1）现在已实现大致功能，但存在以下问题：
   - 对话临时存储在Redis中，容易丢失
   - 会话URL采用 `https://lxzs.wanyj.cn/agent-chat?session_id=xxx` 形式，需改为 `https://lxzs.wanyj.cn/agent-chat/69c8ab37-2390-839b-8402-f27ba1933c64` 形式，需要判断接口是否需要更改
2）参考有关开源项目及主流AI平台（如GPT、豆包等）的实现思路，看看当前项目有哪些需要优化/完善的地方
3）先生成优化方案，保存在/docs目录下，人工确认后再编写代码

## 相关资料
1）当前项目代码

## 注意事项
1）有任何不明确的内容一定要人工确认
2）确保检索到的信息具有时效性

附几张执行过程截图 (•◡•)/ (Vibe Coding的最大优势在于很多问题无需自己动手动脑，大多数情况只需简单指点即可。生成质量完全取决于需求描述能力。)

方案生成完毕，检查并确认AI提出的7个问题。

继续执行。

开发完成后，要求AI自行总结一份修改文档供前端使用。

为你本次修改做一下总结，并形成一份文档放到/docs目录下

四、前端接口更新

后端接口变更后，前端自然需要同步更新以适配新的API。

你是一位专业的前端开发工程师，请你帮我设计方案、然后找我人工确认、按需分步骤完成开发、自主执行测试验证。

## 当前任务
1）后端接口已经更新，我会提供后端的更新文档，你需要调整涉及的方法/页面，以此适配后端新功能

## 我提供给你的资料
1）前端项目代码
2）后端项目代码
3）后端更新文档

优化后的历史会话列表效果如下（新增智能体类型及对话条数，便于用户快速区分和查找）：

五、会话状态优化

当前存在的问题

1. 开启一个对话时，切换到其他对话再切换回来，不会继承之前的状态，只有后端全部输出完毕再刷新才能看到最终数据
2. 进行中的会话无法中断

前端开发

你是一位专业的全栈开发工程师，请你帮我设计方案、然后找我人工确认、按需分步骤完成开发、自主执行测试验证。

## 当前任务
1）现在当开启一个对话时，切换到其他对话再切换回来，不会继承之前的状态。为了避免这一问题，我强制在对话开启时禁止切换其他对话/新开对话——但这样用户体验不好，需要重新规划
2）思考如何修改才能使得各个会话状态相互不影响（比如两个对话都有自己单独的状态，各自输出，切换回来还能保持当前状态）
3）如果前端无法实现，需要后端代码变更，一并列出后端方案文档
4）实现随时中断对话
5）可以参考GPT/豆包/千问等AI的实现方式
6）将前后端文档都存储在/docs目录下

## 相关资料
1）前端项目代码
2）后端项目代码
3）前后端历史文档

这里需要人工确认四个问题。

AI表明无需变更后端服务（当时很怀疑），因为当停止正在进行的会话时，后端依然在运行。实测下来，前端点击停止按钮仅仅对前端进行停止，后端任务依然正常执行，正常记录对话数据到数据库。所以当前端刷新时，数据会重新出现，没有做到真正停止——还是需要后端提供接口才行。

现在我点击停止按钮后，只是前端进行了停止，后端依然在进行中，后续的回答依然会进行持久化，导致用户刷新后内容又出现了。是需要后端提供什么接口才能保证点击停止后后端也同步停止吗？

后端开发

编写后端提示词，只需增加一个中断SSE流式输出的功能，提示词可以写得简单一点。

现在对于autoAgent这个方法，没有提供中断输出的功能。当我在前端点击停止按钮后，任务依然会继续执行，然后将消息进行持久化/存到数据库，导致任务结束后前端一刷新，还能看到中断后的内容。请你添加一个专门的用于中断输出的接口，前端调用后实现真正的中断。

六、整体细节优化

1. 如果AI回复中有思考部分（如 ... ），应单独处理区分思考内容，注意兼容无思考的版本
2. 停止按钮中间的方框有点小

需求不大，直接接着上下文用就行，一次改对，省心。

经过一大下午的优化，最终达到预期目标。成品图已经在开头展示过，这里不再重复。

最后，今天智谱发布了首个多模态 Coding 基座模型“GLM-5V-Turbo”，给AI装上了眼睛，不再依赖视觉理解MCP。可惜这次没用上，编程效果下次展示，敬请期待。

来源：互联网