用豆包 AI 编程生成、运行并修复前后端项目代码

豆包 AI 编程是字节跳动推出的智能编程工具，形态上是一个开箱即用的 AI 问答产品，但比普通对话多了三样东西：内嵌的代码编辑器、可以运行代码的沙箱环境，以及把本地项目或开源仓库整体引入对话的能力。它覆盖代码生成、代码解释、代码修复、编程知识问答、语言转换、生成注释、生成测试用例等常见需求，同时支持在线运行与预览、生成包含前后端文件的完整项目。对专业开发者来说，它适合快速产出前端 demo、验证一段逻辑、排查报错；对刚学编程的人来说，它省掉了环境配置这一步，可以直接看到代码跑起来的样子。本文要讲的就是把这些能力串成一条可复用的工作流，站内入口见豆包 AI 编程。

准备工作

豆包 AI 编程不需要单独安装 IDE，也不需要本地配 Python 解释器或 Node 环境，准备工作主要是账号和入口层面的：

账号：使用豆包账号登录。网页版和电脑版客户端都可以进入，登录后在功能入口里选择「AI 编程」，而不是停留在普通对话模式。普通对话模式没有代码编辑器和沙箱，很多能力用不出来。
入口选择：素材明确提到「电脑版或网页版豆包」，两者都能用。如果手头项目文件较多、需要频繁上传，客户端在文件操作上更顺手；只是临时生成一段代码或跑一段脚本，网页版足够。
待处理的素材：如果打算让它读你已有的代码，提前把相关文件整理到一个目录里，避免上传一堆无关文件稀释上下文。如果打算引入开源仓库，先准备好仓库链接。
对产物的预期：生成的前端页面可以直接预览、下载和分享；生成的 Python 代码可以直接在沙箱里运行。这两条是后面所有操作的基础。

关于免费额度、可用模型、单次上传文件数量上限这类信息，属于会随时调整的内容，请以官网当前展示的信息为准，本文不给出具体数字。

操作步骤

第一步：用一句话生成可预览的 HTML 页面

这是门槛最低、见效最快的一条路径。进入「AI 编程」后，直接用自然语言描述你要的东西，不需要先写任何代码。描述里建议包含三件事：页面是什么、包含哪些区块、希望有什么交互。

例如要做一个互动小游戏，可以这样描述：

做一个「默契度测试」小游戏：
1. 首页有标题、开始按钮和一句玩法说明；
2. 一共 5 道选择题，每题 4 个选项，逐题展示；
3. 答完后给出一个分数和一段结果文案；
4. 页面风格清爽，适配手机屏幕。

生成完成后，产物会出现在代码编辑器里，并且可以直接在沙箱中预览和交互。确认效果没问题，就可以下载或分享出去。素材里给出的同类场景还包括：各类网站、实用工具、数据看板、设计师作品集、金融产品官网、景点介绍页、公司财报总结页。它们的共同点是「结构清晰、以展示和轻交互为主」，正好落在一次生成就能出成品的范围内。

对开发者而言，这条路径的实际价值是快速拿到一个前端 demo 的起点。赶需求时不必从空白文件逐行敲，先让模型给出一个能跑的骨架，再在编辑器里改细节。

第二步：运行 Python 代码，报错就一键修复

豆包生成的 Python 产物可以直接在沙箱里运行，不需要你在本地装解释器、配虚拟环境、装依赖。操作顺序是：

让豆包生成或粘贴一段 Python 代码，产物会进入代码编辑器。
在编辑器里直接执行这段代码。
如果运行报错，使用「AI 修复」让模型定位问题并给出修正后的代码。
修复后再次运行，直到结果符合预期。

这个循环对两类人都有用。Python 初学者可以跳过环境配置这一关，先把注意力放在语法和逻辑上；有经验的开发者则可以把沙箱当成一个临时验证台，生成一段数据处理或算法代码后立刻跑一遍看结果，而不是复制回本地项目再调试。素材里强调的「实时验证生成结果、节省错误调试时间」，说的就是这个循环。

第三步：用代码编辑器圈选提问

代码编辑器不只是用来放产物的，它同时改变了提问方式。当你想针对某一段代码提问时，可以用圈选功能准确选中那一段，再提出问题。相比用文字描述「第三行那个循环里的判断」，圈选能避免描述不清导致的答非所问。

适合圈选提问的典型场景：

某一段逻辑看不懂，要求逐行解释；
某一段代码性能不理想，要求优化；
某一段报错，要求定位原因并修复；
某一段缺少注释，要求补充注释；
某一段缺少测试，要求生成测试用例。

提问时把「要什么」说清楚，比只说「看看这段」效果好得多。例如「解释这段代码里 yield 的作用，并说明它和 return 的区别」，就比「这段代码什么意思」更容易得到有用的回答。

第四步：生成包含前后端文件的完整项目

普通做法是让 AI 分别生成前端逻辑和后端逻辑，再自己复制粘贴拼起来，既繁琐又容易在接口字段上出错。豆包 AI 编程支持一次生成包含前后端代码文件的完整项目，产物是多文件的，而不是一大段混在一起的代码。

要让这一步顺利，描述里需要把接口约定讲明白，否则前后端容易对不上。建议在提示中明确：

后端用什么语言和框架，提供哪几个接口，每个接口的路径、方法、入参、返回字段；
前端用什么技术栈，调用哪几个接口，页面有哪些状态（加载中、成功、失败）；
数据先存在哪里（内存、本地文件还是数据库），是否需要初始化示例数据。

生成之后，在编辑器里逐个文件检查，重点看前后端的字段名和数据结构是否一致。这一步花几分钟，能省掉后面大量排查时间。

第五步：上传本地文件或引入开源仓库，补齐上下文

逐段复制代码去提问，模型只能看到片段，回答往往停留在通用层面。豆包 AI 编程支持一键上传多个本地代码文件，也支持实时引入开源仓库，让模型拿到项目的完整上下文。两种方式各有适用场景：

上传本地代码文件：适合课程设计、自己正在写的项目、公司内部的小工具。把相关文件一起传上去，再问「这个项目的入口在哪」「这个函数被谁调用」「帮我加一个功能」这类需要全局视野的问题。
引入开源仓库链接：适合学习热门项目的组织方式和实现思路。引入后可以针对具体模块提问，例如某个目录的职责划分、某个核心类的设计意图。

上传时注意控制范围：只传与当前问题相关的文件，文件越多，模型需要分辨的信息越多，回答反而可能发散。

第六步：把豆包当学习与答疑伙伴

除了产出代码，豆包的回答方式是「思路讲解 + 代码示例」，这让它在学习场景里也能用得上：

自学编程语言：让它按主题拆解知识点，每个知识点配一段可运行的示例，再在沙箱里跑一遍验证。
备考刷题：把题目贴进去，先要思路，再要代码，最后要复杂度分析。不要一上来就要答案。
看不懂报错：把完整报错信息贴进去，要求先解释报错含义，再给出修复方案，最后说明如何避免同类问题。

一个完整示例

下面走一遍从零到可运行的最小流程，目标是一个带后端接口的小工具：输入一个日期，返回距离今天的天数。

第 1 步：描述需求。在「AI 编程」里输入：

生成一个完整项目，包含前端和后端：
后端用 Python 提供一个接口 GET /days?date=YYYY-MM-DD，
返回 JSON：{"date": "...", "days": 数字}，days 为距离今天的天数，
过去为负数，今天为 0；日期格式非法时返回 400 和错误信息。
前端是一个单页面：一个日期输入框、一个查询按钮、一块结果展示区，
查询中显示加载状态，出错时显示错误信息。
不需要数据库，后端启动时不需要初始化数据。

第 2 步：检查产物结构。生成后确认前后端文件是分开的，后端文件里有路由定义和日期解析逻辑，前端文件里有输入框、按钮和结果区的绑定。重点核对接口路径 /days、参数名 date、返回字段 date 与 days 在前后端是否完全一致。

第 3 步：运行后端。在代码编辑器里执行后端文件，观察是否正常启动、有没有报错。如果报错，使用「AI 修复」，修复后重新运行。

第 4 步：验证接口。用几个边界值测试：今天的日期应返回 0，明天的日期应返回 1，昨天的日期应返回 -1，格式错误的字符串应返回 400。发现不符合预期的地方，圈选对应代码段提问，要求修正。

第 5 步：预览前端。在沙箱里预览页面，输入一个日期点击查询，确认加载状态、成功结果、错误提示三种情况都正常。

第 6 步：补充测试与注释。圈选后端的日期解析函数，要求生成覆盖正常值、边界值、非法输入的测试用例；再圈选整个后端文件，要求补充函数级注释。生成后跑一遍测试，确认全部通过。

第 7 步：下载与分享。确认无误后下载产物，或把前端页面分享出去。至此一个可运行的最小项目就完成了。

注意事项

先选对入口。必须进入「AI 编程」模式。在普通对话里提问，拿不到代码编辑器、沙箱运行和文件上传这些能力。
沙箱运行不等于生产环境。沙箱适合验证逻辑和快速试错，涉及真实数据库、外部服务、敏感配置的场景，不要指望在沙箱里完整复现。
一键修复后要复查。「AI 修复」给出的是修正方案，修完应当重新运行确认，并检查修改是否影响了其他逻辑，不要直接当成最终答案。
上下文要控制。上传本地文件或引入仓库时，只带与当前任务相关的部分。文件过多会让模型难以聚焦，回答质量下降。
前后端字段要对齐。生成完整项目后，务必人工核对接口路径、参数名、返回字段，这是最容易出错也最容易检查的地方。
生成代码需要审阅。模型产出的代码在用于正式项目前，应当经过人工审阅，尤其是涉及数据处理、权限判断、外部请求的部分。
易变信息以官网为准。免费额度、可用模型、文件上传数量上限、功能开放范围等都可能调整，使用前请查看官网当前信息。