大家好，我是程序员500佰。
5月14日，我也写了一篇CodeBuddy插件的文章，意外获得5.6k阅读。
当时我其实想使用这款工具的主要原因是，知识库集成了支付、微信小程序模块，后续想借助它来开发一个支付模块。
22 号，CodeBuddy 发布全新的 AI IDE，它和 Cursor、Trae 类似，都属于 AI 编程 IDE，但 CodeBuddy IDE 的定位是“产设研一体”的 AI 全栈工程师。
它可以直接把Figma 设计稿变成代码，还能部署上线，让你体验一把一站式创造产品的快感。
内嵌这个是别的 IDE都没有的一种全新交互模式
不过说实话，CodeBuddy IDE 控件是有点多，而且估计是刚上线太忙，没出新手引导，新手上手可能有点难。
其中邀请码是在小程序腾讯云福利站获取，使用微信登录参与抽奖必中。
然后登录需要魔法外加谷歌邮箱。填完邀请码后登录成功。
装好之后，界面和 Cursor 很像，一股 Vscode 的味道，不过右边的 Chat 区域多了不少控件。
选一个项目或者新建一个目录，就能看到这个可爱的界面了。
简单概括一下，CodeBuddy IDE 提供了三种产品玩法：
第一种，你只要告诉它你想要啥，它就能给你变出来；
第二种，直接把你的 Figma 设计稿扔给它，就能自动生成产品；
第三种，用 MCP 辅助开发，让你的开发效率飞起来。
好了，下面开始沉浸式体验下 CodeBuddy IDE 如何使用吧。
一句话，让 AI 帮你从零到一打造产品
chat中提出需求：
我的目标是打造一个超赞的宠物用品线上商店，设计灵感来自 Chewy 和 Petco。
网站要温馨活泼，各种设备都能流畅浏览
模式选择 Craft 模式(Craft 模式如同 Cursor 中的 Agent 模式，会自动执行逻辑，而 Chat 模式是用来对话用的。)，模型选择 Claude Sonnet 4。若觉得提示词太过于简单，也可直接点击 Boost Prompt。来优化提示词（要多点几下，响应较慢）。
打开设计模式，就能根据需求直出产品设计原型图，开启 Plan mode，就能根据需求生成开发计划方案。这 2 功能都挺有用，全部开启吧。
于是，它开始设计方案和制定开发计划。这个计划看起来不错，但从技术管理的角度来看，还不够完善，缺少具体的交付标准、开发进度表、时间规划和风险评估，设计方案会单独写入在一个md文档中。
它在持续同步开发进度，这一点很nice，给我们直观展示它的一步一步执行过程。
接下来，你会看到它自动开始安装各种需要的插件和工具，然后就开始飞速开发，整个过程简直快到起飞，我在使用时
安装依赖时报错，
卡停了。手动要点一下，才能继续。（自动修错误）。
通过不断的修复，我在修复过程中，特别是安装依赖时执行的命令行会报错，比如&&符合不能识别，还有codebuddy执行时有时甚至不知道我项目目录在哪里，抽风了么？如果出现错误，直接跟他说：请自行检查所有代码，保证项目可运行。
经过几轮修改，总算出来了，最后它帮我生成了13个组件+5个页面，代码量还是约个3000行左右
页面布局层次分明，交互动效轻快灵动，使用风格统一的卡通化 icon，第一版主页、商品图片都没加载出来，我后期又调整了
Figma 设计稿转产品
没用过 Figma，或者手里没设计稿？别担心！给你支一招，保证零基础也能玩转！咱们可以先用一个叫‘html to design’的神器插件，把任何你喜欢的网站一键变成 Figma 设计稿，然后再把它扔给 CodeBuddy 就行啦。
填入网址，开始转换，这里我选择复刻的网站是腾讯 codebuddy. ai 这个网站。
这是转换完成的效果：
然后去 IDE 中选择该设计草稿。
看看这效果，虽然不能说是 100% 复刻，但也八九不离十了。最关键的是，我全程就只动了动鼠标，把 Figma 设计稿一贴，代码就自己出来了，所以说，如果你手头已经有用 Figma 画好的设计，那直接用 CodeBuddy 来开发，简直不要太爽。
如果本文能给你提供启发和帮助，还请留下你的一健三连(点赞、转发、评论)，给我一些鼓励，谢谢。
--end--
