HTML 方案推演交付生成器
一、核心哲学
1.1 唯一铁律
> 方案的价值不在于写得厚，而在于推得清、看得见、落得地。
一份好的方案推演交付物，必须让决策者在5分钟内理解核心逻辑，在15分钟内看到完整执行路径，在30分钟内做出go/no-go决策。HTML交付物不是PPT的替代品，而是PPT的进化形态——它用交互和结构化推导替代了静态罗列。
1.2 三个底层认知
| 认知 | 说明 |
|---|---|
| 推导优先于展示 | 先展示"为什么这么做"的逻辑链，再展示"怎么做"。没有推导的方案是命令，有推导的方案是共识 |
| 可视化即说服力 | 人脑处理图像的速度是文字的6万倍。关键概念必须可视化，数据必须图表化，流程必须结构化 |
| 闭环优于开环 | 方案必须包含"假设→验证→迭代"的闭环。没有反馈机制的方案，执行到一半就会迷失方向 |
1.3 核心公式
用户输入（方案/构想/策略）
→ 需求解构（目标+约束+假设）
→ 逻辑推导链构建（Why → What → How）
→ 模块拆解（设计+流程+话术+排期+成本）
→ HTML结构化输出（单页交互应用）
→ 交付
二、完整执行流程
Phase 1：需求解构
Step 1.1：识别输入类型
输入类型判断：
| 输入类型 | 特征 | 处理方式 |
|---|---|---|
| 方案文档 | 已有完整文字方案，需可视化推演 | 提取核心逻辑，重构为推导链 |
| 构想/idea | 只有一句话或片段思路 | 补全假设，推导完整路径 |
| 策略指令 | 领导/客户给出的目标性要求 | 逆向推导执行路径 |
| 问题陈述 | 描述现状痛点，需解决方案 | 从问题出发构建解决路径 |
检验标准：明确回答"这个方案要解决什么问题、面向谁、在什么约束条件下"。
Step 1.2：提取关键要素
从输入中提取以下要素：
目标: [方案要达成的核心目标]
受众: [方案的最终使用者/决策者]
约束条件: [预算/时间/资源/合规等限制]
核心假设: [方案成立的前提条件]
关键变量: [影响成败的可量化指标]
检验标准：提取的要素能让陌生人快速理解方案背景。
Phase 2：逻辑推导链构建
Step 2.1：构建"Why → What → How"推导链
Why（为什么）：
- 现状痛点是什么？
- 不解决会有什么后果？
- 解决后的理想状态是什么？
What（做什么）：
- 核心策略是什么？
- 关键举措有哪些？
- 预期产出是什么？
How（怎么做）：
- 执行步骤如何排序？
- 资源如何配置？
- 风险如何管控？
检验标准：推导链中的每一步都能回答"所以接下来要做什么"。
Step 2.2：设计逻辑推导可视化
每个模块顶部必须包含一个Logic Chain组件：
[起点状态] → [关键动作1] → [关键动作2] → [关键动作3] → [终点状态]
设计规范：
- 每个节点用卡片呈现
- 节点间用箭头连接
- 起点和终点用不同颜色区分
- 整体横向排列，支持响应式换行
Phase 3：模块拆解
根据方案类型，选择适用的模块组合：
| 模块 | 适用场景 | 输出内容 |
|---|---|---|
| 设计原型 | 涉及物理/视觉交付物 | 尺寸、材质、工艺、正反面设计稿 |
| 流程设计 | 涉及多步骤操作 | 流程图、负责方、时效、控制点 |
| 话术/脚本 | 涉及人机交互 | 分场景话术、触发条件、预期效果 |
| 执行排期 | 涉及时间线 | 按天/周排期、里程碑、决策阈值 |
| 成本测算 | 涉及资源投入 | 成本结构、ROI推导、敏感性分析 |
| 数据追踪 | 涉及效果评估 | 关键指标、追踪方式、分析维度 |
检验标准：每个模块的内容可以直接指导执行，不需要额外解释。
Phase 4：HTML结构化输出
Step 4.1：确定视觉风格
默认风格：咨询级客观冷静
| 元素 | 规范 |
|---|---|
| 主色调 | 深海军蓝 (#1E3A5F) |
| 辅助色 | 青绿 (#2C5F5D)、琥珀 (#8B6914)、暗红 (#8B2635) |
| 背景 | 浅灰 (#F7F7F7) + 白色卡片 |
| 字体 | Noto Sans SC / 系统无衬线字体 |
| 排版 | 扁平、直角、无阴影、留白充足 |
| 数据 | 等宽数字、右对齐、千分位分隔 |
替代风格（根据方案类型可选）：
- 科技未来风：深色背景 + 霓虹蓝紫渐变
- 温暖亲和风：暖色调 + 圆角 + 柔和阴影
- 极简黑白风：纯黑白 + 大量留白
Step 4.2：页面结构
页面结构：
├── Header（项目标题 + 版本 + 日期 + 负责人）
├── Navigation Tabs（模块切换标签）
│ ├── Tab 1: 设计原型
│ ├── Tab 2: 流程设计
│ ├── Tab 3: 话术/脚本
│ ├── Tab 4: 执行排期
│ └── Tab 5: 成本测算
├── Tab Content（各模块详细内容）
│ ├── Logic Chain（逻辑推导链）
│ ├── Visual Preview（可视化预览）
│ ├── Detail Tables（详细表格）
│ └── Hypothesis Box（假设与决策阈值）
└── Print Button（打印/PDF导出）
Step 4.3：核心组件规范
Logic Chain（逻辑推导链）：
背景：浅灰底色 + 左侧3px海军蓝边框
标题："逻辑推导" + 12px大写字母间距
节点：等宽卡片，横向排列，箭头连接
终点：浅蓝底色，加粗
Hypothesis Box（假设框）：
背景：浅蓝底色
边框：左侧3px海军蓝
标签："核心假设" / "决策阈值" / "敏感性分析"
内容：12px正文，行高1.7
Derivation（推导过程）：
背景：白色
行：label + value + operator + result
最后一行：加粗 + 上边框分隔
数字：等宽字体 + 千分位
Data Table（数据表格）：
表头：浅灰底色 + 底部2px深灰边框
行：白色/浅灰交替
悬停：浅灰高亮
数字：右对齐 + 等宽
高亮：暗红色（负面）/ 青绿色（正面）
Timeline（时间线）：
轴线：左侧1px浅灰竖线
节点：11px圆点，里程碑为海军蓝填充
内容：白色卡片 + 浅灰边框
日期：海军蓝 + 11px + 字间距
Step 4.4：交互功能
- Tab切换：点击标签切换内容区域，带淡入动画
- 打印/PDF导出：固定右下角按钮，调用window.print()
- 响应式适配：1200px/768px/移动端断点
Phase 5：交付与验证
Step 6.1：质量检验清单
交付前逐项检查：
- [ ] 需求解构完成？目标/受众/约束/假设已明确？
- [ ] 逻辑推导链完整？Why → What → How 闭环？
- [ ] 模块拆解到位？每个模块有可执行内容？
- [ ] HTML结构正确？所有Tab可正常切换？
-
[ ] 视觉风格统一？配色/字体/间距一致？
-
[ ] 打印功能正常？PDF导出格式正确？
- [ ] 响应式适配？移动端可读？
Step 6.2：文件命名规范
[方案主题关键词]_[交付类型]_[版本号].html
示例：
- 包裹卡引流方案_全链路推演_v1.0.html
- 新产品上市策略_执行推演_v2.1.html
- 会员体系升级_方案推演_v1.0.html
三、常见陷阱与避坑指南
| 陷阱 | 表现 | 后果 | 修正 |
|---|---|---|---|
| 逻辑链断裂 | 模块之间没有推导关系，像拼凑的PPT | 决策者看不懂"为什么要这么做" | Phase 2必须构建完整推导链 |
| 信息过载 | 一个Tab塞入过多内容，没有层次 | 用户找不到重点 | 每个Tab只聚焦一个模块 |
| 风格不统一 | 不同模块用不同配色/字体 | 显得业余、不专业 | 严格遵循Step 4.1视觉规范 |
| 结论先行 | 推导链过长，决策者失去耐心 | 方案被搁置 | 每个模块先给结论再给推导 |
| 只有展示无推导 | 直接给结论，没有推导过程 | 无法说服决策者 | 每个结论前必须有Logic Chain |
| 时间线模糊 | 写"第1周""第2周"没有具体日期 | 执行者不知道今天该干什么 | 必须按天排期，标注星期 |
四、场景适配指南
| 场景 | 重点模块 | 风格建议 | 特殊处理 |
|---|---|---|---|
| 产品营销方案 | 设计原型 + 流程 + 话术 + 成本 | 咨询级冷静 | — |
| 运营活动方案 | 流程 + 排期 + 话术 + 数据追踪 | 温暖亲和 | 强调时间敏感性 |
| 战略咨询方案 | 逻辑推导 + 成本 + 敏感性分析 | 咨询级冷静 | 强化MECE结构 |
| 技术实施方案 | 流程 + 排期 + 数据追踪 | 科技未来 | 增加技术架构图 |
| 培训/教育方案 | 话术 + 流程 + 排期 | 温暖亲和 | 增加互动环节设计 |
五、实战示例
示例背景
用户输入："我们想做一个包裹卡引流方案，让消费者扫码加微信，然后送他们一个小工具让他们做实验，实验完把结果发给顾问，顾问再引导复购。"
Phase 1 执行记录
输入类型：构想/idea（只有片段思路）
提取要素：
目标: 通过包裹卡实现私域引流并推动复购
受众: 已购买产品的消费者
约束条件: 预算有限，需控制小工具成本
核心假设: 消费者愿意做实验并分享结果
关键变量: 扫码率、实验完成率、复购率
Phase 2 执行记录
推导链：
消费者已购买产品 → 需要验证产品效果 → 提供可量化实验方法 → 消除执行障碍（小工具） → 引导进入私域 → 实验结果驱动复购
Phase 3 执行记录
模块组合：设计原型 + 流程设计 + 话术/脚本 + 执行排期 + 成本测算
Phase 4 执行记录
HTML输出：
- 5个Tab：卡片设计 / 小工具套装 / 私域承接SOP / 执行排期 / 成本与ROI
- 视觉风格：咨询级冷静（海军蓝主色调）
- 核心组件：Logic Chain、Hypothesis Box、Derivation、Timeline、Data Table
交付物
文件：包裹卡引流方案_全链路推演_v1.0.html
六、执行原则
- 推导优先：宁可多花时间在Phase 2的逻辑推导，也不要匆忙进入HTML制作
- 模块化思维：每个Tab是一个独立模块，模块之间用Logic Chain连接
- 数据驱动：所有结论必须有数据支撑，所有数据必须可溯源
- 假设显性化：把隐藏假设写出来，让决策者知道风险在哪里
- 闭环交付：方案+推演+排期+成本，四者缺一不可
- 结论先行：每个模块先展示核心结论，再展开推导过程
七、联系与反馈
📧 winson_dasein@163.com
如有合作交流意向，欢迎联系。
