编程与开发 / 工具介绍
CodeBuddy
把界面材料接到项目代码
腾讯的 AI 编程工具，支持代码问答、补全和设计转代码。可以提供界面截图或 Figma 材料，在现有项目中实现并调整页面。
适合谁
有界面想法或设计素材，希望把视觉材料落实为项目页面的开发者与产品制作人。
它能帮你做什么？
CodeBuddy 在 IDE 中提供问答、补全与代码任务模式，也能接收截图和 Figma 等界面材料。先交代现有项目的技术要求，再提供想实现的界面，便可围绕组件、布局和交互讨论代码实现。Ask 适合弄清方案，Craft 适合具体修改，复杂任务可用 Plan 先形成计划，再跟进实施和预览结果。
- 根据界面设计实现一个列表与筛选区
- 为现有表单增加输入提示和错误状态
- 沿项目代码检查页面报错与实现位置
照着设计做出列表与筛选页面
- 准备什么
- 一张列表页截图或 Figma 设计，以及现有前端项目中需要沿用的组件和页面文件。
- 怎样尝试
- 添加设计材料并说明：沿用现有组件，实现搜索框、分类筛选和卡片布局，并标出交互状态。
- 目标结果
- 希望得到与设计对应的页面代码，便于检查布局、组件复用，以及默认、筛选和无结果状态。
第一次可以这样试
- 安装 IDE 并登录，打开已有项目，让它先了解页面和组件结构。
- 添加截图或 Figma 材料，说明要沿用的组件与需要实现的交互。
- 选择相应任务模式完成修改，检查页面预览、代码差异和项目运行。
使用时留意
Ask 用于咨询而不直接改代码；Craft 与 Plan 用于执行任务，进入实施前先选对模式。
继续了解
依据官方资料整理 · 更新于 2026-10-14