小白 Vibe Coding 發行全平臺&可變現應用指南

Tip

Youware 更新的 Youbase 和 Coview 能力非常牛皮，直接把 Vibe Coding 門檻拉低一萬倍。

主要介紹我用 Youware 開發的 AI 日記軟件，并以這個為例教大家使用 Youware 最近上線的 Coview 和 YouBase 能力構建具體完整能力和可變現的應用。

前段時間看到了馬伯庸說自己重新開始寫日記了，還分享了自己的日記方式。

我發現他寫日記的方式跟 Karpathy 分享的筆記方式很像。

都是 Append-only 模式，只記錄事實，不打標簽、不分類，摩擦很低，可以極大的提高記錄的積極性。

我發現這種單文件的記錄方式其實非常適合 AI 時代：

只有一個文件、只有事實導致即使一年的記錄也只有幾萬字，都達不到常見模型上下文長度。

可以方便的把一整年的日記拿給 AI 分析，相當于屬于你自己的 ChatGPT 記憶，任何模型都能用。

剛好那幾天 Youware 上線了 YouBase 的 AI 后端和數據庫服務。

我就在想能不能做一個踐行這種日記方式的應用，給我自己用。

沒想到真的搞了一個全平臺的完整產品 Vibe Diary（diary.guizang.ai）出來，也給一些朋友發了邀請碼。

很多朋友現在還在用，沒想到粘性這么高。

介紹一下我用 Youware Vibe Coding 的這個日記產品，順便看一下 Youware 能力有多強大：

全平臺可用：在 ios、安卓手機上也能獲得類似原生應用的體驗，也能在 Mac 和 Windows 獨立窗口打開；

AI 標簽系統：推薦用語音輸入，保存的時候 AI 會自動分析內容為單條日記添加標簽；

Todo 模式支持：AI 自動判斷日記內容是否為待辦事項，完成消失簡潔克制；

精細打磨的設計：藏師傅的設計系統，采用莫蘭迪色系，每天日記卡片顏色都不同；

全能檢索：支持關鍵字、日期、標簽檢索，精準找到你想要找的內容；

Markdown 導出：將所有的日記導出為單個 Markdown 文件，方便與任何頂尖模型交互。

登錄注冊和邀請碼：支持用戶自己注冊登錄，支持邀請碼發放和核銷能力。

有了內置的后端服務和數據庫之后 Youware 已經可以通過 Vibe Coding構建真正可以分發和賺錢的產品了。

今天的內容就用我這個例子教大家如何用 Youware 構建類似全平臺分發和可以變現的產品。

創建項目大家應該都很熟悉了，我以前都介紹過。

點擊側邊欄的 Create 按鈕，將輸入框左邊的模式切換為 Code

右側選擇自己喜歡的模型，模型選擇這里。

我在生成第一個版本和具體邏輯的時候會用 Sonnet4.5 ，一旦構建完成優化樣式的時候我會切換為 Gemini 3 Pro。

后面就很簡單了，提出你的需求，我的建議是先構建最核心的鏈路。

比如我這里會先讓他創建一個日記軟件，這里的核心設計是：

• 用戶在輸入日記之后需要保存一份原始的文本內容

• 另一部分用 AI 模型分析日記然后為日記內容打標簽，標簽內容是時間、地點、人物等。

這里如果有 YouBase 的后端搞定的話就需要新建兩個表來存儲。

一部分是原文，另一個是原文和對應的標簽。

導出的時候從原文的表讀取信息，顯示的時候用帶標簽的表。

你在跟他說完之后他就會識別到你要使用 YouBase 的需求，要求你點擊一個按鈕開通。

開通之后他就會自己完成數據庫的創建和存儲的能力。

你可以在右側預覽位置上方的云朵圖標里面找到新建的數據庫。

這里的 Diary_entries 就是用戶的日記原文，Diary_tags 就是標簽。

接下來，我們說一下 AI 功能的添加，這個也是 Youbase 的特色能力，解決了 Vibe Coding 很大的一個問題。

以前我們有自己的 AI API 的時候沒有后端，就只能把 API Key 存在前端這個很危險。

YouBase 里面有一個位置（Secrsts）可以專門貯存你的各種 API ，杜絕泄露風險。

比如我這里要添加 AI 分析日記內容的能力的話。

你就跟他說“用戶創建日記后需要調用 openrouter 的 XX 模型分析內容并且創建日期、地點、人物等標簽”

他就會自己查詢應該如何添加 openrouter 的模型，你也可以把文檔給他。

等到他完成之后，他就會在左邊的聊天框往你要對應的 API Key，你直接填寫就行，非常簡單。

填寫之后他會存在剛才說的 YouBase 里面的 Secrsts 里。

基本能力搞定之后，我們就需要修改 UI 了，這時候經常需要頻繁的調整。

模型不可能非常清楚的了解你自然語言描述的位置和修改方式，很多朋友也不知道該如何描述。

Youware 上線了一個非常牛皮的能力 Coview。

你點擊之后他會開啟錄屏，你可以邊說話邊用鼠標指著需要修改或者新增功能的位置。

結束之后模型會按照你的要求修改，解決了很多小白不會描述位置和問題的問題。

可以看上面這個演示，點擊輸入右下角的那個圓點錄制按鈕，開始錄制說出要求后結束錄制。

Youware 會分析你的視頻內容和音頻內容，之后整理需求變成專業術語描述給模型讓他修改。

關于 UI 修改教大家一個方式，可以讓他幫你創建美觀且一致的 UI。

你可以找一個跟你要做的產品相似的產品截圖或者設計稿。

發給 Youware，然后說“分析這個設計稿，提取其中的設計元素，變成設計 Token 以及組件設計，為平臺上的所有設計應用修改，后續修改也基于這套組件和設計樣式?！?/p>

接下來我們就需要添加登錄系統和邀請碼系統了。

這個也是 YouBase 自帶的功能，你可以跟他說：

為我這個項目添加登錄注冊系統，并且創建邀請碼系統，邀請碼單獨存在一個數據表里面，沒有核驗過邀請碼的禁止登錄。

然后他就會為你創建一個登錄和注冊頁面，登錄后會需要先輸入邀請碼，沒有的話無法看到項目首頁。

你可以在 YouBase 頁面的 Users 位置看到你的用戶和管理用戶。

當然 YouBase 甚至支持幫你創建谷歌登錄服務，只需要在上面 Users 右上角點擊 Auth Settings 。

進去之后選擇谷歌登錄，就可以看到谷歌登錄需要進行的設置，開啟后按照指引視頻設置就行。

當然你也可以在數據庫頁面看到了一個新增的表 invitation_codes。

這里面儲存這系統剛才生成的邀請碼以及邀請碼的使用情況，你可以在這里管理和復制邀請碼。

接下來，我們就可以聊聊我說的全平臺這個詞了，我用了一種取巧的方式教 PWA 應用。

Note

Gemini 對于 PWA 應用的解釋：

PWA (Progressive Web App) 本質上就是一個“進化版”的網站，它擁有類似手機 App 的體驗，但不需要去應用商店下載。

你可以直接通過瀏覽器訪問它，又能把它像 App 一樣添加到手機桌面，甚至在沒網（離線）的時候也能打開使用，還能接收消息通知；簡單來說，它兼具了網頁的“免安裝、隨點隨用”和原生 App 的“流暢、功能豐富”兩大優點。

如果你的網頁被打包成了 PWA 應用，用戶就可以直接講網站安裝到他的電腦或者手機桌面，有獨立的圖標，并且可以獨立窗口運行，甚至斷網也能用。

我就是通過這個方式將 Vibe Diary 變成了全平臺應用。

那怎么搞呢，你直接跟 Youware 說“將這個網頁打包成 PWA 應用，并且做好移動端適配”就行。

最后我們就說到變現這個部分了，Youware 現在可以很方便的幫你集成 Stripe 這種支付服務商。

你只需要設計好你的付費體系以及做好 Stripe 要求的合規頁面，比如隱私協議等。

然后跟 Youware 說幫我集成 Stripe 的支付服務就行，他會在集成完畢的時候讓你填寫你的 Stripe Token。

你填寫完以后也會存在 Secrsts 里面。

分發的另一個部分就是獨立域名了。

以前你的項目只能用 Youware 的域名非常不利于分發，也不好建立信任感。

尤其是當產品做的話。

現在Youware 已經可以綁定自己的域名了，點擊右上角的“update”或者你如果第一次發布的話按鈕名字不是這個。

然后在彈窗的 Domain 位置點擊那個箭頭，在新開的窗口點擊“add Domain”按鈕。

你輸入自己想要綁定的域名，他會出現幾個參數，你只需要去你的域名服務商添加這這幾個參數就好。

如果找不到你域名服務商的添加位置的話可以在左邊開啟 Chat 模式問問 Youware 他會告訴你。

到現在你基本上已經搞定了創建一個可以正式發布的產品所有的內容了。

我過去半年一直在說隨著模型代碼能力的提升。

AI Coding 的基建一定是一個非常重要的事情，一旦解決就可以大幅降低 Coding 成本。

也可以為 AI Coding 產品創造新的利潤增長點和產品壁壘。

Youware 這次直接整了一套專門為編碼 Agent 服務的后端和數據庫基建。

直接讓最普通的用戶創建完整可發行的產品成為可能。

而且在修改和描述上降低用戶認知操作成本他們也做了很多事情。

比如自動修復，修復不扣積分以及最新上線的 Coview。

如果你一直想做一個產品，已經構思了很久，苦于實在不懂編碼知識的話可以來 Youware 試試。

覺得今天的內容不錯的話，歡迎點贊或者點喜歡，也可以在評論區提出你的使用問題，我看到就會回復。