腾讯CodeBuddy 截胡Trae Solo，附新手入门配置教程

AIGC新知

发布于 2025-07-24 16:56:49

1.1K0

文章被收录于专栏：AIGC新知AIGC新知

昨天晚上，Trae Solo正式发布，结果这玩意需要Pro用户才有资格获得邀请码等待资格，并且好多用户专门为了这个升级到Pro用户，这搞得......

用户有没有被诈骗的感觉

所以没有获得邀请码的我，就没有写。

正好今天下午，腾讯也赶巧发布了最新的CodeBuddy IDE（还真是巧了嘿）

我拿到了几个邀请码，顺便测试一下。

要使用这个IDE，首先去官网下载他们的IDE，

链接在这里：https://www.codebuddy.ai/，然后点击下载即可。

本地安装好之后，需要使用Google账号登陆，然后输入邀请码。

进入登陆界面，可以看到这样的。

官网对本次IDE的更新功能描述如下：

主要集中在支持Figma设计到代码转换，内置Supbase和Tencent CloudBase两种部署方案，构成了从设计到开发，再到一键部署上线的全栈解决方案，

具体效果怎么样，我们一试便知。

先大概介绍一下这个交互界面。

官方这里应该加一个初始引导界面，新用户（我）都不知道这个咋玩。

（1）Figma：直接跳转到Figma的注册网站，登陆之后会选择Figma设计文件，直接导入。

（2）Components：不同设计样式

第一个是TDesign Components：

TDesign 是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系。

TDesign 是具有包容性的设计体系，它强调为业务提供产品、服务等过程中，追求以人为本、人人受益的包容性，要求搭建过程中，了解业务底层，理解业务场景的多样性，并在繁杂的业务场景中寻找共性和特性，确保彼此能灵活地在同一个环境并存. 既能满足当下需要，也能作用于更广泛的场景，为不同的产品保留定制空间，在保证不同产品能够体现自我特色的同时，TDesign 还可以为更广泛的产品提供适合的服务。

TDesign 官方提供了多种业界主流的开发技术栈支持。

目前，TDesign 已经支持了 Vue 2、Vue 3、React 和移动端 Vue 3、微信小程序的开发，其他技术栈如 Flutter 正在开发中。

关于介绍：https://tdesign.tencent.com/about/introduce

更多设计资源：https://tdesign.tencent.com/source

第二个是MUI Components:

Material UI 旨在为开发者提供构建模块，以便参考 Material Design 指南创建出色的用户界面，我们在实践中努力遵循这些指南。该库不一定实现每个组件或功能的精确规范——在官方指南不完整或自相矛盾的地方，维护者会运用常识以及最新的 Web 开发标准。

如下是由 Material UI 的创建者策划和验证的最佳 React 模板和工具的集合。

第三个是Shadcn Components：

shadcn/ui 是一套设计精美、易于访问的组件和代码分发平台。它可与您常用的框架和 AI 模型兼容。

集合：https://ui.shadcn.com/

（3）Integration：不同接口

这里主要是决定你的数据最终存储到哪里，要么是Supabase，要么是腾讯云官方的云数据库。

需要登陆，绑定Supabase账户。

在授权时候，会有这么一大串的读写权限需要授权，直接确认就可以。

然后客户端会显示授权已经成功，直接创建一个新的项目即可。

注意地域，必须是海外。

然后在后台就可看到你所创建的项目了。

（4）MCP：目前只支持Figma MCP.

如何配置Figma MCP?

获取 Figma API Key

进入 Settings → Security

在 Personal Access Tokens 区域生成新令牌

权限选择：file_contents:read（最低必需权限）

然后点击上图“Manual Configuration”的按钮，输入如下的MCP协议，替换key。

{
  "mcpServers": {
    "Figma MCP": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=keyxxx",
        "--stdio"
      ]
    }
  }
}

等待界面如下，即为正常显示。

（5）Image：上传图像。

（6）Deploy：部署程序（网页）到云端。

还有两种模式，Craft和Chat模式（具体区别在于，一个强执行，另外一个是对话用的）。

Craft模式下，你可以选择Design mode和Plan mode是否开启。

我找了一个Figma的设计案例

前面已经配置好了figma MCP，这里只需要复制一个其中的section 链接，提醒调用figma mcp即可。

https://www.figma.com/design/virupYni4NYgvP9o5zABZN/Relume-Figma-Kit--v3.2---Community-?node-id=5999-13047t=9x7TvD0Vjxh9PH7J-4 调用Figma MCP，根据设计帮我开发网页。