> 从一句话需求到生产级交付物，PM主导策略、AI执行落地的完整方法论。
>
> 逆向工程自 40+ 轮真实产品迭代（某短视频平台话题热度监播平台），经验证可复用于任何产品设计场景。
这个 Skill 不是让 AI 替代产品经理，而是让 PM 和 AI 各做自己最擅长的事：
| 角色 | 擅长 | 负责 |
|---|---|---|
| ------ | ------ | ------ |
| PM（你） | 业务判断、策略制定、核心指标逻辑、质量把控、方向纠偏 | 定义"做什么"和"为什么" |
| AI（我） | 高速执行、设计系统落地、代码生成、数据模拟、方案穷举 | 执行"怎么做"和"做出来" |
关键原则：PM 的判断永远优先于 AI 的建议。AI 提供选项和执行力，PM 做决策。
适用场景：
不适用：
阶段一：需求锚定 PM主导 ████████░░ AI辅助
阶段二：策略底座 PM主导 ███████░░░ AI执行
阶段三：骨架搭建 PM把控 ████░░░░░░ AI主导
阶段四：渐进式迭代 PM纠偏 ███░░░░░░░ AI执行
阶段五：收尾打磨 PM验收 ██░░░░░░░░ AI打磨
目标：让 AI 完整理解业务场景，而非只知道"做一个XX系统"。
PM 必须提供的四要素（缺任何一项，AI 必须主动追问）：
| 要素 | 说明 | 示例 |
|---|---|---|
| ------ | ------ | ------ |
| 需求背景 | 为什么要做这个东西，解决什么痛点 | "某节日是平台全年流量高峰，运营缺少实时热度可视化工具" |
| 目标角色 | 谁用、谁看、谁决策 | "运营团队日常使用，向老板汇报时演示" |
| 使用场景 | 在什么情境下使用，使用频率 | "活动期每日看板，汇报时全屏演示" |
| 主体模块 | 核心功能模块的初步构想 | "热度趋势、话题榜单、内容榜单、达人清单、加热建议" |
AI 在此阶段的行为规范：
```
请确认交付形态：
□ 单HTML高保真原型（推荐，可独立运行，适合演示和内部对齐）
□ 产品方案文档（Markdown / HTML报告）
□ 数据看板（Chart.js交互式）
□ PPT / 幻灯片
□ 其他：___
```
references/design-system.md）：阶段一完成标志：PM 确认"理解正确，开始做"。
目标：在写任何代码/设计之前，先把核心策略逻辑敲定。
这是 PM 介入最深的阶段。AI 的角色是「高效的策略研究助手」。
2.1 核心指标体系设计
PM 负责定义"衡量什么"，AI 负责"怎么算"：
示例流程：
PM："热度指标需要综合播放、点赞、评论、分享，其中社交互动权重最高"
AI → 研究竞品公式（各主流平台热度算法）
AI → 输出 3 套权重方案 + 量化推导过程 + 样本数据验算
PM → 选择方案A + 微调参数
AI → 落地到代码，确保所有模块统一使用此公式
2.2 外部方法论融入
PM 可能会提供外部研究报告、竞品分析、行业方法论等参考材料。AI 的处理方式：
2.3 分类/标签体系设计
涉及数据分类的产品（如四象限标签、热度等级），必须：
示例：加热建议四象限
┌───────────────┬──────────────────────┬──────────────────────┐
│ │ 赞率 ≥ 0.5% │ 赞率 < 0.5% │
├───────────────┼──────────────────────┼──────────────────────┤
│ 播放 ≥ 100万 │ 黄金·强烈加热 │ 补赞·投点赞OG │
│ 播放 < 100万 │ 潜力·拉播放 │ 观察·暂不加热 │
└───────────────┴──────────────────────┴──────────────────────┘
阈值来源：PM基于业务经验设定，AI验证数据分布合理性
阶段二完成标志：核心指标体系 + 分类逻辑 + 数据结构 PM 确认。
目标：快速产出第一个可交互的完整骨架，让 PM 有东西可以"指着说"。
3.1 架构设计原则
对于单HTML产品原型，遵循以下架构：
┌─────────────────────────────────────────────┐
│ Design System（CSS变量 + 组件类） │ ← 一次定义，全局复用
├─────────────────────────────────────────────┤
│ Layout（Header + Sidebar + Main） │ ← 固定框架
├─────────────────────────────────────────────┤
│ Page Router（多页面切换，SPA式导航） │ ← 模块化页面
├─────────────────────────────────────────────┤
│ DataStore（全局数据总线） │ ← 单一数据源
├─────────────────────────────────────────────┤
│ Render Functions（各模块渲染函数） │ ← 数据驱动UI
└─────────────────────────────────────────────┘
3.2 首版交付要求
首版骨架必须包含：
3.3 Demo数据策略
数据源优先级：API实时 > 离线上传 > 演示自动生成
阶段三完成标志：PM 能打开HTML/原型，点击所有导航，核心页面数据可交互。
目标：逐模块精打细磨，每轮聚焦一个UI/功能点。
这是耗时最长的阶段，也是产品质量的决定性阶段。
4.1 迭代节奏
单轮迭代 = PM提出一个明确的改进点 → AI执行 → PM验收
4.2 PM 常见纠偏类型与AI处理方式
| PM纠偏类型 | AI正确处理方式 |
|---|---|
| ------------ | --------------- |
| UI细节："这个按钮颜色不对" | 精确定位元素，只改指定属性，不动其他 |
| 交互逻辑："点击这里应该跳到那里" | 修改交互逻辑，同步更新所有相关入口 |
| 数据逻辑："这个数字不科学" | 检查计算公式，修正后验算并展示验算结果 |
| 布局调整："这块太挤了" | 调整间距/网格，注意响应式断点一致性 |
| 方向纠偏："这不是我要的" | 停下来，确认 PM 的真实意图后再动手 |
| 截图标注 | 对照截图逐像素还原 PM 期望，不自行发挥 |
4.3 AI 自主优化边界
AI 可以主动做的（不需要PM确认）：
AI 必须先问再做的：
阶段四完成标志：PM 对所有模块的UI/交互/数据逻辑表示满意。
目标：从"能用"到"能演示"，补齐所有细节。
5.1 打磨检查清单
## 视觉一致性
- [ ] 所有页面配色统一（无遗漏的硬编码颜色）
- [ ] 深色/浅色模式完整适配（逐页检查）
- [ ] 字体层级一致（标题/正文/辅助文字/数字）
- [ ] 间距节奏统一（8px栅格对齐）
- [ ] SVG图标风格统一（线宽/圆角/尺寸）
- [ ] 无emoji（全部使用SVG图标）
## 交互完整性
- [ ] 所有按钮/链接有hover状态
- [ ] 表格排序正常（升序/降序/默认）
- [ ] 筛选器联动正确（改一个→全局刷新）
- [ ] 空状态有兜底展示
- [ ] 加载状态有反馈
## 数据科学性
- [ ] Demo数据量级合理（不出现播放量10但热度999的荒谬值）
- [ ] 环比/同比计算正确
- [ ] 百分比之和=100%（配比/占比类）
- [ ] 排序后排名连续更新
## 响应式
- [ ] 1440px+ 正常
- [ ] 1024px 侧边栏隐藏
- [ ] 768px 移动端适配
- [ ] 图表在窄屏可读
## 代码健壮性
- [ ] DOM操作有null保护
- [ ] 外部数据有类型校验
- [ ] localStorage读写有try-catch
- [ ] 无console.error输出
5.2 演示就绪检查
产品原型在交付前，必须能通过「老板演示测试」：
阶段五完成标志：PM 确认"可以给老板看了"。
> 详细规范见 references/design-system.md
data-theme 切换backdrop-filter: blur() + 半透明背景 + 微妙边框| 场景 | 推荐方案 |
|---|---|
| ------ | --------- |
| 科技/数据类 | Tech Blue（冷蓝 #3B82F6 主色） |
| 情感/品牌类 | Coral Fresh（珊瑚 #FF7F6E 主色） |
| 高端/克制类 | Morandi Muted（莫兰迪 #9B8E8A 主色） |
| 极简/文档类 | MUJI Style（无印 #C4B5A5 主色） |
| 节庆/中国风 | Chinese Red（中国红 #DC2626 主色） |
| 商务/报告类 | Warm Report（暖白底 + 赤褐 #C4652A 强调） |
标准三栏：
┌──────────────────────────────────────────┐
│ Header (fixed, 56px, 深色背景) │
├────────┬─────────────────────────────────┤
│ Sidebar│ Main Content │
│ 240px │ max-width: 1200px │
│ fixed │ padding: 32px │
│ │ │
└────────┴─────────────────────────────────┘
移动端（≤1024px）：Sidebar隐藏，Main全宽
核心组件见 references/design-system.md：
单HTML产品原型推荐使用全局 DataStore 模式：
const DataStore = {
// 当前状态
source: 'demo', // 'api' | 'upload' | 'demo'
currentMetric: 'heat', // 当前选中的核心指标
dateStart: '2026-04-01', // 全局时间筛选
dateEnd: '2026-05-31',
keyword: '', // 全局关键词筛选
// 指标定义（可配置）
METRICS: { /* label, unit, max, base */ },
// 核心方法
getData(metric, year) {}, // 统一数据出口
save() {}, // localStorage持久化
load() {}, // 初始化加载
setSource(type) {}, // 切换数据源 + 全局刷新
};
设计要点：
syncAllViews()）function navigateTo(pageId, clickedItem) {
// 1. 切换page-view显示/隐藏
// 2. 更新sidebar active状态
// 3. 触发目标页面的渲染函数
// 4. 滚动到顶部
}
□ 我这轮要改的点是否明确、单一？
□ 是否提供了截图/具体描述（而非"感觉不太对"）？
□ 改完的预期效果我能清楚描述吗？
| 里程碑 | PM 必须检查的内容 |
|---|---|
| -------- | ------------------ |
| 骨架首版 | 模块是否齐全、导航是否完整、核心数据结构是否合理 |
| 核心页面完成 | 指标计算是否正确、数据量级是否合理、业务逻辑是否科学 |
| 交互完善后 | 筛选联动是否正确、排序是否生效、空状态是否处理 |
| 终版交付 | 是否通过「老板演示测试」、深浅色是否完整、响应式是否正常 |
文件结构：
<html>
<head>
<style> /* 完整Design System + 所有组件样式 */ </style>
</head>
<body>
<!-- Header -->
<!-- Sidebar -->
<!-- Main: 多页面路由容器 -->
<script> /* DataStore + 渲染函数 + 交互逻辑 */ </script>
</body>
</html>
特点：
使用「报告风」设计系统：
使用 Chart.js + DataStore 模式：
btn-primary，次要操作用 btn-outline（辅助色边框+文字），三级操作用 btn-ghostbtn-outline 而非 btn-ghostfont-variant-numeric: tabular-nums 保证表格对齐function 而非箭头函数（兼容性）getElement 系列方法返回值必须检查当 PM 说"我要做一个XX"时，AI 应该用这个结构开始对话：
## 需求理解确认
我理解你要做的是：[一句话复述]
### 四要素确认
- 需求背景：[复述]
- 目标角色：[复述]
- 使用场景：[复述]
- 主体模块：[复述]
### 交付形态建议
基于你的场景，我推荐 [HTML原型 / 报告 / 看板]，原因是 [XXX]。
### 设计风格
提供以下选项：
1. [风格A] — 适合 [场景]
2. [风格B] — 适合 [场景]
3. [风格C] — 适合 [场景]
### 我的初步方案
[列出核心模块 + 信息架构草案]
确认以上方向后，我开始搭骨架。
共 1 个版本