本文作者：JU974，中国科学技术大学人工智能专业本科生

一、灵感来源

一切始于我在数据集网站发现了一个动漫人脸数据集 iCartoonFace。当时我正在学习 YOLO 目标检测算法，便萌生了一个想法：何不做一个动漫人物识别项目？这既能巩固所学知识，又能完成本学期《人工智能实践》的课程作业。

经过一段时间的模型训练，我成功构建了 api_server，但项目还缺少一个直观的可视化界面。刚好最近了解到文心快码出了最新的 3.5S 版本，官方介绍的特色能力是多智能体自主协同完成开发任务，于是决定用文心快码来完成开发。目前可以通过在 VSCode、JetBrains IDEs 等主流 IDE 中安装 Comate 插件，或直接使用功能强大的独立 AI IDE 来体验文心快码。

我这里采用的是官方默认 Agent 模式——Zulu，以及默认的大语言模型设置——Auto，其他功能和智能体还没来得及研究。Zulu 是能够满足我当前的开发需求的，并且选择 Zulu 后点击 Subagent 配置可以看到，它其实已经内置了 DeepRead 智能体。

二、理解项目

要让 AI Coding 发挥出真正的实力，得给 AI 充足的上下文，第一步肯定得让 AI 知道我的项目是做什么的，这时候 DeepRead 智能体就有了用武之地。刚好 Comate 提供了一个「介绍当前项目」的提示标签，所以我直接用这个标签。

Zulu 十分详细地阅读了该代码文件，总结了当前的业务目标、核心功能、整体架构、数据实体、业务流程。这其实也算是一个小小的心得，如果想要使用 AI Coding 在项目上做二次开发，都需要先让 AI 通读项目结构内容等，方便做出后面的决策修改。

三、直接给要求

由于我是想让 Zulu 基于原始项目写网页，现在 ta 已经理解我用了什么框架、实现了哪些功能。这个就是 AI 的强大之处，不用像工作同事、项目队友合作那样挨个对接。现在直接给 ta 你的要求，让 ta 直接交付，后面再慢慢修改。（要是能一遍写好，并让我满意最好不过了😠）

这里我的初步要求是：

我写的网页太丑了，帮我设计一个规整好看的动漫人物识别网页，要求尽量体现 api_server 的所有功能。

Comate Zulu 回复的一部分：

我会创建一个新的 HTML 文件来展示所有 API 功能，包含以下部分：

1. 文件上传区域

2. 检测/识别结果显示区

3. API 功能切换面板

4. 结果可视化展示

5. 详细的 API 响应信息

然后就开始编写 html 文件了，但是！竟然把 js、css 也都写在 html 文件中。这一点不是很规范，并且这个网页也不算小，还是需要符合统一标准的。编写完成后，说明了一下特点功能和使用方式等，我迫不及待运行然后点开网页。感觉外观还不错，我还挺喜欢这个配色和布局的，然后检查了一下后台，也没什么报错。

1. 现代化设计：

• 使用 Bootstrap 5 框架构建响应式布局

• 渐变色标题栏和专业卡片设计

• 清晰的视觉层次和间距

2. 完整功能展示：

• 支持三种 API 模式切换（检测＋识别/仅检测/仅识别）

• 图片上传和预览功能

• 实时显示检测框和识别结果

• 详细的 API 响应信息展示

3. 交互体验优化：

• 加载状态指示器

• 错误处理和用户反馈

• 结果可视化展示（检测框＋角色标签）

4. 系统信息展示：

• 服务状态监控

• 模型加载状态

• 最后更新时间

四、测试功能

编写好一个基础的网页是远远不够的，功能完善才是重点。在测试环节，我先是用一张单人角色的图片测试了所有功能，发现都没啥问题。

第二轮测试我选择了一张多角色图，发现存在展示效果上的问题，这得改。

五、优化结构和修改展示效果

于是我提出优化要求：

使用 js css 不要全部写在 html 中，还有现在检测框不要标注上标签文字，只需要检测框就行了，然后鼠标悬浮放到对应检测框上面可以在鼠标旁边显示信息

注意：如果是啥也不会的小白，比如 js、css 都不知道，想要进行二次开发，还是很有局限性的，所以至少得要知道一些基础的前置知识。

后面我就没有太关注回复的流程逻辑了，主要我也不太懂 css，js 代码，对我来说结果比较重要，只要能修改好代码能跑就没问题。可以看到 Comate 创建了对应的 js 和 css，这样更好管理网页了。

直接运行访问，发现效果好多了，并且功能也都正常。只不过还有小问题，比如鼠标悬浮显示信息这块，我要求的是在鼠标旁边显示，但是有时候会显示到屏幕外面去，这点需要再优化。

部分 bug 如下视频：https://live.csdn.net/v/496648

六、问题修复

然后就是基本的流程测试发现问题修复，用了这么多 AI Coding 工具，很少有可以直接一步修理好这种不明显的非 bug 类型的问题，Comate 也不例外，不过几次修改之后，基本能达到我想要的效果了，而且也没有影响原来的功能。

修复完成后，最终的项目效果如下视频：https://live.csdn.net/v/496650

为了完善项目，后面继续让 Comate 写了一个 api 文档页面并能够在主页面跳转，三轮聊天就写好并修复完善了。以及最后还让 Comate 补充了下 README 文档。

最终的项目地址可见：https://github.com/minghf85/yolov8_anim_recog/tree/comate

七、总结

Comate 用起来还是很方便的，通过多轮对话就能实现我想要的功能，交互很轻松，最终给出一个满意的结果。多智能体的功能是一大亮点，具体的协同开发方式还是得按照个人需求去慢慢探索。但同时还有很多细节需要打磨。

• 使用库版本：虽然在这个项目中没怎么体现，但是在其他地方用的时候，发现大多数时候用的库还都比较老了，不是最新的，这点有待改进。因为一般安装库不指定版本都是安装的最新版，但是 Comate 用有的库比如 openai 这个库，还是老版本的类和方法，导致会出 bug，虽然也能改但是这个问题还是有点影响体验。

• 代码规范：这点上面也提到了，直接把 js、css 写在 html 中，这点不太符合前端开发的规范，应该在提示词中加入规范化代码文件结构的要求，不只是在单个文件内部的代码结构上做文章，还需要整个代码结构规范化。

• 是否保留修改代码问题：这个可以看看其他 AI Coding 工具的做法，在生成代码后，会询问是否保留修改，现在 Comate 的覆盖方式很奇怪，不能选择那几行代码进行覆盖，而是直接覆盖整个文件。

• 代码解释和 bug 解释：开门见山地给出代码解释和 bug 解释，这点也还欠缺，有时候一个简单的解释就能让用户知道是什么问题，用户也能成长，也能溯源问题等，而不是闷头大干，用户啥也不知道。

你是否也想用 AI Coding 打造个人项目？

文心快码 Meetup 招募进行中！

一起来现场 Vibe Coding！

点击🔗阅读文章立即报名！