简单体验了下腾讯出的 CodeBuddy AI 编码插件

前言

大家好，我是松柏。

前几天听同事说腾讯新出了一款 AI 编程插件 CodeBuddy ，趁着今天有空，也是抓紧体验了一把。

个人感觉效果还不错，拿经典的纯前端实现 todo 清单举例，不到 5 分钟就实现了下面这个效果，甚至还有右上角还能切换黑暗模式~

但是听说每个月只能免费用 50 次，这就很难受了，毕竟用的多了这连两天的量都不够。不过先不管这个额度的问题，先来一起看看它的效果怎么样吧。

安装 & 熟悉

1、安装

安装的话就不多说了，VSCode 和 JetBrains 全家桶都支持，到对应的插件市场搜索安装即可：

不过竟然连微信开发者工具都支持，也算是一个独特的优势吧。

2、熟悉

安装之后，从左侧边栏打开：

顶部一栏是不同的功能模式，对话(chat)、代码评审(Code Review)、单元测试(Unit Test) 是我们比较熟悉的功能。而 Craft 模式应该是这个插件主打的功能了，也是我们用的最多的功能，类似 Cursor 的 Agent 模式。

官方文档：https://cloud.tencent.com/document/product/1749/117044

“官方介绍：全新软件开发智能体 Craft，输入自然语言指令，支持文件多选，AI 深度理解，自主完成多文件代码生成和改写，即刻落地可执行应用。与 Chat 对话功能相比，跨文件上下文理解、批量代码生成与修改、智能代码优化与重构是 Craft 的核心功能，尤其是在生成代码工程中表现突出，能够显著提升开发者的效率。

五分钟开发 todo 清单

还是拿经典的 todo 清单为例，看看它做出来的效果怎么样。不想动手写的可以直接看我这边的代码：https://github.com/co-pine/codebuddy-todolist-demo?tab=readme-ov-file

1、写 prompt

首先搞清楚我们的需求，也就是一个简单的 todo 清单，具体的需求：

• 样式简约大气、适配移动端
• 不需要后端，使用 localstorage 存储
• 使用 html + css + js 实现，不要使用其他各种复杂的框架

接下来我们把上述需求描述给 AI ，让 AI 写一个更好、更具体的 prompt：

“我正在使用 AI 编程助手写一个备忘录网站，核心需求是样式简约大气、适配移动端，不需要后端，存储使用 localstorage，使用 html + css + js 实现，不要使用其他各种复杂的框架 根据以上需求和 prompt 工程(https://help.aliyun.com/zh/model-studio/use-cases/prompt-engineering-guide)，帮我写一个规范、效果较好的 prompt

“Q：为什么我没有直接把需求给 AI 开始写代码呢？ A：因为 prompt 的质量能很大程度上影响 AI 的输出质量，所以我一般会用 AI 来优化一下 prompt，再进行 AI 编码。个人觉得这个点还是非常重要的，建议大家尝试一下。

很快插件就把写好的 prompt 输出到本地文本里了，内容如下：

# 备忘录网站开发 Prompt

## 角色设定
你是一位专业的前端开发工程师，擅长开发简约优雅的 Web 应用。请基于以下需求开发一个备忘录网站。

## 背景和目标
需要开发一个简约大气的备忘录网站，让用户能够方便地记录和管理他们的备忘事项。网站应该具有良好的移动端适配性，确保用户在各种设备上都能获得一致的使用体验。

## 技术要求
……

## 功能规范
……

## 设计规范
……

## 质量要求
……

## 输出格式
请按照以下结构提供代码实现：
……

## 其他说明

请基于以上要求，提供完整的代码实现。在实现过程中，如果遇到任何需要权衡或决策的地方，请优先考虑用户体验和代码质量。

这里为了不占用过多的篇幅，我只保留了 prompt 的结构，完整版可以到仓库看(https://github.com/co-pine/codebuddy-todolist-demo/blob/main/prompt.md)。

从上面的内容能够看出这个 prompt 的结构很清晰，要求也很明确，比我自己写的要好出太多了，不满意的地方可以自己手动调整一下，大方向没有问题即可。

2、AI 写代码

把上一步写的 prompt 喂给 AI，等它生成完成就好了：

3、查看效果

来到入口文件(index.html)，使用浏览器打开，即可看到效果：

第一眼给我的感觉是过于简约了，甚至有点简陋！不过，问题不大，哈哈🐶。

稍微体验了，感觉还是不错的，该有的样式都有，emoji 用的也比较合理，甚至右上角还能切换黑暗模式：

移动端的兼容也没什么问题：

结语

整体来说我感觉处理简单需求效果还是比较不错的，不过我没有进行比较深入的使用，也就不清楚它在处理较复杂任务的时候表现如何，欢迎大家评论区交流探讨。

既然都看到这里了，不妨点个关注吧，下期再见👋🏻！