ColaOS制作世界杯答题H5，附H5制作教程分享！

嗨大家好！我是阿真！

ColaOS 内测的时候我就已经在使用了，一直想给大家分享，但是因为懒惰又拖到了现在。ColaOS 是橘子老师@AGENT橘团队用心打磨的产品，橘子老师也是我公众号刚起号的时候最早转载和支持鼓励我的大佬呜呜呜，发自内心感激。

正好最近用 ColaOS 这个 AI Agent 操作系统完成了一个真实的项目，我让她做了一个世界杯的答题 H5。全程包括图片生成视频生成题库制作网页制作以及部署都是她完成的，下面是答题录屏效果。后面的就不放了，不能透题

项目在下面，可以复制到微信对话框点击访问。

欢迎大家分享你的得分哈哈哈<(￣▽￣)/

• 1

irenerachel.github.io/worldcup-quiz

最终这个 H5 有开场动画、背景音乐、 20 道世界杯题目、答对答错反馈、结果页、分享海报，还能保存图片和分享链接。是一个可以打开、可以玩、可以继续修改的小项目。虽然我做得比较粗糙，提示词全程都没有做任何调整，都是 Cola 自行完成的，但大家也可以看见，完整的雏形是有了的。

如果你也有想要做这种 H5 的想法，那么可以继续往下看看。

世界杯球迷挑战H5

这个 H5 叫“世界杯球迷挑战”。

玩法很简单：用户打开链接后，先看到一个卡通世界杯风格的首页，点击开始挑战后进入 20 道单选题。题目覆盖世界杯历史、经典球员、2026 世界杯热点和一些轻松趣闻。

答完以后，系统会根据分数生成球迷称号，比如足球萌新、路人球迷、资深球迷、世界杯活字典。你可以保存和分享你的答题战报图。

这里可以简单介绍几个完成点，也是我最开始就想好的需要的元素。

1. 首页有卡通 IP、足球贴纸和开场踢球视频。 2. 答题页有进度条、题卡、四个选项和即时反馈。 3. 答对答错提示使用透明底贴纸，并且弹窗会给出答案和细节，让大家对于本次和往期世界杯的一些小知识有所了解。 4. 结果页会自动生成分享海报。

用 AI Agent 做 H5，最重要的是先把项目拆清楚。因为你如果只说“帮我做一个世界杯答题 H5”，她可能能生成一个页面，但后面很容易变成一团乱。

实际上，我最开始也没有特别清楚自己想要的内容和整个路径，我就是把自己想到的事情全部梳理完，然后输出给她。

我的流程主要有下面五步。这个是使用 AI 工具制作 H5 基础的流程，如果还希望更好看或者更多交互细节等等，可以在前面和后面增加一些设计细节和交互细节的优化，比如给参考图、调用 SKill 和 MCP 等等。

把想法变成产品规划

首先我把我的想法全部梳理出来，然后把我想到的一些点去告诉她我要做什么。

首先，我要做什么？我要做一个基于世界杯的手机端 H5 问答网页。我们要明确这些页面里哪里有哪些效果；题目是怎样的，包含哪些方向；最后答完题会是怎样的流程，以及会给我一个什么样的产出。

在这轮过后，Cola 把产品规划文档搭了一个初步的框架出来。接着她问了我几个问题，开场动画喜欢什么风格？配色喜欢什么样的，或者是偏我自己的调性？需不需要音效？要不要放二维码之类的。

这里有一点非常有趣，关于“偏我自己的调性”，如果大家之前已经和她聊了很多，她是有记忆的。比如说，假如我很喜欢简约一点的，或者我喜欢手绘风格，那么她说“偏我自己的调性”时，就会直接按照我之前喜欢的风格来做。因为她有非常棒的上下文记忆功能。

最后她把项目拆成了一个比较清楚的产品流程。我就在她的提问后续，继续进行了我的偏好和细节的补充。

她也基于我的偏好修改了产品规划文档，并在后端方案中给了我轻后端的建议。

同时，她也留好了两个后路：如果后续需要做排行榜或者分数提交包，也可以再补上。此外，她还跟我确认了题库的状态。

开工前准备清单

在完全准备让她制作之前，我考虑了一下，肯定还会有一些素材和内容是需要准备的。但我之前什么也没有准备，所以我又询问了她一遍开工前准备清单。我想着如果是她能够完成的东西，我就都不用自己准备了。

这个是清单的文档，包括了：文件的结构、文案清单、音频规划、素材的分工等等。

题库制作

上一步确认以后，接下来就可以让 Cola 帮我准备题库了。这里我会给到她一些要求，并且让她输出两份文件。

点击预览题库文档

就这样，正式题库和解析内容也都有了。我确认以后，就可以进行下一步了。然后 Cola 向我确认了关于视觉方向的内容。

小 Cola 真的是一个非常有人情味的产品。关于她的“心迹”那个功能，我后续再讲。也可以看到，在有的对话中，她会有一个像碎碎念一样的话，让我觉得做这件事情好像是有人在跟我一起互动，很有意思。大家看我前面的对话里面也有的。

图片资产方案

上一轮结束以后，接下来就可以让她为我整理图片资产的方案了。

我希望有的地方用的是 HTML 直接生成，有的地方可以去设计，通过使用一些图片素材，让视觉看起来更加有人情味，而不仅是那种纯 Vibe Coding 味的界面。这里要生成的图片，我希望调用我的 LibTV 的 Skill，然后使用 Image 的图片模型去完成。

小 Cola 还有一个很不错的地方，是她不只停在网页代码，她自己本身还可以生成图片和视频，接外部 CLI也是妥妥的。不过我的LibTV 这个月积分要花不完了，这里就调用 LibTV CLI 来完成视频制作、贴纸生成、素材处理，再把生成结果接回 H5 项目里。

我这里有一件事情，我觉得我做得是有问题的。关于方案 A、B、C 的视觉方案，我应该要在上一轮就进行确认，而不是在这一轮让她再给我三个选择。这样的话，每一个方案她都要多去生成两个。大家如果自己做的话，也可以注意一点：在最开始她给方案的时候，我们直接去选择指定方案，然后再推进下一轮。

这里我本来要说 LibTV 的，但是可能我的语音识别出了问题，不过她还是理解了。

LibTV CLI Skill 的安装也非常简单，就像这样就可以

• 1

请帮我安装 LibTV CLI Skill：https://liblibai-web-static.liblib.cloud/cli/1.0.2/libtv-cli-skill.zip

接下来，她会调用我接入的 LibTV 的 Skill 去完成所有的图片和视频的生成。包括我在最开始就想说的，想要在开场的时候有一个踢球的视频，然后通过黑屏转场。这个视频已经生成好了，放在文件夹里了。

这里还有一个问题，那就是 LibTV 生成的初版图片上面，都加了 AI 生成的水印和品牌的水印。我就随口问了一句，能不能把这两个水印都关掉，结果她自己去找了相关的信息，然后把所有视频元素的水印都去掉了。

关于这一点，我也有了一点小小的经验，有的好奇或者说我们不会解决的问题，随口问一问，很可能这些智能助理可能就能解决了，比自己不断地去找各种工具或者答案要方便多了。

生成网页与部署

接下来我就让她直接基于我前面所有的题库和素材去制作网页，再把素材放进网页中，给我最终版。

小 Cola 办事也是井井有条的，把素材放进去，动效也做了一些，同时把部署也都完成了。

接下来就是基于我看到的网页预览，去进行一些细节上的微调了。

还有一个地方也挺有意思，她直接多了一个按钮，可以让我直接把这个项目部署到 GitHub Pages。

再加上音效也行，这里如果接个 API 自己生成 BGM 和音效也可以。

小 Cola 还挺有人味的一点是她还会和我抱怨。比如我之前尝试更换另一个字体，让她去找这个字体，她就去打开浏览器网页一个一个找。然后我发现在她打开网页的时候跟她说这个字体我本地有，她就抱怨了一句，还挺有意思的哎嘿。

先跑通了，再打磨。细节有不满意的地方还可以继续调整，调整到自己觉得满意就好了。

事实上，我们去做这类小项目，很可能也没那么容易就一蹴而就。我们需要给清楚反馈，让 ColaOS 把反馈落到具体文件、素材和页面里面。

ColaOS 是什么

ColaOS 官方对自己的定位，是一个住在电脑里的 AI Agent 操作系统。

这次体验里，我能明显感觉到 ColaOS 更像一个项目型 Agent。她不是普通那种“你问我答”就结束工作的 Agent，而是会围绕一个目标去进行持续的工作推进，并且交付我们需要的结果。

她在这个项目里承担了多种角色：

产品助理，帮我把模糊想法拆成产品流程和功能模块。

前端开发，写 HTML、CSS、JS，处理页面状态、答题逻辑、海报、保存分享这些细节。

素材协调，可以接住图片、视频、贴纸、字体这些文件处理需求。

能持续理解偏好的搭档。比如我说“太挤了”“不好看”“不要二维码”“增加边距”，她能继续沿着同一个项目往下改，稳稳执行。

情绪价值是锦上添花，把工作流往前推进，把事办成这一点，才是我最欣赏她的地方。

ColaOS 强调几个方向：

1. 长期理解用户，而不用每次都重新认识。

2. 跨应用、跨文件、跨工具推进任务。

3. 把 Agent 从聊天框推进到真实电脑工作流里。

4. 通过不同 Mod 进入不同工作状态。右上角是可以切换模组的。后续还会有 Mod 社区，定制能力和界面。

其实我这个小项目用 Vibe ColaOS 也可以，但是我在这个界面同样可以完成。我很喜欢这个界面那种不吃压力，通过对话去梳理然后直接完成小任务的那种心流一般的体验。

除了右边的功能切换以外，左边这里也有几个功能：

交付，所有交付的文档可以在这里直接查询到，非常清晰

闹钟，这里可以设置定时任务

下方可以切换主模型，比如我这个确实完全不是什么有难度的任务，全程用 Lite 就完成了。

小结

大家也都能看到，现在一个人做一个小项目，流程正在变短。

以前做一个 H5，要么套丑丑的模板，要么拆给多个职能去完成整个环节的任务。

而现在，我们可以先把想法讲清楚，然后让 Agent 帮我们拆任务、生成文件、接入工具、跑预览，再通过一轮轮的反馈，把东西做出来。

ColaOS 这个产品还很年轻，发布刚满百天不久，她的想法和理念我都很喜欢，她让 AI 不只停在聊天框里，而是进入真实项目流程里，帮我们把事情一点点往前推。

这次世界杯答题 H5，就是我用她跑通的一次小实验。

大家也可以尝试做你自己的 H5，欢迎评论区一起交流你的体验。如果觉得内容有用有趣，也欢迎猛猛三连️鼓励阿真。

下期见~