上周帮一位做 SaaS 的创始人看 BP，他发过来的第一稿有 34 页。封面是公司全称加一行大字“商业计划书”，接着三页在讲行业背景，到第 5 页才出现产品，第 11 页才看到融资需求。我直接跟他说，如果这是一位陌生投资人在邮箱里收到的附件，大概率在前 3 秒就被划走了。
问题不是内容不够，而是阅读路径没有设计。
很多人的 BP 像一本“公司简介”：把所有信息堆上去，然后期待投资人自己找出重点。但投资人的真实行为不是阅读，而是扫描。他在快速判断这个项目值不值得花 10 分钟看下去，你的信息层级越乱，他划走越快。
后来我帮他做了两件事：第一，把 BP 重新按投行做项目材料的逻辑拆成一条主线索；第二，把 Word 内容改成一版单文件的 HTML BP，投资人打开链接就能看到清晰的导航、判断句标题和一屏一个重点。这两件事做完，他被划走的概率确实低了，因为对方至少知道他想讲什么。
这篇文章不是让你学一套复杂网页开发，而是给你一套可以直接复用的方法和一份最小 HTML 模板。你会理解投资人为什么划走、BP 内容怎样重新组织，以及一份能让人顺着看完的 HTML 版 BP 到底怎么做出来。
1. 投资人划走你的 BP，不是内容不够，而是路径太乱
1.1 投资人看 BP 的前几秒，其实在找五个信号
当一个投资人在邮件、微信或路演平台上收到一份 BP 时，他不会从头开始读。他的习惯是快速往下扫，在最短时间里判断这个项目是不是“他的菜”。
我会把这种扫描理解为五个信号的寻找过程：
- 这个项目用一句话能不能说清楚，是做什么命题的。
- 这件事现在做，是不是合理时机。
- 团队凭什么能做成，已经有哪些能验证的判断。
- 最新进度到哪一步了，是有产品、有客户，还是只有想法。
- 现在需要多少钱，准备打到哪个里程碑。
如果你的 BP 前 5 页没有覆盖其中至少两个信号，投资人会默认这个项目还没想清楚。这里的“没想清楚”不一定指商业逻辑，更多是指“讲述者不知道自己该先给什么信息”。
投资人没有义务帮你做判断，他要看到的是你替他做好了判断。
1.2 真正能留住人的是每页都有一个判断句
很多 BP 的目录长这样：行业背景、市场痛点、产品介绍、商业模式、竞争优势、团队介绍、财务预测、融资计划。
这个结构本身不算错，但它只是名词标签，没有传递任何判断。什么意思？
“市场分析”不是一个标题，它只是文档分类。如果你把这一页改成一句可读的话，例如“企业报销长期依赖人工贴票和对账，单人月均要花 2.5 天处理票据，这 2.5 天本可以用于更有价值的财务分析”，投资人就知道你这页想让他记住什么。
我在投行做材料时会特别强调一种习惯：每页的标题不是章节名，而是一句结论。如果你想让我看完这一页后不忘记一个信息，那就把那个信息直接写在页首。
这个原则放在 HTML 版 BP 里也一样。每一个<section>里的<h2>，都应该是一个判断句，而不是“问题分析”“产品方案”这样的普通分类。
1.3 重新做一版 BP 时，先接受“30% 的内容可以删掉”
看到很多人改 BP 时很纠结，觉得哪一页都重要，哪个数据都舍不得拿掉。但投资人扫描一份 BP 时的心理是：内容无法被一眼吸收，那就先放弃。
做投资材料不是做词典，也不是做尽调底稿。它的作用是把对方尽快带进你的逻辑，而不是把所有信息一次性扔给对方。所以你要学会砍内容。
我在实际改稿时有个很简单的判断标准：写完之后，把每一页的标题单独读一遍。如果只看标题，你仍然能串出一个完整故事，那这份 BP 就算合格。如果不能，说明信息结构还是散的。
你需要的不是“信息更多”，而是“每一条信息都有明确的目的”。
2. 先拆内容骨架，把 BP 当成投行 pitch，而不是公司官网
2.1 给你一套可以直接沿用的 6 段叙事地图
投资圈常说的 pitch，不是指现场演讲，而是项目核心叙事的呈现。它和公司介绍有本质区别：公司介绍按组织架构展开，pitch 按投资人心理展开。
把 BP 整理成 HTML 版本之前，我会先用文本把主线索写出来。主线索不必多复杂，通常 6 段就够：
- 锚点问题：解决谁在什么场景下的什么麻烦。
- 解决方案：我们的产品做了哪些关键动作，为什么能解决问题。
- 为什么由我们做：团队背景、资源和已有的差异点。
- 为什么是现在：技术成熟、用户习惯迁移、需求抬头或某个关键节点出现。
- 进展证据：里程碑、客户反馈、已验证的数据，以及团队踩过的坑。
- 融资计划：打算融多少、钱花在哪些地方、做到什么阶段后进入下一轮。
这个顺序不一定所有人都要完全照搬，但会让你避开最常见的错误：把大篇幅放在宏观市场和行业定义上，自己真正的进展和判断反而被埋在十几页之后。
2.2 用“投资人会追问什么”来组织每一页
当你写完一页之后，别急着做下一页。先问自己：投资人看完这一页，大概率会追问什么？
如果上一页写的是“企业报销流程低效”，投资人自然追问“你怎么解决”。于是下一页就是方案。如果方案页写了“我们提供一套自动化报销审核工具”，投资人接着追问“凭什么相信你能做出来”，所以下一页就应该放进展数据和团队背景，而不是立刻跳到 5 年财务预测。
这个设计逻辑，实际上是在创建一条网页阅读路径。投资人不需要自己从 30 页里挑重点，而是被你带着，一页一页走下去。
这也是 HTML 版 BP 和 PDF 版 BP 在体验上最大的区别：HTML 版可以更自然地设计“接下来看什么”，目录、锚点、滚动、吸顶导航都在帮你完成阅读引导。
2.3 在这里可以给 AI 搭子一个明确的“投行 skill”
如果你希望用 AI 帮你把原始 Word 内容整理成 HTML 版本，不要一上来就让它“做成一个好看的 BP 网页”，那样很容易得到一份版式华丽但逻辑混乱的结果。
更有效的做法，是把前面那套信息架构固化成一个自定义技能包或提示词规则，让 AI 先按这套顺序整理内容，再生成 HTML。我的习惯是给 AI 四条硬规则：
- 只提取原始材料里已有的观点和数据，不新增任何未经验证的事实。
- 每个页面的主标题必须是一个判断句，不能是“市场分析”这类分类词。
- 生成的 HTML 必须是单文件，CSS 和少量 JS 内联在内部，方便直接发送和本地打开。
- 如果原始材料没有给出某个关键数据，不要自动补一组数字，而是标记为“待创始人补充”。
后面我会给你一个能跑起来的最小模板，你自己动手也不会觉得难。
3. 为什么 HTML 版 BP 更值得做：从“文档”变成“浏览器里的提案”
3.1 Word/PDF 与 HTML BP 的真实差异
很多人以为 HTML 版 BP 就是把 PPT 或 PDF 转成一个网页。其实真正的价值不在“转”，而在“重新设计浏览节奏”。
放一张对比表能看得很清楚：
| 指标 | Word / PDF 版 BP | HTML 版 BP |
|---|---|---|
| 第一印象 | 需要下载或打开附件，长文档容易产生压迫感 | 点击链接直接看，目录清晰，可自行跳转 |
| 阅读路径 | 线性翻页，投资人要自己决定去哪页 | 导航、锚点、吸顶目录，阅读节奏可控 |
| 内容结构 | 容易堆页数，页码越多越像研究报告 | 一个 section 一屏重点，强迫你做减法 |
| 移动端体验 | 手机上缩放阅读很痛苦 | 响应式布局，手机也能顺畅预览 |
| 修改成本 | 改一处排版往往要重新导出整个文档 | 改一个标题、换一个数字，刷新即生效 |
| 打印导出 | 天然适合纸面交付 | 可以通过打印样式转成 PDF，保留网页阅读版 |
| 接收门槛 | 低，几乎所有机构都支持 | 低，浏览器即可打开，但部分公司不允许访问外链 |
需要说明的是，Word 和 PDF 仍然有不可替代的场景，尤其是正式尽调、合规留档、线下打印。我的建议不是让你彻底抛弃 PDF，而是把 HTML 版作为早期接触、快速传达核心逻辑的“第一版武器”。
3.2 HTML BP 真正解决的是“按情节阅读”，不是“多动效”
HTML 版本最容易被误解的地方是觉得要做得花哨：弹出动画、粒子效果、爱心烟花、3D 旋转组件、满屏图片。
从我的经验看，BP 里面加这些基本是灾难。
投资人要的不是炫技，是效率。HTML BP 真正有价值的能力是信息层级，比如：
- 用导航让你快速切换到后面某个模块，不必大海捞针。
- 用一屏一个 section 限制容量，避免惯性的长篇大论。
- 用小范围 CSS 动画或视觉强调引导视线，最多只在核心数据上做一点变化。
- 用移动端适配保证对方在手机上顺手就能看完，而不是被 15 张横版 PPT 卡住。
如果你很想展示自己的技术能力，可以在个人项目页里做 3D 效果；但 BP 是替你节省注意力的材料，不是实验场。任何干扰内容阅读的设计，最终都会变成减分项。
3.3 HTML 版 BP 的推荐信息架构
到这里，一版 HTML BP 的结构基本可以固定下来：
- Cover / Claim：公司名 + 一句话主张 + 最新进展。
- Problem：你瞄准的问题，写具体的用户麻烦，不写宏大的行业泛论。
- Solution：产品流程和核心能力。
- Why Now：为什么是今天做这件事。
- Market：市场空间，尽量分层呈现。
- Business Model：怎么获客、怎么收费、规模怎么扩大。
- Evidence / Milestone：已经验证的进度和数据。
- Team：核心团队与差异化能力。
- Why Us / Moat：别人为什么暂时没法抄。
- Ask：融资计划、资金用途和下一阶段里程碑。
这套结构不是叫你每页平均用力。对早期项目来说，Evidence 和 Ask 的重要性往往高于纯市场测算。因为投资人真正关心的是你在这个方向上的执行力。
4. 动手做一个 HTML BP：最小可运行模板和关键实现
4.1 文件骨架与三步准备
做 HTML 版 BP 不需要复杂框架。你只要准备：一个文本编辑器，一个浏览器，一个后缀为.html的文件。
建议编辑器选 VS Code 或任意支持 UTF-8 的编辑器。写完后保存为bp.html，再用浏览器打开。这样你已经有了一个能给熟悉的人看的单文件 BP。
关键是文件开头这几行最好一次写对：
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>项目名 · 一句话融资主张</title> </head><!doctype html>是告诉浏览器按标准模式解析页面，避免很多奇怪的样式问题。charset=utf-8保证中文不乱码。viewport决定在手机上打开时不会像桌面网页一样被缩小得看不清。
4.2 核心 HTML 结构：一屏一个 section，主标题必须可读
看一个最小可用模板。它没有多高级，但已经足以表达 BP 的逻辑。
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>公司名 BP | 一句话主张</title> <style> * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.75; color: #1c2430; background: #ffffff; } nav { position: sticky; top: 0; display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 24px; background: rgba(255,255,255,0.92); border-bottom: 1px solid #e5e7eb; z-index: 10; } nav a { color: #1c2430; text-decoration: none; font-size: 14px; } .screen { max-width: 1120px; margin: 0 auto; padding: 64px 24px; } .screen + .screen { border-top: 1px solid #eef1f4; } .label { color: #0a63d8; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } h2 { font-size: clamp(26px, 4vw, 40px); line-height: 1.3; max-width: 920px; margin: 8px 0 20px; } .metrics { display: flex; flex-wrap: wrap; gap: 16px; } .metric { flex: 1 1 180px; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; } @media print { nav { display: none; } .screen { max-width: none; border-top: 0; break-inside: avoid; } } </style> </head> <body> <nav> <a href="#claim">主张</a> <a href="#problem">问题</a> <a href="#solution">方案</a> <a href="#evidence">数据</a> <a href="#ask">融资计划</a> </nav> <main> <section class="screen" id="claim"> <div class="label">Cover / Claim</div> <h2>把一句话主张写在这里，让投资人第一屏就判断是否继续看</h2> <p>这里写公司名、赛道定位、当前阶段。不要用“商业计划书”当大标题。</p> </section> <section class="screen" id="problem"> <div class="label">Problem</div> <h2>你瞄准的问题，要让投资人觉得具体、真实、有痛点</h2> <div class="metrics"> <div class="metric">场景描述一</div> <div class="metric">关键人群与麻烦</div> <div class="metric">现状损失或效率损耗</div> </div> </section> <section class="screen" id="solution"> <div class="label">Solution</div> <h2>你提供的解决方式，为什么比现有方案更有效</h2> <p>围绕产品流程写，不堆功能清单。</p> </section> <section class="screen" id="evidence"> <div class="label">Evidence / Milestone</div> <h2>用真实进展和可验证指标证明团队能做出来</h2> <div class="metrics"> <div class="metric">指标一：待补充真实数据</div> <div class="metric">指标二：待补充真实数据</div> <div class="metric">指标三：待补充真实数据</div> </div> </section> <section class="screen" id="ask"> <div class="label">Ask / Plan</div> <h2>这里写融资金额、主要用途与下一阶段里程碑</h2> <p>可以列出资金分配和验证节点。</p> </section> </main> </body> </html>这个模板的关键点，我已经在上面反复强调过了：每个模块的标题本身是一个完整句子。文档里没有采用“第一章 行业分析”这类结构，而是用一组投资人看得懂的问题作为导航。
4.3 怎么用 CSS 让关键指标更突出
如果你的 BP 里有几个核心指标，比如客户数、续费率、成本下降比例、复购率，不需要做成复杂图表。用简单的 CSS 数据条反而更清楚，也更符合网页阅读习惯。
一个常见写法是这样：
.bar { height: 8px; background: #eef1f4; border-radius: 999px; overflow: hidden; margin-top: 8px; } .bar span { display: block; height: 100%; background: #0a63d8; }对应的 HTML 片段：
<div class="metric"> <div>周留存率</div> <div class="bar"><span style="width: 60%"></span></div> <div>60%</div> </div>这里的60%只是演示写法，真实使用时一定要替换成自己验证过的数据。你可以通过改 style 里的 width，快速调整长度和数值。
4.4 本地预览和如何发给投资人查看
保存 HTML 文件后，双击文件就能在浏览器里预览。但如果你要测试多个页面文件的相互关系，或者想用手机预览，建议起一个本地静态服务。
在项目目录下打开终端，执行：
python3 -m http.server 8000然后浏览器访问http://localhost:8000/bp.html。手机和电脑在同一个局域网时，也可以临时预览，但不要把这个阶段的操作当成正式对外发布。
要发给更远的人，你有两条常见路线。第一，直接把 HTML 文件作为附件发过去，对方下载后双击就能打开。第二，部署到一个只对指定人可见的静态页面，把链接发过去。无论哪种方式，都要注意 BP 里通常有未被公开的信息，不要为省事把完整 BP 发到完全公开的网址，也不要随便套用免费转链接工具后当成可长期使用的交付方式。
5. 先别急着美化，先检查输入、编码、锚点和打印
5.1 最容易翻车的四个环节
我会避开一个常见的误区：一开始就在动画和字体上花大量时间。HTML 版 BP 真正容易出问题的，往往是下面四个基础环节。
- 中文乱码或白屏：出现这个问题优先检查文件是否以 UTF-8 编码保存，以及有没有写错
<!doctype html>。 - 手机端打开变形：多半是漏了
<meta name="viewport">，导致页面按桌面宽度展示。 - 导航点了没反应：检查
<a href="#evidence">里的锚点有没有对应<section id="evidence">，并且 ID 不能重复。 - 打印后排版很乱：网页默认打印会把内容按普通网页流式分页，你需要加
@media print规则，把不需要的导航隐藏，避免 section 被截断。
这四件事，在任何 HTML 项目里都可能出现。但在 BP 场景里，它们更容易让你在投资人面前失去信任：投资人打不开文件，或者打开后排版碎裂，他对项目的专业预期会直接下降。
5.2 一段可执行的排查链路
如果你做了一个 HTML BP，发给别人后却出现问题，不要靠感觉去猜，按下面这条链路检查：
- 先看现象。是打不开、白屏、乱码、样式错位、链接不跳，还是打印结果异常。
- 再检查文件本身。后缀是不是
.html，文件是不是被某些聊天工具改成了.txt或压缩包。 - 再看头部声明。文档前几行是不是标准结构，
meta charset="utf-8"和meta name="viewport"是否齐全。 - 进一步看规范。导航锚点和 section 的 ID 是否完全一致。CSS 是否写错选择器，或者有未闭合的花括号。
- 最后看运行环境。换一个浏览器打开，如果正常，那多半是缓存或浏览器兼容问题；如果所有浏览器都异常，回到代码本身。
这套流程适合普通 HTML 网页，也适合把爱做的 HTML BP 从“本地能看”变成“发出去也能正常看”。
5.3 给 AI 搭子的技能包：不要让它自主发挥，先给它边界
如果你用 AI 工具制作 HTML BP，同样要按上面这套流程检查输出。AI 很擅长生成看起来结构完整的代码，但它不熟悉你的业务细节，也不知道哪个数字来自哪份销售报表。
所以我更建议你先给它一个“投行 skill”式的指令，而不是简单说一句“帮我写一个漂亮的BP网页”。这个技能包要包含：
- 内容来源只能是原始材料，不能自己编造市场规模。
- 每个模块输出目标字数控制在 120 到 200 字之间。
- 主标题必须是判断句，不能只是功能标签。
- 代码必须输出为单文件 HTML，不依赖外网 CDN。
- 生成后要自动检查锚点、编码、打印样式和 viewport。
AI 可以作为你的整理助手，但最终的数据核实和故事表达，一定要自己过一遍。HTML 只是分发容器，判断力仍然是人的活。
6. 适用边界与长期迭代：HTML BP 不是融资成功保证
6.1 适合什么人，不适合什么人
必须先说明，HTML 版 BP 不是万能药。融资能不能跑通，取决于项目本身、时机、团队、市场环境，以及你和投资人的匹配度。材料只能提高沟通效率，不能凭空创造价值。
它比较适合这几类场景：
- 早期项目在陌生触达阶段，希望降低阅读门槛。
- 产品本身偏技术和 SaaS，适合在浏览器里展示界面和流程。
- 希望反复调整融资叙事，快速迭代版本。
- 团队里有人会一点 HTML 和 CSS，不需要额外开发成本。
如果你的项目已经到了尽调阶段，或者采用传统机构常年要求的 PDF 附件格式，那么 HTML 版只适合作为辅助版本。另外，如果 BP 中涉及大量合规敏感信息、客户名单和未公开的财务数据，首要考虑的永远是访问边界和保密要求，而不是方便。
6.2 每个页面的输入、输出和版本要可追踪
HTML 模板的维护重点不是“排版越来越漂亮”，而是“内容改动不会破坏整体结构”。
实际操作里，我用得最多的维护方式，不是一套复杂的后台系统，而是把整个 BP 项目做成一个简单目录：
bp/ assets/ index.html changelog.md没有想法时可以先用一版 index.html。每次给投资人发新版前，在 changelog 里记录改动：
- 上次投资人问得最多的问题是什么。
- 对哪个章节做了调整。
- 哪个判断句被替换了。
- 哪个数据补充了来源说明。
这个方法很简单，却能帮你避免“同一份 BP 传出多个版本，最后不知道投资人看到的是哪一版”的尴尬。
6.3 一次改稿后应该复盘的四件事
每次发出 HTML 版 BP，不要只等对方回复。你可以准备一个复盘清单：
- 投资人有没有看到中间的某个章节，还是只停在前两页。
- 有没有反复追问同一类问题，说明那一页没有讲透。
- 如果对方要求 PDF，你需要知道不是 HTML 版本不好，而是对方流程需要，不要因此放弃网页版。
- 如果对方划走，不要把原因都归到“模板不够炫”，大多数时候是叙事不清晰。
在投行做项目材料时，我最深的体会是：材料是思考的结果，不是思考的替代品。HTML BP 给了你一种更高效的交付形态，但真正让人想看完的，依然是你对项目核心逻辑的理解有多清楚。
所以下一次做 BP，先不要急着打开 PPT，按我前面说的方式，先写出判断句。如果哪一句写不出来，说明那一块还没想明白。把想不明白的部分重新整理，再把它写进 HTML 版的某个 section。这样出来的 BP，才是一份真正有人想看完的 BP。
