ai设计小程序

结合课程内容，完全可以做一些课堂互动小游戏，来活跃课堂气氛，寓教于乐！制作这样的小应用也很简单，一切交给Trae！以下是我的完整操作过程：首先右下角选中“DeepSeek-R1”--这一点是本文的基础，因为这个模型的脑回路不一般。然后尝试让AI给你设计一个小游戏。“用HTML来实现”这句话很重要，意味着我们不需要额外的环境配置和安装，一个随时随地都能打开使用的网页小游戏是非常方便的。它很快完成了一个自带得分系统的小游戏，点击代码框右上角的应用就制作了这么一个网页小游戏。找到存放这个网页的文件夹，打开就能使用了。在这个小游戏上，AI很贴心的设计了，每次在回答完成后自动制作新题目。看着这个页面时我想到了，是不是给这个小游戏加个倒计时系统，增加学生的注意力专注度。很简单，告诉AI，让它改即可。一顿操作猛如虎，又是咔咔一通代码生成，又是点击“应用”即可。结果它写错了，打开网页发现压根没有倒计时--很正常，现在AI的能力还没那么强--把错误告诉它，让它自己改就行。（实测这里把模型切换到deepseek-V3成功率会高一些，也可以多换换其他模型来尝试。）这下终于完成了，一个紧张有挑战的倒计时来也：

1.先形成项目需求文档，进一步与composer沟通确认需求细节，并查看对应文档，2.再根据项目需求文档整理对应模块，进行功能设计模块文档设计，包括明确需求，进行UI和技术（前后端实现途径），测试用例，根据AI写的功能设计模块文档，观看确认和完善，你就能大概了解这个项目技术上怎么实现，怎么执行3.然后根据模块任务一点点写代码，并将代码文件和更改记录写道对应代码说明文档，这样有错误你也好查询时哪一个功能对应哪个代码文件，在用上代码注解这个功能，基本上就没啥问题了；尤其是在功能设计技术文档时，一定要自己看一遍清楚一些，而且cursor有一些写的不明确的地方，一定要及时更改；测试用例也必须写上，很重要；在每个功能块及时开发完时候，在用测试用例跑一遍，就会好很多；以及及一旦确认就不要大范围的更改，尤其是我后期在插件文件上直接改成小程序，是完全行不通的；终于，在index.html打开浏览器好像是能跑通的；那我下一步在浏览器中安装上插件，岂不~~就完成了？在电脑的回收箱里还能看到当初做项目一些成型的东西结果，不出意外的，在安装浏览器里；我的心情如图所示：

一开始用cursor生成的小程序非常简陋，就大概如下面所示，我想加点背景元素（天使恶魔图片）去营造一下氛围（os:现在来看还不如原版简陋的呢），然后就用AI生成了一张图片，选了一个画框，天使与恶魔对望的感觉；加了画框之后，就是自适应，让用户有种再画框里面滑动的感觉，同时还要使得字体清晰，所以提需求慢慢调；但由于大模型自身原因，是无法真正理解镶在画里滑动是什么感觉，以及自定义多了可以上下滑动那种感觉；所以我弄了好久，基本上一整页截图就是因为各种出错。。。。。。然后就是意图分析页面，最重要的是信息如何展示，尤其是要使得排版和整体风格更合理；由于大模型确实不能理解由于白色遮罩带来文字展现的影响，以及有没有更好方案去解决；加上本人也不是很懂视觉呈现方案和UI哪些；所以，又是和大模型斗智斗勇。。。。。。这个产品最重要的就是生成海报，尤其是有时候意图分析字数过长，需要字数显示和行数的限制，最重要的是加上小程序码，便于用户去分享，再调整位置和视觉呈现上，大模型又是不咋理解；而且需求稍微没注意，他就把意图分析页面给弄没了，就。。。。。。。一开始参考是claude用svg生成的样式，但老是生成不出来，尤其是大模型理解不了表情这回事本来还有个回复生成页面，但考虑开发难度和token，关键是老麻烦大佬半夜远程操控给我修端口数据库的BUG；还是算了吧，模型的token费用也是个问题，变现也困难；光测个试，啥也没用20块就没了<哭晕在厕所>，