AI 开发者工具包安装
TECHNEST 2026 的独立讲师。GitHub:github.com/ChanMeng666 · LinkedIn:linkedin.com/in/chanmeng666。完整课程站点在 programming.chanmeng.org。课程的 RAG 驱动 AI 助手(基于第 4 周会接触到的同一套检索模式)已索引了所有周次的讲义——课间被卡住时随时可以问它。
学习目标
到本节课结束,学员应当能够:
- 装好并登录整学期要用的三套 AI 编码环境 —— Cursor(主力 IDE)、Claude Code(终端原生 AI)、Gemini CLI(免费额度的脚本型 AI)—— 并知道什么时候该用哪一个。
- 给 Claude Code / Cursor 装上一个 Skill 和一个 MCP 服务器,并能用一句话说清每个扩展让 AI 能替学员做什么。
- 识别并应用授权规则 —— 知道哪些操作该通过 CLI 或 MCP 交给 AI,哪些(OAuth、DNS、provider 侧凭据)必须自己动手。
核心主题
- "自然语言就是源代码"为什么是这门课的主轴——以及它如何改变学员对编程的思考方式。
- 三套 AI 环境:Cursor、Claude Code、Gemini CLI —— 分别在什么场景下用。
- MCP 服务器和 Skills 是什么,它们如何把一个 AI 聊天变成会用工具的 agent。
- Voice-first 提示词(可选但强烈推荐)—— Wispr Flow。
- Cursor 的 Plan Mode —— 在 AI 改任何文件之前先看一遍它的计划。从第 2 周开始,这是任何"非小事"提示词的默认模式。
- GitHub 作为"唯一真实数据源"那一层,后面每一周的部署链路都依赖它。
工具 / 技术栈
| 工具 | 在本学期的作用 |
|---|---|
| Cursor | 主力 IDE;内置 AI 聊天;整学期的周课工作都在这里发生 |
| Claude Code | 终端原生的 AI,带 MCP + Skills;第 8 周 PDF 流程的首选 |
| Gemini CLI | 免费额度的 AI,适合一次性脚本和快速探索 |
| Wispr Flow | 语音转文字;不用敲字就能口述长提示词 |
| GitHub | 唯一真实数据源;自动触发每一次 Vercel 部署 |
GitHub CLI(gh) | AI 调它来建仓库、改 Description / Topics、发 release |
| Vercel CLI | AI 调它来部署、读日志、管理环境变量 |
| Neon CLI + Neon MCP | AI 调它来开数据库和 Auth(从第 4 周开始) |
| Typst skill | AI 调它生成像素级精致的 PDF(第 8 周会用到) |
课堂计划
| 时间 | 活动 |
|---|---|
| 0 – 15 分钟 | 回顾与 Check-in。 第一节课——没有回顾。10 分钟破冰:每个人讲一讲他们在看过 Cursor demo 之前 和 之后 对"编程"这件事的理解。 |
| 15 – 40 分钟 | 概念讲解。 授权规则。我们为什么让 AI 去跑 CLI。MCP 服务器是什么。声音 + AI 如何改变那些"非常吃键盘"的活儿。现场比一比:同一个任务,Cursor vs Claude Code vs Gemini CLI。 |
| 40 – 75 分钟 | 现场演示。 讲师从零打开 Cursor,装上 Vercel MCP,然后对 Cursor 说:"给我搭一个简单的个人站点并部署到我的 Vercel。"全班看着 AI 自己挑起步方案、推到 GitHub、部署、返回一个活的 URL。 |
| 75 – 105 分钟 | 动手 Lab。 每位学员在自己笔记本上把这遍演示复现一遍,结束时拿到一个可以分享的 *.vercel.app URL。 |
| 105 – 120 分钟 | Q&A + 收尾。 全班一起排错。所有人下课时都带着能工作的工具走。 |
动手 Lab
任务。 从"什么开发者工具都没装"走到"Cursor 刚刚在我 Vercel 账号里部署了一个简单的个人站点,而且整个过程我是亲眼看着它发生的"。这是整学期唯一一堂"手动配置多于平常"的课——从第 2 周开始,几乎每一步都只是一句口述。
如果你在第 1–4 步(安装)落后了,别慌。目标是在下课前走完 阶段 4(你的第一次 AI 驱动的 Vercel 部署)。安装可以继续挂在后台——Claude Code 可以一边在后台下载,一边 AI 已经能开始干活。
阶段 1 —— 装好三套 AI 环境
从 cursor.com 下载安装 Cursor。打开它,用 GitHub 登录,接受条款。当 Cursor 问你 "Would you like to import VS Code settings?" 时选 Skip —— 我们要一个干净的环境。
Why manual: Cursor 的安装器 + GitHub OAuth 需要点击和同意页,任何 CLI 都代替不了你。
按 官方快速开始 的步骤安装 Claude Code。在 Windows 上运行安装器,一路用默认值。当它提示登录时,用你的 Anthropic 账号登录。
Why manual: Anthropic 的登录流程会打开浏览器走同意,必须人参与。
按 Google 的 readme 安装 Gemini CLI。在任何终端(Cursor 自带的终端也行)里跑 npm install -g @google/gemini-cli,然后 gemini login,用 Google 账号登录。
Why manual: 装 Node + 登录 Google 两步都需要同意页。
请用我系统对应的包管理器(macOS 用 Homebrew、Windows 用 winget 或官方安装器、Debian/Ubuntu 用 apt)给我装上 GitHub CLI(
gh)。装好以后替我跑gh auth login—— OAuth 浏览器页打开时停一下,让我在浏览器里确认 device code。授权完之后跑gh auth status,确认它打印出我的用户名。
Wispr Flow(wisprflow.ai)让你用口述代替敲字。从阶段 2 开始,几乎每条提示词都是一句口述——Wispr Flow 会让你这学期剩下的时间都舒服不少。
阶段 2 —— 证明 AI 会动手
先切到 Plan Mode。 然后:我刚装好你。你能不能做个自我介绍,告诉我你现在能调用哪些工具(比如能不能在终端跑 shell 命令、能不能读写硬盘上的文件、能不能打开网页?),然后在我 home 目录下新建一个叫
technest-week-1的空文件夹?建好以后,把它作为 Cursor 工作区打开。
Plan Mode 会让 Cursor 先写一份计划给你看,然后你再批准、它再执行——任何文件改动、任何命令都在这之后才发生。从这学期开始,但凡比"改一行字"复杂的提示词,都默认走 Plan Mode —— 它能在错误落到磁盘前就抓住你的误解。
不要空格、不要中文、小写优先。 一些 CLI 和部署平台至今还会被路径里的空格搞乱,而你今天创建的文件夹会一直跟着你出现在 Vercel 的 build log 里。technest-week-1 —— TechNest Week 1。
- Cursor 用它自己的话报告了它的能力——花一点时间读一读。
- 你的 home 目录下出现了一个叫
technest-week-1的文件夹。 - Cursor 窗口现在就在这个文件夹里(左侧文件树看得到)。
阶段 3 —— 装一个 MCP 服务器,让 AI 能操作 Vercel
请给我装上 Vercel MCP 服务器,这样你能替我调 Vercel 的 API。把它加到我的 Cursor 配置里。装好以后,告诉我它给你带来了哪些工具——我想看一看这张清单。如果 MCP 服务器需要我粘一个 Vercel token,请先停下来,告诉我这个 token 具体去哪里取,再继续。
当 Cursor 暂停并问你要 Vercel token 时,在浏览器里打开 vercel.com/account/tokens,登录,点 Create Token,名字起作 cursor-mcp,复制 token,粘回 Cursor 的聊天窗。
Why manual: Vercel 不通过任何 API 暴露账号级 token——只能在网页控制台里手动建。
- Cursor 打印出它现在拥有的 Vercel 工具列表(创建部署、读日志、管环境变量等等)。
- 没有报错。
阶段 4 —— "哇哦"时刻
现在向我证明这个"授权模型"真的能跑通。给我推荐一个适合简单个人 landing page 的起步方案——可以是 Next.js、Vite + React,甚至纯 HTML/CSS/JS——并用一段话告诉我你为什么这么选。然后在这个文件夹里建出这个项目(叫它
hello-technest),初始化 git 仓库,用ghCLI(阶段 1 里装好的那个)把它推到我 GitHub 账号下一个新的公开仓库,再通过 Vercel MCP 部署到 Vercel。部署上线后,在我浏览器里打开生产 URL。整个过程中请合理地 commit 并写清楚的 commit message。我只负责看。
不少同学最后会落到 Next.js,因为 Vercel 的模板都假设你用 Next.js —— 这没问题,也正好对得上第 2 周我们要 fork 的 Magic Portfolio 模板。如果你的 AI 推荐了一个更轻的起步方案(Vite,或者一个 landing page 直接纯 HTML/CSS/JS),那也行。今天学的是部署管道,不是框架。
- 你的浏览器打开了一个线上
hello-technest-*.vercel.appURL,显示你那个起步方案的页面。 - 你的 GitHub 账号里出现了一个新仓库。
- 本地文件夹里有 Cursor 替你写的一串合理的 commit 历史。
部署失败了,有个 build error。你能不能通过 MCP 读一下 Vercel 的 build log,找到根因,修一下,再重新部署?在我们进行下一步之前,我希望那个生产 URL 能无报错地打开。
阶段 4.5 —— 让仓库看起来像一个真项目
请把这个项目的
README.md优化一下。包含:一句话项目简介、线上站点的截图或 URL、技术栈表格(你选了什么 + 为什么)、一段简短的"本地如何运行"、以及一张 Mermaid 图可视化部署管道(本地编辑 → git push → GitHub → Vercel webhook → 线上 URL)。改完 commit & push。
现在把这个仓库变得"可被发现"。用
ghCLI 把 GitHub 仓库的 Description 设成一句话总结这个站点是什么,再加五个合理的 Topics(比如personal-website、nextjs、vercel、ai-coded、technest-2026—— 根据你实际做的内容微调)。改完后跑gh repo view --web,让我确认 description 和 topic chips 都渲染出来了。
- 在 GitHub 上打开仓库。README 里有一张 Mermaid 图,并且能内联渲染(GitHub 原生支持 Mermaid)。
- 仓库 About 边栏显示了你的一句话 description 和五个 topic chip。
gh repo view --web这条命令在你浏览器里打开了仓库页。
阶段 5 —— 换一个 AI 试试手感
打开一个终端,
cd进hello-technest,确认你能看到这个项目。然后把你目前激活的 Claude Code skill 列出来 —— 用"我现在有以下 skill 可用:……"的句式 —— 让我看看今天这台机器装好后自带哪些。Typst skill 我们在第 8 周再装(它住在另一个 GitHub 仓库,需要手动安装 —— Claude Code 不会自动发现 skill)。
- Claude Code 打印它当前能用到的 skill 列表(比如项目内置的 slash command,以及你之前可能装过的 plugin skill)。
- Typst skill 现在不应该出现 —— 这是有意为之,第 8 周才装。
阶段 6 —— 把授权规则内化掉
让 AI 去做:开资源、环境变量管道、git、装依赖、改代码、迁移 schema、部署、生成 PDF——全部通过 CLI、API、MCP、Skill。只有你自己能做的事:OAuth 同意页、在 provider 站点建 API key、DNS、以及偶尔某行 .env.local(因为没有任何 CLI 能设它)。拿不准的时候,直接问 AI 这件事属于哪一类 —— 这是一个完美的提示词:"这件事你能通过 CLI 做,还是需要我自己来?"
本周作业
做 / 交付。
- 一个全程由 AI 调 CLI 部署出来的
*.vercel.app线上 URL。 - 仓库里有一份精修过的
README.md,包含 Mermaid 部署管道图,加上 GitHub 的 Description 和至少 5 个 Topic(看阶段 4.5)。 - 一张 Cursor 对话截图,展示你用哪一句提示词触发了部署。
- 第二张截图,展示 Vercel MCP 的 tool-call 输出。
要求。
- 仓库必须在你自己的 GitHub 账号下。
- 部署必须是 AI 触发的,而不是你自己手动跑
vercel deploy(这是整学期的重点)。 - Cursor 和 Claude Code 必须都装好并已登录。(Typst skill 在第 8 周才装,本周不要求。)
提交。 在第 2 周开课前,把这几样(线上 URL + 仓库 URL + 两张截图)发到课程 Slack 频道里。
资源
| 文档 | 视频 | 仓库 |
|---|---|---|
| Cursor 官方文档 —— 入门 | 讲师的 "first AI deploy" 演示录屏 | her-waka/tutorial/vibe-coding —— 给好奇学员的深入版 |
| Claude Code —— quickstart | Fireship —— "Cursor in 100 seconds" | ChanMeng666/typst-claude-skill —— 我们第 8 周要装的 Typst skill |
| Claude Code —— Skills reference | ||
| Vercel MCP server —— readme | ||
| GitHub CLI —— manual | ||
| Wispr Flow —— setup |
真实世界应用
2026 年任何一家做 AI 工程的公司,在面试时都会让你 演示一次工作流,而不是背语法。招聘经理想看到的是:候选人打开 Cursor,描述一个功能,10 分钟后一个线上 URL 就出来了——因为他们团队里的资深工程师已经是这种工作方式。今天的 Lab 就是那段面试素材:你用一句口述拿到了一个线上 URL。请把屏幕录屏存好。
下一周可以更新的 LinkedIn bio:"Full-stack AI developer · I prompt, I ship · vercel.app/my-project"。
踩坑提醒 & 小贴士
- "Cursor 每条 shell 命令都让我确认。" 这是好事——课堂环境下保留手动审批。第 3 周之后如果你想迭代更快,可以给低风险命令开自动批准。
- "MCP 服务器说 'authentication required'。" 你的 Vercel token 丢了或过期了。从
vercel.com/account/tokens重新生成一个并粘回来。 - "
gh auth login在 device-code 那一步老是失败。" 确认你粘 code 的浏览器和你 GitHub 已登录的浏览器是同一个。还不行就换gh auth login --web走 OAuth 备用流程。 - "Gemini CLI 提示我超了 rate limit。" 本节课剩下的时间用 Cursor 或 Claude Code。Gemini 免费额度每小时重置。
- "我搞不清这一步该我做还是该问 AI。" 直接问:"这件事你能通过工具做,还是需要我自己做?" AI 会如实回答。
- "我的提示词不够具体——AI 总在追问。" 仔细看这堂课讲师用的提示词。好的提示词会写明:AI 应该用哪个工具、手里有哪些输入、以及什么信号表示任务完成。
把你最后一条提示词 加上 AI 最后一条回复,粘到一个全新的 Claude Code 窗口里,说:"这条没跑通。最可能的下一步是什么,为什么?" 把卡住的 AI 会话当成一个可以重启、可以检视、可以重定向的调试对象——这是这门课最重要的一个能力。