上周帮一位做 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 版 BPHTML 版 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 langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title项目名 · 一句话融资主张/title /head!doctype html是告诉浏览器按标准模式解析页面避免很多奇怪的样式问题。charsetutf-8保证中文不乱码。viewport决定在手机上打开时不会像桌面网页一样被缩小得看不清。4.2 核心 HTML 结构一屏一个 section主标题必须可读看一个最小可用模板。它没有多高级但已经足以表达 BP 的逻辑。!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 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 classscreen idclaim div classlabelCover / Claim/div h2把一句话主张写在这里让投资人第一屏就判断是否继续看/h2 p这里写公司名、赛道定位、当前阶段。不要用“商业计划书”当大标题。/p /section section classscreen idproblem div classlabelProblem/div h2你瞄准的问题要让投资人觉得具体、真实、有痛点/h2 div classmetrics div classmetric场景描述一/div div classmetric关键人群与麻烦/div div classmetric现状损失或效率损耗/div /div /section section classscreen idsolution div classlabelSolution/div h2你提供的解决方式为什么比现有方案更有效/h2 p围绕产品流程写不堆功能清单。/p /section section classscreen idevidence div classlabelEvidence / Milestone/div h2用真实进展和可验证指标证明团队能做出来/h2 div classmetrics div classmetric指标一待补充真实数据/div div classmetric指标二待补充真实数据/div div classmetric指标三待补充真实数据/div /div /section section classscreen idask div classlabelAsk / 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 classmetric div周留存率/div div classbarspan stylewidth: 60%/span/div div60%/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 nameviewport导致页面按桌面宽度展示。导航点了没反应检查a href#evidence里的锚点有没有对应section idevidence并且 ID 不能重复。打印后排版很乱网页默认打印会把内容按普通网页流式分页你需要加media print规则把不需要的导航隐藏避免 section 被截断。这四件事在任何 HTML 项目里都可能出现。但在 BP 场景里它们更容易让你在投资人面前失去信任投资人打不开文件或者打开后排版碎裂他对项目的专业预期会直接下降。5.2 一段可执行的排查链路如果你做了一个 HTML BP发给别人后却出现问题不要靠感觉去猜按下面这条链路检查先看现象。是打不开、白屏、乱码、样式错位、链接不跳还是打印结果异常。再检查文件本身。后缀是不是.html文件是不是被某些聊天工具改成了.txt或压缩包。再看头部声明。文档前几行是不是标准结构meta charsetutf-8和meta nameviewport是否齐全。进一步看规范。导航锚点和 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。