AI编程学习笔记|字幕生成小工具初体验

从零学 AI 编程，边实操边分享～今天就用 Trae 上手做一款字幕生成小工具，全程没有复杂理论，借助 AI 帮忙复刻产品、生成 PRD 文档，省去手动写需求、画原型的繁琐步骤，零基础也能轻松入门✨👇

一开始我先装了 Trae 国际版，折腾了好一会儿，发现用来辅助复刻产品、生成 PRD 的多模态模型适配度也不是很好。果断换成 Trae 国内版试试看。

                                 （木有豆包的国际版）

花了十几分钟下载、安装、整套配置走完，直接收获大惊喜！Trae 国内版目前永久免费，还自带豆包 Doubao-Seed-1.8等模型，有强大图片理解能力。可以直接识别产品截图里的 UI 布局、页面结构和功能逻辑，完美匹配我复刻产品、自动生成 PRD 的需求。

这里特意跟大家说明一点：👉 这个多模态模型只用来辅助写 PRD、做产品复刻👉 真正开发字幕生成工具本身，完全不用对接任何大模型

接下来就按标准流程一步步实操👇上传参考产品截图，给 Trae 写好清晰的需求提示词，把工具要实现的功能一条条交代清楚：图片上传、自定义输入字幕、字体样式调整、一键导出图片…… 全部罗列到位。

让 AI 自动生成一份完整又专业的 PRD 文档，包含功能需求清单、界面元素详细说明。不用自己费脑梳理逻辑，这就是多模态模型最大的优势：快速把一张视觉参考图，直接转化成结构化的专业产品需求。

有了成型的 PRD 文档，后续开发瞬间顺畅很多。全程纯前端开发，不需要调用任何大模型接口。直接让 Trae 根据 PRD 自动生成 HTML、CSS、JS 代码，落地字幕生成所有核心功能。

但测试页面的时候，又开始踩坑了😭不管怎么补充描述、反复调整设置，模型对产品逻辑总有理解偏差。时不时冒出各种小 bug：字幕无法正常叠加、图片上传失败……来回微调好几次，始终没能彻底解决。

索性不跟 bug 死磕了，直接新开一个项目。😂

重新走一遍完整流程：上传参考图→生成 PRD→代码开发→页面测试没想到之前怎么都解决不了的顽固小 bug，居然全部自动消失了。

工具基础功能稳定成型后，我又顺手做了细节优化升级。在原版基础上，额外增加了：✅ 预览图放大缩小自由调节✅ 全局响应式布局适配

手机、电脑打开都能完美适配，颜值和实用性直接拉满。

本以为这下可以圆满收工，跑完导出流程又发现新问题：导出后的图片画面模糊、排版错位，又是一处小麻烦。

只能耐着性子一点点排查代码、逐行调试，前后反复测试两轮，总算把导出异常的问题彻底修复。

到这里，我的字幕生成小工具终于圆满完工🎉全程纯前端实操开发，工具本身不连接任何 AI 大模型。只是借助大模型辅助做产品复刻和 PRD 编写，新手完全能照着复刻。

一路踩坑不断，但每攻克一个 bug，就悄悄解锁一个新知识点。这种一边实操、一边慢慢开窍的学习感觉，真的太舒服了～

💡 小知识点碎碎念

⭐ 1. 字幕生成工具核心纯前端就能独立开发，新手零压力上手。重点实现图片上传、字幕编辑、图片导出三大功能就够用。

⭐ 2. Trae 版本国内版暂时免费，内置豆包多模态模型带图片理解，更适合本土化学习，复刻产品、生成 PRD 超省心。

⭐ 3. 多模态复刻关键一定要选支持图片理解的大模型，不然没法通过产品截图分析功能逻辑、自动出 PRD，能省下大把手动整理需求的时间。

⭐ 4. 顽固 Bug 解决小技巧遇到怎么调都修不好的小问题，别死磕硬熬。试着重启项目、更换参考素材，有时候换个思路，难题自然就解开了。

⭐ 5. 开发优化加分项做完基础功能别急着收尾，可以加上预览缩放、响应式布局这类小细节，既提升使用体验，也能悄悄练手攒开发经验。

后续会持续更新更多 AI 编程进阶实操案例，和大家一起慢慢摸索、稳步成长，解锁更多简单又好用的 AI 小工具～💪