用AI应用生成器打造个性化课程App实测

如果只需输入一个主题，AI就能自动为你生成一套包含图文、图表和测验的个性化课程，会是什么体验？一位开发者在YouTube上完整记录了他使用Modelence这一AI应用构建器，从零搭建名为"Wishing"的学习App的全过程，并给出了详细的提示词与踩坑经验。

一个提示词，一个应用雏形

这位开发者的起点非常直接：在Modelence的AI应用构建器中输入第一段提示词，描述应用的功能定位、课程创建流程，以及期望的UI主题。他为自己的版本取名为"Wishing"，并将所有提示词整理成Notion文档放在视频描述区，方便观众跟进复现。

首轮生成后，落地页和仪表盘迅速成型。仪表盘按照要求划分了功能区块，构建器随即提示下一步——课程生成功能。开发者坦言，此时的UI还很基础，但他刻意将视频重点放在功能跑通上，因为打磨设计会让视频长度翻倍。这种"先让功能可用，再谈美观"的思路，对想快速验证想法的人来说颇具参考价值。

Modelence 是一类新兴的 AI 应用构建器（AI App Builder），其核心思路是让用户通过自然语言提示词而非手写代码来生成可运行的全栈 Web 应用。它通常内置了数据库、身份认证、API 路由和前端组件等基础设施，开发者只需描述功能需求，系统便会自动编排页面、数据模型与后端逻辑。本案例中的 "Wishing" 就是一个典型的提示词驱动应用：开发者用多轮提示词逐步叠加功能，构建器负责生成落地页、仪表盘、课程生成流程等模块。这类工具与传统低代码平台的区别在于，它依托大语言模型理解需求意图，生成的是更贴近真实项目结构的代码，同时支持接入外部 API 密钥（如 Anthropic、OpenAI），从而把 AI 能力直接嵌入到应用内部。

课程生成：从主题到22节课

第二轮提示词聚焦于让课程真正具备教学能力。开发者加入了针对性的指令来提升课程质量，随后系统要求填入AI API密钥用于课程生成。他填入了自己的Anthropic密钥并保存。

测试环节选择了"公共演讲"这一主题。点击创建课程后，系统先抛出几个问题用于个性化定制，回答完毕即可点击"构建我的课程"。

结果相当可观：AI生成了6个章节、共22节课的完整课程大纲。设计上有一个关键取舍——课程大纲先生成，但具体课时内容只在用户点开时才实时生成。这既节省了前期生成成本，也避免了用户等待整套课程全部生成。

按需生成（Lazy Generation） 是控制大模型调用成本的关键策略。在本案例中，系统先一次性生成包含 6 个章节、22 节课的课程大纲，但每节课的具体正文只在用户点击打开时才实时调用 AI 生成。这样做的逻辑是：课程大纲结构紧凑、token 消耗低，适合预先生成以提供整体预览；而单节课内容篇幅长、AI 调用昂贵，如果全部预生成，用户可能只看其中几节，造成大量浪费。按需生成把成本分摊到真正被消费的内容上，同时减少了首次创建课程时的等待时间，让用户能更快进入学习界面。这种模式在产品设计中常与缓存机制配合，避免用户重复打开同一课节时反复调用 API。

让课程真正"能学"的三个迭代

初版课程上线后，开发者立刻发现两个体验问题：仪表盘侧边栏无法折叠，课程页面对齐错位。他把两处修复合并进一条提示词，问题很快解决——侧边栏可以收起，章节堆叠也正常了。

但更大的问题出现在课时内容上。实测发现测验出现频率过高，课时本身也有很大提升空间。于是新一轮提示词同时处理三件事：修正测验频率、为课时提供专门的全屏页面、在真正有帮助的地方插入AI生成图片，并指定统一的图片风格。这一步需要使用OpenAI API密钥进行图像生成，开发者在变量配置中填入密钥，同时将图像生成模型切换为OpenAI最新的版本。

改进后的效果明显：课时内嵌入了AI生成的图片，学习体验大幅提升。

API 密钥配置 是这类 AI 构建器接入第三方模型服务时的必经环节。案例中出现了两类密钥：Anthropic 密钥用于课程文本生成，OpenAI 密钥用于图像生成。构建器通常提供一个变量配置面板，让开发者把密钥以环境变量的形式存储，运行时再注入到对应的服务调用中。这样做既避免了密钥硬编码在前端代码里，也方便在不同环境（开发/生产）之间切换。需要注意的是，不同模型服务商的能力侧重点不同：Anthropic 的 Claude 系列擅长长文本理解与结构化输出，适合生成课程大纲和课时正文；OpenAI 的图像模型则在插画生成上更成熟。开发者需要根据功能模块分别配置和切换对应密钥，这也是此类应用部署前必须仔细核对的一环。

图表、提问与部署上线

有些知识点用文字说不清，用图一看就懂。开发者接着为课时加入了画布图表功能。实测新课时，系统成功生成了canvas图表。

最后一项核心功能是"边学边问"：用户阅读课时可以随时向AI提问，而应用会收集这些问题，用于个性化后续课程和未来课时的内容。提问按钮就绪后，构建器建议加入课后测验，开发者顺势完成。再补上课程删除功能，整个应用的核心闭环基本完整。

接下来是发布。点击发布按钮，选择实例和区域，再点一次发布，应用就上线在了专属URL上。

成本与启示

整个应用从零到上线，全程花费不到20美元——这还不包括开发者自己投入的时间。对于想快速验证产品想法、又不想组队写代码的独立开发者来说，这种"提示词驱动"的构建路径确实降低了门槛。

几点值得注意的经验：把复杂功能拆成多轮提示词逐步迭代，比一次性描述所有需求更有效；在功能跑通前不必过度纠结UI细节；善用按需生成（如课时内容懒加载）来控制API成本。当然，这种方法也依赖构建器本身的抽象能力，以及对各类API密钥的配置管理。当构建工具把"写代码"变成"写需求"，真正稀缺的就成了对产品体验的准确判断。

Canvas 图表 指的是基于 HTML5 <canvas> 元素绘制的动态图形，它允许应用在浏览器中实时渲染折线图、柱状图、流程图等可视化内容。与静态图片不同，canvas 图表可以由 AI 根据知识点数据即时生成，适合表达趋势、对比和关系等文字难以描述清楚的内容。在本案例中，开发者让 AI 在课时中按需插入 canvas 图表，使抽象概念可视化。实现上，构建器通常将绘图指令转换为标准图表库（如 Chart.js）的配置，再渲染到 canvas 上。这种方案的优势是轻量、无需服务端出图，但需要 AI 能够正确理解数据结构并输出合法的图表配置，否则容易出现图形错乱或空白的情况。