最近看完了两个 AI 编程项目《AI 热点监控》、《万能视频下载器》，主要是跟着跑通 AI 编程流程，细节和能力并没有深入去拓展。 也存在一些 bug，懒得去修复了，毕竟是以学习为主。 还是得做实际的上线项目，有真实用户去使用，开发者才更有动力去开发、测试、推广、运营，体验也会更深刻，否则自己本地练练手，大部分项目都是以能跑就行。 这两个项目收获还挺多的，后面打算做做小的产品。 1. 感叹 AI coding 的确牛逼，demo 项目 AI 真能一把梭，非程序员上手开发不是梦，至于后续是否能上线或者脱离 demo，有真实用户去用，那是后话，但只要真的愿意去学习、钻研，我觉得这些不是问题。 2. 充值、跑通、使用 OpenRouter、Twitter api、Deepseek api 3. 跑通 github 上传代码流程（别笑，古法编程时代经常搞不懂 git add、git push、git pull 这些指令的具体含义，的确感觉很绕） 4. 基于开源项目（yt-dlp）快速完成项目开发 5. 接入 Stripe 支付（虽然只是沙盒模式） 6. 了解 SEO、GEO 玩法

迟来的《万能视频总结器》项目开发路程

## 项目地址 https://github.com/userwanyong/uvd ## 项目背景 **我为什么做这个项目？** 在当前内容爆炸的时代，用户在B站、YouTube、TikTok、抖音等平台上获取信息的需求越来越高，但同时也存在以下痛点： 1. 平台限制下载 - 不提供下载按钮 - 限制清晰度 / 会员限制 2. 下载体验差 - 需要安装工具 - 手机端操作困难 3. 信息获取效率低 - 长视频理解成本高 - 缺乏结构化总结 **我的预期目标** 编写一个跨平台、简单易用、可视化、AI智能总结的视频下载平台。预计实现：多平台视频下载兼容、自动识别并解析视频链接、AI视频总结等特性 ## 开发环境 1. glm-5-turbo+cc 2. context7：搜索最新文档，防止AI使用过时的语法 3. chrome-devtools：进行浏览器端到端自动化测试 4. zread：搜索并读取开源仓库 5. web-reader：读取网页内容 6. web-search-prime+firecrawl-mcp：用来进行网络搜索 7. zai-mcp-server：用于分析chrome-devtools测试截图 8. frontend-design+ui-ux-pro-max：优化前端UI，至于用哪个，让AI自行选择即可 ## 方案设计 因为目标明确，相关竞品大多都是付费版本or功能不完备，因此可以跳过竞品分析，让AI直接进行方案设计，这一步可以使用5.1进行充分设计，开发阶段切换为turbo进行快速开发 ``` 你是一位全栈开发程序员，请你根据我的需求，设计方案、然后找我人工确认、分步骤开发、完成自主测试。 ## 我的需求 在当前内容爆炸的时代，用户在B站、YouTube、TikTok、抖音等平台上获取信息的需求越来越高。 我希望编写一个跨平台、简单易用、可视化、AI智能总结的视频下载平台。 预计实现：多平台视频下载兼容、自动识别并解析视频链接、AI视频总结等特性。 ## 人工思考方案 1）对于前端界面，需要简洁大气，然使用者眼前一亮，清晰易懂各个功能（按钮）是干什么的 2）对于后端设计，可以使用py实现，可以暂时不加数据库，实现核心mvp功能 3）对于视频的下载方式，去GitHub查找相关的项目，进行二次开发，eg. yt-dlp（https://github.com/yt-dlp/yt-dlp） ## 注意事项 1）前端页面必须具备明显差异化，避免模板化设计。整体风格需突出“高级感 + 科技感 + AI感”，通过深色+渐变、高对比卡片。 2）必须在我已有方案基础上进行分析与优化，先输出完整方案，并等待我确认后再开始开发，禁止跳过确认直接编码 3）你必须完全理解开源项目，使用尽量简单的方式实现（比如直接在开源项目代码基础上去修改，或者直接封装，尽量减少代码改动） 4）如果有任何不确定的地方需向我询问，不要自作主张 ``` AI给出了设计文档，这里我也没过多的干预，直接让他根据设计文档进行开发（cc自动退出plan模式） ## 编码实现 turbo的速度还是可以的，快速完成了demo的开发，这里直接看一下UI效果和功能完成度 **1）UI效果**   **2）MVP功能可用性** 可以正常启动 1. 解析视频（特点：输入地址后自动解析，不需要手动点按钮） - b站：解析成功✅️ - YouTube：解析成功✅️ - TikTok：解析失败❌️ - 小红书：解析成功✅️ - 抖音：解析失败❌️ 2. 下载视频 - b站：成功下载并正常查看✅️ - YouTube：成功下载并正常查看✅️ - TikTok：解析失败，未达到资格线❌️ - 小红书：成功下载并正常查看✅️ - 抖音：解析失败，未达到资格线❌️ **3）实际用到的Skill** frontend-design **4）存在问题** 1. 视频封面缩略图未显示 2. TikTok和抖音解析失败 ## bug修复 ``` 1. 视频的信息正常解析，但是视频封面并没有展示出来 2. TikTok和抖音解析失败，请你查找原因并修复 ``` 原因：b站视频缩略图有Referer防盗链、抖音需要用户的Cookie  视频封面缩略图未显示问题，修复成功✅️  但是只有缩略图问题修复成功，抖音和TikTok依然解析失败，把报错信息贴给AI ``` 1. 抖音解析依然失败: ERROR: Unsupported URL: https://www.douyin.com/jingxuan?modal_id=xxx（https://www.douyin.com/jingxuan?modal_id=xxx、https://www.douyin.com/video/xxx） 2. TikTok依然解析失败: sequence item 0: expected str instance, NoneType found（https://www.tiktok.com/@axxx037/video/xxx?is_from_webapp=1&sender_device=pc） ```  当前TikTok解析下载功能已经正常✅️，但缩略图未显示❌️；对于抖音，不能让用户自己提供cookie，不然网站设计初衷的便捷性就没了，继续修复 ``` 1. TikTok的缩略图也没有展示 2. 对于抖音，不能让用户自己提供 Cookie，你可以再通过网络搜索或开源项目找到方案 ```  TikTok缩略图修复成功✅，但貌似是用的Playwright解决视频解析问题，这样内存占用高，解析速度慢，应该寻找更优质的方案 ``` 1. 你是不是用了Playwright 浏览器，但我不认可这种方法，你需要寻找其他方法，可以去github开源社区去查找解决方案 2. 请你仔细分析并提出自己的方案，然后我人工确认，我批准后再进行开发 ``` ️调用mcp进行查找  最终方案如下，我有预感，这次能成！  然后让AI根据新方案进行更改优化  经过漫长的等待~  已经执行完编码工作并完成自动化测试  自动化测试？我不信，我自己来测测  你别说，这次还真成了，可以正常解析与下载！✅️要是让我古法编程，找开源项目、设计方案、执行编码、测试bug，给我一下午也不够啊，就是缩略图还有点毛病，继续继续，写提示词（温馨提示：你的上下文可能已经快爆了，及时总结或者开新窗口） ``` 1. 现在对于抖音视频的解析已经完美实现，但还有一点不足，就是缩略图未显示，你需要修复一下 2. 上一版方案的Playwright 浏览器你是不是给我下载到本地了，检查一下删除没有 ``` 完成两个任务，心想，这么简单的需求肯定能过，毕竟前两个相同需求都是一遍过的  满怀信心进行测试，我靠，翻车了，还是没显示  那就继续吧…… 不过话说，首次开发的时候他自动调用了chrome-devtools这个MCP工具进行自主截图测试，这几次怎么没自动测试一下，那我就来指定一下吧，先/compact总结一下下，腾出点上下文  ``` 1. 现在抖音视频的缩略图依然没有修复好，请你继续进行修复 2. 修复完成后你需要自主截图测试，确保缩略图真正能显示出来 ``` AI给我的回答是：截图并修复了；经过我手动测试后，success！完美！   至此，核心功能已经全部通过 - b站：解析并下载✅️️ - YouTube：解析并下载✅️ - TikTok：解析并下载✅️ - 小红书：解析并下载✅️ - 抖音：解析并下载✅ ## 开发视频总结功能 ``` 你是一位专业的全栈开发工程师，正在开发《视频下载总结器项目》，请你根据需求，进行方案的设计、人工确认、分步骤开发、自主测试验证、最后找我验收。 ## 当前完成度 目前已经完成了核心的视频下载功能，现在要做更多的功能扩展，你必须根据我已有的文档和代码进行完整地分析，确保理解了项目当前的细节，才能进行后续的工作。 ## 现阶段需求 调用AI进行视频内容的总结（可根据弹幕等途径总结），以便于让使用者在不观看长篇视频的情况下大致了解视频的内容，节约时间 ## 当前任务 你需要帮我进行竞品调研、方案设计、开发实现 ## 注意事项 1）如果你有任何不明确的内容，一定要找我人工确认，才能进行下一步的动作 ``` 调研完成，开始进行方案设计  这里是AI询问我们的四个选项  最终得到了一份实现计划：  现在所有步骤都已经明确了，开始开发。注意要跟AI显式说一声使用context7获取最新文档，防止AI使用过时的代码亦或者AI没有自动调用这个工具 ``` 1）你必须通过 Context7 和联网搜索确保你获取到了最新的技术文档，不要使用过时的代码 2）注意不要影响到已有的功能，只新增代码，而不修改代码（开闭原则） 开始开发！ ```  自主测试，api+浏览器   接下来配置.env文件进行AI总结测试  选择智谱的免费模型，重新启动。但还是执行AI总结时报错了  此时上下文已经用的差不多了，直接新开一个会话 ``` 你是一位专业的全栈开发者，正在开发《视频下载总结器项目》，现在你正在开发AI总结功能 ## 现阶段需求 调用AI进行视频内容的总结（可根据弹幕等途径总结），以便于让使用者在不观看长篇视频的情况下大致了解视频的内容，节约时间 ## 当前任务 你已经完成了功能的开发，但当我填入apikey后进行验证时，提示 INFO: 127.0.0.1:54283 - "POST /api/ai/summarize HTTP/1.1" 404 Not Found 你需要修复这个问题，并自主测试 ## 我提供给你的资料 1）@项目代码 2）@视频总结功能设计文档 ## 注意事项 1）如果你有任何不明确的内容，一定要找我人工确认，才能进行下一步的动作 ```  让我手动验收一下  功能是OK的，但是位置放到了页面底部，属实有点奇特，把问题和预期结果抛给AI继续进行修复 ``` 1. 现在功能正常运行了，但是为什么没有上传/解析视频时，AI总结按钮就不展示？ 2. AI总结这个按钮现在是在页面底部，这很不符合用户习惯，你应该放到页面中部或更好的位置，重点是让用户知道有这个功能！ ``` 修复完毕，我觉得效果还可以吧  但是，我又发现一个问题，这思维导图属实有点抽象了  ``` 1）现在AI总结功能已经可用，但是有一点不足，就是思维导图部分有点抽象，你应该使用更简洁明了的方式向用户展示 ``` 修复后的效果如下，可读性提高了，但还是有点AI味，我直接采用最简单粗暴的方式，找了张图让AI按着图中的风格进行更改：  ``` 1）现在思维导图太生硬了，请你参考我提供给你的图片，以后思维导图都按图片中的风格进行生成 2）拓展：给用户增加一个下载选项，可以将思维导图下载到本地 ```  成了！现在这一版就好看多了，但是下载下来有点问题（字体是黑的） ``` 现在可以正常下载，但下载之后为什么字体是黑的，如图 ```  根本原因及修复措施如下：  成功修复，svg和png的字体均正常显示  ## 优化页面布局 ``` 你是一位专业的全栈开发工程师，追求极致完美，正在开发《视频下载总结器项目》，现在请你根据需求，设计方案、人工确认、分步骤开发、自主测试验证、最后找我验收。 ## 项目进度 目前我已经完成了核心的视频下载和AI总结功能，要做更多的功能扩展，你必须根据我已有的文档和代码进行完整地分析，确保理解了项目当前的细节，才能进行后续的工作。 ## 需求 目前的排版是，视频信息，AI总结两个模块竖直排列的，你应该将他们改为水平排列，比如左边是视频解析部分，右边是AI总结部分（可以参考我给你的图片） ## 往期素材 @项目文档 @当前项目源码 ## 当前任务 你需要进行方案设计、开发实现 ## 注意事项 1）如果你有任何不明确的内容，一定要找我人工确认，才能进行下一步的动作 ```  完美收工！