资料来源：火山引擎-开发者社区
成品抢先看！
自从MarsCode AI Chat模型全新升级，接入 Deepseek-R1、Deepseek-V3和豆包大模型1.5 三大模型，越来越多朋友注意到了AI编程能给我们带来的无限可能，也开始跃跃欲试想要尝试从0到1落地一个小项目。
授人以鱼不如授人以渔，今天我们将带大家利用MarsCode 编程助手将脑子里面的创意落地，零代码做出可交互的口语练习网站 <br/>实战准备<br/> 下载/更新MarsCode 编程助手
1️⃣如果你是新用户，以Visual Studio Code中为例，打开VSCode 扩展窗口，在搜索窗口搜索MarsCode，找到MarsCode 插件单击「install」，完成安装，登录即可使用MarsCode 编程助手。
2️⃣ 如果你是老用户，请更新MarsCode 编程助手到最新版本（若开启了自动更新，则将会自动更新），更新后重启IDE即可
*VSCode：1.1.62
*JetBrains：1.2.1.15
下载Node.js 和 npm<br/>1️⃣ 【下载Node.js】 下载并安装 LTS 版本 v18.20.5（长期支持版），注意选择对应自己电脑的版本。
1️⃣ 【下载npm】 点击开始>>输入Windows powershell>>打开终端
如图依次输入以下两行命令
npm install -g pnpm
验证安装：
pnpm --version
如果显示版本号就是安装成功了！
实战跟练
今天我们以 VS Code 和win11系统为例，带大家从0到1写出一个口语练习网站！
搭建网站框架
向MarsCode 输入以下提示词，借助它的提示一步一步完成网站搭建
我想要创建一个web 应用 magic-english，实现口语练习的功能，包含多个页面：section 页面，topic 页面，exercise 页面，这些页面是层层递进的。我打算用typescript进行开发，tailwindcss 作为样式工具，基于 next.js 相关生态进行全栈开发。接下来请告诉我怎么创建编程环境。
左右滑动，查看更多
最后运行以下代码调试环境，确保之后我们能够打开本地预览的网页
npm run dev
运行得到如下图效果，则为环境调试成功，可以进入下一步代码的编写
生成section页面
接下来正式开始编码，我们首先完善网页的section部分，利用以下提示词和MarsCode交互
生成「Section」前端页面：
1、顶部导航栏有返回按钮，标题是「原味英语」
2、显示进度卡片，包含等级、section序号、「切换等级」按钮、「返回当前节点」按钮，要求「切换等级」是可用的，可以切换等级
3、进度卡片下方显示当前section的内容，包含多个卡片，按序号上下显示
4、每个内容卡片包含标题、内容、状态（已完成、进行中、未解锁）；内容卡片完成一个后才能解锁下一个；已解锁的卡片可以点击查看详情，未解锁的卡片不可点击
5、app使用清新的绿色主题
6、点击section可进入topic页面
要求：所有生成的页面必须用tailwind样式，希望整洁美观，有点小清新的感觉
MarsCode为我们生成了代码和指令，按照要求执行即可
打开刚刚 npm run dev 得到的如下效果：
生成topic页面
现在继续完善每个section点击后跳转进入的topic页面，我们继续向MarsCode输入以下提示词：
生成「Topic」前端页面：
1、顶部导航栏有返回按钮，返回到上一级Secction
2、进度卡片下方显示当前topic列表，包含多个卡片，按序号上下显示
3、每个内容卡片包含标题、内容、状态（已完成、进行中、未解锁）；内容卡片完成一个后才能解锁下一个；已解锁的卡片可以点击查看详情，未解锁的卡片不可点击
4、点击topic可进入exercise页面
要求：所有生成的页面必须用tailwind样式，希望整洁美观，有点小清新的感觉
按照MarsCode指示依次Apply即可
经代码调试最终获得如图效果
生成exercise页面
现在进入正式练习部分的页面编写，我们继续向MarsCode输入以下提示词
生成「Exercise」前端页面：
1、顶部导航栏有返回按钮，返回到上一级topic
2、进度卡片下方显示当前exercoise列表，可用一个个绿色小按钮表达路径变迁，每个小按钮可以点击，点击后会进入到详细的exercise练习题
3、注意生成的exercise练习题要贴合对应的topic，以及里面选择的小项
要求：所有生成的页面必须用tailwind样式，希望整洁美观，有点小清新的感觉
将生成的exercise.tsx一键Apply后，按照指示创建对应路由文件
如果AI没有没有根据不同的topic mock不同的数据，我们可以选中未正确跳转的页面代码，调试后获得如下效果：
uu们可以根据自己的需求继续对不同section\topic\exercise进行调整，继续丰富页面，因为篇幅关系，我们在这里就不再多展开。接下来教学大家如何将只有本地运行才能打开的网页部署成为可以分享给朋友们的落地页~
网站部署
为了丝滑地完成网站部署，正式开始之前，你需要准备：
1、github账号（用于存储代码），没有的朋友跳转注册一下
2、完全没有报错的网站代码
3、用于注册vercel和github的邮箱
将项目推送到GitHub
如果你还没有将你的项目代码推送到 GitHub ，你需要先执行这个步骤。<br/>1、在 GitHub 创建一个新的仓库：
1️⃣点击右上角的 + 图标，选择 New repository（新建仓库）。
2️⃣给你的仓库命名，并选择是否公开或私有，完成后点击 Create repository（创建仓库）。
2、将本地代码推送到仓库：
1️⃣打开你的项目文件夹，初始化 Git 仓库（如果还没初始化过的话）：git init
2️⃣将代码添加到 Git 并提交：
git add .
git commit -m "Initial commit"
3️⃣将你的本地仓库与 GitHub 上的远程仓库连接，请确保替换下面的 URL 为你自己的仓库地址。
git remote add origin https://github.com/your-username/your-repository-name.git
4️⃣推送代码到远程仓库：
git push -u origin master
这样你的代码就被推送到 GitHub上了。
将 GitHub连接到 Vercel<br/>1、登录 Vercel后创建新项目 ：登录后，点击右上角的 New Project 按钮。<br/>2、授权 Vercel 访问 GitHub ：
1️⃣如果你是第一次连接 GitHub，Vercel 会要求你授权它访问你的 GitHub账户。授权后，你会看到你的所有仓库列表。
2️⃣选择 GitHub，并点击 Authorize Vercel。
3、选择你的仓库 ：
Vercel 会自动列出你在 GitHub上的所有仓库，找到并选择你刚刚推送到 GitHub的 Next.js 项目仓库，选择import
4、配置部署设置 ：
1️⃣框架检测：Vercel 会自动检测你是使用 Next.js 项目，因此它会自动选择 Next.js 作为框架。你无需手动设置。
2️⃣部署目录：如果你的 Next.js 项目位于仓库的根目录，通常无需更改。如果项目在子目录中，你需要指定该子目录。
5、部署 ：
1️⃣点击 Deploy 按钮，Vercel 会开始部署你的项目。
2️⃣部署过程会展示详细的日志，Vercel 会自动构建并部署你的 Next.js 应用。
部署成功后，你会获得一个域名
通过本教程，你已经成功解锁AI英语学习网站的搭建技能！MarsCode与火山引擎-开发者社区的深度结合，让你用30%的代码量解锁200%的开发效率！
