Garden Skills — 給 AI Agent 裝上設計品味的四個 Skill

大部分 AI coding agent 生出來的網頁，長得都像同一個人做的。

紫粉漸層、圓角卡片、到處都是 emoji、千篇一律的 hero section 加上一句「Welcome to the future」。你說不出哪裡錯，但就是一秒認出「這是 AI 做的」。問題不在模型不夠聰明——問題在沒有人告訴它什麼叫品味。

Garden Skills 做的事很簡單：它不改模型、不改框架，它改的是 Agent 對「好的設計」的理解。四份 Markdown 檔案，零 runtime 依賴，裝上去之後 Agent 的設計輸出品質會好到你不太敢相信它是 AI 做的。

為什麼 AI 做的網頁都長一樣

你讓 Claude Code 做一個 landing page，它會給你一個「安全」的答案：漸層背景、卡片排版、icon 配文字三欄並排。不是因為它不會做別的，是因為沒有人告訴它「這些是陳腔濫調，你要避開」。

想像你找一個剛畢業的設計師。他技巧到位、Figma 用得很熟，但做出來的東西永遠是 Dribbble 上那種——好看，但沒有靈魂。你需要的不是教他更多技巧，是給他一套判斷標準：什麼該做、什麼不該做、為什麼。

Garden Skills 就是這套判斷標準。

這東西怎麼運作

Garden Skills 是中國前端技術部落客 ConardLi（「code 秘密花園」博主）開源的 Skill 套件包。遵循 Anthropic 的 Agent Skills 規範，每個 skill 就是一份 SKILL.md，用 Markdown 告訴 Agent 遇到特定任務該怎麼思考、怎麼行動。

不是程式庫，不需要 import 任何東西。純粹是方法論。

安裝一行搞定：

1	npx skills add ConardLi/garden-skills

裝完放在 .claude/skills/ 目錄下，Agent 自動偵測。你跟它說「幫我做一個 landing page」，它就會讀取對應的 SKILL.md 開始工作——你不需要手動啟動任何東西。

除了 Claude Code，Cursor、Codex CLI、Gemini CLI、OpenCode 都能用。

核心武器：Anti-AI Slop

整個套件最有意思的設計是「黑名單」。

web-design-engineer 這個 skill 裡面維護了一份 Agent 常犯的設計錯誤清單：紫粉漸層、假插圖 placeholder、emoji 濫用、毫無意義的裝飾動畫。這些在 AI 生成的網頁裡幾乎是標配，但拿去給任何一個真正的設計師看都會被退回來。

光有黑名單不夠，它還強制 Agent 在動手之前走完一套流程：

確認品牌資產（Logo、配色、產品圖）→ 釐清需求類型 → 參考目標產業的設計語言 → 建立 spacing、typography、color 規範 → 出 v0 草稿 → 精修 → 跑 5 維度評分。

最後那個評分有五個軸：哲學一致性、視覺層級、工藝品質、功能性、原創性。每個軸 0-10 分，不及格就打回去重做。

這套流程的設計邏輯其實很直覺——你不是在教 Agent 怎麼設計，你是在教它怎麼判斷設計。知道什麼是好的只是第一步，知道什麼是爛的才是真正的品味。

四個 Skill 分別做什麼

web-design-engineer：品味注入器

497 行的 SKILL.md，附 3 份 reference 文件。這是核心 skill。

它的靈感來自 Claude Design（Anthropic Labs 內部的設計系統提示詞），加上 ConardLi 自己的反陳腔濫調經驗。除了主流程，還有幾個值得一提的功能：品牌資產協議讓 Agent 優先用你的 Logo 和產品圖而不是自己亂編；Design Direction Advisor 在需求模糊時先推薦三種設計方向讓你選；生成的頁面內建 Tweaks 面板，可以即時切換配色和間距。

web-video-presentation：文章變影片

概念很妙——它不做影片剪輯，而是把技術文章轉成「偽裝成影片的互動式網頁」。Vite + React + TypeScript 建構，固定 1920×1080，點擊翻頁，用瀏覽器錄屏就是一支教學影片。

內建 10 個視覺主題（paper-press、midnight-press、terminal-green），搭配 MiniMax CLI 做語音合成。你寫完一篇技術文章，跑一次這個 skill，省掉學 Premiere 或 DaVinci Resolve 的時間。

gpt-image-2：94 個 Prompt 模板庫

不只是「幫你生圖」的 skill，更像一本 prompt 工程手冊。94 個結構化模板，18 大類——UI Mockups、Product Visuals、Academic Figures、Technical Diagrams、Poster & Campaigns，一路到 Infographics 和 Branding。

學術論文配圖那一塊特別值得看。Pipeline 圖、神經網路架構圖、Graphical Abstract，規格對準 Nature/IEEE。做過學術海報的人應該知道，光是讓圖片格式符合出版要求就能花掉半天。

kb-retriever：本地知識庫檢索

如果你公司有一堆內部文件散落在某個目錄裡——Markdown、PDF、Excel 什麼都有——這個 skill 讓 Agent 用漸進式檢索的方式回答問題。先讀索引檔定位相關文件，再逐層深入，最多迭代 5 輪，最後帶來源引用回答。

不用架 RAG pipeline，不用裝向量資料庫。Agent 直接讀本地檔案。

限制在哪

四個 skill 集中在前端視覺和內容製作。後端、資料庫、DevOps——這個套件幫不上忙。

gpt-image-2 的 Mode A 需要 OpenAI API Key，生成的是 PNG 點陣圖不是 SVG。web-video-presentation 的語音合成只預設支援 MiniMax CLI。每個 SKILL.md 都有 400-500 行加上 references，同時啟用多個 skill 會吃掉不少 context window。

還有一點：SKILL.md 原文是簡體中文撰寫的。Agent 一樣能理解，但如果你自己要讀指令檔參考，得習慣一下。