🚀

Vibe Coding 课前准备

上课前，跟着步骤把电脑准备好。Let's get you ready.

Prepared for MY COMPUTER SYSTEM SDN BHD · Tue 10 – Thu 12 Nov 2026

先选你上课用的电脑：What computer are you using?

⏱ 预留大约 1–2 小时。不要拖到上课当天早上才做。

APEX VIBE CODING 课前准备
0/10 完成
STEP 1 OF 10

准备一个 EmailYour email免费

接下来每个账号（Claude、GitHub、Vercel、Supabase）全部用同一个 Email 注册和登录。

要做的事 What to do

  1. 选一个你每天会看的 Email。推荐 Gmail，很多工具可以一键 "Continue with Google"。
  2. 已经有 Gmail？直接用。没有就开一个新的：
    开新 Gmail ↗
  3. 确认你能在电脑和手机上收信。每个工具都会寄确认信来。
  4. 把这个 Email 写在纸上，接下来每一步都用它。
规则：一定要在你 Day 1 带来的那台电脑上做。公司电脑如果不能装软件，请先问 IT。

要花钱吗？What costs money

服务Plan价钱
Claude（含 Claude Code）Pro（或 Max）付费 · Pro US$20/月；年付 US$200（约 US$17/月），不含税
GitHubFree免费
VercelHobby免费
SupabaseFree免费
Node.js · Git · terminal—免费软件

Claude 价钱来源：claude.com/pricing（2026 年 11 月 3 日查看）。以官网为准。

你能打开这个 Email 的收件箱。
STEP 2 OF 10

订阅 Claude Pro + 装 AppClaude

Claude 是我们上课用的 AI 助手。Claude Code 需要付费 plan，免费版用不了。

A · 订阅 Claude Pro

  1. 打开 claude.ai，按 Sign up，用步骤 1 的 Email 注册（Gmail 可以按 "Continue with Google"）。
  2. 如果要求手机号码，输入你的马来西亚号码 (+60…)，再输入 SMS 收到的 code。
  3. 登入后，点左下角你的名字 → Settings → Billing，升级到 Pro。
  4. 用信用卡或 debit card 付款。付完后，名字旁边应该显示 Pro。
打开 claude.ai ↗官方价钱

B · 安装 Claude Desktop App 免费下载

  1. 打开 claude.ai/download，下载你电脑的版本。
  2. 打开下载的 .exe，跟着画面按下一步。
  3. 打开下载的 .dmg，把 Claude 拖进 Applications 文件夹。
  4. 打开 app，用同一个 Email 登入。
claude.ai/download ↗
不想继续用？随时可以在 Settings → Billing 取消，plan 会用到这一期结束。
账号显示 Pro（或 Max），app 里看到你的名字。
STEP 3 OF 10

开 GitHub 账号GitHub免费

GitHub = 放代码的网上仓库。之后 Vercel 和 Supabase 都用 GitHub 登入。

要做的事 What to do

  1. 打开 github.com，按 Sign up，用同一个 Email。
  2. Username 用正式一点的名字，例如 mcs-ahmad、weiling-tech。它会出现在你的网址里。
  3. 去 Email 按确认链接。选 Free plan 就够。
  4. 如果它叫你开 2FA（两步验证），现在开或之后开都可以。
github.com/signup ↗
你能登入 GitHub，看到自己的 dashboard。
STEP 4 OF 10

开 Vercel 账号Hosting免费

Vercel = 把网站放上网的地方。Day 1 的 landing page 和之后的项目都用 Vercel 上线。

要做的事 What to do

  1. 打开 vercel.com，按 Sign Up。
  2. 选 Hobby（免费）。
  3. 按 Continue with GitHub → Authorize。
  4. 先不要 import 或 deploy，上课一起做。
vercel.com/signup ↗
能登入 Vercel dashboard。
STEP 5 OF 10

开 SupabaseDatabase免费

Supabase = 网站的资料库（database）和登入系统。Day 2 会用到。

要做的事 What to do

  1. 打开 supabase.com，按 Start your project 或 Sign up。
  2. 按 Continue with GitHub → Authorize。
  3. 要你填 organization 名字的话，用你的 GitHub username。
  4. 先不要开 project，上课一起开。
supabase.com/dashboard ↗
看到 Supabase dashboard。账号部分完成！接下来装工具。
STEP 6 OF 10

打开 terminal + 装 Node.jsTerminal & Node.js免费

Terminal 就是打字给电脑下指令的黑色窗口。Node.js 让电脑可以跑网站工具。

A · 打开 terminal

  1. 按 Windows 键，打 PowerShell，按 Enter。看到 PS C:\Users\你的名字> 就对了。
  2. 按 Cmd + Space，打 Terminal，按 Enter。看到一个有 % 的窗口就对了。
  3. 怎么用指令：按代码框右边的 Copy → 在 terminal 里贴上（右键 或 Ctrl+VCmd+V）→ 按 Enter → 等它跑完再做下一个。

B · 安装 Node.js (LTS)

  1. 打开 nodejs.org/en/download，选标着 LTS 的版本。
  2. 下载 Windows Installer (.msi)，打开后一路按 Next，用默认设定。
  3. 下载 macOS Installer (.pkg)，打开后一路按 Continue，最后输入 Mac 密码。
  4. 关掉 terminal，再开一个新的，然后检查：
checknode -v
checknpm -v
nodejs.org/en/download ↗
两个指令都显示版本号，例如 v24.x.x。
STEP 7 OF 10

安装 GitGit免费

Git 帮你保存代码的每一个版本，也是把代码送上 GitHub 的工具。

安装

  1. 打开 git-scm.com/downloads/win，下载 Git for Windows (x64 setup)。
  2. 打开安装档，一路按 Next，用默认设定就好。
  3. 关掉 PowerShell，再开新的。
git-scm.com/downloads/win ↗
  1. 在 Terminal 贴上这个指令，按 Enter：
Mac · installxcode-select --install
  1. 跳出窗口时按 Install，等它装完（可能要十几分钟）。
  2. 如果说 "already installed"，代表已经有了，直接检查。

检查 + 告诉 Git 你是谁

checkgit --version

把引号里面换成你的名字和同一个 Email：

setupgit config --global user.name "Your Name"
setupgit config --global user.email "you@gmail.com"
显示 git version 2.xx。
STEP 8 OF 10

安装 Claude Code 并登入Claude Code

Claude Code = 在 terminal 里帮你写代码的 AI。这是官方的安装指令：

A · 安装

PowerShellirm https://claude.ai/install.ps1 | iex
Terminalcurl -fsSL https://claude.ai/install.sh | bash
  1. 贴上、按 Enter。下载时可能没有进度条，耐心等它跑完。
  2. 关掉 terminal，开一个新的，检查：
checkclaude --version

B · 登入

打下面的指令，选用 Claude 账号 (Pro) 登入，浏览器会打开，按同意，再回到 terminal。登入后打 /exit 离开。

sign inclaude

C · 连接 Vercel

第一次会问 Ok to proceed? (y)，打 y 再按 Enter。浏览器会打开，按同意就好。

Vercelnpx vercel login
官方安装说明 ↗
claude --version 有版本号、已登入，浏览器显示 Vercel 登入成功。
STEP 9 OF 10

一次过检查 + 跟 Claude 打招呼Check & first prompt

开一个新的 terminal，一个一个跑。每个都显示版本号 = 成功，数字不用一样。

Node.jsnode -v
npmnpm -v
Gitgit --version
Claude Codeclaude --version
Vercelnpx vercel --version

全部成功后，截图这个 terminal 画面，上课时可能会请你给我们看。

你的第一个 prompt Your first prompt

打开 Claude app（或在 terminal 打 claude），贴上下面的 prompt，把 [空格] 换成你的资料。

中文你好 Claude。我叫 [你的名字]，在 [城市] 的 [店名] 工作，我们是卖电脑和修电脑的店。我的工作是 [你的职位]。 请用 3 个简短的重点，建议一些可以帮到客户的简单网页或小工具。用初学者看得懂的方式回答。
EnglishHi Claude. My name is [YOUR NAME]. I work at [SHOP NAME] in [CITY], a computer sales and repair shop. My job is [YOUR ROLE]. In 3 short bullet points, suggest simple web pages or tools that could help our customers. Keep it beginner-friendly.
5 个检查都有版本号，Claude 有回答你。把它的建议带来课堂，Day 3 可能用得到。
STEP 10 OF 10

准备好了！Day 1 要带什么Ready for class

Day 1 · Tue 10 Nov 2026

💻 装好工具的电脑Laptop, fully set up
🔌 充电器Charger
📱 手机For login codes
🔑 所有账号密码Know your logins
🏪 店的资料Logo, address, hours, photos
💡 一个想法One idea for your shop
📸 检查截图Step 9 screenshot
🔥 好奇心Come ready to build
小提示：店的资料（地址、营业时间、WhatsApp、服务项目、照片）Day 1 做 landing page 时会用到，先放在电脑一个文件夹里。

最后清单 Final checklist

上面的步骤都打勾了吗？还没完成的步骤在顶部会是空心圆圈，点它回去补做。

  • 所有账号都用同一个 Email
  • Claude 显示 Pro，app 已登入
  • GitHub、Vercel、Supabase 都能登入
  • 5 个检查指令都有版本号
还是卡住？把 terminal 的画面截图，写下你在第几步、用 Windows 还是 Mac，上课前发给 Kelvin（APEX Corporate Systems）。越早说越好。

🎉 Day 1 见！See you on Tuesday 10 Nov.

常见问题Stuck?

万能第一招：关掉 terminal，开一个新的，再试一次。新装的工具只在新开的窗口里有效。
打指令后显示 "not recognized" / "command not found"

1. 关掉 terminal，开新的再试。2. 还是不行：重开电脑。3. 再不行：回到那一步重新安装。

Claude Code 特别情况：安装完后会显示一段提示，叫你把一个文件夹加进 PATH，照着它显示的指令做。

Windows：npx 显示 "running scripts is disabled on this system"

PowerShell 的安全设定挡住了。贴上这个，按 Enter，问你时打 Y：

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

只改你自己的账号，不需要 admin。改完开新的 PowerShell 再试。

Windows：跳出 "Windows protected your PC"

只要档案是从本手册的官方网站下载的，就按 Yes（或 More info → Run anyway）。不确定的话先问我们。

Mac：打密码时屏幕没有显示任何字

这是正常的。Mac terminal 打密码时不会显示，照常打完按 Enter。

Mac：打 git 时跳出 "install command line developer tools"

按 Install，等它装完。这就是步骤 7 的 Git。

Claude 付款失败

1. 确认卡有开通网上 / 海外付款。2. 用银行 app 开通后再试。3. 换另一张卡。

收不到 SMS 或确认 Email

先看 Spam / Promotions 文件夹。等 2–3 分钟再按 "Resend"。确认你打的 Email 跟步骤 1 一样。

登入时浏览器没有自动打开

Terminal 里通常会显示一条网址。复制它，贴到浏览器打开，登入后再回到 terminal。

用了不同的 Email 开账号

没关系，但请记下每个服务用了哪个 Email，上课时告诉我们。

公司电脑不能安装软件

请 IT 给你安装权限，或者 Day 1 带自己的电脑来。

下载链接都来自官方网站。价钱和画面以官网为准，可能会改变。