prototype skill 是什麼、怎麼用：Matt Pocock 的一次性原型 Skill，用可點的 HTML 驗證邏輯或對比介面方案

本文根據 mattpocock/skills 倉庫裏該技能的 SKILL.md 與倉庫 README 整理，資料核對於 2026-10-11。skills.sh 榜單當日顯示該技能累計安裝約 91.5 萬次；所在倉庫 mattpocock/skills 在 GitHub 約 28.4 萬 Star（同日數據）。技能內容會隨倉庫更新，以倉庫為準。

這個 Skill 做什麼

有些設計問題靠討論定不下來：這個狀態機在邊界情況下到底合不合理？這個頁面用哪種佈局更好？prototype 的答案是做個東西出來看。description：構建一個用完即棄的原型來回答設計問題；用戶想快速驗證某個狀態模型或邏輯「感覺對不對」，或想探索介面該長什麼樣時使用。它對原型的定義是：回答一個問題的一次性代碼，問題決定原型的形態。

技能先讓智能體判斷要回答的是哪類問題（看你的話、周圍的代碼，或者直接問你），然後走兩條分支之一：

• 「這套邏輯 / 狀態模型順不順？」——按 LOGIC.md 做：產出單個可分享的 HTML 文件，裏面有自由操作的按鈕，也有分標籤頁的引導式走查，把狀態機推到那些紙面上很難想清的情形裏，而且要讓不寫代碼的人也能自己點。
• 「它應該長什麼樣？」——按 UI.md 做：生成幾個差別很大的介面方案供對比，而不是同一個方案的微調。

兩條分支共用的規則寫在最後，核心是原型不進入正式代碼——它的任務是換來一個答案。

怎麼安裝

prototype 隨 mattpocock/skills 整套安裝。Claude Code 用插件（命令來自倉庫 README）：

text
claude plugin install mattpocock-skills@claude-plugins-official

Codex 先 codex plugin marketplace add mattpocock/skills 再 codex plugin add mattpocock-skills@mattpocock；Cursor、OpenCode 等用 npx skills@latest add mattpocock/skills，在列表裏勾選需要的技能。README 提醒兩點：插件和 skills.sh 兩種方式每個工具只選一種，否則每個技能會出現兩份；勾選時帶上 setup-matt-pocock-skills，並在每個倉庫裏先運行一次，它會問你用哪個 issue 跟蹤器、分診用哪些標籤、文檔存在哪裏——庫裏不少技能依賴這份配置，也會互相調用。

倉庫整體介紹和其他安裝方式，詳見本站《mattpocock/skills 是什麼、怎麼安裝：Matt Pocock 的工程師 Skills（grill-me、tdd、to-spec）》。

怎麼用

• 「訂單的退款狀態流轉我拿不準，做個原型讓我點點看」——得到一個可以發給產品同事的 HTML。
• 「設定頁應該怎麼佈局？給我幾個完全不同的方向」。
• 在拷問或寫規格的過程中遇到懸而未決的設計問題，也可以臨時調用它。

適合誰 / 侷限

適合需要和非技術同事對齊邏輯的開發者，以及在動手做正式介面前想先比較方向的人。原型刻意不講工程質素，直接拿去當正式實現會埋坑；邏輯原型模擬的是你描述的規則，和真實系統是否一致仍要靠後續實現與測試保證。

注意事項

• 許可：MIT。
• 會生成文件：主要是獨立的 HTML，確認它的存放位置，別誤提交進倉庫。
• 不依賴外部服務；這是庫裏少數允許模型自動觸發的技能之一。