最後更新：2026 年 7 月 12 日｜資料以官方 GitHub README 與 Stitch 官方文件為準
Google 開源了一套 Agent Skills，卻沒有替它們發明新格式。它直接沿用了對手 Anthropic 訂的那一套。
一句話結論：stitch-skills 是 Google Labs 開源的 7 個 Agent Skills，接上 Stitch MCP 之後可以一句話從設計稿生出多頁網站、轉成 React 或 shadcn/ui 元件，甚至產出走查影片；重點是它照 Agent Skills 開放標準寫，Claude Code、Cursor、Gemini CLI、Codex 全部通吃。截至 2026 年 7 月 12 日，7,114 顆星、947 個 fork、Apache 2.0 授權。
stitch-skills 到底是什麼？
它是一個 skill 倉庫，不是一個 App，也不是又一個 AI 編輯器。倉庫裡放了 7 個 SKILL.md，每一個都是一份寫給 AI agent 看的作業手冊：什麼時候該做這件事、要用哪個工具、做完要檢查什麼。你把 skill 裝進 Claude Code 或 Cursor，agent 讀完就知道怎麼操作 Google 的 Stitch。
Stitch 是 Google Labs 那個「用講的就生 UI」的設計工具。它自己會出畫面，但畫面留在網頁上，你還是得手動把 HTML 搬進專案。Stitch MCP 負責打通這條管線，而 stitch-skills 負責教 agent 怎麼把管線用對——先問清楚需求、再產畫面、再落地成程式碼、最後回頭檢查。
倉庫由 Google Labs 在 2026 年 1 月放出，TypeScript 為主，Apache 2.0 授權。README 最後一句寫得很老實：這不是 Google 官方支援的產品。實驗性質，用之前先知道這件事。
為什麼「Google 用了 Anthropic 的格式」比 skill 本身重要？
因為這代表格式戰打完了。過去兩年，每家廠商都想定義自己那套「怎麼教 AI 做事」的檔案：外掛、擴充、prompt 模板，各寫各的。結果是你在 Cursor 調好的東西，換到 Claude Code 要重來一次。
Agent Skills 這個開放標準把它收斂成一份 Markdown：SKILL.md，開頭一段 YAML 寫名字和描述，下面用人話寫該怎麼做。Anthropic 先提出，然後所有人都跟上了。安裝這件事甚至已經有了自己的套件管理員——Vercel Labs 做的 npx skills，用 GitHub 當註冊表，一行指令把 skill 丟進你的 agent 設定目錄。
Google 沒有另立門戶。它把自家設計工具的能力，包成別人家的格式，發到 GitHub 上讓所有 agent 拿去用。
對散戶和一般使用者，這句話翻成白話是：你今天學會寫 skill、學會裝 skill，這個技能不會因為換工具而作廢。它正在變成 AI 世界的通用插件格式。順帶一提，微軟的 SkillOpt 更進一步——它不改模型權重，只把 skill.md 練得更好，就把分數拉高了 23.5 分。方向完全一致：真正的槓桿在 skill，不在模型。
7 個 skill 各做什麼？一張表看完
| Skill | 它負責什麼 | 什麼時候用 |
|---|---|---|
stitch-design | 總入口。把模糊的需求補成好 prompt、整理設計系統（.stitch/DESIGN.md）、產出與修改高擬真畫面 | 不知道從哪開始就先裝這個 |
stitch-loop | 從一句話生出整個多頁網站，自動組織檔案、自動驗證 | 要做的是「一個站」而不是「一張圖」 |
design-md | 分析 Stitch 專案，反寫成一份 DESIGN.md 設計系統文件 | 想讓風格在每一頁都一致 |
enhance-prompt | 把「做個好看的登入頁」補成專業設計 brief | 你不會用設計術語講需求 |
react-components | 把 Stitch 畫面轉成 React 元件系統，附驗證與設計 token 一致性檢查 | 要落地到 React 專案 |
remotion | 用 Remotion 把設計稿產成走查影片，有轉場、縮放、字幕 | 要交客戶、要發社群、要做 demo |
shadcn-ui | shadcn/ui 元件的挑選、安裝、客製與最佳實務 | 你的專案本來就在用 shadcn |
其中 design-md 我們之前單獨寫過一篇——那份 DESIGN.md 格式就是把品牌的顏色、字體、間距寫成一份給 AI 看的說明書，讓它每次做出來的畫面不走樣。這次的重點不是它，而是它旁邊那 6 個。
最值得看的是 stitch-loop：AI 怎麼做「不會做到一半失憶」的長任務？
如果只看一個 skill，看這個。它解決的是所有 AI agent 的老毛病：任務一長就斷片。
做網站不是產一張圖，是產十張圖，而且十張要長得像同一個品牌、彼此的導覽列要連得起來。傳統做法是你一頁一頁重新下指令，每次還要把設計規範再貼一遍。跑到第五頁，AI 早忘了第一頁長什麼樣。
stitch-loop 用的是「接力棒」寫法：每一輪 agent 先讀一份 baton 檔，知道這輪要做哪一頁；產完頁面、接進網站、把導覽連好，然後在結束前把下一棒的任務寫進 baton 檔，才收工。下一輪開始時，它讀的是自己上一輪留下的紙條。整站的地圖與進度則記在 SITE.md 裡。
這個設計很值得偷。它等於承認一件事：AI 的記憶不可靠，所以把記憶寫進檔案，不要放在對話裡。你自己在用 Claude 或 ChatGPT 跑長任務時，同樣可以叫它每做完一步就更新一份 TODO 檔——這比任何 prompt 技巧都有效。
怎麼裝？四步，十分鐘之內
- 先備好 Node.js 18 以上。終端機打
node -v，有版本號跑出來就行。 - 接上 Stitch MCP。官方文件在
stitch.withgoogle.com/docs/mcp/setup。最省事的路是跑安裝精靈，它會問你要設定哪些工具（Claude、Cursor、Cline 等）、要你貼 Stitch API key，然後自動改好各家的 MCP 設定檔。API key 用 Google 帳號登入 Stitch 取得。 - 裝 skill。先列出倉庫裡有什麼：
npx skills add google-labs-code/stitch-skills --list
再裝你要的那個（--global表示裝到全域，不綁單一專案）：npx skills add google-labs-code/stitch-skills --skill stitch-design --global
注意 React 那個的參數寫法比較特別，是--skill react:components。 - 重開你的 agent，然後用人話下指令。例如「用 stitch-loop 幫我做一個三頁的健身工作室網站，深色系、字體要現代」。它會自己走完：擴寫 prompt → 產設計系統 → 一頁一頁生 → 接進專案。
npx skills 這支 CLI 會自動偵測你電腦上裝了哪些 coding agent，把 SKILL.md 丟到對的資料夾（.claude/skills/ 或 .agents/skills/）。它支援的 agent 已經超過 70 種，Claude Code、Cursor、Codex、OpenCode、Gemini CLI 都在裡面。順帶一提，Gemini CLI 的未來走向有變數，我們在這篇講過，選工具前值得看一眼。
你該裝哪幾個？點兩下就知道
7 個全裝是浪費——skill 越多，agent 的注意力越散。勾一下你要做的事，下面會給你該裝的清單和指令。
🧩 stitch-skills 安裝決策器
勾選你的需求，右下角會生成可直接複製的安裝指令。
指令以官方 README 為準；Stitch MCP 需先完成設定並取得 API key。
它跟 Astryx、openpencil 這些工具差在哪？
2026 年上半年，「讓 AI 做設計」這條路上塞滿了工具，但它們解決的其實不是同一個問題。
| 工具 | 誰做的 | 它真正解決什麼 | 你需要什麼 |
|---|---|---|---|
| stitch-skills | Google Labs | 教 agent 怎麼把 Stitch 用到底：從 prompt 到多頁網站到影片 | Stitch API key + 任一 coding agent |
| DESIGN.md | Google Labs | 一份設計規格檔，讓 AI 每次做的畫面風格一致 | 只要一個文字檔 |
| Astryx | Meta | 150+ 個現成元件 + MCP，讓 AI 直接砌 UI | 接受 Meta 那套設計語言 |
| openpencil | 開源社群 | 用講的生 UI，可匯出 React | 不想綁大廠雲端 |
簡單說：Astryx 給你零件，DESIGN.md 給你規矩，stitch-skills 給你流程。三個可以疊著用，不是互斥關係。
有什麼坑？裝之前先知道這四件事
- 它不是 Google 官方支援的產品。README 自己寫的。Google Labs 的東西收得很快，你不能把生產線押在上面。
- 設計流程綁在 Google 雲端。畫面是 Stitch 產的，需要 API key、需要登入。要完全離線或自架，這條路走不通。額度與收費以官方公告為準，別聽人轉述。
- skill 是指引，不是保證。SKILL.md 說到底是寫給 AI 看的說明書，agent 讀完會照做，但不會百分之百照做。生出來的 React 元件仍然要人看過，不要直接推上正式站。
- 裝太多會反效果。skill 全部塞進 agent 的上下文，7 個一起裝等於每次對話都要它先讀完七份說明書。挑 2 到 3 個就好。
誰適合用？誰不用碰？
| 你是誰 | 建議 | 理由 |
|---|---|---|
| 想自己做一個網站、但不會設計的個人開發者 | ✅ 直接裝 stitch-design + stitch-loop | 從一句話到整站，中間不用你想版面 |
| 接案做 landing page 的自由工作者 | ✅ 加裝 remotion | 交件時附一支走查影片，報價可以往上抬 |
| 已經在用 shadcn/ui 的前端 | ✅ 值得試 | 設計稿直接落地成你熟悉的元件庫 |
| 設計師，講究像素級控制 | ⚠️ 當草稿工具 | AI 生的畫面是起點不是終點，細節你還是得自己調 |
| 企業內部有嚴格資安規範 | ❌ 先問 IT | 設計稿要上傳 Google 雲端處理 |
| 只是想看看 AI 能不能畫圖 | ❌ 不用裝 | 直接開 Stitch 網頁版玩就好，不必動 MCP |
學會這個，能幫你賺到什麼？
把工具講完，剩下的問題才是重點：這東西能不能變成一條出路。
最直接的一條是「小網站」這門生意。餐廳、工作室、個人品牌、活動報名頁，這類案子市場上一直有，過去卡在你得會設計、會切版、會前端。現在的分工變成：Stitch 出畫面，skill 管流程，agent 落程式碼，你負責問對需求、審好結果、對客戶交代。時間從幾天壓到幾小時，你賣的是交付速度。
第二條更長線一點：學會寫 skill，而不只是裝 skill。stitch-skills 的價值示範就在這裡——Google 把自家工具的操作知識，包成一份任何 agent 都讀得懂的 Markdown。你手上那套「只有你會的流程」，同樣可以包成 skill：報價流程、選品流程、對帳流程。這一步，才是把個人經驗變成可以複製、可以賣的資產。想看更多這條路的實例，可以順著讀 last30days（一個 skill 做完整份市場調研）和 Desktop Commander（把 AI 接上你整台電腦）。
常見問題（FAQ）
stitch-skills 免費嗎？
skill 倉庫本身完全免費，Apache 2.0 開源，任何人可以拿去改。但它要搭配 Stitch MCP 才有用，Stitch 需要 Google 帳號登入取得 API key，額度與收費以 Google 官方公告為準。
不用 Claude Code，改用 Cursor 或 Gemini CLI 可以嗎？
可以，這正是重點。這 7 個 skill 照 Agent Skills 開放標準寫，官方明列相容 Antigravity、Gemini CLI、Claude Code、Cursor。npx skills 這支 CLI 會自動偵測你裝了哪些 agent，把檔案放到對的位置。
我完全不會寫程式，用得上嗎？
裝設定那一段需要用終端機貼幾行指令，過了這關之後就是用中文下指令。真正的門檻不在寫程式，在你能不能把需求講清楚——而 enhance-prompt 這個 skill 存在的意義，就是幫你把話講清楚。
7 個 skill 要不要一次全裝？
不建議。skill 的內容會進到 agent 的上下文，裝越多它越容易分心，也越燒 token。先裝 stitch-design，需要做多頁網站再加 stitch-loop 和 design-md。
Agent Skills 是 Anthropic 專屬的嗎？
不是。它由 Anthropic 提出，但已經是開放標準，Google、Vercel、微軟、開源社群都在用同一套 SKILL.md 格式。這也是 Google 這次沒有另立格式的原因——標準已經成形，另做一套只會讓自己被邊緣化。
結論：真正的新聞不是 7 個 skill，是 Google 低頭了
stitch-skills 本身很實用：一句話生整站、一鍵轉 React、順手產影片，7,114 顆星不是灌水。如果你在做網站、接小案子、或只是想快點把腦裡的畫面變成能點的東西，值得裝。
但更值得記住的是它的姿態。世界第二大 AI 公司，把自家旗艦設計工具的操作知識，包成競爭對手訂的格式，開源丟到 GitHub 上。這不是慷慨，是計算——當一個格式變成標準，站在標準外面的人不是特立獨行，是缺席。
下一個問題留給你：如果 skill 是新的插件格式，那你手上有哪一套流程，值得包成一份 SKILL.md？
參考資料
- google-labs-code/stitch-skills · GitHub（README、7 個 skill 清單、授權）
- Stitch MCP 官方設定文件
- vercel-labs/skills · npx skills CLI（Agent Skills 套件管理）
免責聲明與利益揭露：本文為工具整理與實測筆記，不構成投資建議。文中星數、功能、授權與安裝方式截至 2026 年 7 月 12 日，AI 工具更新極快，實際以官方公告為準。stitch-skills 為 Google Labs 實驗性專案，官方明示非正式支援產品，導入生產環境請自行評估風險。本站部分連結為合作連結，若你透過連結註冊，我們可能獲得少量佣金，不影響你的權益與本文評價。
延伸閱讀：完整的 GitHub 熱門開源 AI 專案精選，20+ 個開源工具依用途分類收藏、持續更新。
發表迴響