关注公众号：weelinking | 访问官网：weelinking.com

「产品经理用 Claude 实现产品」系列 · 第4篇

产品经理入职第一天装 Figma 和飞书，今天你要装一个"代码编辑器"和一些基础工具。全程保姆级教程，不需要任何技术背景，跟着做就行。装完之后，你就正式拥有了一个"开发者工位"。

---

一、前言：给自己装一个"开发工位"

前三篇我们完成了认知转变——你知道了为什么要自己做产品、技术到底是什么、Claude 这个搭档有多好用。

从这篇开始，我们要动真格了。

想象一下你入职一家新公司的第一天：HR 带你到工位，IT 帮你装电脑，你自己装上 Figma、Axure、飞书、Notion……然后你才能开始工作。

今天就是这一天——我们要搭建你的"开发工位"。

需要装的东西不多，总共就三样：

序号	要装的工具	类比	干什么用的
1	代码编辑器（Cursor）	相当于你的 Figma	写代码、看代码的地方
2	Node.js	相当于 Figma 的浏览器预览功能	让代码能运行起来
3	命令行（终端）	相当于给电脑发文字指令	电脑自带，不用装

就这三样，装完你就可以开始写代码了。

别慌，全程截图+手把手，跟着做就行。

💡 本系列全程使用 weelinking 访问 Claude，国内可稳定使用

---

二、安装代码编辑器——你写代码的"画布"

2.1 为什么选 Cursor

你画原型用 Figma，写文档用 Notion，写代码用什么？——代码编辑器。

市面上最流行的代码编辑器是 VS Code（微软出品，免费）。但我更推荐你用 Cursor——它是在 VS Code 基础上做的，界面和操作几乎一样，但内置了 AI 能力。

简单说：Cursor = VS Code + AI 助手。

对比项	VS Code	Cursor
基础编辑功能	✅ 完善	✅ 完善（一模一样）
内置 AI 对话	❌ 需装插件	✅ 原生支持
AI 代码补全	❌ 需装插件	✅ 原生支持
价格	免费	有免费额度，够学习用
中文支持	✅ 装插件后支持	✅ 装插件后支持

对我们来说，Cursor 内置的 AI 能力意味着你可以直接在编辑器里跟 AI 对话、让它帮你改代码，不用来回切换窗口。

如果你因为某些原因不想用 Cursor，装 VS Code 也完全可以，后续所有操作都兼容。

2.2 下载安装 Cursor

第一步：下载

1. 打开浏览器，访问 Cursor 官网：https://www.cursor.com
2. 页面上会有一个醒目的下载按钮，网站会自动识别你的操作系统（Windows / Mac）
3. 点击下载

第二步：安装

• Windows 用户： 双击下载好的 .exe 文件，一路点"下一步"即可。安装过程中如果弹出"是否允许此应用对设备进行更改"，点"是"
• Mac 用户： 双击下载的 .dmg 文件，把 Cursor 图标拖到"应用程序"文件夹里

第三步：打开 Cursor

安装完成后，打开 Cursor，你会看到一个欢迎页面。第一次打开可能会让你登录或注册 Cursor 账号，按提示操作即可。

2.3 认识编辑器界面

打开 Cursor 之后，先别慌。界面看起来可能有点陌生，但用 Figma 来类比就很好理解：

┌──────────────────────────────────────────────────────┐
│  菜单栏（跟 Figma 顶部的菜单一样）                      │
├──────┬───────────────────────────────────┬────────────┤
│      │                                   │            │
│ 侧边 │         编辑区域                    │   AI 对话  │
│ 文件 │    （相当于 Figma 的画布）           │    面板    │
│ 导航 │                                   │  （Cursor  │
│      │    你在这里写代码、看代码             │   特有）   │
│      │                                   │            │
├──────┴───────────────────────────────────┴────────────┤
│  终端面板（命令行，后面会讲）                              │
└──────────────────────────────────────────────────────┘

Figma 里的概念	Cursor 里的对应
左侧图层面板	左侧文件导航（看项目里有哪些文件）
中间画布	中间编辑区域（写代码的地方）
右侧属性面板	右侧 AI 对话面板（跟 AI 聊天）
顶部工具栏	顶部菜单栏

此刻你不需要搞懂每个按钮的功能。 就像你第一次打开 Figma 也不会所有功能都用——先认个脸熟就行，后面用到什么学什么。

2.4 必装插件

Cursor（和 VS Code）有一个"插件市场"，可以给编辑器安装扩展功能。就像手机装 App 一样。

我们先装两个最基础的：

插件一：Chinese (Simplified) Language Pack —— 中文语言包

1. 点击左侧边栏的"扩展"图标（四个小方块的图标），或者按快捷键 Ctrl+Shift+X（Mac 上是 Cmd+Shift+X）
2. 在搜索框里输入 Chinese
3. 找到 “Chinese (Simplified) Language Pack for Visual Studio Code”
4. 点击 “Install”（安装）
5. 安装完成后，编辑器右下角会提示你切换语言，点击确认，重启编辑器
6. 界面变成中文了！

插件二：Live Server —— 实时预览

1. 同样在扩展搜索框里输入 Live Server
2. 找到作者是 Ritwick Dey 的那个（下载量最高的）
3. 点击 “Install”

Live Server 的作用是：当你写好一个 HTML 文件后，右键点击文件选择"Open with Live Server"，浏览器会自动打开页面。而且你每次修改代码保存后，浏览器会自动刷新——不用手动刷新。

这就像 Figma 的实时预览功能——你改了设计稿，预览自动更新。

两个插件装完，编辑器就配置好了。后续需要其他插件时再装，不贪多。

---

三、安装 Node.js——让代码跑起来的"引擎"

3.1 Node.js 是什么（一句话版）

Node.js 就是让 JavaScript 代码能在你电脑上运行的工具。

类比一下：

• 你画的 Figma 原型，需要浏览器才能预览
• 你写的代码，需要 Node.js 才能运行后端逻辑

更具体地说：

• 前端代码（HTML/CSS/JS）直接用浏览器就能看
• 但后端代码、项目构建、安装依赖包……这些都需要 Node.js

你现在不需要深入理解它，只需要知道：它是必须装的基础工具，装完不用管它。 就像你电脑上装了显卡驱动——你不需要知道它怎么工作，但没有它很多东西跑不了。

3.2 下载安装 Node.js

第一步：下载

1. 打开浏览器，访问 Node.js 官网：https://nodejs.org
2. 你会看到两个下载按钮：
   • LTS（长期支持版） ← 选这个！
   • Current（最新版）
3. 点击 LTS 版本下载

为什么选 LTS？因为它最稳定。就像手机系统，你不会去刷最新的测试版，而是用稳定版。

第二步：安装

• Windows 用户： 双击 .msi 安装文件，一路点"Next"就行。所有选项保持默认，不要改任何东西
• Mac 用户： 双击 .pkg 安装文件，按提示一路点"继续"

第三步：验证安装成功

这一步需要用到命令行。别慌，下一章马上教你。但如果你着急，可以先这样验证：

• Windows： 按 Win + R，输入 cmd，回车打开命令行，然后输入 node -v 回车
• Mac： 打开"终端"应用（在启动台搜索"终端"），输入 node -v 回车

如果看到一个版本号（比如 v20.11.0），恭喜你，安装成功！

如果提示"不是内部或外部命令"或"command not found"，说明安装没成功。最常见的原因是安装过程中没有勾选"Add to PATH"——重新安装一次，保持所有默认选项即可。

---

四、认识命令行——别怕，就是"跟电脑发消息"

4.1 命令行是什么

你平时怎么操作电脑？用鼠标——点图标、拖文件、双击打开。

命令行是另一种操作电脑的方式：用文字给电脑下指令。

类比一下：

鼠标操作	命令行操作
双击打开"文档"文件夹	输入 cd 文档
右键 → 新建文件夹	输入 mkdir 新文件夹
看文件夹里有什么文件	输入 dir（Windows）或 ls（Mac）

本质上做的事情完全一样，只是操作方式不同。

你可能会问：那为什么不继续用鼠标？

因为开发领域很多工具只能通过命令行操作——比如安装依赖包、启动项目、运行构建。但你需要掌握的命令非常少，学会 5 个就够了。

4.2 打开终端

方式一：在 Cursor 里打开（推荐）

在 Cursor 编辑器里，按快捷键 Ctrl+`（就是键盘左上角数字 1 旁边那个反引号键），底部会弹出一个终端面板。

这是最方便的方式——不用切换窗口，在编辑器里就能输入命令。

方式二：独立打开

• Windows： 按 Win + R，输入 cmd，回车。或者在开始菜单搜索"命令提示符"或"PowerShell"
• Mac： 在启动台搜索"终端"（Terminal），打开即可

4.3 5 个必会命令

只需要记 5 个命令，就能覆盖日常 90% 的场景：

① cd —— 进入文件夹

cd Desktop          # 进入桌面
cd my-project       # 进入 my-project 文件夹
cd ..               # 返回上一级文件夹

cd 是 “change directory” 的缩写，意思是"切换目录"。就像你在文件管理器里双击文件夹进入一样。

② dir（Windows）/ ls（Mac）—— 查看文件列表

dir                 # Windows：看当前文件夹里有什么
ls                  # Mac：看当前文件夹里有什么

就像你打开一个文件夹，看看里面有什么东西。

③ mkdir —— 创建新文件夹

mkdir my-project    # 创建一个叫 my-project 的文件夹

就像你右键 → 新建文件夹。

④ npm —— 安装和管理工具包

npm install         # 安装项目需要的依赖包
npm start           # 启动项目

npm 是 Node.js 自带的"包管理器"。你可以把它理解为开发者的 App Store——需要什么工具就用 npm 安装。

（安装 Node.js 的时候 npm 已经自动装好了，不需要单独安装。）

⑤ node —— 运行代码

node app.js         # 运行 app.js 这个文件

就像双击一个文件打开它，只不过这里是用命令让 Node.js 运行它。

就这 5 个。 记不住也没关系，后面每次用到的时候我都会告诉你输入什么。

4.4 练一练

来做一个小练习，验证你的环境是否正常：

练习：创建一个项目文件夹

1. 打开 Cursor，按 Ctrl+` 打开终端

2. 输入以下命令（Windows 和 Mac 通用）：

cd Desktop
mkdir pm-project
cd pm-project

这三行命令做了三件事：

• 进入桌面目录
• 在桌面上创建一个叫 pm-project 的文件夹
• 进入这个文件夹

3. 验证：

# Windows 输入：
dir

# Mac 输入：
ls

如果没有报错，而是显示一个空的列表（因为文件夹里还没有文件），说明一切正常！

去桌面看看——是不是多了一个 pm-project 文件夹？

恭喜，你刚刚用命令行操作了电脑！ 没那么可怕吧？

---

五、创建你的第一个项目文件夹

练习已经建好了文件夹，现在我们正式规划一下项目结构。

5.1 项目目录规划

我们后续要做的"需求管理平台"，会包含前端和后端两部分。先建好文件夹结构：

pm-project/                  ← 项目根目录（已经建好了）
├── frontend/                ← 前端代码放这里
├── backend/                 ← 后端代码放这里
└── docs/                    ← 文档和笔记放这里

在终端里输入（确保你当前在 pm-project 目录下）：

mkdir frontend
mkdir backend
mkdir docs

三个文件夹就建好了。

5.2 用 Cursor 打开项目

1. 打开 Cursor
2. 点击菜单栏的 “文件” → “打开文件夹”（Mac 上是 “File” → “Open Folder”）
3. 找到桌面上的 pm-project 文件夹，选中，点击"选择文件夹"

现在你会看到左侧的文件导航栏里出现了三个文件夹：frontend、backend、docs。

这就是你的"项目工作区"。 以后所有代码都在这里写。

5.3 创建一个测试文件

来验证整个流程是否通畅：

1. 在 Cursor 左侧的 frontend 文件夹上右键，选择"新建文件"
2. 文件名输入：test.html
3. 在编辑区域输入以下内容（或者让 Claude 帮你生成）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>环境测试</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: #f0f2f5;
            font-family: -apple-system, sans-serif;
        }
        .card {
            background: white;
            padding: 48px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            text-align: center;
        }
        h1 { color: #1890ff; margin-bottom: 8px; }
        p { color: #666; }
    </style>
</head>
<body>
    <div class="card">
        <h1>环境搭建成功！</h1>
        <p>恭喜你，产品经理的"开发工位"已就绪 🎉</p>
    </div>
</body>
</html>

4. 按 Ctrl+S（Mac 上是 Cmd+S）保存文件

5. 在编辑区域右键，选择 “Open with Live Server”

浏览器自动弹开——你看到一个白色卡片上写着**“环境搭建成功！”**。

如果你看到了这个页面，说明你的整个开发环境已经搭建完成。

---

六、环境验证检查

在继续之前，用这张清单做个最终确认：

✅ 环境检查清单

检查项	验证方式	期望结果
Cursor 已安装	能正常打开 Cursor	✅ 看到编辑器界面
中文插件已安装	界面是中文	✅ 菜单显示中文
Live Server 已安装	右键有"Open with Live Server"	✅ 能看到这个选项
Node.js 已安装	终端输入 node -v	✅ 显示版本号（如 v20.x.x）
npm 已安装	终端输入 npm -v	✅ 显示版本号（如 10.x.x）
项目文件夹已创建	桌面有 pm-project 文件夹	✅ 包含 frontend/backend/docs
测试页面能打开	Live Server 启动后浏览器能看到页面	✅ 显示"环境搭建成功！"

全部打 ✅？——恭喜，你已经拥有了一个完整的开发工位！

🔧 常见问题排查

Q1：终端输入 node -v 提示"不是内部命令"

A：Node.js 安装时没有添加到系统路径。解决办法：重新安装 Node.js，安装过程中保持所有默认选项不要修改。安装完成后关闭终端重新打开再试。

Q2：Live Server 右键菜单里没有

A：确认两件事：①插件已经安装成功（左侧扩展面板能看到）②你右键的是 .html 文件（其他类型的文件不会出现这个选项）。

Q3：Cursor 打不开 / 打开很慢

A：Cursor 对电脑配置要求不高，但如果电脑比较老，可以换用 VS Code（更轻量）。去 https://code.visualstudio.com 下载，所有操作完全一样。

Q4：Mac 用户打开终端不知道在哪

A：按 Cmd+空格 打开聚焦搜索，输入"终端"，回车即可打开。或者用 Cursor 内置终端（按 Ctrl+`），更方便。

---

七、总结与下期预告

🎯 本篇核心要点

1. 你的"开发工位"只需要三样东西。 代码编辑器（Cursor）、Node.js、命令行。装好这三样，你就具备了写代码的基本条件。

2. Cursor 就是你写代码的"Figma"。 左边看文件、中间写代码、右边跟 AI 聊天。界面不复杂，用到什么学什么。

3. 命令行只需要记 5 个命令。 cd 进文件夹、dir/ls 看文件、mkdir 建文件夹、npm 装工具、node 运行代码。记不住也没关系，后面每次都会告诉你。

📌 记住这句话

环境搭建是一次性的——装好就不用管了。就像你装 Figma 只需要装一次，以后每天打开就能用。

📣 下期预告

第5篇：《写出第一个页面——比画原型还快》

工位搭好了，下一篇我们就要正式"开工"了——用 Claude 帮你写出一个真正的页面。不是 Hello World，而是一个有模有样的产品需求提交表单。你会亲手从零做出一个能交互的页面，体验到"比画原型还快"的感觉。

准备好了吗？我们下篇见。

💡 本系列全程使用 weelinking 访问 Claude，国内可稳定使用

---

📎 配套资源

📋 环境安装检查清单（可保存）

□ 1. 下载安装 Cursor        → https://www.cursor.com
□ 2. 安装插件：中文语言包    → 搜索 "Chinese"
□ 3. 安装插件：Live Server   → 搜索 "Live Server"
□ 4. 下载安装 Node.js (LTS) → https://nodejs.org
□ 5. 验证 node -v           → 看到版本号即成功
□ 6. 验证 npm -v            → 看到版本号即成功
□ 7. 创建项目文件夹          → 桌面/pm-project
□ 8. 建好子目录              → frontend / backend / docs
□ 9. 测试页面能运行          → Live Server 打开 test.html

📋 常见报错解决方案速查

报错信息	原因	解决办法
'node' 不是内部或外部命令	Node.js 未添加到 PATH	重新安装 Node.js，保持默认选项
'npm' 不是内部或外部命令	同上	同上
npm ERR! code EACCES	Mac 权限问题	命令前加 sudo，如 sudo npm install
Cursor 提示需要更新	版本过旧	点击更新，重启即可
Live Server 没反应	没有打开项目文件夹	先用"文件→打开文件夹"打开项目

📋 5 个必会命令速查表

cd 文件夹名       → 进入文件夹
cd ..             → 返回上一级
dir / ls          → 查看当前文件夹内容（Windows 用 dir，Mac 用 ls）
mkdir 文件夹名    → 创建新文件夹
npm install       → 安装项目依赖
npm start         → 启动项目
node 文件名       → 运行 JS 文件

---

📌 系列导航： 产品经理用 Claude 实现产品 · 系列目录

⏪ 上一篇： 第3篇：从原型到代码——理解“实现“到底是什么

⏩ 下一篇： 第5篇：写出第一个页面——比画原型还快

---

💡 国内程序员一般在这里使用 Claude： weelinking

关注我，获取更多 AI 使用技巧！