「计算机设计大赛」AI互动微课开发日志·第1篇:需求拆解——从“拍脑袋”到“能落地”

作为大一新生，我们今年有幸参加了大学生计算机设计大赛。从初始的思路空白到与 AI 技术的创意碰撞，我们逐步梳理框架、明确分工。在 AI 工具的辅助下，团队先搭建系统架构、完善整体设计，再逐个攻克功能开发，让作品从雏形走向迭代优化。这份努力最终助力我们斩获省赛一等奖，如今正全力备赛国赛。

（图片来源：微课网站截图）

我们的AI交互式微课以网站形式呈现，包含三大核心模块：微课视频资源、配套的 Coze 智能体 系统，以及习题与互动程序。在技术实现上，融合了 JS+Flask 建站开发、网页交互程序设计；通过提示词工程，工作流与知识库设计，搭建 Coze 智能体；微课视频制作则涵盖脚本设计、文生图、图生视频、语音合成与微调、视频剪辑等环节 —— 整个创作过程深度依托 AI 大模型的技术辅助。

（图片来源：使用大模型绘制的SVG图）

一路走来，我们在技术探索中遇过诸多挑战，也积累了宝贵经验。接下来将通过系列博文，完整复盘从构思到落地的全过程，既是对学习成长的记录，也希望为后面参赛的同学提供参考。

第一步：用AI扒拉用户痛点

我们是新能源汽车专业的学生，对汽车和自动驾驶比较熟悉，也比较感兴趣，所以主题大家很快达成一致：做一个关于智能驾驶原理科普的微课，但是如何能让人眼前一亮，记忆深刻，我们小组讨论了很久，只写出 “做一个学生喜欢的微课” 这种正确的废话。这时候，我们想到了和大模型进行思维碰撞，使用简单明确的prompt：

「我要做一个面向大学生的AI智能驾驶微课网站，用户可能有哪些痛点？请用「场景+痛点」的格式输出，至少10条。」

AI秒回的结果里，这几条直接戳中我：

「微课内容」：一本正经的讲课视频太无聊，一看就犯困；找不到视频的重点。

「掌握情况」：微课视频看完一般没有配套习题，不知道自己掌握了没有天。

「答疑场景」：看微课的时候有想问的问题，但无处可问，等上课的时候又忘了想问的问题。

这些真实场景成了我后续功能设计的指南针。比如后来在 index.html里加的「学习进度」模块（显示视频进度和问答正确率），就是为了解决「刷课怕漏重点」的痛点。

第二步：画「功能优先级矩阵」

有了20+条用户需求，我用Notion做了个 四象限矩阵（横轴：用户价值，纵轴：开发难度）：

（图片来源：使用大模型绘制的SVG图）

必须现在做：视频播放（用户要看课）、课前问答（拉互动）、智能体对话（差异化功能）

可以缓缓做：协作学习（需要后端用户系统，开发量大）、错题统计（依赖数据统计模块）

直接放弃：VR场景模拟（需要3D建模，超出我们的技术范围）

这里有个小插曲：我本来想加弹幕功能，但AI提醒我弹幕可能干扰注意力，查了下同类产品数据（比如中国大学MOOC），发现弹幕在微课中确实几乎不会使用，果断把它丢进暂时不做区。

第三步：技术选型初筛

需求明确后，技术选型就像「给不同的菜配锅」：

后端：Django vs Flask？ 查了下，Django自带ORM和管理后台，但我只需要简单的路由和API（比如保存学习进度到student_data.json），Flask更轻量（看 app.py里的代码，导入的库比Django少一半）。

（图片来源：使用大模型绘制的SVG图）

前端：Vue.js vs 纯JS？ 虽然Vue能减少DOM操作，但我对它不熟，而项目里的模态框（index.html里的课前问答）和智能体对话面板用原生JS+少量JQuery就能搞定，开发效率更高。

（图片来源：使用大模型绘制的SVG图）

数据存储：数据库vs JSON文件？ 考虑到用户量小（初期只有同专业几十人测试），用data/student_data.json+线程锁（ app.py 里的data_lock）比搭MySQL更简单，还能避免数据库配置的坑。

踩坑预警：需求文档≠一次性文件

写完需求文档后，我以为可以直接开写代码了，结果被导师提醒：需求文档是动态的！ 后来我在Notion里建了个需求变更日志，比如测试时发现视频加载太慢，就新增了视频预加载需求；用户反馈「智能体对话回复太长」，就加了折叠长文本功能。

下一篇将会进入正式的网站开发流程——从app.py 的第一行import flask开始，看如何用100行代码搭起网站骨架，顺便聊聊「PyInstaller打包时把静态文件搞丢」的血泪史～

欢迎大家点击页面最下方的【阅读原文】，访问我们的AI互动微课作品，也欢迎大家在网站的”评价反馈“页面中，为我们留下您的宝贵建议。PS：作品的移动端适配正在进行中，建议使用电脑观看。服务器为测试用，可能会出现卡顿。