用AI畫了一年原型圖後，我做了這個 Skill

過去呢一年我一直都用緊 AI 嚟畫原型圖（prototype），佢幫我提升咗至少 10 倍嘅效率。

諗返以前用 Axure 喺度拖嚟拖去搞足兩日，好唔容易先畫完個原型，點知評審會嗰陣大家一輪嘴咁俾意見，返嚟又要改過。改完之後喺開發過程入面，仲要再改，每個產品經理（PM）嘅工作至少有 50% 都係嘥咗喺呢啲嘢上面，真係好浪費。

畫原型呢個技能當你掌握咗之後，一有任務嚟，就係重複咁「搬磚」……搬磚……呢種技能唔會再有提升，畫原型反而令到產品經理呢份工變得好沉悶。

但係，如果呢啲全部交晒俾 AI 嚟做。

個流程就會變成咁：

一張相就復刻到你個產品

→ 用自然語言描述需求 

→ AI 直接喺復刻咗嘅產品上面輸出設計 

→ 評審會收集修改意見 

→ 將意見發畀 AI，輸出原型圖同埋設計文件。

全程唔需要任何拖拖拉拉。全靠 AI 實現。而且全部都係高保真（high-fidelity）嘅。幾分鐘打磨一張圖，半日搞掂幾十個頁面唔係夢。

而家我將上面畫原型圖嘅流程做成咗個 Skill。

我用呢個 Skill 復刻咗一個 bilibili 產品，睇下下面嘅對話。

左邊係叫 AI 根據網站復刻，整體效果差咁啲意思，於是又發咗截圖去優化（右邊對話）。

跟住就整咗呢個復刻後嘅 bilibili 頁面👇

參考下原版👇，除咗圖片之外，佈局、文字、各種元素都係一致嘅。

呢個復刻嘅產品唔係一個簡單嘅 HTML 頁面，佢係用 Next.js + TwindCSS 構建嘅本地項目，直接喺瀏覽器入面行。

你對呢個項目嘅 code 擁有絕對掌握權，可以隨心所欲咁修改、增加、刪減各種頁面、掣同埋互動。

淨係有頁面仲未夠。一定要有埋設計文檔，而且要同頁面有互動，咁先算係完整嘅產品設計。

睇下個頁面👇右下角有個設計文檔嘅掣，撳落去就會顯示每一次你用 AI 喺呢個頁面下設計嘅新功能。

佢係基於你同 AI 嘅對話，根據你提供嘅設計文檔 template 出一份 PRD。

呢一切都封裝咗喺一個 skill 入面。

全程原型圖加埋設計文檔，都係用自然語言對話嚟實現。

Skill 嘅安裝可以直接跳去文末攞，下面會講解呢個 Skill 嘅實現邏輯。

如果你作為產品經理，仲用緊設計工具畫原型圖，請務必意識到你係行緊冤枉路。

產品經理完全唔再需要 Axure 同 Figma 呢類工具喇。

原型工具係將你腦入面嘅諗法可視化，等成個團隊嘅認知一致。

AI 而家完全可以做到呢一點，而且做得仲快、保真度仲高，仲可以自動生成埋設計文檔。

寫 code 同內容係 AI 最擅長生成嘅嘢。

喺傳統流程入面，你需要學工具、拖組件、執樣式、寫互動說明，每一步都喺度消耗緊你嘅時間同精力。

而家，你只需要用自然語言話畀 AI 聽你要啲咩，佢就會幫你實現。

產品經理最核心嘅能力從來都唔係「畫圖」，而係「諗清楚」問題同解決方案。

喺未用呢個 skill 之前，我係用下面呢兩種方法整原型圖嘅：

方法一：將產品截圖發畀 AI，等佢輸出 HTML，然後喺呢個 HTML 上面編輯，加個掣、改下提示語。

方法二：將產品復刻成本地 Next.js 工程，好處係可以重用，下次畫原型圖嗰陣仲可以喺呢個框架下修修補補。

而家有咗 Skill，我將呢兩種方式合併做一個。

你只需要發送一張相或者一個網站網址，喺 Chrome 入面打開嗰個網站，AI 就能夠將佢復刻到本地。

再基於呢個復刻嘅工程文件，用自然語言描述你想要嘅變化，AI 就可以交付原型圖 + 設計文檔。

簡單講下呢個 Skill 嘅工作流程，總共分五步。

第一步：用戶提供網頁地址或者截圖。啟動 Skill 之後，Claude 會要求你提供目標網頁嘅 URL 或者介面截圖。

第二步：Chrome 自動化像素級擷取。Claude 會調用 Chrome 瀏覽器自動化工具——導航、讀取頁面樹、截圖、用 JS 提取樣式——採集頁面嘅完整結構、配色、字體、間距同埋組件資訊。如果 Chrome 用唔到，會自動退返去用 WebFetch + 視覺知識。

第三步：構建並交付項目。自動創建 Next.js 14 + Tailwind CSS 項目，構建完之後會自動喺瀏覽器啟動。

第四步：對比優化。交付之後 Claude 會邀請你對比返原頁面同埋 Clone 出嚟嘅效果。你可以發送對比截圖或者文字 feedback，Claude 會逐輪修正，直到你滿意為止。

第五步：功能迭代 + 設計文檔生成。每次加新功能或者改頁面，Claude 都會同步輸出 code 嘅變更同埋 Markdown 格式嘅設計文檔。

喺傳統工作流入面，原型係一份文件，PRD 係另一份文件。改咗原型又成日唔記得改文檔。

開發同事對住過晒期嘅設計文檔寫 code，結果同原型對唔上，又要返工（重新做過）。

呢個 Skill 徹底解決咗呢個問題。

設計文檔直接顯示喺前端介面入面，同功能融合埋一齊。

頁面右下角有個浮動掣，撳一下就可以展開設計文檔面板，成個互動體驗非常順滑。每次改前端頁面嗰陣，設計文檔亦都會同步更新。

打開原型頁面，既可以睇到互動效果，又可以直接查閱設計說明，再都唔使兩邊來回翻。方便自己睇，亦都方便開發人員睇。

呢個 Skill 唔單止係畫原型用嘅。

佢嘅核心能力係：參考一個網站，喺本地完整搭建佢嘅工程文件，做出一個同目標網站一模一樣嘅產品。

所謂工程文件，就係一個 code 庫，可以喺本地部署，亦都可以喺 github 託管。

如果你見到一個鍾意嘅網站，直接用呢個 skill 幫你復刻。

搵一個類似產品嘅頁面做參考，AI 幫你搭好前端框架，你再往入面填業務邏輯。

呢個 skill 係你 vibe coding 嘅起點，當你擁有一個產品嘅前端框架，跟住落嚟實現佢嘅後端邏輯就變得簡單晒。

Skill 就係一個資料夾，將佢安裝到你常用嘅 Agent 工具就可以用。

最簡單嘅安裝方式：話畀你嘅 AI 聽

「幫我安裝呢個 Skill：https://github.com/zephyrwang6/protodesign」

推薦用Claude 嘅 Cowork、codex，效果會更加好。至於要復刻嘅網站，一定要先喺瀏覽器度打開，方便 Agent 操作你個 Chrome 瀏覽器去攞頁面資料。

整呢個 Skill 嘅過程入面，我一直喺度諗緊一件事：

如果我可以直接攞到生產環境（production）嘅 code，咁就唔使再復刻產品啦。

產品經理（PM）可以直接基於生產代碼去做設計，再交畀開發同測試去評審。

咁如果用戶有權限去改 code 呢？

係咪每個人都可以定製化屬於自己嘅產品？

而家好多 SaaS 產品開始 CLI 化，飛書前兩日先啱啱咁樣做咗，仲開埋源添。用戶攞到 CLI 嘅能力，就可以隨意調用產品功能，亦可以基於 CLI 嘅能力自己組裝一個定製化嘅介面。

唔再經由統一嘅介面去操作產品，呢樣嘢唔係未來，而係而家就已經可以實現到。

當 Agent 可以接管代碼，甚至直接訪問產品功能嗰陣，產品經理仲有咩價值？

有一點我非常肯定，產品經理最唔缺嘅能力就係「將需求畫出嚟」。

真正稀缺嘅能力係將團隊有限嘅資源放喺最應該做嘅事上面：判斷優先次序、定義目標、攞到商業結果。

將用戶需求轉化成產品功能，只係表面動作；更關鍵嘅係要先回答三件事：

1 而家核心問題係咩？

2 而家做係咪時機正確？

3 做完之後能唔能夠提升業務價值？

隨住 AI 發展得更成熟，需求會越嚟越多，有需求就需要產品經理，AI 唔會取代產品經理，但會重組產品能力結構：

低階執行會被自動化，高階能力會被放大。

由初級到高級嘅路徑會變短，「畫圖仔」會減少；

但洞察、分析、決策、協同與領導力，會成為產品崗位嘅硬性要求。

另外，我仲整咗一個更輕量嘅 Skill，可以將圖片直接轉做 HTML，更加適合輕量化嘅需求設計。

關於產品經理相關嘅 Skill，我仲有各類流程圖繪製 Skill、需求文檔（PRD）編寫 Skill、產品評審團 Skill、PM 數據分析 Skill、Use Case（用例）編寫 Skill、問卷調查設計 Skill 等等。

呢啲 Skill 仲優化緊，會優先同訂閱社群嘅朋友分享。有興趣嘅可以訂閱我嘅 AI 生產力專欄，加入社群，同更多夥伴一齊用 AI 提高生產力。

過去一年我都在用 AI 畫原型，它給帶來至少 10 倍的效率提升。

想想以前用 Axure 拖拖拽拽兩天，終於畫完原型，評審會上大家一頓輸出，回來又改。改完在開發過程中，還得再改，每個產品的工作至少有50%都花在這上面，非常浪費。

畫原型這個技能當你掌握後，有任務來，就是重複搬磚..搬磚....技能不會再有提升，畫原型讓產品這個工作變得無趣。

但，如果這都交給 AI 來做。

流程就變成了這樣：

一張圖片復刻你的產品

→ 用自然語言描述需求 

→ AI 直接在復刻的產品上輸出設計 

→ 評審會收集修改意見 

→ 把意見發給 AI，輸出原型和設計文檔。

全程不需要任何拖拖拽拽。全靠 AI 實現。而且都是高保真的。幾分鐘打磨一張圖，半天完成幾十個頁面不是夢。

現在我把上面原型繪製的流程做成了 Skill 。

我用這個 Skill 復刻了一個 bilibili 產品，看下面對話。

左側是讓 AI 根據網站復刻，整體效果差點意思，於是又發了截圖，進行優化（右側對話）

然後就有了復刻後的 bilibili 頁面👇

參考下原版👇，除了圖片，佈局、文字、各種元素都是一致的。

這個復刻的產品並非一個簡單的 HTML 頁面，它是用 Next.js+TwindCSS 構建的本地項目，直接跑在瀏覽器裏。

你對這個項目地代碼擁有絕對的掌握權，可以隨心所欲的修改，增加，刪減各種頁面、按鈕、交互。

有了頁面還不夠。必須得有設計文檔，而且要和頁面有互動，這才算是完整的產品設計。

看頁面👇右下角有一個設計文檔的按鈕，點擊會顯示每一次你用 AI 在這個頁面下設計新功能。

它基於你和 AI 的對話，根據你提供的設計文檔模板出一個PRD。

這一切都封裝在一個 skill 裏。

全程原型圖+設計文檔，都用自然語言對話實現。

Skill 的安裝可以直接跳轉文末獲取，下面講解這個 Skill 的實現邏輯。

如果你作為產品，還在用設計工具畫原型，請務必認識到這是在走彎路。

產品經理完全不需要 Axure 和 Figma 這樣的工具了。

原型工具是把你腦子裏的想法可視化，讓團隊對齊認知。

AI 現在完全能做到這一點，而且做得更快、保真度更高、還能自動生成設計文檔。

代碼和內容是 AI 最擅長生成的。

傳統流程裏，你需要學工具、拖組件、調樣式、寫交互說明，每一步都在消耗你的時間和精力。

現在，你只需要用自然語言告訴 AI 你要什麼，它就幫你實現。

產品經理最核心的能力從來不是"畫圖"，而是"想清楚"問題和解決方案。

在沒有使用這個 skill 的時候，我是用下面兩種方法制作原型的：

方法一：把產品截圖發給 AI，讓它輸出 HTML，然後在這個 HTML 上編輯，加個按鈕、改個提示語。

方法二：把產品復刻成本地 Next.js 工程，好處是可以複用，下次畫原型時還能在這個框架下修修補補。

現在有了 Skill，我把這兩種方式合併成了一個。

你只需要發送一張圖片或一個網站地址，在 Chrome 中打開該網站，AI 就能將其復刻到本地。

再基於這個復刻的工程文件，用自然語言描述你想要的變化，AI 可以交付原型圖+設計文檔。

簡單說一下這個 Skill 的工作流程，總共五步。

第一步：用戶提供網頁地址或截圖。啓動 Skill 後，Claude 會請求你提供目標網頁的 URL 或界面截圖。

第二步：Chrome 自動化像素級捕獲。Claude 調用 Chrome 瀏覽器自動化工具——導航、讀取頁面樹、截圖、JS 提取樣式—，採集頁面的完整結構、配色、字體、間距和組件信息。若 Chrome 不可用，自動回退到 WebFetch  + 視覺知識。

第三步：構建並交付項目。自動創建 Next.js 14 + Tailwind CSS 項目，構建完成後自動在瀏覽器啓動。

第四步：對比優化。交付後 Claude 邀請你對比原頁面與克隆效果。你可以發送對比截圖或文字反饋，Claude 逐輪修正，直到滿意為止。

第五步：功能迭代 + 設計文檔生成。每次新增功能或修改頁面，Claude 同步輸出代碼變更與 Markdown 格式的設計文檔。

傳統工作流裏，原型是一份文件，PRD 是另一份文件。改了原型忘了改文檔。

開發同學對着過期的設計文檔寫代碼，結果跟原型對不上，又得返工。

這個 Skill 徹底解決了這個問題。

設計文檔直接顯示在前端界面裏，與功能融合在一起。

頁面右下角有一個浮動按鈕，點一下就能展開設計文檔面板，整個交互體驗非常順滑。每次修改前端頁面的時候，設計文檔也會同步更新。

打開原型頁面，既能看到交互效果，又能直接查閲設計說明，再也不用兩邊來回翻了。方便自己查看，也方便開發查看。

這個 Skill 不只是畫原型用的。

它的核心能力是：參考一個網站，在本地完整搭建其工程文件，做出一個和目標網站一模一樣的產品。

所謂工程文件，就是一個代碼倉庫，可本地部署也可在 github 託管。

如果你看到一個喜歡的網站，直接用這個 skill 幫你復刻。

找一個類似產品的頁面作為參考，AI 幫你搭好前端框架，你再往裏填業務邏輯。

這個 skill 是你 vibe coding 的起點，當你擁有一個產品的前端框架，接下來實現其後端邏輯就變得簡單了。

Skill 就是一個文件夾，把它安裝到你常用的 Agent 工具就能使用。

最簡單的安裝方式：告訴你的 AI

"幫我安裝這個 Skill：https://github.com/zephyrwang6/protodesign"

推薦使用Claude 的 Cowork、codex，效果更好，對於要復刻的網站，一定先在瀏覽器裏打開，方便 Agent 操作你的 Chrome 瀏覽器獲取頁面。

做這個 Skill 的過程中，我一直在想一件事：

如果我能直接拿到生產環境的代碼，復刻產品就不需要了。

產品經理能直接基於生產代碼做設計，在提給開發測試來評審。

那麼如果用戶有編輯代碼的權限呢？

是不是每個人都能定製化自己的產品了。

現在很多SAAS 產品開始 CLI 化，飛書前兩天剛這麼做了而且還開源了，用戶拿到 CLI 的能力，就可以隨意調用產品功能，也可以基於 CLI 的能力自組裝一個定製化的界面。

不再通過統一的界面操作產品不是未來，是現在就能實現了。

當 Agent 可以接管代碼甚至直接訪問產品功能時，產品經理的價值還有什麼？

有一點我非常確信產品經理最不稀缺的能力就是“把需求畫出來”。

稀缺的能力是把團隊有限資源放在最該做的事上：判斷優先級、定義目標、拿到商業結果。

把用戶需求轉成產品功能，只是表層動作；更關鍵的是先回答三件事：

1 現在的核心問題是什麼？

2 現在做是否時機正確？

3 做完能否提升業務價值？

隨着 AI 發展更成熟需求會越來越多，有需求就需要產品經理，AI 不會替代產品經理，但會重排產品能力結構：

低階執行被自動化，高階能力被放大。

從初級到高級的路徑會變短，“畫圖仔”會減少；

但洞察、分析、決策、協同與領導力，會成為產品崗位的硬要求。

另外，我還做了一個更輕量的 Skill，把圖片直接轉成 HTML，更適合輕量化的需求設計。

關於產品經理相關的 skill 我還有各類流程圖繪製的 Skill、需求文檔編寫 Skill、產品評審團 Skill、PM 數據分析 Skill、用例編寫 Skill、問卷調研設計 Skill等等。

這些 Skill 還在優化，會優先和訂閲社羣的朋友們分享，感興趣的可以訂閲我的 AI 生產力專欄，加入社羣，和更多小夥伴一起用 AI 提高生產力。