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

用 Cursor PM Skills把「想法」一次做到「可点原型」面向产品经理与业务同学不写框架代码也能从脑暴、PRD 走到可演示的后台页面。一、安装环境依赖开工前装好Node.js推荐 v24.15.0和Git推荐 v2.54.0。下面按系统分别说明。一Windows1. 安装 Node.js v24.15.0打开 Node.js 官网下载Windows Installer.msi选 LTS 或对应v24.15.0的安装包。一路下一步安装勾选 “Add to PATH”。打开命令提示符或PowerShell验证powershellbr /node -vbr /# 期望v24.15.0br /启用 pnpm本项目推荐powershellbr /corepack enablebr /corepack prepare pnpmlatest --activatebr /pnpm -vbr /若corepack不可用也可powershellbr /npm install -g pnpmbr /2. 安装 Git v2.54.0打开 git-scm.com下载 Windows 安装包尽量选接近2.54.0的版本。安装时建议保留默认选项编辑器、PATH、行尾符按向导默认即可。新开终端验证powershellbr /git --versionbr /# 期望接近git version 2.54.0br /Windows 提示装完 Node / Git 后若命令找不到关掉终端重新打开或检查「环境变量 → Path」是否包含安装目录。二macOS1. 安装 Node.js v24.15.0方式 A官网安装包打开 Node.js 官网下载macOS Installer.pkgApple Silicon / Intel 选对架构。安装完成后打开「终端」验证bashbr /node -vbr /# 期望v24.15.0br /方式 Bnvm方便多版本切换推荐# 已安装 nvm 时nvm install 24.15.0nvm use 24.15.0node -v启用 pnpmcorepackenablecorepack prepare pnpmlatest --activatepnpm -v2. 安装 Git v2.54.0方式 AHomebrew推荐brew install gitgit --version# 期望接近git version 2.54.0方式 BXcode 命令行工具xcode-select --installgit --version若系统自带 Git 版本偏旧用 Homebrew 覆盖到接近 2.54.0 即可。二、安装 IDE 工具安装 Cursor本工具箱专为Cursor包装Skill / 工作流写在仓库.agents/下。对话输入框提示为Plan, Build,/for skills,for context。访问 Cursor 官网 下载并安装Windows / macOS 均有安装包。登录账号按需选择模型。File → Open Folder打开已解压的项目根目录含AGENTS.md、.agents/、src/的那一层下载方式见第三章。打开对话面板在输入框输入/确认能搜到并选用项目内 skill如/create-prd、/page-generator。需要附带文件或文件夹时再用添加上下文。提示也可用自然语言说明「按 create-prd 工作流写一份 PRD」有 skill 时优先用/点选保证按项目内SKILL.md步骤执行。三、Skill 下载通过微信群公告获取下载地址群主/管理员会在公告中发布最新安装包链接按链接下载压缩包到本地解压后用 Cursor 打开即可。本工具箱不是零散插件解压后是完整工程内含内容说明70 个 Skills.agents/skills/方法论 可执行步骤45 条工作流.agents/commands/串联多步产出六阶段编排/pm-lifecycle.agents/lifecycle.json可运行原型框架src/Vue 3 Element Plus Mock操作步骤打开对应微信群 → 查看群公告中的下载地址。用浏览器打开公告中的链接下载最新压缩包如pm-skills-my-3.1.zip。解压到本地合适目录路径尽量不含中文空格以外的特殊字符便于终端操作。用 CursorFile → Open Folder选中解压后的项目根目录含AGENTS.md、.agents/、src/。可选生成/预览页面时需要在项目根目录安装依赖并启动bashbr /pnpm installbr /pnpm dev # http://localhost:3006br /打开项目后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 我要做一个数据中台的产品先从数据集成这个模块开始请帮我输出一个设计方案谢谢3d29ae43b8328cb5d674334ba49acbfd_MD5/create-prd 请根据设计方案输出 prd 文档6b6ebfc1be514a1e5b86864c71161a3d_MD5对话里把业务背景、干系人、边界讲清楚Skill 会按固定章节结构写 PRD减少「各写各的」文档漂移。二原型页面1、生成PRD 就绪后用页面生成器一键落到可点原型/page-generator 请根据prd 文档输出页面原型需要指定 PRD 文件时可先/page-generator再用引用docs/PRD-数据中台-数据集成.md。Skill 会按项目约定README-DEV.md完成写出中间规格docs/page-spec-from-prd/…生成src/views/、Mock、API、路由与菜单权限挂到侧边栏可用账号登录验收输出物如下471ae966904bba9c0dd504f98073d2c7_MD5ea4b2a1d1cce4d581d849feef81dbbb7_MD5ac961b6371d90ead0ce00fc4e1fce5b8_MD5e2d0bd6d3f76c7444d2a2055755d5def_MD51831de5b7ac62a214cd43d10b90f3382_MD5af3973d931686efdf17cc0049ca965e9_MD5然后pnpm install pnpm dev浏览器打开http://localhost:3006例如2、微调生成结果是「可演示的第一版」按需微调即可。常用有两种方式方式一通过截图和描述进行微调适合对照原型截图、竞品图、或评审标注把「哪里不对、希望怎样」说清楚。在浏览器打开http://localhost:3006对有问题的页面截图或粘贴设计稿/标注图。把截图贴进 Cursor 对话并用文字说明修改点例如「筛选区增加『源类型』下拉」「表格操作列『重跑』要二次确认」「标题文案改成××」需要改具体文件时可用挂上对应src/views/…或 PRD / page-spec再让 AI 直接改代码。改完刷新页面验收大改时可再跑一次pnpm build确认无报错。方式二通过 Cursor 内置浏览器微调适合边看边改在 IDE 里完成「预览 → 指问题 → 改代码 → 再预览」闭环。先保证本地已pnpm dev默认 http://localhost:3006。打开 Cursor内置浏览器Simple Browser / Browser 面板访问上述地址并登录如admin/123456。在内置浏览器中点到目标页面回到对话说明要改的交互或样式可配合引用当前相关文件。AI 改完代码后在内置浏览器中刷新即可立刻验证无需切换到外部 Chrome/Safari。两种方式可混用先用内置浏览器快速定位再用截图 描述把复杂交互一次说清。原则仍是先对需求清单勾验再抠视觉避免一上来大改布局导致和 PRD 脱节。3、打包发布本地验收通过后pnpm build# vue-tsc 类型检查 Vite 打包 → dist/pnpm preview# 本地预览构建产物可选把dist/交给静态托管或内网 Nginx 即可做评审演示。当前原型以Mock 数据为主适合需求评审与方案对齐对接真实后端时关闭 Mock、改 API 层即可渐进演进。三其他交付物输出除了 PRD 与页面同一套 Skill 还能覆盖六阶段其它产出对话里用/点选阶段典型 Skill / 说法常见落盘洞察/brainstorm-ideas-new、用户画像等docs/01-需求与规划/定向/lean-canvas、/product-strategy战略/画布文档规划/create-prd、/user-stories、delivery-plandocs/PRD-*、docs/products/.../delivery-plan.md构建/page-generator、ship-checksrc/、page-spec、质量门禁报告上市/gtm-strategy、/release-notesGTM / 发布说明学习/cohort-analysis、/retro分析与复盘文档编排/pm-lifecycle statuslifecycle-tracker.md进度完整索引见.agents/catalog.json日常入口表见AGENTS.md。写在最后通用 AI 往往只给你「一段文字」PM AI 效率工具箱给你的是框架 流程 可演示的原型。三条记住即可装好Node / Git / CursorWindows 与 Mac 按第一章对应步骤按微信群公告地址下载并解压工具箱对话里 / 选 skill只用来挂文件等上下文走「脑暴 → PRD → 页面」pnpm dev 点一遍pnpm build 交出去评审。