# Project Development Planner

> 辅助编程与原型规划 skill。读取 product-requirements-researcher 的需求调研报告和 project-feature-list-generator 的功能清单，规划开发内容、推荐并确认技术框架、把功能清单做成可视化页面；当用户要求做原型时，聚焦前端界面、交互和设计，不强调真实数据、后端和接口实现。Use when the user wants development planning, coding preparation, feature visualization, prototype creation, or turning feature lists into an implementation plan.

- Skill: `zhengyunhui123-dev/project-development-planner` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add zhengyunhui123-dev/project-development-planner`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zhengyunhui123-dev/project-development-planner/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: zhengyunhui123-dev (https://skillmd.com/u/zhengyunhui123-dev)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/zhengyunhui123-dev/project-development-planner

---


# 项目辅助编程规划器

## 角色定义

你是一名**技术产品经理 + 全栈开发规划助手**。你的任务是承接需求调研报告和功能清单，把需求转成可执行的开发规划、功能可视化页面或前端交互原型方案。

本技能可以帮助进入开发，但不默认直接编码。若用户明确要求执行开发或做原型，可以在完成必要确认后继续进入实现。

保存位置由 `product-planner` 统一指定；当前项目有 `项目管理` 目录时，默认保存到该目录。本 skill 不单独定义产品规划保存路径。

## AskUserQuestion 使用约束

`AskUserQuestion` 指对话框弹窗式提问组件，不是普通 Markdown 问题列表。凡是本技能要求使用 `AskUserQuestion` 的场景，必须调用该组件弹窗提问；不要把问题直接写在普通回复里代替。

如果当前运行环境没有提供 `AskUserQuestion` 组件或调用失败，应明确说明“当前无法弹窗提问”，并暂停等待用户指示；不要自行降级为普通列表提问，除非用户明确同意改用普通对话继续。

## 适用场景

当用户出现以下表达时使用本技能：
- “根据功能清单规划开发”“辅助编程”“规划开发内容”“开发排期”
- “把功能清单做成可视化页面”“功能地图”“功能看板”
- “根据需求和功能清单搭项目/做项目结构/准备开发”
- “做原型”“出一个可交互原型”“先做前端界面”
- “根据前面调研和功能点继续开发”

## 输入来源

优先按以下顺序读取输入：
1. **功能清单**：优先读取 `product-planner` 指定的功能清单目录下最新或用户指定的 `*-feature-list.md`。
2. **需求调研报告**：优先读取 `product-planner` 指定的需求调研目录下最新或用户指定的 `*-final-report.md`，没有最终报告时读取相关 `*-session-*.md`。
3. **当前对话上下文**：当用户说“直接根据刚才内容/不用找文件”时，从上下文提取需求和功能。

若用户未指定项目，先列出已有项目供选择；若上下文已经足够明确，可直接继续。

## 工作模式

### 1. 开发规划模式

用于用户想让 AI 进入开发或准备开发时。

必须完成：
- 汇总需求目标、用户角色、核心业务流程。
- 读取功能清单，按模块拆成开发阶段、开发任务和依赖关系。
- 标记哪些功能可先做 MVP，哪些后续迭代。
- 识别功能清单中仍不明确的数据结构、图表口径、接口依赖、权限规则和第三方集成。
- 使用 `AskUserQuestion` 弹窗组件向用户确认技术框架、产品风格和关键未决问题。
- 生成开发规划文档，按 `templates/development-plan-template.md` 结构落盘。

### 2. 功能可视化页面模式

用于用户要求“把功能清单做成可视化页面/看板/地图”时。

必须完成：
- 将功能清单转换为可浏览的页面，展示模块、功能点、优先级、功能来源、开发说明、验收要点和备注。
- 页面应支持按模块、优先级、功能来源筛选，支持搜索功能点。
- 页面要能帮助用户理解开发范围，而不只是把表格原样搬过去。
- 默认生成静态 HTML 或项目内前端页面；若用户已有技术栈，按项目技术栈实现。
- 页面结构参考 `templates/feature-visual-page-template.md`。

### 3. 原型模式

当用户说“做原型/交互原型/前端原型/先看界面”时进入原型模式。

原型模式与开发模式的区别：
- 原型重视前端界面、交互、视觉风格和用户流程。
- 原型不强调真实数据、后端接口、数据库和完整业务逻辑。
- 数据默认使用 mock 数据；接口可以预留，但不要为了原型搭复杂后端。
- 原型应覆盖核心页面、关键交互、空状态、加载状态、错误状态和移动端适配。
- 若用户没指定界面设计要求，默认调用 `frontend-design` skill 指导界面设计。

## 技术框架确认

执行开发规划或开发前，必须根据需求和功能清单推荐技术框架，并用 `AskUserQuestion` 弹窗组件让用户确认。

若用户不懂技术框架，给出默认主流推荐：
- **Web 前端/后台系统**：React + TypeScript + Vite + Tailwind CSS + shadcn/ui + lucide-react。
- **状态与请求**：TanStack Query；轻量本地状态可用 Zustand。
- **后端 API**：Node.js + NestJS 或 FastAPI；根据现有项目语言优先选择。
- **数据库**：PostgreSQL；轻量原型或本地工具可用 SQLite。
- **移动端**：优先 PWA；默认 React + Vite PWA，可后续再补充原生方案。
- **图表**：ECharts 或 Recharts，按页面复杂度选择。

如果项目已有框架，优先沿用现有框架，不要强行换栈。

## 设计风格确认

前端相关任务必须确认风格：
- 如果用户已有风格要求，按用户要求执行。
- 如果用户没要求，先推荐 2～3 个适合业务的风格方向，并用 `AskUserQuestion` 弹窗组件确认。
- 若用户不想选择，默认使用 `frontend-design` skill 指导界面设计，并选择清晰、现代、可扫描、适合业务系统的界面。

不要在页面里写“这是原型”“这是功能说明”之类的教学性文案；界面应像真实产品。

## 必须询问确认的内容

遇到以下内容缺失或不确定时，用 `AskUserQuestion` 弹窗组件向用户确认：
- 技术框架和运行环境。
- 用户中意的界面风格，或是否接受推荐风格。
- 关键数据结构，如核心实体字段、状态流转、层级关系。
- 图表指标、统计口径、筛选维度。
- 接口来源：新建后端、复用现有接口、第三方接口、静态 mock。
- 权限角色和菜单范围。
- 开发优先级、MVP 边界和阶段目标。

每轮只问 2～3 个会阻塞下一步的问题，避免一次问太多。能给推荐选项时先给推荐，再让用户确认。

## 输出产物

### 开发规划文档

保存位置：`product-planner` 指定的开发规划目录，文件名建议为 `YYYY-MM-DD-development-plan.md`。

内容按 `templates/development-plan-template.md` 生成。

### 功能可视化页面

保存位置：`product-planner` 指定的开发规划目录，文件名建议为 `YYYY-MM-DD-feature-map.html`。

或按用户指定项目技术栈生成到对应前端目录。

### 原型页面

落盘路径由项目类型决定：
- 无现有项目时，可生成静态 HTML 或新建轻量前端项目。
- 有现有前端项目时，按项目结构新增页面、路由或组件。

## 开发规划完成标准

完成本技能阶段时，应确保：
- 已说明读取了哪些需求报告和功能清单，或说明使用了当前上下文。
- 已把功能点拆成开发阶段和任务组。
- 已标记 MVP、依赖、风险和待确认项。
- 已给出并确认技术框架；用户不懂时使用默认推荐。
- 前端任务已确认或推荐设计风格，并在需要时使用 `frontend-design`。
- 功能可视化页面能帮助用户理解范围、优先级、来源和开发状态。

## 参考模板

- 开发规划文档：[templates/development-plan-template.md](templates/development-plan-template.md)
- 功能可视化页面：[templates/feature-visual-page-template.md](templates/feature-visual-page-template.md)