用 CodeBuddy IDE 从设计稿到可部署前端页面

CodeBuddy IDE 是一个把需求梳理、界面设计、前端编码、后端配置和部署放在同一个窗口里完成的 AI 编程环境。它面向的是这样一类使用者：手上有设计稿或一句产品想法，希望尽快得到一个能运行、能预览、能分享出去的前端页面，而不想先花时间搭脚手架、配后端、找部署通道。它支持接入 Claude、GPT、混元、DeepSeek 等模型，内置组件库选择、数据库配置、MCP 扩展、图片上传、本地预览与远端部署等入口。如果你只是想快速验证一个界面想法，或者想把 Figma 里的稿子直接变成可交互页面，这个工具值得按下面的顺序走一遍。站内也有对应的工具条目可以对照查看：CodeBuddy IDE。

需要先说明一点：CodeBuddy IDE 的功能、可用模型、免费额度与部署资源都在持续调整，本文只讲操作路径与各入口的作用，具体价格、配额、模型清单请以官网当前信息为准。

准备工作

下载与安装

CodeBuddy IDE 是独立客户端，需要从官网下载安装包，而不是通过插件市场装进别的编辑器。进入官网后找到下载入口，按你的操作系统选择对应安装包，下载完成后按常规桌面软件的方式安装并启动。

注册账号

首次打开后需要注册账号，流程如下：

点击首页右上角的个人图标，进入注册入口。
按表单填写注册信息并提交。
注册成功后，在 IDE 内登录该账号。
登录成功后，界面会弹出输入邀请码的窗口。这一步按界面提示处理即可，没有邀请码时留意是否有跳过入口。

切换界面语言

默认界面可能是英文。切换成中文的路径是：

点击右上角的设置按钮。
在设置面板中进入 Features 分类。
把语言项从 English 切换为中文。

切换完成后界面文案会立即更新，后续菜单名称都以中文显示。

准备一个项目文件夹

CodeBuddy IDE 以文件夹为单位打开项目。建议先在桌面新建一个空文件夹，然后把整个文件夹拖入 CodeBuddy 窗口，让它作为当前工作区。这样后续生成的组件、页面和配置文件都会落在这个目录里，便于版本管理和迁移。

准备 Figma 账号（可选）

如果你打算从设计稿生成页面，需要有一个 Figma 账号，并且设计稿在 Figma 中可访问。CodeBuddy 内置了 Figma 入口，可以直接在 IDE 内登录 Figma，不必再切到浏览器。

操作步骤

第一步：认识主界面的功能入口

打开项目文件夹后，界面大致分为左侧预览与资源区、中间编辑区、右侧对话与配置区。需要重点记住的入口有以下几个：Figma 导入、组件库选择、配置集成（数据库）、MCP、上传图片、预览、部署，以及对话模式切换。下面逐个说明。

第二步：从 Figma 导入设计稿

点击界面上的 Figma 入口，左侧会打开预览区域并加载 Figma 网站，省去在浏览器里另开页面的步骤。登录方式有两种：

使用 Google 账号登录。
使用其他方式，通过密码登录。

登录后即可在 IDE 内浏览并选择要导入的设计稿。导入 Figma 设计稿之后，就可以基于 UI 直接开发，让 AI 按设计稿的结构生成页面。

第三步：选择组件库

把鼠标悬浮在组件图标上，会展开三种组件库供选择，它们决定了生成页面的视觉风格与依赖：

组件库	特点	适用情况
TDesign Components	腾讯自有的 UI 组件库，覆盖 PC 端、移动端、小程序组件，风格现代简约，支持 Vue、React、小程序与 QQ 小程序	需要多端一致、偏企业级视觉的项目
MUI Components	基于 Google Material Design 设计规范构建的 React 组件库，原名 Material-UI，现更名为 MUI	React 技术栈、希望沿用 Material 视觉规范的项目
Shadcn Components	配色相对克制，整体简洁极简，自定义和扩展比较方便	追求极简风格、需要深度定制组件的项目

选择时要和后面的对话模式配合：Design Mode 固定使用 React + Shadcn UI + TypeScript，如果你打算用 Design Mode 出页面，组件库选择 Shadcn 会更一致。

第四步：配置后端与数据库

界面上的配置集成入口可以直接连接数据库并存储数据，不需要自己从零搭一套后端。把鼠标悬浮在该入口上，会显示当前已连接了哪些资源；点击右上角的设置按钮，可以在两种后端服务之间选择：

Supabase
Tencent CloudBase

选定后按界面提示完成连接配置。这一步的意义在于：页面上的数据读写可以直接落到已配置的数据库上，省掉单独搭建接口层的工作。

第五步：按需启用 MCP 与上传图片

界面上还有 MCP 入口，用于接入 MCP 协议扩展的能力，适合需要外部工具或数据源的复杂工程。另有 上传图片 入口，可以把参考图、截图或素材传入对话，作为生成界面的依据。这两项不是必选项，按项目需要启用即可。

第六步：选择对话模式

CodeBuddy 提供两种对话模式，分别是 Design Mode（设计模式）和 Plan Mode（规划模式）。需要注意，这两个模式只在 Craft 模式下才出现，普通对话里切换不到。两者的分工差别很大：

Design Mode（设计模式）

定位：专注于 UI 界面搭建。
主要功能：创建可视化的用户界面。
技术栈：固定启用 React + Shadcn UI + TypeScript。
输出结果：可运行的前端页面和组件。
工作流程：理解 UI 需求 → 设计界面布局 → 创建 React 项目 → 实现具体组件 → 预览效果。
适用场景：快速原型制作、UI 组件开发、页面布局设计、前端界面实现。

Plan Mode（规划模式）

定位：专注于项目规划和架构设计。
主要功能：分析需求、制定计划、跟踪进度。
技术栈：不限制，按需求选择最合适的技术。
输出结果：项目规划、技术方案、开发计划。
工作流程：需求分析 → 技术选型 → 架构设计 → 制定计划 → 跟踪执行。
适用场景：复杂项目规划、技术架构设计、开发进度管理、多技术栈项目。

简单判断：只想尽快看到界面，用 Design Mode；项目涉及多个模块、需要先想清楚结构和排期，用 Plan Mode 先出规划，再切回 Design Mode 落地页面。

第七步：用 Boost Prompt 优化提示词

Boost Prompt 是提示增强功能，作用是在你发出需求之前，先把提示词处理得更清晰。它的核心能力包括：

提示优化：自动改进和优化输入的提示词，使其更精确、更有效。
上下文增强：为提示补充相关背景信息和上下文，提高 AI 理解的准确性。
结构化处理：把模糊的需求转换为结构化、逻辑清晰的指令。
多轮对话优化：在对话过程中持续优化提示效果。

它带来的实际好处是：提高响应质量，得到更准确、更相关的回答；减少误解，降低 AI 理解偏差；节省反复修改提示词的时间；在特定领域自动补充专业术语和背景。对于一句话就想生成页面的场景，先过一遍 Boost Prompt 通常能明显减少来回返工。

第八步：在 IDE 内预览

页面生成后，点击预览入口，会直接运行当前打开的项目，在编辑器内查看效果，不需要再切到浏览器。这一步是迭代的主要依据：看到哪里不对，回到对话里继续描述修改，再预览，循环推进。

第九步：部署并分享

确认效果后，使用部署入口把项目发布到远端 Cloud Studio 沙箱环境，得到可访问的地址，便于分享给他人查看。部署资源与可用范围以官网当前信息为准。

一个完整示例

下面从零走一遍最小可用流程，目标是把一张 Figma 设计稿变成一个可预览、可分享的页面。

1. 建立工作区

在桌面新建文件夹，例如 codebuddy-demo。
启动 CodeBuddy IDE，把该文件夹拖入窗口，作为当前项目。

2. 完成基础设置

右上角个人图标 → 注册并登录账号。
右上角设置 → Features → 语言从 English 切换为中文。

3. 导入设计稿

点击 Figma 入口，左侧打开预览区并加载 Figma。
用 Google 账号或密码登录 Figma。
选中目标设计稿并导入。

4. 选定组件库

悬浮组件图标，选择 Shadcn Components。原因是接下来要用 Design Mode，而 Design Mode 固定输出 React + Shadcn UI + TypeScript，组件库与输出技术栈保持一致，后续改样式时不会出现两套组件体系混用。

5. 进入 Craft 模式并选择 Design Mode

在对话区切换到 Craft 模式，再选择 Design Mode。此时 AI 会按「理解 UI 需求 → 设计界面布局 → 创建 React 项目 → 实现具体组件 → 预览效果」的顺序推进。

6. 用 Boost Prompt 整理需求

在输入框里写一句朴素的需求，例如「按导入的设计稿做一个产品列表页，包含顶部导航、卡片网格和分页」。先触发 Boost Prompt 把这句话补成结构化指令，再发送。这样 AI 拿到的信息包含布局分区、组件类型和交互元素，生成结果更接近设计稿。

7. 预览并迭代

点击预览入口，在编辑器内运行项目。
对照设计稿检查间距、配色、组件状态。
把差异写进对话，例如「卡片圆角改为 8px，网格在窄屏下变成两列」，再次预览。

8. 接入数据（可选）

如果列表需要真实数据，打开配置集成入口，点击右上角设置，选择 Supabase 或 Tencent CloudBase 完成连接，再让 AI 把列表数据源接到已配置的数据库上。

9. 部署

效果确认后点击部署入口，发布到远端 Cloud Studio 沙箱环境，拿到访问地址分享出去。

整个流程里，真正需要你决策的只有三处：用哪个组件库、用 Design Mode 还是 Plan Mode、后端接 Supabase 还是 Tencent CloudBase。其余环节都是把需求描述清楚然后看预览结果。

注意事项

模式切换有前提

Design Mode 和 Plan Mode 只在 Craft 模式下出现。如果你在对话区找不到这两个选项，先确认当前是否处于 Craft 模式，而不是去设置里翻找。

Design Mode 的技术栈是固定的

Design Mode 固定输出 React + Shadcn UI + TypeScript，不能换成 Vue 或其他组件库。如果你的项目必须用 TDesign 或 MUI，或者技术栈是 Vue，就应该走 Plan Mode 先做技术选型，而不是在 Design Mode 里反复要求换框架。

组件库选择会影响后续维护

三种组件库的生态不同：TDesign 覆盖 PC、移动端和小程序，支持 Vue、React 与小程序；MUI 是 React 专用；Shadcn 更偏向可定制的极简风格。中途更换组件库意味着大量组件需要重写，建议在生成第一版页面之前就定下来。

邀请码界面

登录成功后会弹出输入邀请码的界面。按界面提示处理，不要在这一步反复尝试无效码导致流程卡住。

易变信息以官网为准

可接入的模型清单、免费版的范围、部署沙箱的可用资源、数据库服务的配额，都可能随版本调整。本文描述的是操作路径，涉及具体数值与可用性时，请以官网当前信息为准。

预览与部署是两件事

预览是在编辑器内本地运行当前项目，用于快速看效果；部署是把项目发布到远端沙箱环境，用于分享。预览通过不代表部署后表现完全一致，分享前建议用部署地址再检查一遍。