最近沉迷于 Vibe Coding 的快感,我接連肝出了網(wǎng)頁總結(jié)、卡片記賬等幾個(gè)小產(chǎn)品。
但做多了也發(fā)現(xiàn)一些問題。
其中一個(gè)很消耗人的事,是基本上我每做一個(gè)產(chǎn)品都要和 AI 來回聊好幾個(gè)小時(shí),才能進(jìn)入無限修 AI bug 還修不好的環(huán)節(jié)。
這樣下去,我這獨(dú)立開發(fā)的致富夢怕是要被自己拖垮了。
![]()
![]()
*和AI聊了4個(gè)小時(shí)才改出一個(gè)勉強(qiáng)能用的版本
吃過熬夜又浪費(fèi)錢的苦之后,我痛定思痛:我 Vibe Coding 太 Vibe 了,每次都和AI想到哪聊到哪,從來不先把產(chǎn)品整體設(shè)計(jì)一下,把功能都想清楚、寫出來。
于是!我決定嘗試回歸 “正統(tǒng)路線”。也就是先寫 PRD,再快速做個(gè) Demo 看看效果,最后再讓 AI 幫我寫代碼,成為 “半個(gè)”正經(jīng)的獨(dú)立開發(fā)者。
剛好最近 Skill 風(fēng)很大,能批量生成自己需要的技能,扣子也發(fā)布了相關(guān)功能。
鏈接:https://www.coze.cn/skills
![]()
我就想,能不能把 “根據(jù)想法生成 PRD 和產(chǎn)品 Demo” 這件事,也做成一個(gè)扣子技能?這樣一來,不僅模型輸出更穩(wěn)定,以后還能反復(fù)用,相當(dāng)于給自己配了個(gè)產(chǎn)品經(jīng)理外掛。
實(shí)測后我發(fā)現(xiàn),光速做完的扣子 Skill 效果確實(shí)不錯(cuò)——經(jīng)它輸出的 PRD 和產(chǎn)品信息,基本能拯救所有其他模型的代碼。
比如 Claude 4.5 Sonnet,算是 Coding能力很強(qiáng)的選手。我讓它基于扣子 Skill 的 PRD 和直接口噴的提示詞,分別做了兩版馬年春聯(lián)生成器(給大家拜個(gè)早年)。
第一張是 Claude 根據(jù)扣子 Skill 生成的 PRD 做完的效果,功能全且能順暢交互。第二張是直接通過提示詞出的產(chǎn)品,雖然打眼一看配色炸裂,但充滿了按鈕點(diǎn)不動(dòng),交互不到位的 Bug。
沒想到扣子 Skill,居然能把 Claude 這種優(yōu)秀選手的輸出優(yōu)化這么多。
![]()
*Claude 根據(jù)扣子 Skill 生成的 PRD 做完的效果
![]()
*沒用扣子 Skill 直接通過提示詞輸出的效果,Bug 挺多
整體試驗(yàn)下來,我覺得先通過扣子 Skill 生成 PRD、再讓其他模型根據(jù) PRD 來寫代碼的產(chǎn)品,基本能直接交付了。
用Skill生成獨(dú)立開發(fā)加速器
接下來上干貨,說說我咋用的扣子 Skill。
Step 1: 進(jìn)入 code.coze.cn 這個(gè)鏈接,點(diǎn)擊對話框上方的“技能”。
Step 2: 掏出兩篇壓箱底 PRD產(chǎn)品文檔,丟給扣子。讓它分析學(xué)習(xí)后生成一個(gè)能把產(chǎn)品構(gòu)想改寫成高質(zhì)量的 PRD 的技能。
沒錯(cuò),只需要這兩步,全程自然語言口噴輸入,它就開始干活了。
在這個(gè)干活頁面上的左邊欄,能看到扣子制作 Skill 的細(xì)節(jié)
![]()
![]()
![]()
*左右滑動(dòng)查看
我看著它,閱讀我上傳的PRD總結(jié)文檔結(jié)構(gòu)和內(nèi)容整理PRD 文檔的寫作模板生成之后執(zhí)行任務(wù)時(shí)能用的“PRD 寫作指南”。
不到10分鐘,這個(gè)一鍵制作 PRD 的 Skill 被搞定了。點(diǎn)開一看,這細(xì)節(jié)撲來一股產(chǎn)品老登味兒,我安心了。
![]()
*總結(jié)得挺到位,不到10分鐘成為產(chǎn)品老登
PRD 到位,我開始繼續(xù)制作一個(gè)能讓 PRD 快速變成產(chǎn)品 Demo 的技能。沒錯(cuò),咱們就是要把效率拉滿
還是一樣,通過扣子技能的對話框描述功能:
幫我生成一個(gè)「技能」。用戶只需要上傳一份詳細(xì)的PRD文檔,就能一鍵生成一個(gè)高保真的、可交互的產(chǎn)品demo出來。在生成demo時(shí),你需要注意,必須覆蓋到產(chǎn)品的主流程,用戶的主交互鏈路,并盡可能覆蓋異常情況。如果產(chǎn)品需要數(shù)據(jù),你需要盡量模擬真實(shí)場景,自行編造一些數(shù)據(jù),用于在demo上展示。
點(diǎn)擊開始執(zhí)行!扣子先拆解任務(wù),把創(chuàng)建 Demo 分成讀取 PRD、分析產(chǎn)品結(jié)構(gòu)、設(shè)計(jì)交互、生成代碼、創(chuàng)建預(yù)覽文件五大步驟。
![]()
在生成 Demo 代碼后、創(chuàng)建 Demo 前,它還寫了兩個(gè)“指導(dǎo)”文檔,把“怎么分析 PRD”和“生成 Demo 代碼的規(guī)范”做了個(gè)總結(jié)。這樣下次再用到這個(gè) Skill,它就能參考文檔的分析思路。
![]()
![]()
*左右滑動(dòng)查看
大概等了不到5分鐘,Demo 生成的技能也創(chuàng)建好了。
等于總共花了半小時(shí),我就用扣子完成了 PRD 生成+ Demo 生成的 AI 提速鏈路
![]()
進(jìn)階的Vibe Coder!
搞定兩個(gè) Skill 的制作,技能配齊,我立馬跑了個(gè)實(shí)測。
馬年春節(jié)快到了,我決定做一個(gè)讓用戶一鍵生成馬年春聯(lián)的小網(wǎng)頁,不僅能生成春聯(lián)內(nèi)容,還把春聯(lián)直觀展示出來。
Vibe Coder 的自我拯救,我踏馬來了
給 Skill 里輸入一些不成熟的提示詞:
使用「PRD撰寫技能」,幫我撰寫如下產(chǎn)品的PRD:一個(gè)可以幫用戶生成馬年春節(jié)祝福春聯(lián)內(nèi)容的網(wǎng)頁。網(wǎng)頁不僅能生成春聯(lián)的文案內(nèi)容,也能直接以漂亮美觀的3D樣式直接展示出春聯(lián)。如果用戶對春聯(lián)內(nèi)容不滿意,也可以反復(fù)重新生成對聯(lián)的內(nèi)容。同時(shí),用戶也可以自行輸入春聯(lián)的文案。
過了四分鐘,扣子寫出了一篇詳細(xì)的 PRD。
讀完內(nèi)容,我發(fā)現(xiàn)它不僅寫了所有我說的功能點(diǎn),還補(bǔ)充了很多細(xì)節(jié)。
![]()
![]()
![]()
*文檔中規(guī)范了所有可能遇到的異常情況展示邏輯;明確標(biāo)注了哪些功能點(diǎn)必須要有;還直接以線框圖的形式畫出了界面樣式、指定了配色色號
接著,我開始連環(huán)嘗試 Demo 生成 Skill。
我把剛剛生成好的 PRD 丟給了扣子,讓它調(diào)用“產(chǎn)品 Demo 生成技能”,直出效果。
結(jié)果,PRD 中提到的功能都沒落下,頁面上每個(gè)按鈕也都能正常點(diǎn)擊。
想想之前,我還用 Claude 等其他模型直接對話做出過春聯(lián)生成器。結(jié)果頁面上只有倆按鈕,還有一個(gè)沒反應(yīng)。生成新的對聯(lián)時(shí),上下聯(lián)的前4個(gè)字還不會(huì)變。
我繼續(xù)用扣子產(chǎn)品老登寫好的 PRD 拯救之前的“廢柴輸出”。
不出所料,得到 Skill 加持的模型,生成的產(chǎn)品功能多了,效果也靠譜了不少。有了這個(gè)產(chǎn)品,媽媽估計(jì)不怕我不會(huì)拜年了。
在更正經(jīng)的需求里,我還用這兩個(gè)技能跑了制作數(shù)據(jù)看板的需求。
看著這一共花了十來分鐘做出的看板,不知道這對廠里的產(chǎn)品經(jīng)理們是福音還是裁員警鈴
總之,這次扣子新上的 Skill 還是讓我這個(gè)初級 Vibe Coder 淺嘗了一把 AI 拯救 AI 的滋味,似乎又能繼續(xù)做獨(dú)立開發(fā)的致富夢了。
這兩個(gè)我做的 Skill 也已經(jīng)上架到了扣子的技能商店里,朋友們有需求可以自取。
![]()
另外,我還嘗試了技能商店里的3D圖標(biāo)站、花叔的自動(dòng)化寫作等 Skill,有種順手就能集各位所長的爽感。
祝分享 Skill 的 AI 好人們一生平安。
特別聲明:以上內(nèi)容(如有圖片或視頻亦包括在內(nèi))為自媒體平臺(tái)“網(wǎng)易號”用戶上傳并發(fā)布,本平臺(tái)僅提供信息存儲(chǔ)服務(wù)。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.