零代碼基礎(chǔ)，如何用 AI 完成一款“真”產(chǎn)品？一名產(chǎn)品經(jīng)理的 AI Coding 全過程實錄

搜索

APP

起點課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會員專屬社群

榮耀標識

發(fā)布

注冊 | 登錄

零代碼基礎(chǔ)，如何用 AI 完成一款“真”產(chǎn)品？一名產(chǎn)品經(jīng)理的 AI Coding 全過程實錄

亨亨

2026-01-12

0 評論 307 瀏覽 0 收藏

23 分鐘

當AI編程遇上產(chǎn)品思維，零基礎(chǔ)也能打造專業(yè)級網(wǎng)站！本文作者以10年產(chǎn)品經(jīng)理身份首次實戰(zhàn)AI Coding，從需求拆解到SEO優(yōu)化，完整記錄如何與Gemini/ChatGPT協(xié)作開發(fā)出Google評分接近滿分的Web產(chǎn)品。揭秘非技術(shù)人員如何利用AI跨越技術(shù)鴻溝，實現(xiàn)從產(chǎn)品構(gòu)想到線上部署的全流程突破。

我想破腦袋也想不到，寫了 10 年商業(yè)和產(chǎn)品文章的我，有一天會寫一篇軟件開發(fā)分享。

在過去的一周，我在完全無技術(shù)背景的情況下，通過 AI Coding 手搓了我人生的第一個 Web 端網(wǎng)站，這并非是類似于自媒體“3 分鐘 AI 編程”的那種玩具，而是一個真正意義上的產(chǎn)品——在功能和能力上健全，并且 Google 的診斷評分，在性能、SEO、網(wǎng)站結(jié)構(gòu)等方面，都給出接近滿分的評價。

我剛畢業(yè)就開始做產(chǎn)品經(jīng)理，中間也創(chuàng)業(yè) 3 年。從 0-1 的創(chuàng)新產(chǎn)品，到百萬日活的平臺型產(chǎn)品，都經(jīng)歷并且打造過。但是，這些產(chǎn)品，都是按照產(chǎn)品經(jīng)理提需求、研發(fā)開發(fā)的模式進行，從來沒有一款產(chǎn)品，是在我的手中完整誕生。

所以我一直很羨慕技術(shù)同學(xué)，他們有著成為獨立開發(fā)者所必備的技術(shù)能力，而產(chǎn)品經(jīng)理的所謂“產(chǎn)品思維”，則是懸于空中樓閣的無法落地之物。直到 AI 發(fā)展至 2025 年，AI 編程讓我重新看到機會，并且付諸實踐。

這是我開發(fā)人生第一款 Web 網(wǎng)站產(chǎn)品的實錄，對你一定有幫助。

我將從產(chǎn)品拆解、SEO、網(wǎng)站技術(shù)架構(gòu)等方面，描述我是怎么和 AI 協(xié)作，完成一款產(chǎn)品。

放心，這并非是一篇純技術(shù)文章，我們不探討代碼，因為我也看不懂那些代碼，我們只探討如何利用好 AI，通過 AI Vibe Coding 打造一款屬于自己的完整產(chǎn)品。

一、產(chǎn)品拆解

我們雖然聊得是時髦的 AI Coding，但如果你想要做一款成熟的產(chǎn)品，我們還是得先回到產(chǎn)品規(guī)劃本身，如果能夠在這個環(huán)節(jié)做好規(guī)劃，后面無論是開發(fā)還是運營，都會事半功倍。

我們把產(chǎn)品規(guī)劃分成以下幾個部分：

idea：一切產(chǎn)品的起源，你有什么靈感，想做一款什么產(chǎn)品，一個點子就好。
目標人群：先明確產(chǎn)品給誰用，這些人可能怎么用你的產(chǎn)品，以及國內(nèi)還是海外（后續(xù)發(fā)展幾乎是完全不同的兩個范式）。
產(chǎn)品形態(tài)：目標人群有了之后，產(chǎn)品形態(tài)也就順勢而出，如果目標人群是中國老年人，那么做海外網(wǎng)站顯然沒有意義，如果目標人群是登山者，那么 App 就是一定要做的形態(tài)。當然，更進一步，可以拆得更細。
商業(yè)模式：先不要想過于宏大的商業(yè)命題，就想一個最最基本的目標，這個產(chǎn)品未來主要靠什么賺錢？靠廣告賺錢，那么就需要以獲得更多流量為目標；靠訂閱賺錢，那么產(chǎn)品的留存和主張，就要足夠打動人心。
功能規(guī)劃：在明確了以上幾點后，就是這個產(chǎn)品具體有哪些功能，我們只需要有功能的大致方向即可，然后讓 AI 來完善。但必須明確的是，每一個功能都要有它的意義，比如某功能是產(chǎn)品的核心能力，博客功能是為了給網(wǎng)站產(chǎn)品帶來更多 SEO 流量，打賞功能為了跑通商業(yè)化閉環(huán)等等。在最早期的時候，建議嚴格落實 MVP（最小可行性）原則，盡可能精簡功能，不要拉一個長長的功能清單。

事實上，這些都是一名職業(yè)產(chǎn)品經(jīng)理的工作內(nèi)容，產(chǎn)品經(jīng)理們的工作，基本都是圍繞這些點展開，所以在互聯(lián)網(wǎng)公司中，產(chǎn)品經(jīng)理是整個鏈條的推動者。

現(xiàn)在在 AI Coding 中，我們必須明確一點：AI Coding 的目的不是為了 Coding，而是為了做出一款能解決用戶需求的產(chǎn)品。帶著這樣的原則，我們就能夠以一種終局的眼光來審視自己的產(chǎn)品，想清楚產(chǎn)品發(fā)展的后續(xù)環(huán)節(jié)，避免陷入純技術(shù)自嗨。

以上對產(chǎn)品規(guī)劃階段的幾處拆解，是整個產(chǎn)品的立身之本，所以，先不要著急開發(fā)，而是用以上的框架，和 AI 先聊至少 10 輪，把需求梳理明確后，再進行開發(fā)。目前我實測下來，Gemini 3 Pro 和 ChatGPT 5.2 這兩個旗艦?zāi)Ｐ褪菍τ谛枨蟛鸾庾畹轿坏摹?/p>

二、結(jié)構(gòu)先行

在和 AI 對話的過程中，你會把這個產(chǎn)品的形態(tài)想得更清楚，當你認為以上 5 點已經(jīng)有明確的答案之后，新開一個對話，按照以下的結(jié)構(gòu)，把你的需求告訴 Gemini 或者 GPT。

我們以出海的網(wǎng)站產(chǎn)品為例：

你是一名頂尖的產(chǎn)品經(jīng)理、UI設(shè)計師、SEO專家和全棧程序員。我是一名產(chǎn)品經(jīng)理，有一定的產(chǎn)品工作經(jīng)驗，但是不懂代碼，也沒有親手部署過網(wǎng)站上線?，F(xiàn)在我要和你一起搭建一個全球化產(chǎn)品網(wǎng)站產(chǎn)品，我們的目標是能夠讓這個產(chǎn)品運營在網(wǎng)絡(luò)上，為我們獲得持續(xù)的被動收入，所以，關(guān)于網(wǎng)站的設(shè)計，首要考慮長期價值和“流量、變現(xiàn)、收益”。

#產(chǎn)品概述

產(chǎn)品的整體描述，包括產(chǎn)品是什么、用于干什么、是網(wǎng)站還是App、目標人群是誰，一段話總結(jié)概括

#產(chǎn)品能力

1. 功能點1

2. 功能點2

3. 在上一個對話中，和AI探討出來的具體功能點，列舉所有功能點

#網(wǎng)站視覺

高級、充滿設(shè)計感的網(wǎng)站風(fēng)格，填寫時最好有淡淡的雪花特效增加沉浸感（明確你預(yù)期的網(wǎng)站風(fēng)格，如果不會描述，可以把參考的網(wǎng)站直接截圖給它，讓它進行風(fēng)格的描述）

#網(wǎng)站其他要求

1. 結(jié)構(gòu)上要SEO友好（如果你是網(wǎng)站產(chǎn)品，那么這一條一定要提前強調(diào)，SEO決定了網(wǎng)站能否獲得自然流量，而SEO的難易程度，很大程度上取決于最開始的結(jié)構(gòu)和技術(shù)棧）；

2. 支持中文與英文的多語言（如果是出海產(chǎn)品，多語言的支持也是要在產(chǎn)品搭建初期就規(guī)劃好架構(gòu)，否則后續(xù)改起來會是天坑）；

3. 網(wǎng)站能夠自適應(yīng)手機和PC端各種屏幕尺寸；

4. 最好能夠純前端實現(xiàn)，或者只是采用少量后端（前期可以弱化后端能力）。

現(xiàn)在，我需要指揮代碼編輯器Cursor/Trae進行產(chǎn)品的開發(fā)，我需要先請你制定整體的技術(shù)方案和網(wǎng)站結(jié)構(gòu)，保證我們在技術(shù)上，從一開始就保持先進和完整。我將把你的產(chǎn)品和技術(shù)規(guī)劃，發(fā)送給Cursor/Trae以進行正式的開發(fā)。

對于現(xiàn)在的旗艦 AI 來說，提示詞不用太過于花哨，用自然語言、結(jié)構(gòu)化表述，講明白事兒即可。

從這段提示詞可以看出，我們都在強調(diào)一件事兒：結(jié)構(gòu)。

在這個產(chǎn)品需求下，代碼的結(jié)構(gòu)怎么搭，是非常關(guān)鍵的，尤其是涉及到 SEO 和多語言的情況下。如果你期望在海外獲得流量，并且能夠出現(xiàn)在 Google 的搜索結(jié)果中，SEO 和多語言一定是繞不開的兩個環(huán)節(jié)，而這兩個環(huán)節(jié)，如果在一開始沒能做好頂層設(shè)計，后面改起來會非常復(fù)雜。

這段提示詞發(fā)給 AI 之后，Gemini 大概率會告訴你要用什么動態(tài)路由之類的實現(xiàn)方案，如果你能理解，那自然最好，如果理解不了，也沒關(guān)系，直接把 Gemini 回復(fù)的內(nèi)容，發(fā)給 Cursor/Trae 等 AI 代碼編輯器的 Build 模式即可。

代碼開發(fā)，我們正式開干。

三、進入開發(fā)

開發(fā)環(huán)節(jié)，我們分為幾個小點來講。

與 AI 交互

在開發(fā)的過程中，盡管 Cursor/Trae 這些代碼編輯器（IDE）也提供了 AI 的對話窗口，但我還是強烈建議你，不要將所有的對話都在編輯器的窗口進行，而是在瀏覽器額外再開一個 Gemini 或 ChatGPT。

這有幾點好處：

第一，在開發(fā)過程中，你會產(chǎn)生很多非代碼的問題，比如“Github 怎么配置”等等問題，這些問題如果問編輯器的 AI，會打亂編輯器中代碼編寫的上下文，導(dǎo)致 AI 出現(xiàn)幻覺；

第二，代碼編輯器的 AI，最好讓它成為一個純粹的接收代碼需求的 AI，瀏覽器中新開的 AI，則是用來將你的自然語言需求，轉(zhuǎn)化為技術(shù)語言布置給代碼編輯器中的 AI；

第三，瀏覽器窗口的 AI 一般都是年費或者免費的 AI Studio，但是代碼編輯器中的 AI 對話輪次，即使是 Pro 會員，往往也是有快速請求限額的，一些非編碼問題在瀏覽器的 AI 詢問，能夠極大地省錢（確實是極大的省錢）；

第四，瀏覽器單開的 AI，不僅能夠輔導(dǎo)需求研發(fā)，還能夠解答編輯器疑問、整理更新文檔、梳理產(chǎn)品邏輯等等，相當于一個時刻響應(yīng)的產(chǎn)品助手，同時得益于 Gemini 3 Pro 超長的上下文能力，我在聊了 42 萬 Token 之后，它依然能記得最開始的溝通內(nèi)容，這意味著這個新開的 AI，是能夠伴隨整個產(chǎn)品的迭代周期的（即使上下文太長，也可以讓當前 AI 輸出一個現(xiàn)狀的總結(jié)，以用于新開一個對話窗口）。

構(gòu)建結(jié)構(gòu)和 SEO

如果你最開始就和 AI 講清楚你想要的實現(xiàn)目標，包括 SEO 和多語言等需求，并且要求 AI 給出最完美技術(shù)架構(gòu)，那么很大概率，AI 能給到你不遜色于人類高級技術(shù)經(jīng)理的架構(gòu)水準。

你雖然不懂技術(shù)編程，但是我仍然建議你了解一些 SEO（搜索引擎優(yōu)化）的基礎(chǔ)知識，如果是 App 產(chǎn)品，那么你就要掌握一些 ASO（應(yīng)用市場優(yōu)化）的基礎(chǔ)知識。這并不是讓你成為專家，而是只需要了解一些基礎(chǔ)的原理就 OK，目的是為了我們的產(chǎn)品能夠有更好的架構(gòu)，為未來的推廣和迭代搭建良好的基礎(chǔ)。

了解皮毛不算難，就以我作為例子，我并沒有系統(tǒng)性的學(xué)過 SEO 和 ASO，但是平時會看哥飛的公眾號文章，也逐漸了解了 SEO 的關(guān)鍵流程；我之前創(chuàng)業(yè)時服務(wù)過一個做 ASO 業(yè)務(wù)的客戶，所以也順帶了解了一些 ASO 的皮毛，憑借這些知識，我就能和 AI 開干了。

為了方便你也輕松開干，我來幫你介紹一些關(guān)鍵步驟，以網(wǎng)站的 SEO 為例。

【核心要義】滿足用戶意圖，Google 搜索的核心邏輯是把用戶留住，所以它的算法只有一個終極目標：“把最能解決用戶當下問題的網(wǎng)頁，排在第一位”。
【SEO 關(guān)鍵詞】用戶意圖的實體化表達，是用戶在谷歌搜索的關(guān)鍵詞，我們選擇關(guān)鍵詞的本質(zhì)，實際上就是選擇要滿足用戶的哪些需求，確定了用戶需求之后，就要圍繞對應(yīng)的“關(guān)鍵詞”，構(gòu)建滿足用戶的頁面和內(nèi)容。在選擇關(guān)鍵詞的時候，要盡量選擇“高流量、低競爭”的機會，這能讓你的網(wǎng)站更快出現(xiàn)在搜索結(jié)果的前列。
【sitemap.xml】在前面 AI 幫助你搭建技術(shù)架構(gòu)時，如果你講清楚你要做 SEO 友好的產(chǎn)品，那么 AI 一定會為你創(chuàng)建一個 sitemap.xml 的文件，這是個引導(dǎo) Google 爬蟲“進家門”的告示，相當于告訴搜索引擎的爬蟲，你的網(wǎng)站都有哪些頁面，可以一起收錄進去。
【頁面優(yōu)化】每一個網(wǎng)頁，都是一個單獨的 SEO 個體，對應(yīng)著 1-3 個核心關(guān)鍵詞。如果是我們?nèi)庋廴g覽網(wǎng)頁，我們是知道每個網(wǎng)頁的目的的，但是 Google 的爬蟲，需要明確的指示。所以，頁面優(yōu)化就是要在網(wǎng)頁代碼中，寫好 Title Tag （標題）、Meta Description （描述）、H1/H2/H3 結(jié)構(gòu)等等，讓搜索引擎知道這一頁是關(guān)于什么內(nèi)容的。
【內(nèi)容規(guī)?！壳懊嫣岬剑總€頁面都只能對應(yīng) 1-3 個核心關(guān)鍵詞，那么，更多的頁面就能對應(yīng)更多的關(guān)鍵詞，相應(yīng)的也就能滿足更多的需求，擴大流量入水口。舉個例子，你是一個水果種植網(wǎng)站，你可以給蘋果種植、香蕉種植、橘子種植分別寫好對應(yīng)的內(nèi)容頁面，這樣搜索蘋果、香蕉、橘子的種植戶，都會進入到你的網(wǎng)站。
【內(nèi)鏈優(yōu)化】網(wǎng)站的每個頁面，都有自己的專屬鏈接，這就是內(nèi)鏈，內(nèi)鏈優(yōu)化的核心點是“讓爬蟲一直在網(wǎng)站內(nèi)的頁面轉(zhuǎn)圈”，當爬蟲進入一個頁面，發(fā)現(xiàn)這個頁面又關(guān)聯(lián)著下一個頁面，于是也去看看，下一個頁面又繞回了另一個列表頁，這樣來回閉環(huán)，讓流量持續(xù)流轉(zhuǎn)在網(wǎng)站內(nèi)部，這不僅對于能夠提升搜索權(quán)重，也能讓真實用戶有更好的留存表現(xiàn)。
【外鏈建設(shè)】簡單理解，就是讓“大佬”背書，在搜索引擎高權(quán)重的網(wǎng)站，留下你網(wǎng)站的鏈接，搜索引擎在抓取高權(quán)重網(wǎng)站時，就會發(fā)現(xiàn)你的網(wǎng)站，也會認為你的網(wǎng)站是重要的。
【數(shù)據(jù)分析】持續(xù)分析關(guān)鍵詞的 CTR 和 CVR，以及關(guān)注網(wǎng)站的新增、留存等指標，在數(shù)據(jù)中找到優(yōu)化方向，而不是蒙頭盲干。

以上幾點，一共 800 字，實際上，你只要懂這幾個名詞，就足夠你和 AI 一起完成結(jié)構(gòu)優(yōu)化了。ASO 是類似的，他們的兩者的本質(zhì)，都是“怎么讓有需求的用戶，更方便的搜到你”，多一個曝光機會，就多一個下載可能。

開發(fā)過程

這是一篇開發(fā)的實錄，但開發(fā)的過程反而是最不需要展開講的。

在開發(fā)過程中，我最多的動作就是——截圖 → 發(fā)給 AI →問AI：這是什么意思？

對于你也一樣，只要前面的產(chǎn)品邏輯和架構(gòu)做好了，開發(fā)過程中，讓 AI 引導(dǎo)你前進即可，有不懂的地方，或者有不滿意的地方，就直接截圖讓它改，直到滿意為止。

四、部署上線

如何部署和上線，這個部分和 SEO 一樣，也是只需要知道幾個名詞兒，就能夠和 AI 開干。實際上，直接問 AI 如何部署，它大概率也能給你很好的實現(xiàn)路線。

首先是代碼托管。在開發(fā)時，代碼是運行在本地，如果想要被更多的人使用，就需要上傳到線上，需要有個線上的倉庫，儲存這些代碼，Github 是全球最大的代碼托管平臺，在早期階段，你可以放心大膽地把網(wǎng)站代碼托管到 Github，具體的操作，讓 AI 教你。
然后是網(wǎng)站部署。代碼到了線上，還得完成部署，才能真正被訪問，相當于“開了機”。Vercel 是國際上慣用的網(wǎng)站部署服務(wù)，你可以直接通過 Vercel 進行部署，部署成功后，Vercel 會給你分配一個子域名，理論上來講，使用這個域名，就已經(jīng)能夠在國際互聯(lián)網(wǎng)上訪問你的網(wǎng)站了，只不過這個域名屬于 Vercel，沒辦法 SEO，也沒辦法積累屬于自己的流量。
加速器、防火墻和域名。由于互聯(lián)網(wǎng)實際上是在各個網(wǎng)絡(luò)節(jié)點上做數(shù)據(jù)交換，因此，如果用戶的節(jié)點和網(wǎng)站的節(jié)點過遠，就會存在訪問速度的問題，這個時候，通過 Cloudflare 可以對網(wǎng)站在全球各個地區(qū)的訪問進行加速，它的節(jié)點遍布全球各處，同時 Cloudflare 也是非常強大的防火墻，能夠阻擋大多數(shù)日常網(wǎng)絡(luò)攻擊。域名可以在任何域名服務(wù)商處購買，推薦在 Cloudflare 順手買了，沒有中間商賺差價，也省掉了域名解析的復(fù)雜配置。

以上，除了域名需要花錢外，剩下的，免費服務(wù)就足夠滿足需要。在整個實踐過程中，有任何卡點都可以問 AI，AI 會事無巨細地給出一步一步的操作步驟，甚至我被 Vercel 封號，都是 Gemini 寫郵件幫我解封。

五、持續(xù)運營

具體的運營手段，不同產(chǎn)品各有不同，我只拋兩個基礎(chǔ)必備的環(huán)節(jié)。

部署數(shù)據(jù)埋點。通過觀察數(shù)據(jù)，我們可以知道產(chǎn)品未來的優(yōu)化方向，比如每個頁面、每個按鈕的的瀏覽量（PV）、訪問用戶數(shù)（UV）等等，但數(shù)據(jù)不是憑空產(chǎn)生，我們需要部署數(shù)據(jù)監(jiān)測工具，才能觀測到網(wǎng)站數(shù)據(jù)。這里可以使用 Google Analytics 4，部署的過程需要在網(wǎng)站中插入一段特定代碼，讓你的 AI 執(zhí)行這個插入的任務(wù)就行。
提交到 Google Search Console。GSC 是將網(wǎng)站提交至 Google，讓 Google 搜索引擎收錄的平臺，并且在這個平臺，也能夠監(jiān)控到用戶從哪些搜索關(guān)鍵詞進來，以及網(wǎng)站對應(yīng)的排名，屬于 SEO 的生命線。