大家好，我是歸藏（guizang），給大家?guī)砀瘟藘商斓挠?Trickle AI 進(jìn)行一些高級 Vibe Coding 的保姆級教程。

我本來是覺得 Trickle AI（https://trickle.so/）這個產(chǎn)品交互和一些小細(xì)節(jié)特別好，想介紹一下產(chǎn)品的，結(jié)果越用越心驚。

我發(fā)現(xiàn) Vibe Coding 的方式和生態(tài)都會因為這個產(chǎn)品而改變了。

我在幾個月前說的一些 Vibe Coding 的原則都已經(jīng)不適用了，我們需要新的 Vibe Coding 方式，用新的原則跟 Agent 相處。

所以這個內(nèi)容我會詳細(xì)介紹我用 Trickle AI 構(gòu)建一個完整產(chǎn)品所用的所有方法和這么做的原因，具體內(nèi)容包括：

1. 首次提示詞書寫方式的改變
2. Trickle AI Magic Canvas 的強(qiáng)大能力，永久上下文
3. 如何又快又省錢的用 Edit 模式對項目進(jìn)行修改
4. 如何為網(wǎng)頁創(chuàng)建數(shù)據(jù)庫和上傳數(shù)據(jù)
5. 如何利用外部組件增加網(wǎng)頁美觀度
6. 如何免費為網(wǎng)頁增加搜索功能
7. 網(wǎng)頁上線后的設(shè)置-SEO 優(yōu)化、域名綁定、數(shù)據(jù)分析

內(nèi)容有點長，希望可以提前要一下點贊，轉(zhuǎn)發(fā)收藏后面看也行。

開始之前我們先來看一下，我 Vibe Coding 的結(jié)果（https://fragments.guizang.ai）。

一個 AIGC 周刊的信息聚合網(wǎng)站，里面會有過去兩年我收集到的所有 AI 產(chǎn)品、關(guān)鍵論文和文章、關(guān)鍵的事件記錄，支持搜索支持分類檢索，還包含一個后臺來執(zhí)行一些數(shù)據(jù)上傳和同步的工作。

我很早就想做一個網(wǎng)頁，把我更新兩年的 AIGC 周刊的內(nèi)容原子化，變成一個一個卡片，他會成為 AI 發(fā)展的一個編年史，你可以看到從 ChatGPT 發(fā)布開始每周的變化，你也可以方便的檢索過去的好內(nèi)容。

用 AI 開發(fā)這樣一個好用的網(wǎng)站是很費勁的，即使他看起來主要以內(nèi)容展示為主。

但是我需要處理數(shù)據(jù)，然后把數(shù)據(jù)傳到一個龐大的數(shù)據(jù)庫里面去，然后設(shè)計師的驕傲要求我需要把網(wǎng)頁做的好看漂亮，我需要微網(wǎng)頁增加分類和搜索，需要給他綁定屬于我的域名，需要做 SEO 和數(shù)據(jù)分析。

在 Trickle AI 以前沒有一個 Vibe Coding 產(chǎn)品可以讓我把這件事情做完，主要有下面幾個問題：

1. 數(shù)據(jù)庫的集成方式非常簡陋基本都用 Supabase，操作很復(fù)雜我需要自己學(xué)習(xí)處理數(shù)據(jù)-上傳-建表-鏈接。
2. 我需要對生成的網(wǎng)頁結(jié)果進(jìn)行非常細(xì)致的樣式修改，現(xiàn)有的 Agent 根本不支持我進(jìn)行幾十輪的迭代，首先是 Token 消耗會非?？膳?，另外是十輪修改就會超出上下文，Agent 有極大可能把你的項目改的面部全非。
3. 沒有后端服務(wù)，無法完成比如數(shù)據(jù)管理以及一些 API 狀態(tài)的管理。
4. 不能綁定的自己的域名，沒有 SEO 優(yōu)化和數(shù)據(jù)分析能力，沒辦法為運營提供幫助。

以往非代碼的方式我只能選 Framer，但是 Framer 非常的復(fù)雜，我進(jìn)行任何微小的改動都需要搜索教程，沒有幾十小時經(jīng)驗，即使你是設(shè)計師也搞不定。

但是現(xiàn)在時代變了，我只用了一個下午的時間成本，和 6 美元的金錢成本就搞定了上面的所有事情。

Trickle AI 是一個會改變 Vibe Coding 生態(tài)的產(chǎn)品，而且起碼會把 Framer 和 Figma Site 的份額吃掉！

我們開始今天的教程。

首先是第一次提示詞

按我原來的原則來看我們需要第一次就把提示詞寫的非常詳細(xì)和準(zhǔn)確，因為大部分的編碼 Agent 改幾次就很容易超出上下文，導(dǎo)致?lián)p壞項目。

但是 Trickle AI 用優(yōu)秀的上下文工程和優(yōu)化方案一定程度上解決了問題，每次樣式修改消耗的積分非常少，我們只需要在剛開始的時候大致描述清楚最主要的頁面和功能就可以了，樣式細(xì)節(jié)和后面的附加功能可以不管。

比如我這里就只是簡單描述了一下頁面的組成部分以及字體和背景顏色。

然后他就給了一個很不錯的結(jié)果。

當(dāng)然第一次肯定是不符合你的需求的即使他再漂亮，所以我們接下來就面臨修改內(nèi)容和樣式的問題。

以往很多 Vibe Coding Agent 你幾乎只能用文字去描述想要修改的部分，但是 Trickle AI 提供了非常豐富的方式讓你去修改和保證生成效果。

介紹一下 Trickle AI Magic Canvas

不同于其他 Agent 那種左邊聊天右邊只有一個預(yù)覽網(wǎng)頁窗口，他們右邊做了一個無限畫布。

除了展示你優(yōu)化的不同歷史版本的網(wǎng)頁之外，還有各種網(wǎng)頁構(gòu)建所需要的上下文，這部分是永久的。

即使 Agent 的上下文超了，這部分信息也會一直存在，保證生成結(jié)果，某種程度完成了卡帕西說的永久上下文的概念。

Magic Canvas 的四個重要組成部分：

• Database（灰色）：這個很好理解就是你網(wǎng)頁的數(shù)據(jù)庫，所有的數(shù)據(jù)都會存在這里，你可以編輯和修改里面的數(shù)據(jù)。
• Assets（藍(lán)色）：這部分可以放你的網(wǎng)頁需要用到的圖片素材，支持上傳，后面你可以把素材放到網(wǎng)頁的指定位置。
• Knowledge（黃色）：這里會存放你需要讓模型記住的所有信息，而且模型會自動更新，你也可以編輯。比如這里模型就記下了網(wǎng)站的功能、技術(shù)棧、項目結(jié)構(gòu)，還有在我強(qiáng)調(diào)了兩次密碼安全后，他自己寫了一份密碼安全說明要求后面都按照這個方式存放密碼。
• Rules（紫色）：這部分大家應(yīng)該都了解就是需要模型遵守的規(guī)則，比如這里默認(rèn)就會要求模型在執(zhí)行什么操作的時候需要更改 Knowledge 的對應(yīng)部分。

如何又快又省的用 Edit 模式對項目進(jìn)行修改

我們在寫網(wǎng)頁的時候?qū)椖孔龅牟僮髦饕譃閮蓚€部分：

首先是一些樣式和內(nèi)容的增加和修改，這種大部分不涉及到功能很多都是加個鏈接或者改某個元素的樣式；

然后就是涉及到復(fù)雜功能的部分這部分基本上都要 AI 去處理很多邏輯或者新增頁面。

這里我們這里主要介紹如何利用 Trickle AI 的一些能力高效和省錢的完成第一部分修改任務(wù)。

首先是一些基本樣式的修改，你可以點擊畫布下面這個鼠標(biāo)的圖標(biāo)，就進(jìn)入了 Edit 模式，這時候就可以選中頁面上的元素了。

選中之后左側(cè)的聊天窗口就會出現(xiàn)一個 CSS 屬性的編輯組件，這時候你就可以直接編輯對應(yīng)的文本、顏色對其方式等內(nèi)容，編輯完點保存就行。

解決了你用文字描述不知道該怎么說的問題，另外由于直接把內(nèi)容傳入了 AI，所以他可以精準(zhǔn)的找到位置大幅節(jié)省 Token 消耗。

另外你會發(fā)現(xiàn)，選中的元素不止有上面的可視化修改區(qū)域，在輸入框上面也回填了，如果上面的元素沒有你想要修改的部分也可以打字描述。

然后 Edit 模式還不止可以選擇網(wǎng)頁元素，你還可以選擇 Assets 部分的元素。

比如我這里可以選中網(wǎng)頁標(biāo)題，再選中 Assets 中我上傳的貓貓頭像，兩個部分就都回填到了輸入框里面，這時候你就可以將圖片快速添加到指定位置了，我還讓他給圖片加上了圓形遮罩。

這樣是不是比你吭哧癟肚描述要好多了。

最后一個技巧，我們需要介紹一個概念“設(shè)計變量”，你是不是以為網(wǎng)頁中所有元素的顏色、大小甚至描邊粗細(xì)都是單獨寫的樣式。

其實很多時候為了一致性和協(xié)作在正常寫前端程序的時候都會將這些樣式多封裝一層，類似下面圖片。比如描邊顏色一般會指向這個變量名稱而不是具體的顏色色值。

這樣我們修改整個系統(tǒng)所有頁面的描邊顏色的時候就不需要一個一個改了，直接把映射表里的色值改掉，整個系統(tǒng)都會生效。

但是大部分編碼 Agent 就是單獨寫的樣式，所以隨著你越該越多，模型丟三落四的現(xiàn)象就會越來越嚴(yán)重，需要傳入的上下文也越來越長，直接導(dǎo)致上下文管理失敗或者丟失需要改的部分。

Trickle AI 直接內(nèi)置了一套設(shè)計變量，這就導(dǎo)致我們在修改樣式的時候直接讓他改變量的值就可以了，他不需要查詢這個多個頁面的樣式文件，就能修改多個頁面的元素樣式。

了解了這個以后你用這種提問方式就可以頻繁修改網(wǎng)頁樣式而不用擔(dān)心過多的 Token 消耗和上下文占用。

比如這里我希望整個網(wǎng)站三個頁面的主題色、背景色和分割線顏色都做一些更改，就會直接跟他說，他就會查詢這三個部分的變量名稱，直接改掉對應(yīng)的色值。

你也可以讓他拆分和新建設(shè)計變量，比如我這里原來導(dǎo)航的分割線和卡片描邊共享一個變量，但是我不想他們是一個顏色，所以這個時候就可以要求他將分割線顏色和卡片描邊顏色的變量分開分別設(shè)置。

這期間只涉及到設(shè)計變量的文件，所以消耗的 Token 非常少，這也是為什么我改了六十多個版本只花了幾百積分的原因（17 美元會員送1500 積分，每天送 350 積分）。

為網(wǎng)頁添加數(shù)據(jù)庫

剛開始創(chuàng)建的時候 Trickle AI 像其他 Agent 一樣是把虛擬數(shù)據(jù)直接寫在網(wǎng)頁上的，但是我們需要把以往 AIGC 的數(shù)據(jù)都上傳上去，所以肯定需要數(shù)據(jù)庫。

這里需要先讓他初始化數(shù)據(jù)庫將數(shù)據(jù)庫表格的列變?yōu)槲覀冃枰牟糠?，比如我的卡片上面，有分類、?biāo)題、描述、更新時間以及鏈接。

之后他就會幫你初始化數(shù)據(jù)庫而且把虛擬數(shù)據(jù)放進(jìn)去，并且把數(shù)據(jù)庫跟網(wǎng)站開始鏈接，數(shù)據(jù)庫數(shù)據(jù)的變化會反應(yīng)在網(wǎng)頁的卡片上。

我的周刊有非常多的數(shù)據(jù)，而且數(shù)據(jù)都是非標(biāo)的文章，首先，我需要把這些數(shù)據(jù)變成跟數(shù)據(jù)庫的格式一樣的標(biāo)準(zhǔn)化表格數(shù)據(jù)。

這時候就得找 o3 了，你們處理數(shù)據(jù)也能這么玩。

直接把文章和 Trickle AI 的數(shù)據(jù)庫截圖發(fā)給 o3，要求他參考圖片的數(shù)據(jù)庫格式把文章的內(nèi)容整理成 CSV 文件，不能映射的內(nèi)容不整理。

搞定以后，我發(fā)現(xiàn)一個事情這個才是我覺得 Trickle AI 讓我驚嘆的地方。

我發(fā)現(xiàn)他們還沒做數(shù)據(jù)庫數(shù)據(jù)導(dǎo)入的功能，這不麻爪了了嗎，后來我就想能不能讓他寫個后臺網(wǎng)頁完成這個功能。

網(wǎng)頁的功能就是解析我上傳的 CSV 文件然后存到數(shù)據(jù)庫里面，我嘗試了一下，結(jié)果真的可以！

他真的寫了一個后臺網(wǎng)頁，我只需要把 o3 給我的 CSV 文件上傳上去，之后他就會自動解析，然后更新到數(shù)據(jù)庫中，這樣我就完成了把我以往的數(shù)據(jù)傳到 Trickle AI 的過程。

真的太牛批了，說明整個系統(tǒng)的智能程度非常高，即使前面的 UI 沒有展示你也可以自己寫一個新的 UI 讓他訪問和修改這些數(shù)據(jù)，這個系統(tǒng)的可能性是無限的。

當(dāng)然這個網(wǎng)頁比較危險，所以我讓他給后臺加了登錄密碼，確保不會被人無意間訪問，你們搞類似網(wǎng)頁的時候也可以參考這種方式。

來讓頁面更美觀吧

基本能力搞定以后，我優(yōu)化了一堆首頁的設(shè)計細(xì)節(jié)，比如更改卡片圓角、整體配色、增加頂部導(dǎo)航以及為網(wǎng)頁增加移動端適配等等，基本用的都是之前說的 Edit 模式加上修改設(shè)計變量的方式。

來看一下對比：

然后我就想挑戰(zhàn)一下 Trickle AI 的上限，搞一個視覺效果不錯的炫技頁面，于是任務(wù)就落在了關(guān)于頁面身上。

我先是讓他創(chuàng)建了一個非?；A(chǔ)的關(guān)于頁面，基本只有標(biāo)題和描述。

除了排版字體之外的更改外，主要是三個地方的更改。

首先是在社交媒體展示這里，讓他從原來中規(guī)中矩的圖標(biāo)加鏈接，變成了 hover 上去以后會傾斜和出現(xiàn)彌散投影的卡片。

我就只跟 Trickle AI 說 hover 會傾斜，并且加投影，沒想到他的傾斜角度和投影樣式搞得這么好，還加上了緩動效果。

然后感覺這個白色背景有點單調(diào)，于是就讓 Trickle AI 給北京加上了淺紫色的點陣效果，重新把整個頁面內(nèi)容變?yōu)橐粡埧ㄆ恍枰f點陣的圓點大小和顏色就行。

最后重點的來了，在作者這里我想要用一個炫酷的方式展示我的所在地，直接選了一個叫 COBE 的 3D 地球組件。

我們只需要跟他說用 CDN 引用組件，然后說一下組件放到哪里就行，帶上組件文檔的示例代碼就搞定了，你可以在這里查看（https://cobe.vercel.app/docs）示例代碼。

而且一次成功，V0 即使直接引用地球也會變橢圓，高下立見朋友們。

給網(wǎng)頁增加搜索功能

我們網(wǎng)頁最后還有一個功能需要做，如果全部的數(shù)據(jù)上傳上來，可能會達(dá)到上千條信息，只靠 5 個分類顯然不太現(xiàn)實，所以還是得加一下搜索。

這里當(dāng)然不能讓他自己實現(xiàn)一個搜索，這個太復(fù)雜了，我們有免費的 Algolia 這種搜索服務(wù)可以使用。

你只需要注冊一個 Algolia 賬號，數(shù)據(jù)鏈接方式選擇爬蟲，他會讓你在網(wǎng)頁加一個鏈接，這時候你發(fā)給 AI 讓他加就行。

然后把他新手引導(dǎo)最后一部分的信息給到 Trickle AI 跟他說幫我基于這個信息用 CDN 引用的方式給網(wǎng)站加上 Algolia 搜索服務(wù)就行。

在他加上以后你大概率會發(fā)現(xiàn)搜不到東西，由于我們是單頁面網(wǎng)站，所以爬蟲爬不到頁面結(jié)構(gòu)沒辦法搜索。

這時候我們需要主動推送數(shù)據(jù)給 Algolia 才行，但是推送數(shù)據(jù)需要后端服務(wù)啊 Trickle AI 又沒有。

哈哈，我跟 Trickle AI 在聊天模式討論后小腦袋瓜一轉(zhuǎn)，還記得我們是怎么上傳數(shù)據(jù)的嗎，對的后臺頁面，那能不能在后臺頁面加個功能主動觸發(fā)同步呢。

可以的，你需要去 Algolia 找到寫入的 API Key 提供給 Trickle AI 他就能幫你搞定。

同步數(shù)據(jù)之后我們就能搜索對應(yīng)的信息了。

網(wǎng)站上線后的設(shè)置-綁定域名、SEO、數(shù)據(jù)分析

到現(xiàn)在我們的網(wǎng)站已經(jīng)是完全體了，但是上線后你的工作才剛開始。

Trickle AI 提供了非常豐富的網(wǎng)頁運營功能，常見的自定義域名、SEO 設(shè)置和數(shù)據(jù)分析功能都是有的。

首先如果你有自己的域名的話，還是用自己的域名好一點，這樣可以固定域名，一般自己的域名也比 Trickle AI 分配給你的的也好記，如果你想綁定自己的域名可以在右上角Publish 彈窗這里點擊 「+ Custom domain」按鈕。

然后在彈窗里面點擊「New domain」就行，里面會有詳細(xì)的引導(dǎo)，直接去你域名服務(wù)商那里復(fù)制填寫內(nèi)容就行。

然后我們需要設(shè)置一些 SEO 需要的信息，大致就是可以讓谷歌搜索的時候可以搜到你，同時填寫網(wǎng)頁后在推特這種地方會顯的是一個卡片而不是只有一個鏈接。

還是在 Publish 按鈕彈窗的 Bookmark Preview 這里點擊那個鉛筆圖標(biāo)。

我們需要做的首先是把里面確實的圖片補(bǔ)一補(bǔ)，比如網(wǎng)頁的圖標(biāo)以及預(yù)覽圖片，其他 SEO 部分 Trickle AI 已經(jīng)幫你寫好了，你也可以提出你的需求后讓 Trickle AI 幫你改。

最后就是數(shù)據(jù)分析了，網(wǎng)站上線之后我們總要看一下數(shù)據(jù)怎么樣，然后針對性的宣傳和修改。還是在右上角Publish 彈窗這里點擊 「+ Custom domain」按鈕。

然后在彈窗部分就可以看到大致的數(shù)據(jù)了，你也可以點擊那三個點圖標(biāo)，再展開的新彈窗里看到非常詳細(xì)的其他數(shù)據(jù)。

到這里我們的整個網(wǎng)站就搞定了，這個教程里面除了基本的創(chuàng)建，我主要在教你如何修改以及如何增加常見的網(wǎng)頁能力，希望你看完的時候能有所收獲。

Trickle AI 通過 Magic Canvas 以及樣式修改跟左側(cè)輸入框的聯(lián)動以及優(yōu)秀的上下文工程和設(shè)計系統(tǒng)跟 AI 的結(jié)合，除了大幅提高了 Agent 的能力以外還大幅降低了現(xiàn)在開發(fā) Agent 最大的成本問題。

而且設(shè)計系統(tǒng)跟組件庫以后還會有更大的發(fā)展和更多的能力，帶來更大的網(wǎng)絡(luò)效應(yīng)。

從我目前的感受來說目前的 Trickle AI 終于讓前端開發(fā) Agent 在前端功能上超過了 Framer 以及 Webflow 這種可視化建站產(chǎn)品。

而且解決了這類產(chǎn)品最大的問題，過于復(fù)雜的操作和學(xué)習(xí)成本，任何改動只需要跟 AI 說就行，他都能給你啟發(fā)幫你搞定。

寫到這里，我突然意識到：我們正站在一個比「學(xué)會用 AI 寫代碼」更大的拐點上。

過去兩年，我們經(jīng)歷了三個階段：

1. 1. Prompt 即魔法 （2022-2023）：把需求翻譯成咒語，期待 AI 變出結(jié)果

2. 2. 工具鏈整合 （2023-2024）：用 Cursor + V0 + Replit 拼湊工作流

3. 3. 范式遷移 （2024-？）：像 Trickle AI 這樣的產(chǎn)品，開始重構(gòu)「開發(fā)」本身的定義

觀察 Trickle AI 的 Magic Canvas 會發(fā)現(xiàn)，它不再是「代碼編輯器」的替代品，而是「數(shù)字造物主的操作系統(tǒng)」。數(shù)據(jù)庫、設(shè)計系統(tǒng)、知識庫、運行規(guī)則被可視化為可交互的實體——這像極了從 DOS 到圖形界面的跨越。

所以基于這個判斷給 Vibe Coding 開發(fā)者三個建議：

1. 1. 開始學(xué)習(xí)「如何思考系統(tǒng)」 未來最有價值的不是記住 CSS 屬性，而是理解「當(dāng)用戶搜索時，數(shù)據(jù)如何在 Algolia 索引、前端組件、URL 參數(shù)之間流動」。

2. 2. 把 AI 當(dāng)作「認(rèn)知外骨骼」而非「替代者」 就像計算器沒有消滅數(shù)學(xué)，而是讓人類能處理更復(fù)雜的方程。Trickle AI 的價值在于讓你把腦力從「如何讓 div 居中」解放到「這個搜索框應(yīng)該放在什么位置才能符合用戶心智模型」。

3. 3. 建立「人機(jī)協(xié)作」的新契約 我總結(jié)了一個「30% 原則」：永遠(yuǎn)讓 AI 完成 70% 的實現(xiàn)工作，但保留 30% 需要人類判斷的決策權(quán)。比如：

   • 讓 AI 生成 10 種配色方案，但由你決定哪種更符合品牌調(diào)性
   • 讓 AI 實現(xiàn)搜索功能，但由你定義「什么算一個好的搜索結(jié)果」

5 萬年前，我們的祖先在洞穴墻壁上畫下第一頭野牛時，他們不需要理解顏料化學(xué)，只需要有表達(dá)的沖動。

今天，當(dāng)你對著 AI 說「我想讓搜索框在 hover 時有個溫柔的陰影」時，你正在延續(xù)同樣的創(chuàng)造沖動——只是這次，洞穴變成了互聯(lián)網(wǎng)，野牛變成了用戶體驗。

感謝你的閱讀，真的肝了很久，如果對你有幫助希望幫忙點個贊或者轉(zhuǎn)發(fā)給你的朋友，我是歸藏、我們下次再見