字節大佬開源Garden Skills 從網頁設計到生圖檢索全搞定
整理版優先睇
Garden Skills：三個超實用Skills，一次過幫AI裝上設計品味、本地生圖同漸進式檢索能力。
話說你成日覺得AI生成嘅網頁永遠係嗰個樣——藍色按鈕、紫紅漸變、圓角大卡片？呢個唔係你問題，而係大模型天生有審美趨同嘅缺點。最近字節大佬ConardLi開源咗Garden Skills，一個GitHub項目，專為AI加載生產級Skills而設。作者本身係知名前端技術博主，佢嘅目標係畀AI嘅能力跳出一式一樣嘅框架，真正變得更實用。
呢個Skills合集目前包含三個核心技能：web-design-engineer（設計品味）、gpt-image-2（本地生圖兼prompt顧問）同kb-retriever（漸進式知識庫檢索）。每個技能都經過精心打磨，唔係求數量，而係求質素。仲有一個即將發佈嘅web-video-presentation，可以將腳本變成電影級演示。整體結論係：AI嘅能力上限取決於你畀佢裝咗乜嘢技能包，呢套Skills絕對值得一試。
安裝方式超簡單，兼容Claude Code、Cursor等主流平台，MIT開源，想玩就玩。
- web-design-engineer 提供反俗套清單同六步工作法，令AI生成網頁從「能用」升級到「驚豔」。
- gpt-image-2 一個技能三種模式：本地API生圖、宿主委託、顧問寫prompt，冇API Key都用到。
- kb-retriever 用分層索引、grep優先、最多五輪檢索，取代成個檔案塞畀AI嘅暴力做法，慳token又快。
- Skills結構由SKILL.md定義，AI會自動判斷幾時觸發，唔會亂用。
- 安裝支援Claude Code插件市場、手動複製同Git子模塊，跨平台兼容，仲可以自己貢獻Skill。
Garden Skills GitHub
字節大佬ConardLi開源嘅Skills合集，包含網頁設計、圖像生成、知識庫檢索技能。
內容結構
/plugin marketplace add ConardLi/garden-skills/plugin install web-design-skills@garden-skills/plugin install knowledge-base-skills@garden-skills/plugin install image-generation-skills@garden-skills點解要有Garden Skills？AI生成網頁千篇一律嘅痛點
你有冇發覺叫AI幫你整網頁，出嚟永遠係嗰套設計？藍色主按鈕（色號#3b82f6）、紫紅漸變背景、圓角大卡片、emoji當圖標，仲要夾硬編啲虛假用戶評價。呢個唔係你問題，而係大模型傾向於生成最安全、最常見嘅嘢，結果就係千篇一律。
AI喺網頁設計上有天然嘅審美趨同
最近GitHub上有個寶藏項目Garden Skills，由知名前端技術博主ConardLi開源，短時間內收穫2k+ Star。佢唔係求多，而係求精——目前有三個核心技能，外加一個即將發佈嘅視頻演示技能，專為AI配備「設計品味」「本地生圖」「漸進式檢索」三大超能力。
web-design-engineer：將「能用」變成「驚豔」的設計流程
呢個技能係全個項目最亮眼嘅部分，直接幫AI戒甩「撞臉」設計。佢嘅做法好聰明：畀咗一份反俗套清單（anti-cliché blocklist），明確禁止呢啲通用毛病：
- 禁止紫色-粉色-藍色漸變背景
- 禁止Inter / Roboto / Arial / 系統默認字體
- 禁止emoji替代正經圖標
- 禁止編造的統計數據、假logo牆、假用戶評價
標準係驚豔，唔係能用
除咗禁令，技能仲內置一套六步工作法，比好多設計師仲規範：理解需求、收集設計上下文、聲明設計系統、展示v0草稿、完整構建、驗證自查。呢個流程令AI唔再「一把梭」，而係似一個真正嘅設計工程師分步思考。
- 1 理解需求：根據你提供嘅信息量智能判斷問幾多問題
- 2 收集設計上下文：優先讀你畀嘅設計稿/截圖/代碼庫
- 3 聲明設計系統：寫代碼前先用文字定好色彩、字體、間距、動效
- 4 展示v0草稿：先出低保真版本確認方向
- 5 完整構建：全面開發組件、狀態、動效
- 6 驗證：上線前檢查控制枱錯誤同禁用配色
六步工作法比大部分設計師仲規範
呢個技能覆蓋嘅場景好廣，包括營銷落地頁、交互原型、HTML幻燈片、數據儀表盤、CSS/JS動畫演示、UI組件庫探索，基本前端視覺產出都支援。
gpt-image-2：一個技能三種模式，冇API Key都照用
呢個係第二大重頭技能，專門為圖像生成與編輯而設。佢最大嘅設計亮點係：同一個Skill自動適配三種完全唔同嘅運行環境，使用體驗完全一致。
同一套Skills，三種模式任意切換
Mode A（Garden本地模式）：如果你有OpenAI API Key，Skill會完整走通揀模板→寫prompt→調用腳本→出圖存盤，圖片同prompt自動歸檔。Mode B（宿主委託模式）：喺Cursor或ChatGPT呢啲自帶圖像工具嘅平台，Skill會退化做提示詞工程專家，寫好prompt交畀宿主出圖。Mode C（顧問模式）：乜都冇嘅時候，Skill會幫你寫專業級prompt，你再複製去Midjourney或DALL·E用。
內置18個視覺類目、80多個結構化提示詞模板
呢個技能覆蓋海報、UI原型、產品展示圖、信息圖、學術配圖、技術架構圖、漫畫、頭像、故事板、品牌板、電影分鏡甚至IP周邊設計。每次啟動第一件事就係運行模式檢測腳本，確保唔會行錯路徑。
kb-retriever：漸進式檢索，告別全檔案暴力讀取
呢個技能解決一個好實際嘅問題：點樣喺本地知識庫入面高效揾資訊，又唔想成個檔案塞畀AI食token？好多人都係直接將整個文件夾讀入去，但一旦文件多咗、大咗（例如幾十MB PDF），AI嘅上下文窗口根本頂唔順。
漸進式檢索：先索引，再定位，最後精細讀取
kb-retriever採用一套漸進式策略：首先讀取每層目錄下嘅data_structure.md索引文件，瞭解文件結構；然後用grep精確關鍵詞搜索，只讀局部內容；最多迭代5輪，逐步縮小範圍。
- 分層索引導航：先讀index，唔直接翻檔案
- 先學習再處理：PDF/Excel必須先讀參考文檔，禁止盲目讀取
- grep優先 + 局部讀取：精確定位，只讀相關片段
- 最多迭代5輪：每輪收窄關鍵詞，第5輪揾唔到就明確話你知
慳token、慳時間，答案仲要更準
呢個設計對維護個人知識庫嘅朋友嚟講真係神器，支援Markdown、PDF、Excel三種格式。你可以將上百份筆記、大PDF電子書、Excel報表放喺知識庫，問AI一個問題，佢唔會再暴力讀取，而係聰明地揀路行。
點安裝？三種方法，豐儉由人
Garden Skills提供三種安裝方式，由最簡單到最靈活都有。第一種係用Claude Code插件市場，敲三行命令就搞掂；第二種係手動複製Skill文件夾到對應目錄；第三種係用Git子模塊，適合想同步更新嘅用戶。
用Claude Code插件市場最快，三行命令即開即用
實測支援Claude Code、Claude.ai網頁版、Cursor、Codex CLI、Gemini CLI、OpenCode等多個平台，Windows/Mac/Linux都得。每個Skill嘅結構好簡單：一個SKILL.md（核心操作手冊）、README、scripts、assets等。SKILL.md開頭嘅YAML資訊會話畀AI呢個技能做乜嘢、幾時觸發。
Skills格式跨平台兼容，裝好即用
總結嚟講，Garden Skills唔追求數量，但每個都係精心設計。佢哋畀AI嘅能力帶嚟肉眼可見嘅提升——無論係網頁設計嘅美感、圖像生成嘅專業度，定係知識庫檢索嘅效率。MIT開源，想玩就上GitHub揾ConardLi/garden-skills，Star同Fork都歡迎。話唔定你都可以貢獻一個自己嘅Skill添！
你嘅AI每次整網頁系咪都同一個樣？藍色按鈕、紫色漸變、Inter字體……唔單止咁，想叫佢幫你畫張海報、揾個本地文件，操作仲好麻煩。今日介紹一個GitHub開源Skills合集，一次過幫AI裝上"設計品味""本地生圖""漸進式檢索"三大超能力。
你係咪都有咁嘅經驗：叫AI幫你寫個網頁，出嚟永遠都系嗰套——藍色主按鈕、紫紅漸變背景、圓角大卡片、emoji當圖標，再加上一段唔知邊度作出來嘅"用戶好評"？功能上冇錯，但生得太似"AI寫"㗎啦，拎出去真系唔好意思畀人睇。
呢個唔系你嘅問題，而系大模型喺網頁設計上有天然嘅"審美趨同"——佢哋傾向生成最安全、最常見、最唔會出錯嘅設計，結果就係千篇一律。
最近喺GitHub上發現咗一個寶藏項目——Garden Skills，由知名前端技術博主ConardLi開源維護，短短時間就收穫咗2k+ Star。佢唔系嗰種動不動就上百個技能嘅大雜燴，而系一個精心策劃嘅生產級Skills合集，每個技能都經過咗充分嘅打磨同實戰驗證。目前個合集涵蓋咗網頁設計工程化、圖像生成、本地知識庫檢索三大核心場景，仲有一個即將發佈嘅視頻演示技能，可以說系幫AI配咗把啱手嘅瑞士軍刀。
web-design-engineer：幫你嘅AI裝上設計品味
呢個成個項目入面最亮眼嘅技能，亦系Star數貢獻最多嘅部分。佢嘅定位好明確：將AI生成嘅網頁由"能用"升級到"驚豔"。
頭先講過，大模型喺做網頁設計嘅時候特別容易"撞臉"——Inter字體、藍色主按鈕（色號永遠系#3b82f6）、紫紅漸變背景、左邊框高亮卡片、emoji當圖標充數、作虛假嘅用戶評價同數據……
web-design-engineer呢個Skill嘅做法好聰明：佢直接幫AI列咗一份反俗套清單（anti-cliché blocklist），將呢啲通用毛病一一禁止曬：
• ❌ 禁止紫色-粉色-藍色漸變背景 • ❌ 禁止Inter / Roboto / Arial / 系統默認字體 • ❌ 禁止emoji代替正經圖標 • ❌ 禁止作嘅統計數據、假logo牆、假用戶評價
淨繫有"禁令"仲唔夠，更加重要嘅系佢幫AI提供咗一套專業設計方法論。呢個技能嘅核心哲學系："標準系驚豔，唔系能用"——每一個像素都繫有心做嘅，每一次交互都系精心設計嘅。
六步工作法，比大部分設計師仲規範
呢個技能最勁嘅地方，系內置咗一套完整嘅設計流程：
1. 理解需求：唔系機械式咁問一堆問題，而系根據你提供嘅信息量智能判斷應該問咩、問幾多 2. 收集設計上下文：優先讀你俾嘅設計稿/截圖/代碼庫，唔系你俾嘅再問你要 3. 聲明設計系統：喺寫代碼之前，先用文字將色彩、字體、間距、動效方案定落嚟 4. 展示v0草稿：先出個低保真版本畀你睇下方向啱唔啱，及時糾正 5. 完整構建：確認方向之後全面開發，包括組件、狀態、動效 6. 驗證：上線前自查清單，確保冇控制枱報錯，亦冇用到禁用嘅配色
呢套流程令AI唔再"一把梭"，而繫好似一個真正嘅設計工程師咁，逐步思考、逐步交付。
呢個技能覆蓋嘅場景都好廣：營銷落地頁、交互原型（帶設備框架嗰種）、HTML幻燈片（16:9比例，支持鍵盤翻頁）、數據儀表盤（Chart.js / D3）、CSS/JS動畫演示、UI組件庫探索……基本你諗到嘅前端視覺產出都支持。
gpt-image-2：一個技能，三種模式，邊度都用得
呢個系項目中第二個重頭技能，專門為GPT Image 2（以及兼容OpenAI接口嘅圖像API） 打造嘅圖像生成同編輯工具。但佢唔止於此——就算你冇任何API Key，佢照樣幫到手。
佢最大嘅設計亮點系：同一個Skill，自動適配三種完全唔同嘅運行環境，你嘅使用體驗卻完全一致。
Mode A：Garden本地模式（最強形態）
如果你自己有OpenAI API Key，Set好環境變量，Skill就會進入"完全體"模式。佢會完整行通"揀模板→寫prompt→調用腳本→出圖存檔"嘅全流程，生成嘅圖片同prompt都會自動歸檔到garden-gpt-image-2/目錄底下，方便複用同版本管理。
Mode B：宿主委託模式
如果你用緊Cursor、ChatGPT呢類自帶圖像工具嘅平台，Skill會自動檢測到宿主環境嘅圖像能力，將自己退化為一個"提示詞工程專家"——佢仍然會用專業嘅模板幫你寫好prompt，然後將渲染好嘅提示詞交畀宿主自帶嘅圖像工具去出圖。
Mode C：顧問模式（乜都冇都用得）
最極端嘅情況——你嘅環境既冇API Key，宿主都冇圖像工具——Skill仲可以退化為一個"高質量prompt撰寫顧問"。佢會幫你將prompt寫到專業級別，然後你可以複製粘貼到ChatGPT、Midjourney、DALL·E呢啲外部工具度用。
唔理邊種模式，呢個技能內置咗18個視覺類目、80幾個結構化提示詞模板，覆蓋海報、UI原型、產品展示圖、信息圖、學術配圖、技術架構圖、漫畫、頭像、故事板、品牌板、電影分鏡甚至IP周邊設計。基本上你講需求，佢就可以喺模板庫度揾到最合適嘅起點，幫你組織出專業級嘅提示詞。
值得一提嘅系，呢個技能每次啓動陣做嘅第一件事就係運行模式檢測腳本，確保自己唔會行錯執行路徑——呢個細節做得非常嚴謹。
kb-retriever：唔再成個文件塞畀AI啦
呢個技能解決嘅系一個非常實際嘅問題：喺本地知識庫度高效查找信息，但又唔想成個文件一鋪過丟畀AI食token。
好多人用AI搜索本地文檔嘅做法系：成個文件夾嘅內容全部讀曬入去，然後叫AI喺入面揾答案。呢種方法對細文件夾仲得，但一旦文件多咗、大咗（比如幾十MB嘅PDF、幾萬行嘅Excel），AI嘅上下文窗口根本頂唔住，響應亦越來越慢。
kb-retriever嘅設計思路完全唔同，佢採用咗一套漸進式檢索策略：
1. 分層索引導航：唔系直接去翻文件，而系先讀取每層目錄底下嘅 data_structure.md索引文件（呢個文件需要你自己建），瞭解呢個目錄入面有啲咩、每份文件大概系咩內容、覆蓋咗邊啲時間段，然後精準定位到最可能包含答案嘅文件2. 先學習再處理：遇到PDF或Excel文件陣，強制一定要先讀取 references/目錄底下嘅學習方法文檔，搞清楚推薦嘅處理工具同命令，先去提取內容——禁止盲目讀成個文件3. grep優先 + 局部讀取：用精確關鍵詞搜索定位，然後淨系讀相關片段嘅局部內容，唔系讀成個文件 4. 最多迭代5輪：設定嚴格嘅檢索上限，每輪縮小關鍵詞範圍，去到第5輪都未揾到就明確通知用戶
呢種設計對於維護個人知識庫（PKM）嘅同學嚟講簡直系神器。比如你嘅knowledge/目錄入面有上百份Markdown筆記、幾個大PDF電子書、一堆Excel數據報表，問AI一個問題，佢唔再系"全讀一遍"嘅暴力模式，而系先睇索引、定位細範圍、精細讀取——慳token、慳時間、答案仲更準。
目前呢個技能支持Markdown/文本、PDF、Excel三種文件格式，PDF同Excel都有對應嘅處理腳本同參考文檔。
web-video-presentation：將腳本變成電影級演示（即將發佈）
呢個技能目前喺項目中標註為"Coming soon"，但從預覽描述嚟看好值得期待。
佢要做嘅嘢系：將一個腳本、文章、課程大綱或者產品演示稿，變成可以錄屏嘅電影級網頁演示。技術棧系Vite + React + TypeScript，每個"點擊"對應一個敍事節拍，每步佔據完整嘅1920×1080舞台，錄屏陣UI保持乾淨。
簡單講，你寫一個腳本，AI幫你生成一個網頁版嘅"Keynote/PPT"，而且帶咗電影級嘅動效同轉場，錄屏就可以直接當視頻用。從預覽嚟睇，佢有固定嘅16:9舞台、全局播放控制器、章節/步驟雙遊標系統、多種主題配色方案，體驗思路好新穎。
點樣裝？三種方式，豐儉由人
項目提供咗三種安裝方式，由最簡單到最靈活都有：
方式一：Claude Code插件市場（最快）
如果你用緊Claude Code，直接喺終端打三行命令：
/plugin marketplace add ConardLi/garden-skills
/plugin install web-design-skills@garden-skills
/plugin install knowledge-base-skills@garden-skills
/plugin install image-generation-skills@garden-skills插件會自動將技能安裝到對應位置，即開即用。
方式二：手動複製（最通用）
每個Skill文件夾都系自包含嘅，直接複製到項目度就得：
# Claude Code 或 Claude.ai
cp -r skills/web-design-engineer your-project/.claude/skills/
# Cursor 或其他Agent
cp -r skills/web-design-engineer your-project/.agents/skills/AI喺掃描工作區陣就會發覺並加載呢個Skill。
方式三：Git子模塊（適合想同步更新嘅）
如果你想將Skill作為項目嘅一部分，仲可以隨時拉取上游更新：
git submodule add https://github.com/ConardLi/web-design-skill.git vendor/garden-skills
ln -s ../../vendor/garden-skills/skills/web-design-engineer .claude/skills/web-design-engineer兼容性一覽
呢啲Skill嘅格式系跨平台可移植嘅，實測支持以下環境：
.claude/skills/ | ||
.agents/skills/ | ||
.codex/skills/ | ||
.opencode/skills/ |
一個Skill嘅"解剖圖"
如果你好奇一個Skill系咩樣嘅，佢嘅結構其實好簡單：
skills/某個技能/
├── SKILL.md ← 核心：給AI看的操作手冊（必須）
├── README.md ← 給人看的英文文檔
├── README.zh-CN.md ← 給人看的中文文檔
├── references/ ← 參考資料（AI按需加載）
├── scripts/ ← 可執行腳本（如JS/Python）
└── assets/ ← 模板、字體、圖標等物料SKILL.md文件開頭有一段YAML信息，話畀AI知呢個技能叫咩、幾時用：
---
name: my-skill
description: 用一句話說清楚這個技能幹什麼、什麼時候該觸發
---AI會根據呢個描述自動判斷：用戶嘅請求同我呢個技能匹配嗎？匹配就加載，唔匹配就按普通對話處理。
小結：點解值得你試下
Garden Skills同市面上好多"大而全"嘅Skills合集唔同。佢唔追求數量（目前正式發佈嘅系3個+1個即將發佈），但每個都經過咗精心設計同實戰打磨：
• web-design-engineer 解決咗AI生成網頁"千篇一律"嘅痛點，將設計品味注入AI決策過程 • gpt-image-2 用一套代碼適配三種運行環境，有API可以生圖、冇API可以寫prompt，邊度都用得 • kb-retriever 用漸進式檢索替代"全文件丟畀AI"嘅粗暴做法，慳token、快響應、答案仲準 • web-video-presentation 即將發佈，腳本變電影級演示，思路新穎
成個項目MIT協議開源，Skill格式跨平台兼容，安裝只要複製文件夾或者打幾行命令。
我自己試落嚟最大嘅感受系：AI嘅能力上限，很大程度上取決於你幫佢裝咗咩"技能包"。 同樣嘅Claude Code，同一個模型，裝唔裝呢個Skill，產出嘅網頁設計質量差距肉眼可見；搞唔搞知識庫檢索，查本地文件嘅效率都系天壤之別。
GitHub上搜 ConardLi/garden-skills 就揾到，Star同Fork都歡迎。
講唔定你都可以貢獻一個自己嘅Skill呢？
作者注：該項目Skills格式兼容Claude Code、Claude.ai、Cursor、Codex CLI、Gemini CLI、OpenCode等多個AI編程平台，Windows/Mac/Linux全平台可用。安裝前請確保你嘅AI工具支持Skills機制。
你的AI每次生成網頁是不是長一個樣？藍色按鈕、紫色漸變、Inter字體……不僅如此，想讓它幫你畫張海報、搜個本地文件，操作還很繁瑣。今天介紹一個GitHub開源Skills合集，一次性給AI裝上"設計品味""本地生圖""漸進式檢索"三大超能力。
你是不是也有這樣的體驗：讓AI幫你寫個網頁，出來的永遠是那一套——藍色主按鈕、紫紅漸變背景、圓角大卡片、emoji當圖標，再加上一段不知道從哪編出來的"用戶好評"？功能上沒錯，但長得太像"AI寫的"了，拿出去實在不好意思給人看。
這不是你的問題，而是大模型在網頁設計上有天然的"審美趨同"——它們傾向於生成最安全、最常見、最不會出錯的設計，結果就是千篇一律。
最近在GitHub上發現了一個寶藏項目——Garden Skills，由知名前端技術博主ConardLi開源維護，短短時間就收穫了2k+ Star。它不是那種動輒上百個技能的大雜燴，而是一個精心策劃的生產級Skills合集，每個技能都經過了充分的打磨和實戰驗證。目前合集涵蓋了網頁設計工程化、圖像生成、本地知識庫檢索三大核心場景，還有一個即將發佈的視頻演示技能，可以說是給AI配上了一把趁手的瑞士軍刀。
web-design-engineer：給你的AI裝上設計品味
這是整個項目裏最亮眼的技能，也是Star數貢獻最多的部分。它的定位很明確：把AI生成的網頁從"能用"升級到"驚豔"。
前面說了，大模型在做網頁設計時特別容易"撞臉"——Inter字體、藍色主按鈕（色號永遠是#3b82f6）、紫紅漸變背景、左邊框高亮卡片、emoji當圖標充數、編造虛假的用戶評價和數據……
web-design-engineer這個Skill的做法非常聰明：它直接給AI列了一份反俗套清單（anti-cliché blocklist），把這些通用毛病一一禁止掉：
• ❌ 禁止紫色-粉色-藍色漸變背景 • ❌ 禁止Inter / Roboto / Arial / 系統默認字體 • ❌ 禁止emoji替代正經圖標 • ❌ 禁止編造的統計數據、假logo牆、假用戶評價
光有"禁令"還不夠，更重要的是它給AI提供了一套專業設計方法論。這個技能的核心哲學是："標準是驚豔，不是能用"——每一個像素都是有意為之，每一次交互都是精心設計的。
六步工作法，比大多數設計師還規範
這個技能最厲害的地方，是內置了一套完整的設計流程：
1. 理解需求：不機械地發一堆問題，而是根據你提供的信息量智能判斷該問什麼、問多少 2. 收集設計上下文：優先讀你給的設計稿/截圖/代碼庫，不是你給的再去問你要 3. 聲明設計系統：在寫代碼之前，先用文字把色彩、字體、間距、動效方案定下來 4. 展示v0草稿：先出個低保真版本讓你看看方向對不對，及時糾正 5. 完整構建：確認方向後全面開發，包括組件、狀態、動效 6. 驗證：上線前自查清單，確保沒有控制枱報錯、也沒有跑到禁用的配色上去
這套流程讓AI不再"一把梭"，而是像一個真正的設計工程師一樣，分步思考、逐步交付。
這個技能覆蓋的場景也很廣：營銷落地頁、交互原型（帶設備框架的那種）、HTML幻燈片（16:9比例，支持鍵盤翻頁）、數據儀表盤（Chart.js / D3）、CSS/JS動畫演示、UI組件庫探索……基本你能想到的前端視覺產出都支持。
gpt-image-2：一個技能，三種模式，哪裏都能用
這是項目中第二個重頭技能，專門為GPT Image 2（以及兼容OpenAI接口的圖像API） 打造的圖像生成與編輯工具。但它不止於此——就算你沒有任何API Key，它照樣能幫上大忙。
它最大的設計亮點是：同一個Skill，自動適配三種完全不同的運行環境，你的使用體驗卻完全一致。
Mode A：Garden本地模式（最強形態）
如果你有自己的OpenAI API Key，配好環境變量，Skill就會進入"完全體"模式。它會完整走通"選模板→寫prompt→調用腳本→出圖存盤"的全流程，生成的圖片和prompt都會自動歸檔到garden-gpt-image-2/目錄下，方便複用和版本管理。
Mode B：宿主委託模式
如果你用的是Cursor、ChatGPT這類自帶圖像工具的平台，Skill會自動檢測到宿主環境的圖像能力，把自己退化為一個"提示詞工程專家"——它仍然會用專業的模板幫你寫好prompt，然後把渲染好的提示詞交給宿主自帶的圖像工具去出圖。
Mode C：顧問模式（什麼都沒有也能用）
最極端的情況——你的環境既沒有API Key，宿主也沒有圖像工具——Skill還能退化為一個"高質量prompt撰寫顧問"。它會幫你把prompt寫到專業級別，然後你可以複製粘貼到ChatGPT、Midjourney、DALL·E這些外部工具裏用。
不管哪種模式，這個技能內置了18個視覺類目、80多個結構化提示詞模板，覆蓋海報、UI原型、產品展示圖、信息圖、學術配圖、技術架構圖、漫畫、頭像、故事板、品牌板、電影分鏡甚至IP周邊設計。基本上你說需求，它就能從模板庫裏找到最合適的起點，幫你組織出專業級的提示詞。
值得一提的是，這個技能每次啓動時做的第一件事就是運行模式檢測腳本，確保自己不會走錯執行路徑——這個細節做得非常嚴謹。
kb-retriever：再也不把整個文件塞給AI了
這個技能解決的是一個非常實際的問題：在本地知識庫裏高效查找信息，但又不想把整個文件一股腦丟給AI吃token。
很多人用AI搜索本地文檔的做法是：把整個文件夾的內容全讀進去，然後讓AI在裏面找答案。這種方法對小文件夾還行，但一旦文件多了、大了（比如幾十MB的PDF、幾萬行的Excel），AI的上下文窗口根本扛不住，響應也越來越慢。
kb-retriever的設計思路完全不同，它採用了一套漸進式檢索策略：
1. 分層索引導航：不是直接去翻文件，而是先讀取每層目錄下的 data_structure.md索引文件（這個文件需要你自己建），瞭解這個目錄裏有什麼、每份文件大致是什麼內容、覆蓋了哪些時間段，然後精準定位到最可能包含答案的文件2. 先學習再處理：遇到PDF或Excel文件時，強制必須先讀取 references/目錄下的學習方法文檔，搞清楚推薦的處理工具和命令，再去提取內容——禁止盲目讀整個文件3. grep優先 + 局部讀取：用精確關鍵詞搜索定位，然後只讀相關片段的局部內容，而不是讀整個文件 4. 最多迭代5輪：設定嚴格的檢索上限，每輪縮小關鍵詞範圍，到了第5輪還沒找到就明確告知用戶
這種設計對於維護個人知識庫（PKM）的同學來說簡直是神器。比如你的knowledge/目錄裏有上百份Markdown筆記、幾個大PDF電子書、一堆Excel數據報表，問AI一個問題，它不再是"全讀一遍"的暴力模式，而是先看索引、定位小範圍、精細讀取——省token、省時間、答案還更準。
目前這個技能支持Markdown/文本、PDF、Excel三種文件格式，PDF和Excel都有對應的處理腳本和參考文檔。
web-video-presentation：把腳本變成電影級演示（即將發佈）
這個技能目前在項目中標註為"Coming soon"，但從預覽描述來看非常值得期待。
它要做的事情是：把一個腳本、文章、課程大綱或者產品演示稿，變成一個可錄屏的電影級網頁演示。技術棧是Vite + React + TypeScript，每個"點擊"對應一個敍事節拍，每步佔據完整的1920×1080舞台，錄屏時UI保持乾淨。
簡單說，你寫一個腳本，AI幫你生成一個網頁版的"Keynote/PPT"，而且帶了電影級的動效和轉場，錄屏就能直接當視頻用。從預覽來看，它有固定的16:9舞台、全局播放控制器、章節/步驟雙遊標系統、多種主題配色方案，體驗思路非常新穎。
怎麼裝？三種方式，豐儉由人
項目提供了三種安裝方式，從最簡單到最靈活都有：
方式一：Claude Code插件市場（最快）
如果你在用Claude Code，直接在終端敲三行命令：
/plugin marketplace add ConardLi/garden-skills
/plugin install web-design-skills@garden-skills
/plugin install knowledge-base-skills@garden-skills
/plugin install image-generation-skills@garden-skills插件會自動把技能安裝到對應位置，即開即用。
方式二：手動複製（最通用）
每個Skill文件夾都是自包含的，直接複製到項目裏就行：
# Claude Code 或 Claude.ai
cp -r skills/web-design-engineer your-project/.claude/skills/
# Cursor 或其他Agent
cp -r skills/web-design-engineer your-project/.agents/skills/AI在掃描工作區時就會發現並加載這個Skill。
方式三：Git子模塊（適合想同步更新的）
如果你想把Skill作為項目的一部分，還能隨時拉取上游更新：
git submodule add https://github.com/ConardLi/web-design-skill.git vendor/garden-skills
ln -s ../../vendor/garden-skills/skills/web-design-engineer .claude/skills/web-design-engineer兼容性一覽
這些Skill的格式是跨平台可移植的，實測支持以下環境：
.claude/skills/ | ||
.agents/skills/ | ||
.codex/skills/ | ||
.opencode/skills/ |
一個Skill的"解剖圖"
如果你好奇一個Skill長什麼樣，它的結構其實非常簡單：
skills/某個技能/
├── SKILL.md ← 核心：給AI看的操作手冊（必須）
├── README.md ← 給人看的英文文檔
├── README.zh-CN.md ← 給人看的中文文檔
├── references/ ← 參考資料（AI按需加載）
├── scripts/ ← 可執行腳本（如JS/Python）
└── assets/ ← 模板、字體、圖標等物料SKILL.md文件的開頭是一段YAML信息，告訴AI這個技能叫什麼、什麼時候用：
---
name: my-skill
description: 用一句話說清楚這個技能幹什麼、什麼時候該觸發
---AI會根據這個描述自動判斷：用戶的請求跟我這個技能匹配嗎？匹配就加載，不匹配就按普通對話處理。
小結：為什麼值得你試試
Garden Skills跟市面上很多"大而全"的Skills合集不一樣。它不追求數量（目前正式發佈的是3個+1個即將發佈），但每個都經過了精心設計和實戰打磨：
• web-design-engineer 解決了AI生成網頁"千篇一律"的痛點，把設計品味注入AI決策過程 • gpt-image-2 用一套代碼適配三種運行環境，有API能生圖、沒API能寫prompt，哪兒都能用 • kb-retriever 用漸進式檢索替代"全文件丟給AI"的粗暴做法，省token、快響應、答案還準 • web-video-presentation 即將發佈，腳本變電影級演示，思路新穎
整個項目MIT協議開源，Skill格式跨平台兼容，安裝只要複製文件夾或敲幾行命令。
我自己試下來最大的感受是：AI的能力上限，很大程度上取決於你給它裝了什麼樣的"技能包"。 同樣的Claude Code，同一個模型，裝不裝這個Skill，產出的網頁設計質量差距肉眼可見；搞不搞知識庫檢索，查本地文件的效率也是天壤之別。
GitHub上搜 ConardLi/garden-skills 就能找到，Star和Fork都歡迎。
說不定你也能貢獻一個自己的Skill呢？
作者注：該項目Skills格式兼容Claude Code、Claude.ai、Cursor、Codex CLI、Gemini CLI、OpenCode等多個AI編程平台，Windows/Mac/Linux全平台可用。安裝前請確保你的AI工具支持Skills機制。