用 Cursor + PM Skills，把「想法」一次做到「可点原型」

面向产品经理与业务同学：不写框架代码，也能从脑暴、PRD 走到可演示的后台页面。

一、安装环境依赖

开工前装好Node.js（推荐 v24.15.0）和Git（推荐 v2.54.0）。下面按系统分别说明。

（一）Windows

1. 安装 Node.js v24.15.0

1. 打开 Node.js 官网，下载Windows Installer（.msi），选 LTS 或对应v24.15.0的安装包。
2. 一路下一步安装（勾选 “Add to PATH”）。
3. 打开命令提示符或PowerShell，验证：
   powershell<br />node -v<br /># 期望：v24.15.0<br />
4. 启用 pnpm（本项目推荐）：
   powershell<br />corepack enable<br />corepack prepare pnpm@latest --activate<br />pnpm -v<br />
   若corepack不可用，也可：
   powershell<br />npm install -g pnpm<br />

2. 安装 Git v2.54.0

1. 打开 git-scm.com，下载 Windows 安装包（尽量选接近2.54.0的版本）。
2. 安装时建议保留默认选项；编辑器、PATH、行尾符按向导默认即可。
3. 新开终端验证：
   powershell<br />git --version<br /># 期望接近：git version 2.54.0<br />

Windows 提示：装完 Node / Git 后若命令找不到，关掉终端重新打开，或检查「环境变量 → Path」是否包含安装目录。

（二）macOS

1. 安装 Node.js v24.15.0

方式 A：官网安装包

1. 打开 Node.js 官网，下载macOS Installer（.pkg）（Apple Silicon / Intel 选对架构）。
2. 安装完成后，打开「终端」验证：
   bash<br />node -v<br /># 期望：v24.15.0<br />

方式 B：nvm（方便多版本切换，推荐）

# 已安装 nvm 时
nvm install 24.15.0
nvm use 24.15.0
node -v

启用 pnpm：

corepackenable
corepack prepare pnpm@latest --activate
pnpm -v

2. 安装 Git v2.54.0

方式 A：Homebrew（推荐）

brew install git
git --version
# 期望接近：git version 2.54.0

方式 B：Xcode 命令行工具

xcode-select --install
git --version

若系统自带 Git 版本偏旧，用 Homebrew 覆盖到接近 2.54.0 即可。

二、安装 IDE 工具

安装 Cursor

本工具箱专为Cursor包装：Skill / 工作流写在仓库.agents/下。对话输入框提示为：Plan, Build,/for skills,@for context。

1. 访问 Cursor 官网 下载并安装（Windows / macOS 均有安装包）。
2. 登录账号，按需选择模型。
3. File → Open Folder，打开已解压的项目根目录（含AGENTS.md、.agents/、src/的那一层；下载方式见第三章）。
4. 打开对话面板，在输入框输入`/`，确认能搜到并选用项目内 skill（如/create-prd、/page-generator）。需要附带文件或文件夹时再用`@`添加上下文。

提示：也可用自然语言说明「按 create-prd 工作流写一份 PRD」；有 skill 时优先用/点选，保证按项目内SKILL.md步骤执行。

三、Skill 下载

通过微信群公告获取下载地址（群主/管理员会在公告中发布最新安装包链接），按链接下载压缩包到本地，解压后用 Cursor 打开即可。本工具箱不是零散插件，解压后是完整工程，内含：

操作步骤：

1. 打开对应微信群 → 查看群公告中的下载地址。
2. 用浏览器打开公告中的链接，下载最新压缩包（如pm-skills-my-3.1.zip）。
3. 解压到本地合适目录（路径尽量不含中文空格以外的特殊字符，便于终端操作）。
4. 用 Cursor：File → Open Folder，选中解压后的项目根目录（含AGENTS.md、.agents/、src/）。
5. （可选，生成/预览页面时需要）在项目根目录安装依赖并启动：
   bash<br />pnpm install<br />pnpm dev # http://localhost:3006<br />

打开项目后，Skill 即「就位」——无需再往 Cursor 全局目录手工拷贝。首次建议读一眼根目录README.md与AGENTS.md。

压缩包内已带示例产品后台 RBAC，以及可参考的数据中台 · 数据集成（脑暴 → PRD → 多页原型）整条链路产出。

若公告链接更新，以微信群公告中的最新地址为准；旧包请勿继续使用。

四、Skill 使用

（一）需求分析

目标：把模糊想法变成可评审、可落地的需求文档。

推荐路径（想法 → 原型轨道）：

/brainstorm-ideas-new[主题]# 创意脑暴 → docs/01-需求与规划/
/prioritize-assumptions# 假设优先级（可选）
/create-prd [主题]# 正式 PRD → docs/PRD-*.md

产出示例（数据集成）：

/brainstorm-ideas-new 我要做一个数据中台的产品，先从数据集成这个模块开始，请帮我输出一个设计方案，谢谢

/create-prd 请根据设计方案，输出 prd 文档

对话里把业务背景、干系人、边界讲清楚；Skill 会按固定章节结构写 PRD，减少「各写各的」文档漂移。

（二）原型页面

1、生成

PRD 就绪后，用页面生成器一键落到可点原型：

/page-generator 请根据prd 文档，输出页面原型

需要指定 PRD 文件时，可先/page-generator，再用@引用docs/PRD-数据中台-数据集成.md。

Skill 会按项目约定（README-DEV.md）完成：

1. 写出中间规格docs/page-spec-from-prd/…
2. 生成src/views/、Mock、API、路由与菜单权限
3. 挂到侧边栏，可用账号登录验收

输出物如下：

然后：

pnpm install && pnpm dev

浏览器打开http://localhost:3006，例如：

2、微调

生成结果是「可演示的第一版」，按需微调即可。常用有两种方式：

方式一：通过截图和描述进行微调

适合：对照原型截图、竞品图、或评审标注，把「哪里不对、希望怎样」说清楚。

1. 在浏览器打开http://localhost:3006，对有问题的页面截图（或粘贴设计稿/标注图）。
2. 把截图贴进 Cursor 对话，并用文字说明修改点，例如：

• 「筛选区增加『源类型』下拉」
• 「表格操作列『重跑』要二次确认」
• 「标题文案改成××」

1. 需要改具体文件时，可用@挂上对应src/views/…或 PRD / page-spec，再让 AI 直接改代码。
2. 改完刷新页面验收；大改时可再跑一次pnpm build确认无报错。

方式二：通过 Cursor 内置浏览器微调

适合：边看边改，在 IDE 里完成「预览 → 指问题 → 改代码 → 再预览」闭环。

1. 先保证本地已pnpm dev（默认 http://localhost:3006）。
2. 打开 Cursor内置浏览器（Simple Browser / Browser 面板），访问上述地址并登录（如admin/123456）。
3. 在内置浏览器中点到目标页面，回到对话说明要改的交互或样式；可配合@引用当前相关文件。
4. AI 改完代码后，在内置浏览器中刷新即可立刻验证，无需切换到外部 Chrome/Safari。

两种方式可混用：先用内置浏览器快速定位，再用截图 + 描述把复杂交互一次说清。原则仍是先对需求清单勾验，再抠视觉，避免一上来大改布局导致和 PRD 脱节。

3、打包发布

本地验收通过后：

pnpm build# vue-tsc 类型检查 + Vite 打包 → dist/
pnpm preview# 本地预览构建产物（可选）

把dist/交给静态托管或内网 Nginx 即可做评审演示。当前原型以Mock 数据为主，适合需求评审与方案对齐；对接真实后端时关闭 Mock、改 API 层即可渐进演进。

（三）其他交付物输出

除了 PRD 与页面，同一套 Skill 还能覆盖六阶段其它产出（对话里用/点选）：

完整索引见.agents/catalog.json；日常入口表见AGENTS.md。

写在最后

通用 AI 往往只给你「一段文字」；PM AI 效率工具箱给你的是：框架 + 流程 + 可演示的原型。

三条记住即可：

1. 装好Node / Git / Cursor（Windows 与 Mac 按第一章对应步骤），按微信群公告地址下载并解压工具箱；
2. 对话里 `/` 选 skill（@只用来挂文件等上下文），走「脑暴 → PRD → 页面」；
3. `pnpm dev` 点一遍，`pnpm build` 交出去评审。