搭建你的开发环境——产品经理的新工位「产品经理用 Claude 实现产品」系列 · 第4篇产品经理入职第一天装 Figma 和飞书今天你要装一个代码编辑器和一些基础工具。全程保姆级教程不需要任何技术背景跟着做就行。装完之后你就正式拥有了一个开发者工位。 关注博主不迷路 你将获得✅产品经理视角- 从你熟悉的工作流出发✅完整实战项目- 做一个你自己日常能用的工具✅即学即用- 每篇都有可运行的阶段成果✅方法论沉淀- 掌握AI 实现产品的完整方法论 互动交流评论区答疑- 产品 技术问题都能聊源码开放- GitHub 同步更新踩坑日记- 一个产品经理的真实编程之旅提示词模板- 可复用的 Claude 对话模板 点击右上角「关注」不错过每一篇精彩内容一、前言给自己装一个开发工位前三篇我们完成了认知转变——你知道了为什么要自己做产品、技术到底是什么、Claude 这个搭档有多好用。从这篇开始我们要动真格了。想象一下你入职一家新公司的第一天HR 带你到工位IT 帮你装电脑你自己装上 Figma、Axure、飞书、Notion……然后你才能开始工作。今天就是这一天——我们要搭建你的开发工位。需要装的东西不多总共就三样序号要装的工具类比干什么用的1代码编辑器Cursor相当于你的 Figma写代码、看代码的地方2Node.js相当于 Figma 的浏览器预览功能让代码能运行起来3命令行终端相当于给电脑发文字指令电脑自带不用装就这三样装完你就可以开始写代码了。别慌全程截图手把手跟着做就行。 本系列全程使用weelinking大模型聚合平台访问 Claude国内可稳定安全使用二、安装代码编辑器——你写代码的画布2.1 为什么选 Cursor你画原型用 Figma写文档用 Notion写代码用什么——代码编辑器。市面上最流行的代码编辑器是 VS Code微软出品免费。但我更推荐你用Cursor——它是在 VS Code 基础上做的界面和操作几乎一样但内置了 AI 能力。简单说Cursor VS Code AI 助手。对比项VS CodeCursor基础编辑功能✅ 完善✅ 完善一模一样内置 AI 对话❌ 需装插件✅ 原生支持AI 代码补全❌ 需装插件✅ 原生支持价格免费有免费额度够学习用中文支持✅ 装插件后支持✅ 装插件后支持对我们来说Cursor 内置的 AI 能力意味着你可以直接在编辑器里跟 AI 对话、让它帮你改代码不用来回切换窗口。如果你因为某些原因不想用 Cursor装 VS Code 也完全可以后续所有操作都兼容。2.2 下载安装 Cursor第一步下载打开浏览器访问 Cursor 官网https://www.cursor.com页面上会有一个醒目的下载按钮网站会自动识别你的操作系统Windows / Mac点击下载第二步安装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 —— 中文语言包点击左侧边栏的扩展图标四个小方块的图标或者按快捷键CtrlShiftXMac 上是CmdShiftX在搜索框里输入Chinese找到 “Chinese (Simplified) Language Pack for Visual Studio Code”点击 “Install”安装安装完成后编辑器右下角会提示你切换语言点击确认重启编辑器界面变成中文了插件二Live Server —— 实时预览同样在扩展搜索框里输入Live Server找到作者是 Ritwick Dey 的那个下载量最高的点击 “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第一步下载打开浏览器访问 Node.js 官网https://nodejs.org你会看到两个下载按钮LTS长期支持版← 选这个Current最新版点击 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 新文件夹看文件夹里有什么文件输入dirWindows或lsMac本质上做的事情完全一样只是操作方式不同。你可能会问那为什么不继续用鼠标因为开发领域很多工具只能通过命令行操作——比如安装依赖包、启动项目、运行构建。但你需要掌握的命令非常少学会 5 个就够了。4.2 打开终端方式一在 Cursor 里打开推荐在 Cursor 编辑器里按快捷键Ctrl就是键盘左上角数字 1 旁边那个反引号键底部会弹出一个终端面板。这是最方便的方式——不用切换窗口在编辑器里就能输入命令。方式二独立打开Windows按Win R输入cmd回车。或者在开始菜单搜索命令提示符或PowerShellMac在启动台搜索终端Terminal打开即可4.3 5 个必会命令只需要记 5 个命令就能覆盖日常 90% 的场景①cd—— 进入文件夹cdDesktop# 进入桌面cdmy-project# 进入 my-project 文件夹cd..# 返回上一级文件夹cd是 “change directory” 的缩写意思是切换目录。就像你在文件管理器里双击文件夹进入一样。②dirWindows/lsMac—— 查看文件列表dir# Windows看当前文件夹里有什么ls# Mac看当前文件夹里有什么就像你打开一个文件夹看看里面有什么东西。③mkdir—— 创建新文件夹mkdirmy-project# 创建一个叫 my-project 的文件夹就像你右键 → 新建文件夹。④npm—— 安装和管理工具包npminstall# 安装项目需要的依赖包npmstart# 启动项目npm是 Node.js 自带的包管理器。你可以把它理解为开发者的 App Store——需要什么工具就用 npm 安装。安装 Node.js 的时候 npm 已经自动装好了不需要单独安装。⑤node—— 运行代码nodeapp.js# 运行 app.js 这个文件就像双击一个文件打开它只不过这里是用命令让 Node.js 运行它。就这 5 个。记不住也没关系后面每次用到的时候我都会告诉你输入什么。4.4 练一练来做一个小练习验证你的环境是否正常练习创建一个项目文件夹打开 Cursor按Ctrl打开终端输入以下命令Windows 和 Mac 通用cdDesktopmkdirpm-projectcdpm-project这三行命令做了三件事进入桌面目录在桌面上创建一个叫pm-project的文件夹进入这个文件夹验证# Windows 输入dir# Mac 输入ls如果没有报错而是显示一个空的列表因为文件夹里还没有文件说明一切正常去桌面看看——是不是多了一个pm-project文件夹恭喜你刚刚用命令行操作了电脑没那么可怕吧五、创建你的第一个项目文件夹练习已经建好了文件夹现在我们正式规划一下项目结构。5.1 项目目录规划我们后续要做的需求管理平台会包含前端和后端两部分。先建好文件夹结构pm-project/ ← 项目根目录已经建好了 ├── frontend/ ← 前端代码放这里 ├── backend/ ← 后端代码放这里 └── docs/ ← 文档和笔记放这里在终端里输入确保你当前在pm-project目录下mkdirfrontendmkdirbackendmkdirdocs三个文件夹就建好了。5.2 用 Cursor 打开项目打开 Cursor点击菜单栏的 “文件” → “打开文件夹”Mac 上是 “File” → “Open Folder”找到桌面上的pm-project文件夹选中点击选择文件夹现在你会看到左侧的文件导航栏里出现了三个文件夹frontend、backend、docs。这就是你的项目工作区。以后所有代码都在这里写。5.3 创建一个测试文件来验证整个流程是否通畅在 Cursor 左侧的frontend文件夹上右键选择新建文件文件名输入test.html在编辑区域输入以下内容或者让 Claude 帮你生成!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title环境测试/titlestylebody{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 12pxrgba(0,0,0,0.1);text-align:center;}h1{color:#1890ff;margin-bottom:8px;}p{color:#666;}/style/headbodydivclasscardh1环境搭建成功/h1p恭喜你产品经理的开发工位已就绪 /p/div/body/html按CtrlSMac 上是CmdS保存文件在编辑区域右键选择 “Open with Live Server”浏览器自动弹开——你看到一个白色卡片上写着**“环境搭建成功”**。如果你看到了这个页面说明你的整个开发环境已经搭建完成。六、环境验证检查在继续之前用这张清单做个最终确认✅ 环境检查清单检查项验证方式期望结果Cursor 已安装能正常打开 Cursor✅ 看到编辑器界面中文插件已安装界面是中文✅ 菜单显示中文Live Server 已安装右键有Open with Live Server✅ 能看到这个选项Node.js 已安装终端输入node -v✅ 显示版本号如 v20.x.xnpm 已安装终端输入npm -v✅ 显示版本号如 10.x.x项目文件夹已创建桌面有pm-project文件夹✅ 包含 frontend/backend/docs测试页面能打开Live Server 启动后浏览器能看到页面✅ 显示环境搭建成功全部打 ✅——恭喜你已经拥有了一个完整的开发工位 常见问题排查Q1终端输入node -v提示不是内部命令ANode.js 安装时没有添加到系统路径。解决办法重新安装 Node.js安装过程中保持所有默认选项不要修改。安装完成后关闭终端重新打开再试。Q2Live Server 右键菜单里没有A确认两件事①插件已经安装成功左侧扩展面板能看到②你右键的是.html文件其他类型的文件不会出现这个选项。Q3Cursor 打不开 / 打开很慢ACursor 对电脑配置要求不高但如果电脑比较老可以换用 VS Code更轻量。去https://code.visualstudio.com下载所有操作完全一样。Q4Mac 用户打开终端不知道在哪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 EACCESMac 权限问题命令前加sudo如sudo npm installCursor 提示需要更新版本过旧点击更新重启即可Live Server 没反应没有打开项目文件夹先用文件→打开文件夹打开项目 5 个必会命令速查表cd 文件夹名 → 进入文件夹 cd .. → 返回上一级 dir / ls → 查看当前文件夹内容Windows 用 dirMac 用 ls mkdir 文件夹名 → 创建新文件夹 npm install → 安装项目依赖 npm start → 启动项目 node 文件名 → 运行 JS 文件 如果这篇文章对你有帮助请点赞 收藏⭐ 关注你的支持是我持续更新的最大动力 评论区聊聊你的开发环境搭建顺利吗遇到什么问题了系列导航产品经理用 Claude 实现产品 · 系列目录⏪上一篇第3篇你的新搭档 Claude——比任何开发都听话⏩下一篇第5篇写出第一个页面——比画原型还快推荐阅读VS Code 安装配置 Claude Code 插件教程3分钟搞定2026全网首个企业级claude中转服务平台使用说明claude skill 核心概念解读(小白也能看懂)