📘 10A · 入门篇
📗 10B · 进阶篇 → 报告产品化
📙 10C · 高级篇 → 可编辑与可维护
小节一
先说一个认知转变：报告不再是文档，而是产品
认知升级 · 范式转变
在动手之前，有一个认知需要先建立，因为它会改变你对这件事的期待和做法。最高阶的汇报方式，不是做出一份更漂亮的文档，而是交出一个"可以运行的产品"。 这听起来很夸张，但它正在真实地发生。
传统汇报（Word / PPT）
静态内容，一次性交付。领导问"如果这个参数变了会怎样"——你只能口头解释，或者回去重做一版。文档越长没人认真看，图表再多也难以追问。
HTML 产品化汇报
可交互、可推演。领导问"如果增速下调5%怎样"——你直接在页面上拖动滑块，图表和结论实时变化。汇报现场变成"软件演示"而不是"讲稿朗读"。
你可能会说：这不是需要会写代码才能做吗？在 AI 出现之前，是的。但现在不是了。你把需求描述清楚，Claude 生成全部代码，你只需要把代码保存成 .html 文件，双击打开，一个在浏览器里运行的完整交互工具就出现在眼前了。真正需要你做的，是把需求说清楚——而这是你一直都擅长的事。
旧范式：我写文档，你看文档
静态 Word / PPT → 发出去 → 完事
领导追问 → 你回去重做
每次修改 = 重新写
→
新范式：我发布产品，你来操作
HTML 工具 → 双击打开 → 即时交互
领导追问 → 直接现场演示
每次改参数 = 工具复用
从"写文档"到"发布产品"，这是一次表达范式的真实升级
这个认知很重要，因为它会影响你如何构建工具。如果你把 HTML 当成"更好看的文档"，你会做一个漂亮但死的页面。如果你把它当成"可以运行的小产品"，你会自然地思考：用户会在哪里点击？数据来自哪里？结果怎么展示？能不能下周再打开还能用？ 这些思考，正是做出好工具的起点。
小节二
为什么偏偏是 HTML——四个任何其他格式都给不了的理由
选择理由 · 技术常识
很多人第一次听到"用 AI 生成 HTML 工具"会有一个困惑：为什么不是 Excel？不是飞书多维表格？不是低代码平台？这是一个好问题，值得把答案说清楚，因为理解了这一点，你才知道什么场景该用 HTML、什么场景用别的。
① 无需安装，无需账号
一个 .html 文件，任何人在任何电脑上双击就能打开。不需要安装软件，不需要登录，不需要注册。发文件过去就是产品交付。
② 完整交互逻辑
按钮、滑块、输入框、下拉选择、图表联动——这些 HTML + JavaScript 天然支持。Word 和 Excel 能做到 10%，HTML 可以做到 100%。
③ 可导入本地数据
HTML 工具可以让用户上传 CSV / Excel 文件，页面读取后实时渲染分析结果。敏感数据完全在本地，不上传任何服务器。
④ AI 最擅长生成的格式
HTML + CSS + JS 是 AI 训练数据里占比最高的内容之一。Claude 生成 HTML 的质量和稳定性，远超生成 VBA 宏、低代码配置或者 Python 可视化代码。
还有一个经常被忽略的优势：HTML 是 AI 生成内容里唯一"即时可见"的格式 。AI 生成 Python 代码，你得配环境才能跑；AI 生成 Word 文档，你得手动打开调整；但 AI 生成 HTML，你复制粘贴进文本文件、改扩展名为 .html、双击打开——3 步，你就看到了运行结果。这个反馈闭环的速度，是整个流程里的关键优势。
普通人的感知
很多人以为"做 HTML 工具"是程序员的事，跟自己没关系。但现实是：你在汇报里需要的绝大多数工具，写起来不过三四百行代码，Claude 一次就能搞定。真正需要你的，是把需求想清楚——这件事，你比任何程序员都更擅长，因为你最了解业务场景。
小节三
第一次动手——30分钟做出你的第一个工具
新手动手 · 全程步骤
下面是一个完整的操作流程，从打开 Claude 到拿到一个可以发给同事用的工具，每一步都有说明。如果你是第一次做这件事，就按这个顺序来，不要跳步骤。
1
准备阶段：在动手之前先想清楚三个问题
不要直接打开 Claude 就开始。先在纸上或备忘录里写下：① 谁来用这个工具？ （自己 / 小团队 / 领导）② 用来解决什么问题？ （一句话）③ 工具产出什么结果？ （数字 / 图表 / 建议）
预计耗时：5分钟
2
打开 Claude，用"产品经理语气"描述你的工具
核心要点：把自己当成一个"在跟开发说需求的产品经理"，而不是"在跟AI问问题"。描述要包含：工具是干什么的 + 用户操作什么 + 显示什么结果 + 用什么样的风格 。
预计耗时：5分钟
3
复制 Claude 生成的代码
Claude 会输出一整段 HTML 代码，通常以 <!DOCTYPE html> 开头，以 </html> 结尾。选中全部代码，复制（Ctrl+C / Cmd+C）。
预计耗时：30秒
4
新建文本文件，粘贴代码，保存为 .html
Windows 用户： 在桌面上右键 → 新建 → 文本文档，打开，粘贴代码，点"文件 → 另存为"，文件名改为 my-tool.html，保存类型选"所有文件" ，点保存。Mac 用户： 打开"文本编辑"App，新建文档，菜单栏选"格式 → 制作纯文本格式"，粘贴代码，保存时文件名改为 my-tool.html（注意 Mac 可能会自动加 .txt，检查一下确保扩展名是 .html）。或者用 VS Code（推荐）： 右键桌面新建 my-tool.html，用 VS Code 打开，粘贴代码，Ctrl+S 保存。
预计耗时：2分钟
5
双击打开，在浏览器里看效果
找到刚才保存的 .html 文件，双击 ，它会自动在你的默认浏览器里打开。你应该能看到一个完整的页面——有样式、有布局、可能已经有了交互效果。
预计耗时：30秒
6
测试 + 提反馈 + 第二轮迭代
在浏览器里操作你的工具，检查：计算逻辑对不对？交互反应对不对？有没有显示出你需要的结果？不要自己改代码 ，回到 Claude 直接说明问题。例如："合计数字算错了，应该是A+B+C的总和，但现在显示的是A+B"。描述越具体，Claude 修复越准。修复完毕后，把新代码复制粘贴覆盖原来的 .html 文件即可。
预计耗时：10分钟
关键心态
第一次做出来的工具不会完美。不要期待一次成功，把"第一版能跑通核心逻辑"作为第一轮的目标。第二轮解决"数字对不对"，第三轮解决"样式好不好看"。这三轮下来，你的工具就达到可以投入实际使用的水平了。
小节四
新手提示词模板——填空就能用
提示词 · 可复用模板
下面是一个经过验证的 HTML 工具提示词结构，分成五个模块。你只需要把 黄色部分 替换成你的实际需求，其他说明保留，Claude 就能生成质量较好的初版工具。
通用 HTML 工具提示词模板
【角色设定】
【工具描述】 【工具用途，例如：供应商综合评分工具】 ，用于 【使用场景，例如：采购部门每季度对供应商做评估】 。
【输入设计】 【例如：每家供应商在质量/交期/价格/服务四个维度的评分（1-10分），最多输入8家供应商】 。
【输出设计】 【例如：自动计算加权总分（权重40/30/20/10），按总分高低排序，用颜色区分优秀/合格/待改进三档，并用图表展示各供应商的分布】 。
【示例数据（可选但强烈推荐）】 【例如：供应商A：8/7/6/9；供应商B：6/8/9/7；供应商C：9/6/7/8】 ，后续我会替换成真实数据。
【技术要求】
新手常见错误
不要在提示词里只说"帮我做一个工具"或者"帮我做个看板"——这种描述太模糊，Claude 会生成一个通用模板，几乎无法直接使用。需求越具体，生成的工具越贴近你想要的 。把你的具体场景、具体字段名、具体计算规则写进去，哪怕写得不完整、不优雅，也比什么都不写强。
还有一个小技巧：如果你有一张现有的 Excel 表格，可以截图发给 Claude，说"帮我把这张 Excel 表格里的内容做成一个 HTML 交互工具"。Claude 会从截图里识别字段名和数据结构，生成的代码字段名和你的 Excel 几乎完全匹配，后续替换数据会很方便。
小节五
跟我一起做：KPI 追踪仪表板（完整示范）
全程示范 · 可直接复用
下面是一个完整的"从提需求到拿到工具"的示范。这是产品运营总监小林的真实场景：她每个月要整理一份 KPI 汇报，数据散在四个不同的表格里，格式调整要花两小时。她想要一个页面：展示五个核心指标，用颜色区分状态，并显示趋势。
小林用的提示词（直接可用）
你是一名擅长生成单文件 HTML 交互工具的前端开发工程师。
帮我生成一个产品运营 KPI 仪表板，用于每月向管理层汇报核心指标。
【5个指标数据（先用示例数据，我后续会替换成真实数字）：】
【展示要求：】
【技术要求：】
用这段提示词，Claude 通常能一次生成一个接近可用的仪表板。小林拿到代码后：
①
保存文件，双击打开，检查核心逻辑
仪表板打开后，小林发现 NPS 71（超出目标65）显示的是橙色而不是绿色——颜色逻辑写反了。
②
回到 Claude 说明问题
"NPS 当月71，目标65，完成率108%，已经超出目标，但页面显示橙色，应该是绿色。请修复颜色判断逻辑。" Claude 定位到 JavaScript 里的判断条件，直接修复。
③
替换真实数据，完工
修复后，小林打开 .html 文件，用文本编辑器找到示例数字（比如 11.2万），改成当月真实数字，保存，刷新浏览器——仪表板立刻更新。全程不需要理解任何代码。
小林的反馈
从写提示词到拿到能用的仪表板，总共花了 25 分钟。其中提示词写了 8 分钟，等 Claude 生成用了 2 分钟，保存文件用了 2 分钟，测试+修复颜色逻辑用了 8 分钟，最后替换真实数据用了 5 分钟。
现在每个月开会前，她只需要打开 .html 文件，把上个月的数字改成这个月的，刷新浏览器就是最新的仪表板。PPT 制作时间从两小时缩短到了 10 分钟。
小节六
三类工具，对应三种提示词复杂度
分类指引 · 选对难度
不是所有 HTML 工具都一样难做。在动手之前判断你需要的是哪一类，可以帮你预估需要几轮迭代、提示词要写多细。
展示型 ★☆☆
最容易入门
数据写死在页面里
KPI仪表板 / 对比图
进度看板 / 活动议程
一次生成基本完工
推荐新手第一个工具
计算型 ★★☆
需要1-2轮迭代
用户输入数据
评分工具 / 成本计算
收入预测 / 决策矩阵
最有日常使用价值
熟悉工具后优先尝试
交互数据处理 ★★★
多轮迭代开发
导入CSV/本地文件
动态筛选 + 可视化
项目风险地图
推荐 Claude Code 模式
见 10B/10C 进阶篇
新手从第一类（展示型）起步，熟悉节奏后进阶到计算型和数据处理型
这三类工具之间没有明确的分界线，而是一个渐进的光谱。一个工具可能主要是展示型，但加了一个筛选按钮就有了交互；一个计算型工具，如果加了图表联动就开始向数据处理型过渡。重要的是：第一个工具从展示型开始，感受到完整的"生成→保存→打开→反馈→修改"闭环，比做出一个复杂工具更重要。
小节七
新手最常遇到的五个问题
常见问题 · 快速解决
根据很多人第一次做 HTML 工具的经历，整理了五个高频问题和解决方法。
Q1：打开 .html 文件后显示的是一堆代码，不是页面
文件被用文本编辑器打开了。右键文件 → 打开方式 → 选择 Chrome 或 Edge 浏览器。如果没有显示浏览器选项，先打开浏览器，把文件直接拖进浏览器窗口。
Q2：页面打开了但是一片空白
代码可能不完整（复制时漏掉了一部分），或者 JavaScript 有错误。回到 Claude，说"刚才生成的代码打开后页面空白，请检查是否有 JavaScript 错误并重新生成"。同时按 F12 打开浏览器开发者工具，查看 Console 标签是否有红色错误信息，把错误信息发给 Claude。
Q3：工具里的图表不显示
通常是 Claude 生成的代码引用了外部图表库（如 Chart.js 的 CDN），但当前没有网络连接。解决方法：告诉 Claude "请不要依赖任何外部CDN，图表用原生 Canvas API 或 SVG 实现，确保离线可用"。
Q4：计算结果出错了，不知道怎么让 AI 修
最有效的反馈格式：①具体说是哪个数字错了 + ②正确结果应该是多少 + ③计算逻辑是什么 。比如"总分显示78，但按质量40%+交期30%+价格20%+服务10%算，供应商A的加权分应该是 8×0.4+7×0.3+6×0.2+9×0.1 = 7.5，不是78"。
Q5：工具没问题，但样式很丑，怎么让它好看
样式调整最有效的方法是参考具体页面。告诉 Claude "风格参考 Linear.app 的设计风格"、"整体颜色偏深色科技感"、"适合在会议室投屏，字体要大，数字要突出"。比说"好看一点"更有效。也可以截图一个你喜欢的界面发给 Claude，说"风格参考这张图"。