嗨大家好！我是阿真！

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，歡迎評論區一起交流你的體驗。如果覺得內容有用有趣，也歡迎猛猛三連?鼓勵阿真。

下期見~