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

Tip

Youware 更新的 Youbase 和 Coview 能力非常牛皮，直接把 Vibe Coding 門(mén)檻拉低一萬(wàn)倍。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

登錄注冊(cè)和邀請(qǐng)碼：支持用戶(hù)自己注冊(cè)登錄，支持邀請(qǐng)碼發(fā)放和核銷(xiāo)能力。

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

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

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

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

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

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

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

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

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

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

這里如果有 YouBase 的后端搞定的話(huà)就需要新建兩個(gè)表來(lái)存儲(chǔ)。

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

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

你在跟他說(shuō)完之后他就會(huì)識(shí)別到你要使用 YouBase 的需求，要求你點(diǎn)擊一個(gè)按鈕開(kāi)通。

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

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

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

接下來(lái)，我們說(shuō)一下 AI 功能的添加，這個(gè)也是 Youbase 的特色能力，解決了 Vibe Coding 很大的一個(gè)問(wèn)題。

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

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

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

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

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

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

填寫(xiě)之后他會(huì)存在剛才說(shuō)的 YouBase 里面的 Secrsts 里。

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

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

Youware 上線了一個(gè)非常牛皮的能力 Coview。

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

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

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

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

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

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

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

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

這個(gè)也是 YouBase 自帶的功能，你可以跟他說(shuō)：

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

然后他就會(huì)為你創(chuàng)建一個(gè)登錄和注冊(cè)頁(yè)面，登錄后會(huì)需要先輸入邀請(qǐng)碼，沒(méi)有的話(huà)無(wú)法看到項(xiàng)目首頁(yè)。

你可以在 YouBase 頁(yè)面的 Users 位置看到你的用戶(hù)和管理用戶(hù)。

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

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

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

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

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

Note

Gemini 對(duì)于 PWA 應(yīng)用的解釋?zhuān)?/strong>

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

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

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

我就是通過(guò)這個(gè)方式將 Vibe Diary 變成了全平臺(tái)應(yīng)用。

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

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

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

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

你填寫(xiě)完以后也會(huì)存在 Secrsts 里面。

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

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

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

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

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

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

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

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

我過(guò)去半年一直在說(shuō)隨著模型代碼能力的提升。

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

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

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

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

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

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

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

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