腾讯CodeBuddy：AI编程新范式，产设研一体化开发工作台解析

1. 什么是腾讯CodeBuddy？ #腾讯

腾讯CodeBuddy 是一款由腾讯推出的 AI IDE，旨在打造首个“产品-设计-研发部署”全流程 AI 一体化的开发工作台。它不再是插件形式，而是拥有了自己的 IDE，并且在 AI 编程领域做出了一些创新。

2. CodeBuddy有哪些亮点？ #腾讯云开发

CodeBuddy 的亮点可以总结为以下几点：

1. 国际版支持Claude4：目前可以使用 Claude4，而且是免费的。
2. Plan Mode模式：可以使用 Plan mode 模式，生成产品 PRD、TRD、DRD，再用这些文档去生成网页，最后部署后端，实现真一站式服务。
3. Figma一键转网页：可以直接把 Figma 的设计稿，一键变成网页。
4. 集成设计组件库：集成了几个常用的设计组件库，例如 Shadcn。
5. 自然语言样式微调：可以针对页面部分 Html 元素进行自然语言样式微调。
6. 集成后端服务：集成了后端，腾讯云开发CloudBase 与 Supabase，即使是纯小白也能搭建后端。

3. CodeBuddy如何实现产设研一体化？ #独立开发者

CodeBuddy 的设计理念更像是给这个时代的 独立开发者 用的一个 AI 工作台，它不仅仅面向纯开发者，也考虑到了 产品经理、UI设计师 等角色。

• 产品阶段：可以生成 PRD、TRD、DRD 等文档，辅助产品规划。
• 设计阶段：支持 Figma 一键转网页，集成设计组件库，方便 UI 设计师快速搭建界面。
• 研发阶段：支持自然语言样式微调，集成后端服务，降低开发门槛。

4. 如何使用CodeBuddy开发一个宝可梦图鉴网站？ #Pokedex

以设计一个宝可梦图鉴网站为例，展示 CodeBuddy 的工作流程：

1. 开启Plan mode模式。
2. 选择一套设计组件，比如 Shadcn。
3. 输入一句话：“做个pokedex”。
4. CodeBuddy 会进行分析，列出详细的计划，然后开始生成网页。
5. 口喷修改：在预览界面上框选中元素，进行口头描述修改，例如修改区域价格渐变、变成圆角等。
6. 部署上线：连接后端服务集成后，一键部署上线。

详细步骤：

1. 启动CodeBuddy并选择Plan Mode：
   • 打开CodeBuddy IDE。
   • 选择新建项目，并选择 Plan Mode。
2. 选择设计组件库：
   • 在项目设置中，选择一个设计组件库，例如 Shadcn，这可以帮助你快速搭建美观的界面。
3. 输入需求描述：
   • 在 AI 提示框中输入你的需求，例如：“做一个宝可梦图鉴网站”。
4. 查看AI生成的计划：
   • CodeBuddy会分析你的需求，并生成一个详细的开发计划，包括页面结构、功能模块等。
5. AI自动生成代码：
   • 根据计划，CodeBuddy会自动生成前端代码（HTML、CSS、JavaScript）和后端代码（如果需要）。
6. 预览和修改：
   • 在CodeBuddy的预览界面查看生成的网页效果。
   • 使用口喷修改功能，选中页面元素，通过自然语言描述修改样式，例如：“将这个按钮的颜色改为蓝色”。
7. 连接后端服务：
   • 如果你的网站需要后端数据交互，可以连接 腾讯云开发CloudBase 或 Supabase 等后端服务。
   • 重要提示： 你需要在腾讯云或Supabase上创建相应的项目，并获取连接信息。
8. 部署上线：
   • 点击部署按钮，CodeBuddy会将你的网站部署到云端，生成一个可以访问的链接。

示例代码（HTML）：

html

示例代码（CSS）：

css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}

header {
background-color: #dc0a2d;
color: white;
padding: 20px;
text-align: center;
}

main {
padding: 20px;
}

.pokemon-list {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.pokemon-item {
width: 200px;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
background-color: white;
}

footer {
text-align: center;
padding: 10px;
background-color: #eee;
font-size: small;
}

示例代码（JavaScript）：

javascript
document.addEventListener(‘DOMContentLoaded’, function() {
// 模拟宝可梦数据
const pokemonData = [
{ name: ‘妙蛙种子’, image: ‘bulbasaur.png’ },
{ name: ‘小火龙’, image: ‘charmander.png’ },
{ name: ‘杰尼龟’, image: ‘squirtle.png’ }
];

const pokemonList = document.querySelector('.pokemon-list');

pokemonData.forEach(pokemon => {
    const pokemonItem = document.createElement('div');
    pokemonItem.classList.add('pokemon-item');

    const image = document.createElement('img');
    image.src = pokemon.image;
    image.alt = pokemon.name;
    pokemonItem.appendChild(image);

    const name = document.createElement('p');
    name.textContent = pokemon.name;
    pokemonItem.appendChild(name);

    pokemonList.appendChild(pokemonItem);
});

});

5. CodeBuddy对AI编程的未来有什么影响？ #AI

腾讯云开发者产品总经理刘毅认为，未来 AI 编程将分化成两种范式：

• 简单应用开发需求：非技术背景的个人开发者通过 氛围编程 即可实现。
• 复杂系统需要专业化的团队协作：则需要 规约编程。

在简单应用开发领域，AI 是主力，而在复杂系统开发领域，AI 只是辅助。

6. 如何获取CodeBuddy的测试资格？ #内测

目前 CodeBuddy 还在内测阶段，需要邀请码才能进入。可以通过以下方式获取测试资格：

• 申请测试：访问官方网站 https://wj.qq.com/s2/22240515/0ac5/ 申请测试。
• 参与抽奖：关注卡兹克的公众号，参与邀请码抽奖活动。

7. 总结

腾讯CodeBuddy 是一款具有创新性的 AI IDE，它通过 Plan mode、Figma 一键转网页、集成设计组件库等功能，降低了开发门槛，让更多人可以参与到软件开发中来。它代表了 AI 编程的一种新趋势，即 AI 将在简单应用开发中扮演更重要的角色，而在复杂系统开发中则作为辅助工具。

我认为：

CodeBuddy的出现，无疑是给独立开发者和小型团队带来了一缕春风。它试图打破传统开发模式的壁垒，让更多非专业人士也能参与到软件创作中来。然而，正如鲁迅先生所说：“希望本无所谓有，无所谓无的。这正如地上的路；其实地上本没有路，走的人多了，也便成了路。” CodeBuddy能否真正改变开发格局，还需要时间的检验，以及开发者们的共同努力。但无论如何，这种拥抱AI、降低门槛的尝试，都值得我们鼓励和期待。