MarsCode AI 实战：利用 DeepSeek 快速搭建你的口语学习搭子

资料来源：火山引擎-开发者社区

成品抢先看！

自从 MarsCode AI Chat 模型全新升级，接入 Deepseek-R1、Deepseek-V3 和豆包大模型 1.5 三大模型，越来越多朋友注意到了 AI 编程能给我们带来的无限可能，也开始跃跃欲试想要尝试从 0 到 1 落地一个小项目。

授人以鱼不如授人以渔，今天我们将带大家利用 MarsCode 编程助手将脑子里面的创意落地，零代码做出可交互的口语练习网站

实战准备

下载/更新 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

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 ，你需要先执行这个步骤。

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

1、登录 Vercel 后创建新项目 ：登录后，点击右上角的 New Project 按钮。

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 与 DeepSeek 的深度结合，让你用 30%的代码量解锁 200%的开发效率！