使用工具
Cursor IDE
PowerPoint
Excel
Netlify Drop或Vercel
GitHub（可选）
核心思路
将企业级 PPT / Word 文档，通过 AI 辅助生成为交互式单页 HTML 应用（SPA），再通过 Netlify Drop 或 Vercel 部署上线。
全过程以「人机对话」方式驱动：我提需求，AI 执行，逐步迭代至最终成品。
一、项目概览
0515 产品迭代 · 从 PPT 到交互式 HTML
源文件515迭代价值宣讲.pptx（96页）
覆盖领域大财务 / 大业务 / 大人力 / 大平台
最终产物index.html（单文件交互式SPA）
辅助产物build_515_spa.py、export_pptx_images.py、设计规范.md、Prompt模板.md
重点场景24+ 个重点迭代场景
二、完整交互记录
阶段 1
第一版 HTML 生成（初步转换）
对话 1-1 PPT 转 HTML（第一次尝试）
我的指令基于PPT写成HTML格式网页。要求：精美严谨，取自源文件不得杜撰；覆盖所有内容，有层次感、可互动；每个小节的业务逻辑流程图，严格遵循原图。
AI 执行用Python脚本提取PPT内容（96张幻灯片），分析整体结构（标题页→目录页→4大板块，共25个重点场景），生成内容摘要JSON，识别11个关键流程图，开始规划HTML架构。
对话 1-2 三项修改（插图/排版/穿透）
我的指令三个修改：①中间的插图换成PPT本来的插图；②大业务/大人力/大平台排版字太靠近边框；③首页概览点击后跳转到对应界面。
AI 执行完成全部三项——插入6个功能区共8+张原始PPT图片；统一内边距；25个场景概览卡片全部映射到正确锚点，点击后平滑滚动。修复JS兼容性问题。
阶段 2
第二版 HTML 生成（Python 脚本 + 完整重构）
对话 2-1 全新 SPA 重构
我的指令将PPT重构为精美、严谨的单页面交互式HTML应用（SPA）。绝对忠于原文；打破线性结构，建立"总览→详情"树状结构；四大领域为主分类；卡片式设计+侧边栏；指定页面插入图片占位符，支持点击放大。
AI 执行用python-pptx提取全部96页内容；编写 build_515_spa.py 生成脚本（含信息架构、CSS设计系统、Lightbox交互）；生成完整SPA，包含侧边栏导航、总览跳转、架构图占位、灯箱放大功能。
对话 2-2 自动导出 PPT 图片
我的指令按照占位符需要的图片，自动导出到images/并统一命名，命名与占位符保持一致。
AI 执行编写 export_pptx_images.py 脚本——从 build_515_spa.py 导入占位配置，递归处理组合形状中的图片，支持"取最右侧图片"逻辑，自动转换PNG，生成导出报告。
对话 2-3 检查占位图片缺失
我的指令占位符需要的图片都存在images下了，看下还有哪个占位符找不到对应图片。
AI 执行对比HTML中所有 <img src> 引用与images目录实际文件，列出缺失图片清单。
对话 2-4 / 2-5 复检 + 在线实时预览
我的指令重新检查占位图片 → 在线浏览html文件，实时修改代码自动变化。
AI 执行确认所有占位符图片就位；安装 live-server 启动本地开发服务器，实现修改后浏览器自动刷新。
阶段 3
UI 设计大改版（参考截图优化）
对话 3-1 UI 风格升级（提供参考图）
我的指令html前端界面太丑了，参考这个图片样式（提供了一张参考设计截图），好看点、高级点。
AI 执行对照参考截图全面UI重设计——更新配色方案、卡片样式、导航栏风格、字体层次、间距系统，整体视觉效果更加精致高级。
对话 3-2 / 3-3 预览 + 内容展示格式优化
我的指令预览html文件 → 各文档内容不用完全按PPT，参考以上格式（提供了新截图），把文档按一定规则展示为更符合当前风格的数据。
AI 执行在浏览器中打开更新后的页面供查看效果；根据参考截图调整内容展示方式，从纯文本罗列改为更具结构化的卡片式、分层展示。
阶段 4
详情页精雕细琢（以「无订单成本核算」为模板）
对话 4-1 详情页深度改造（提供3张参考图）
我的指令以无订单成本核算为例，分为4层：①业务场景不要单纯罗列；②应用价值，下方文字不用罗列；③模型/架构图按规则读取；④功能特性标题、核心描述、具体特性三级结构。
AI 执行对详情页深度改造——业务场景用表格+图文结合展示行业分类，应用价值用卡片式布局，架构图正确读取，功能特性按三级层次展示。
对话 4-2 / 4-3 补充行业 + 表格列宽
我的指令①业务场景少了交通运输、教育娱乐、租赁服务；②功能特性要根据不同层级生成 → 表格第一列换行了，调整列宽到最佳状态。
AI 执行补充3个缺失行业场景，重新梳理功能特性层级关系；调整表格CSS设置合理列宽比例，解决文字换行问题。
对话 4-4 ~ 4-6 总结设计规范 → 确认 → 批量应用
我的指令「无订单成本核算」详情页符合需求，总结我对这个节点的要求存为独立文件 → 确认后开始批量应用到其他所有节点。
AI 执行生成「详情节点设计规范.md」——包含四层设计规则、展示格式、层级要求等完整规范。确认后开始将规范应用到所有场景节点。
对话 4-7 / 4-8 复用已有数据 → 批量改造
我的指令从PPTX提取的结构化数据之前已经读取过，是否可以复用 → 好的。
AI 执行确认复用已有 _ppt_extract.txt 和 _slides_structured.json 数据，基于设计规范批量改造所有场景详情页。
阶段 5
逐模块精修（大财务 → 大业务 → 大人力 → 大平台）
对话 5-1 大财务五个场景批量修改
我的指令详细列出五个场景的修改要求——研发费用归集应用价值少内容；IPO中心去掉占位符；数智合同按统一规则；集团成本还原添加图片；去掉两个场景的详情页；功能序号重排。
AI 执行逐一完成五个场景的修改，重新组织内容层级，更新导航和序号映射。
对话 5-2 研发费用 + 集团成本还原补充
我的指令研发费用功能特性补充税务云/项目云/人力云下的具体特性文本；集团成本还原的价值展示要自适应，布局要好看。
AI 执行补充了各云下的具体功能特性文本；调整集团成本还原价值卡片的CSS布局为自适应。
对话 5-3 大业务模块批量修改（最大规模）
我的指令详细列出大业务下12个场景的修改要求——受托加工场景层级重构；生产日排产应用价值补全；计划变更表格自适应；多工厂协同功能特性分层+图片替换；并行工序场景重构；智能辅助评标/供应链制单/拜访跟进/要货建议/概预算/BOM联动/优质优价各自修改。
AI 执行对大业务下12个场景逐一进行内容重构、层级梳理、图片配置、表格修复、应用价值格式统一。
对话 5-4 补充修改（6个场景）
我的指令计划变更/多工厂/智能评标的应用价值不要用占位符读文档，读取原始文字并注意层级；评标功能特性增加图片；概预算增加关键特性文字；BOM联动去掉多余内容；优质优价应用价值补全。
AI 执行逐一完成补充修改，确保所有应用价值来自原始文本而非占位符。
对话 5-5 / 5-6 大人力 + 大平台模块修改
我的指令人力云大模块下（绩效/数据采集/岗位精算/奖金佣金/划线排班）按大财务格式展示，注意层级 → 绩效数据采集读取图片；大平台主数据分级管控内容格式要和大财务一致。
AI 执行对人力云4大场景+子场景全部按统一设计规范重构；添加图片引用；重构大平台主数据管控的展示格式。
对话 5-7 表格自适应 + 汇总页分领域
我的指令①管理组织规则与唯一性范围下的表格要自适应；②重点关注的迭代场景汇总界面按不同领域分开展示。
AI 执行修复表格CSS自适应问题；将汇总页场景卡片按大财务/大业务/大人力/大平台分组展示，各组带领域标识色。
阶段 6
沉淀规范与 Prompt 模板
对话 6-1 总结设计规范
我的指令从最初的PPT到目前HTML的过程，总结归纳需求和重点，更新到设计规范文件，方便后续复用。记录重要经验，如读取文档时要注意字号/标题级次/层级/归属等。
AI 执行更新「详情节点设计规范.md」，增加完整的设计规范、注意事项和经验沉淀。
对话 6-2 生成可复用 Prompt 模板
我的指令参考最初的PPT和目前的HTML，输出好让我复用的prompting。站在非代码层面，纯逻辑交流——一个产品经理的角度来设计逻辑的交互，翻译成自然文学逻辑。
AI 执行生成「可复用Prompt模板.md」，包含完整的提示词结构和要点，可用于下次转换其他PPT文档。
阶段 7
部署上线
非对话 通过其他工具部署上线
Netlify Drop 部署流程① Netlify Drop 上传文件
② 注册账号（非注册仅保持两小时）
③ 修改自定义域名
④ 上线完成
② 注册账号（非注册仅保持两小时）
③ 修改自定义域名
④ 上线完成
Vercel 部署流程
1、准备入口：确保文件夹根目录下有一个 index.html。
2、打开终端：按 Win + R 输入 cmd 或 powershell。
3、精准定位（Windows 关键步）：
（1）先切盘符：输入
（2）进文件夹：输入
（3）执行命令：输入
4、快速问答：
Set up and deploy? → Y
Which scope? → 直接回车
Link to existing project? → N
Project name? → 输入一个英文名（不要中文）
其余问题（Modify settings?） → 一路按回车（选默认的 N）。
获取网址：找到 Production: 后面的 https 链接即可。
5、更新部署时，需要切盘符，在对应目录下执行
2、打开终端：按 Win + R 输入 cmd 或 powershell。
3、精准定位（Windows 关键步）：
（1）先切盘符：输入
F: 并回车（如果是 F 盘）。（2）进文件夹：输入
cd "文件夹绝对路径" 并回车（建议路径带双引号，防止空格报错）。（3）执行命令：输入
vercel 并回车。4、快速问答：
Set up and deploy? → Y
Which scope? → 直接回车
Link to existing project? → N
Project name? → 输入一个英文名（不要中文）
其余问题（Modify settings?） → 一路按回车（选默认的 N）。
获取网址：找到 Production: 后面的 https 链接即可。
5、更新部署时，需要切盘符，在对应目录下执行
vercel --prod
三、关键经验总结
内容提取注意事项
- PPT提取时必须关注：文字内容、字号、标题级次、层级关系、下级文本归属
- 中文路径会导致 file:// 协议下图片加载失败，需用HTTP服务器
- 图片导出要区分"全部图片"和"右侧图片"（如 slide_32_right）
设计规范要点
- 每个场景详情统一四层结构：业务场景→应用价值→架构图→功能特性
- 业务场景用表格/图文结合，不是简单罗列
- 应用价值用卡片式布局，有层级感
- 功能特性按PPT原始字号区分层级（标题→核心描述→具体特性）
- 表格必须自适应，避免文字重叠
协作流程经验
- 先以一个节点（无订单成本核算）打样，确认后批量应用
- 每次修改后及时预览确认
- 设计规范沉淀为独立文件，方便后续复用
- 生成可复用 Prompt 模板，降低下次操作门槛
一、项目概览
实操考试在线化 · 从 Word 到交互式 HTML（无服务器存储）
二、完整交互记录
对话一
先从简单界面跑通流程（测试界面）
第 1 轮 创建基础考试界面
我说创建一个html界面，高端实操考试。可以输入姓名、手机号、上传图片、提交时间。有提交按钮。保证后续可以通过Netlify Drop生成网址，并自动存储图片生成公开URL。
AI 做了创建第一版 index.html，深色奢华主题（暗黑底色+金色渐变），使用 Netlify Forms 实现表单提交和文件存储。
| 阶段 | 做了什么 | 关键决策 |
|---|---|---|
| v0.1 | 创建基础HTML表单 | 使用 Netlify Forms 存储数据 |
对话二
打通数据链路（测试界面）
第 2 轮 提交 404 报错
我说左侧的html打包成网址后，提交404报错。
AI 做了判断出 Netlify 没有识别表单，指导去后台开启 Form detection 并重新部署。
第 3 / 4 轮 接入飞书多维表格
我说表格提交内容需要传到飞书文档中，已经调通了。（附上了飞书多维表格的API地址、Token和字段格式）
AI 做了理解需求——提交数据要同时存到Netlify和飞书。创建 netlify/functions/submission-created.js，用 Netlify Function 自动转发数据到飞书。
| 阶段 | 做了什么 | 关键决策 |
|---|---|---|
| v0.2 | 接入飞书多维表格 API | 放弃 Netlify Function，改用 _redirects 代理 |
对话三
数据链路调错（测试界面）
第 6 轮 Function 报错 → 改用 _redirects
我说报错截图。
AI 做了发现 Netlify 拖拽部署不支持自动识别 Functions 目录。改换方案：放弃 Netlify Function，改用 _redirects 代理 + 前端直接调飞书 API，完全兼容拖拽部署。
第 8 / 9 轮 Token 过期 → 自动刷新
我说报错截图 → 提供了 App ID 和 App Secret。
AI 做了从截图看到飞书返回400「Invalid access token」——Token已过期（2小时有效期）。用凭证改造代码，实现每次提交时自动获取新Token，永不过期。
| 阶段 | 做了什么 | 关键决策 |
|---|---|---|
| v0.3 | 解决飞书Token过期问题 | 每次提交实时获取新Token |
第 10 轮 截图上传 → 接入图床
我说已经成功传过去了，但是 Screenshots_URL 没有数据。
AI 做了分析原因——前端拿不到 Netlify CDN 地址。方案改为：提交时先把图片压缩后上传到免费图床（catbox.moe），拿到URL后写入飞书。
| 阶段 | 做了什么 | 关键决策 |
|---|---|---|
| v0.4 | 接入 catbox.moe 图床 | 图片压缩后上传，URL存入飞书 |
对话四
完整重构（正式 Word 数据）
转折点第 11 轮 读取 Word → 完整考试页面
我说读取 word 文件。
AI 做了大转折点——用Python脚本 extract_docx.py 提取Word试题册全部结构化内容（81个段落、1个表格），基于提取数据生成完整HTML考试页面，包含所有题目、分录、表格等内容。
| 阶段 | 做了什么 | 关键决策 |
|---|---|---|
| v1.0 | Word 内容完整呈现 | Python脚本自动提取，JSON为唯一数据源 |
对话五
前端 UI 设计（正式 Word 数据）
第 12 轮 第一次设计重构
我说设计的好丑，需要换一种展示风格，不局限于深红、灰、白。重新进行前端界面设计。
AI 做了完全重新设计——采用「Warm Scholar」风格：象牙色底 + 深青绿主调 + 琥珀金点缀，大圆角卡片、几何装饰元素、毛玻璃导航栏。
| 阶段 | 做了什么 | 关键决策 |
|---|---|---|
| v1.1 | Warm Scholar 风格 | 象牙底 + 青绿主调 + 琥珀金 |
第 13 轮 第二次设计重构
我说重新设计UI，更换整体配色（230,0,18；166,166,166；217,217,217为主但不能只有这些颜色）。考试导航以横向形式展示。
AI 做了按指定配色 #E60012（红）/ #A6A6A6（灰）/ #D9D9D9（浅灰）为核心扩展完整色板，导航改为横向固定在顶部。
| 阶段 | 做了什么 | 关键决策 |
|---|---|---|
| v1.2 | 指定配色方案 | #E60012 红 + 灰色系，横向导航 |
最终方向第 14 轮 最终设计确立
我说按 Claude Design System 格式，重新设计UI。考试导航纵向展示，有层次感。增加开始按钮和倒计时，点击开始后可作答，倒计时从3小时15分钟开始。
AI 做了按照Claude Design System全面重构——羊皮纸底色#f5f4ed，陶土红品牌色#c96442；衬线体标题+无衬线正文；纵向侧边栏导航分5个层级组；全屏深色「开始考试」遮罩 + 3:15:00倒计时；考试未开始时内容模糊锁定。
| 阶段 | 做了什么 | 关键决策 |
|---|---|---|
| v2.0 | 最终设计确立 | 暖色纸质风格，纵向导航，开始遮罩+倒计时 |
对话六
数据链路调错（正式 Word 数据）
第 15~n 轮 表单提交修复 + 双写
我说Netlify打包成网址后，提交后 forms 找不到数据 → 数据需要同步存在 Netlify Forms。
AI 做了分析发现代码中表单走飞书API而非Netlify Forms，修复飞书API错误处理的bug。在 <form> 上启用 Netlify Forms（data-netlify="true"），添加隐藏input，实现飞书和Netlify双写。
| 阶段 | 做了什么 | 关键决策 |
|---|---|---|
| v2.1 | 数据双写 | 飞书为主存储，Netlify为备份 |
第 26~29 轮 字段报错 → 自动字段管理
我说提交失败 → 连续发送多张 FieldNameNotFound 报错截图。
AI 做了发现手动建字段容易出错。决定在代码中加入自动字段管理——提交前通过飞书API自动检查并创建所有缺失字段，用户不再需要手动操作。
| 阶段 | 做了什么 | 关键决策 |
|---|---|---|
| v2.2 | 飞书字段自动创建与管理 | 提交前自动检查和创建缺失字段 |
对话七
后续微调（正式 Word 数据）
第 30 轮 6 项细节修改
我说①初始折叠区域先折叠；②存在图片插入占位符支持点击放大；③操作日志截图上传放到下方；④操作日志文档上传放到下方；⑤删除命名与提交部分；⑥删除考试作答文档上传部分，序号顺延。
AI 做了一次性完成6项修改——移除默认展开、添加图片样式和Lightbox放大组件、调整上传区位置、删除指定区块、侧边栏编号顺延。
| 阶段 | 做了什么 | 关键决策 |
|---|---|---|
| v2.5 | 内容图片+上传区调整 | 图片就近插入，上传区紧跟说明文字 |
第 31 轮 图片插入 + 删除区块
我说images/下，设备要求在1.3设备要求下；作答示例图在作答文档下；操作日志在操作日志下；删除作答文档上传部分。
AI 做了将3张图片插入到对应位置，删除了作答文档上传区及其在前端字段列表、Netlify/飞书提交逻辑中的所有引用。
对话八
沉淀规范与 Prompt 模板
第 32 轮 生成可复用规范
我说基于现在最终状态和初始Word文档，站在使用者角度总结我们之间的对话，生成可复用规范。站在非代码层面，纯逻辑交流——产品经理角度来设计逻辑的交互，翻译成自然文学逻辑。
AI 做了通读全部项目文件，生成 PROMPT.md v2.0——技术规范文档，共11章+2个附录，包含完整的代码模板、字段规范、踩坑记录和质量检查清单。
对话九
部署上线
非对话 通过其他工具部署上线
Netlify Drop 部署流程① Netlify Drop 上传文件
② 注册账号（非注册仅保持两小时）
③ 修改自定义域名
④ 上线完成
② 注册账号（非注册仅保持两小时）
③ 修改自定义域名
④ 上线完成
Vercel 部署流程
1、准备入口：确保文件夹根目录下有一个 index.html。
2、打开终端：按 Win + R 输入 cmd 或 powershell。
3、精准定位（Windows 关键步）：
（1）先切盘符：输入
（2）进文件夹：输入
（3）执行命令：输入
4、快速问答：
Set up and deploy? → Y
Which scope? → 直接回车
Link to existing project? → N
Project name? → 输入一个英文名（不要中文）
其余问题（Modify settings?） → 一路按回车（选默认的 N）。
获取网址：找到 Production: 后面的 https 链接即可。
5、更新部署时，需要切盘符，在对应目录下执行
2、打开终端：按 Win + R 输入 cmd 或 powershell。
3、精准定位（Windows 关键步）：
（1）先切盘符：输入
F: 并回车（如果是 F 盘）。（2）进文件夹：输入
cd "文件夹绝对路径" 并回车（建议路径带双引号，防止空格报错）。（3）执行命令：输入
vercel 并回车。4、快速问答：
Set up and deploy? → Y
Which scope? → 直接回车
Link to existing project? → N
Project name? → 输入一个英文名（不要中文）
其余问题（Modify settings?） → 一路按回车（选默认的 N）。
获取网址：找到 Production: 后面的 https 链接即可。
5、更新部署时，需要切盘符，在对应目录下执行
vercel --prod