小白 Vibe Coding 發(fā)行全平臺&可變現(xiàn)應(yīng)用指南

Tip

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

主要介紹我用 Youware 開發(fā)的 AI 日記軟件，并以這個為例教大家使用 Youware 最近上線的 Coview 和 YouBase 能力構(gòu)建具體完整能力和可變現(xiàn)的應(yīng)用。

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

我發(fā)現(xiàn)他寫日記的方式跟 Karpathy 分享的筆記方式很像。

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

我發(fā)現(xiàn)這種單文件的記錄方式其實(shí)非常適合 AI 時(shí)代：

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

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

剛好那幾天 Youware 上線了 YouBase 的 AI 后端和數(shù)據(jù)庫服務(wù)。

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

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

很多朋友現(xiàn)在還在用，沒想到粘性這么高。

介紹一下我用 Youware Vibe Coding 的這個日記產(chǎn)品，順便看一下 Youware 能力有多強(qiáng)大：

全平臺可用：在 ios、安卓手機(jī)上也能獲得類似原生應(yīng)用的體驗(yàn)，也能在 Mac 和 Windows 獨(dú)立窗口打開；

AI 標(biāo)簽系統(tǒng)：推薦用語音輸入，保存的時(shí)候 AI 會自動分析內(nèi)容為單條日記添加標(biāo)簽；

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

精細(xì)打磨的設(shè)計(jì)：藏師傅的設(shè)計(jì)系統(tǒng)，采用莫蘭迪色系，每天日記卡片顏色都不同；

全能檢索：支持關(guān)鍵字、日期、標(biāo)簽檢索，精準(zhǔn)找到你想要找的內(nèi)容；

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

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

有了內(nèi)置的后端服務(wù)和數(shù)據(jù)庫之后 Youware 已經(jīng)可以通過 Vibe Coding構(gòu)建真正可以分發(fā)和賺錢的產(chǎn)品了。

今天的內(nèi)容就用我這個例子教大家如何用 Youware 構(gòu)建類似全平臺分發(fā)和可以變現(xiàn)的產(chǎn)品。

創(chuàng)建項(xiàng)目大家應(yīng)該都很熟悉了，我以前都介紹過。

點(diǎn)擊側(cè)邊欄的 Create 按鈕，將輸入框左邊的模式切換為 Code

右側(cè)選擇自己喜歡的模型，模型選擇這里。

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

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

比如我這里會先讓他創(chuàng)建一個日記軟件，這里的核心設(shè)計(jì)是：

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

• 另一部分用 AI 模型分析日記然后為日記內(nèi)容打標(biāo)簽，標(biāo)簽內(nèi)容是時(shí)間、地點(diǎn)、人物等。

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

一部分是原文，另一個是原文和對應(yīng)的標(biāo)簽。

導(dǎo)出的時(shí)候從原文的表讀取信息，顯示的時(shí)候用帶標(biāo)簽的表。

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

開通之后他就會自己完成數(shù)據(jù)庫的創(chuàng)建和存儲的能力。

你可以在右側(cè)預(yù)覽位置上方的云朵圖標(biāo)里面找到新建的數(shù)據(jù)庫。

這里的 Diary_entries 就是用戶的日記原文，Diary_tags 就是標(biāo)簽。

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

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

YouBase 里面有一個位置（Secrsts）可以專門貯存你的各種 API ，杜絕泄露風(fēng)險(xiǎn)。

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

你就跟他說“用戶創(chuàng)建日記后需要調(diào)用 openrouter 的 XX 模型分析內(nèi)容并且創(chuàng)建日期、地點(diǎn)、人物等標(biāo)簽”

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

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

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

基本能力搞定之后，我們就需要修改 UI 了，這時(shí)候經(jīng)常需要頻繁的調(diào)整。

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

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

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

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

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

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

關(guān)于 UI 修改教大家一個方式，可以讓他幫你創(chuàng)建美觀且一致的 UI。

你可以找一個跟你要做的產(chǎn)品相似的產(chǎn)品截圖或者設(shè)計(jì)稿。

發(fā)給 Youware，然后說“分析這個設(shè)計(jì)稿，提取其中的設(shè)計(jì)元素，變成設(shè)計(jì) Token 以及組件設(shè)計(jì)，為平臺上的所有設(shè)計(jì)應(yīng)用修改，后續(xù)修改也基于這套組件和設(shè)計(jì)樣式。”

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

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

為我這個項(xiàng)目添加登錄注冊系統(tǒng)，并且創(chuàng)建邀請碼系統(tǒng)，邀請碼單獨(dú)存在一個數(shù)據(jù)表里面，沒有核驗(yàn)過邀請碼的禁止登錄。

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

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

當(dāng)然 YouBase 甚至支持幫你創(chuàng)建谷歌登錄服務(wù)，只需要在上面 Users 右上角點(diǎn)擊 Auth Settings 。

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

當(dāng)然你也可以在數(shù)據(jù)庫頁面看到了一個新增的表 invitation_codes。

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

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

Note

Gemini 對于 PWA 應(yīng)用的解釋：

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

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

如果你的網(wǎng)頁被打包成了 PWA 應(yīng)用，用戶就可以直接講網(wǎng)站安裝到他的電腦或者手機(jī)桌面，有獨(dú)立的圖標(biāo)，并且可以獨(dú)立窗口運(yùn)行，甚至斷網(wǎng)也能用。

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

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

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

你只需要設(shè)計(jì)好你的付費(fèi)體系以及做好 Stripe 要求的合規(guī)頁面，比如隱私協(xié)議等。

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

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

分發(fā)的另一個部分就是獨(dú)立域名了。

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

尤其是當(dāng)產(chǎn)品做的話。

現(xiàn)在Youware 已經(jīng)可以綁定自己的域名了，點(diǎn)擊右上角的“update”或者你如果第一次發(fā)布的話按鈕名字不是這個。

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

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

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

到現(xiàn)在你基本上已經(jīng)搞定了創(chuàng)建一個可以正式發(fā)布的產(chǎn)品所有的內(nèi)容了。

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

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

也可以為 AI Coding 產(chǎn)品創(chuàng)造新的利潤增長點(diǎn)和產(chǎn)品壁壘。

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

直接讓最普通的用戶創(chuàng)建完整可發(fā)行的產(chǎn)品成為可能。

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

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

如果你一直想做一個產(chǎn)品，已經(jīng)構(gòu)思了很久，苦于實(shí)在不懂編碼知識的話可以來 Youware 試試。

覺得今天的內(nèi)容不錯的話，歡迎點(diǎn)贊或者點(diǎn)喜歡，也可以在評論區(qū)提出你的使用問題，我看到就會回復(fù)。