我一直很喜歡嘗試新的代理技能。任何能幫助我提升效率的東西，我都樂於嘗試。今天我發現了兩個新的技能，想跟你分享。
第一個是 Impeccable。Impeccable 把一個平淡無奇、由 AI 建立的網站，直接做出了設計感。效果其實相當不錯！Diagram Design 則是把同一個網站畫成了它的運作流程圖！兩者都只要一個指令就能安裝，而且基本上任何程式碼編寫框架都能用。我在示範時使用的是 Kiro，但你可以用你喜歡的任何工具。
如果你比較想看影片，我也做了一支逐步示範：
https://www.youtube.com/watch?v=JpZctil7tjE
前置需求
- 支援 Agent Skills 的代理。我用的是 Kiro，但 Claude Code、Cursor 和 Codex 也可以。
- Node.js，這樣你才能執行
npx。 - 一個前端專案來試用。我的範例是一個關於貓咪的小網站。
尋找技能
我是在 Skill Leaderboard 找到這兩個技能的，它會根據 GitHub stars 來排行技能倉庫。你可以依照相容的代理進行篩選，所以我把它設定成 Kiro。技能就像能跨多數程式碼編寫框架使用的食譜，所以通常不使用篩選也沒問題。不過有些倉庫在某些代理上比較容易安裝，這個篩選功能可以避免你事後才發現麻煩。
Stars 主要代表受歡迎程度。我更在意的是它是否符合我自己的專案，所以我挑了兩個最符合我平常會做的東西，也就是網站。
在安裝任何東西之前，先閱讀 SKILL.md 和它載入的任何腳本。技能本質上是會在你的代理權限下執行的指令與腳本，所以你應該把它當成 npm 套件一樣檢查。
1. Impeccable
Impeccable 是一個設計技能，最初來自 Anthropic 的 frontend-design 技能，並在此基礎上擴充。它包含 UX 規劃、一組像是 critique、polish、audit 的設計指令，而且它會問你很多問題。
為了測試它，我讓 Claude Opus 5.5 vibe code 出一個叫做「Great Cat Color Census」的網站。你在野外看到一隻貓，按下「Spotted one」，計數和排行榜就會更新。開箱後它有方塊感很重的卡片樣式和一些 hover 動畫。看起來還可以，我不覺得難看，但就是很制式。
Claude Opus 5.5 做出的預設設計。
從你的專案根目錄安裝：
npx impeccable install接著在你的代理中執行初始化：
/impeccable init初始化會檢查專案，詢問它無法自行判斷的內容，並寫入一份 PRODUCT.md 記錄它學到的資訊。之後我請它用它的風格把網站做得更好看一些。它回傳了五、六種設計方向，我選了貼紙風格那個。
Impeccable 提出的貼紙風格方向。功能相同，但設計全新。
它基本上保留了原本相同的功能，你還是可以召喚一隻隨機貓。整體看起來精緻許多，有更多動畫，貓咪也像是可以撕下來的貼紙。字體讓它有種《戴帽子的貓》的感覺。我對前端設計沒有非常強烈的個人偏好，但我還是比較喜歡這個版本。如果你是設計師，歡迎在留言區告訴我你是否同意。
使用 Impeccable 的一個好方法，是讓它把幾種方向分別建在不同的 Git 分支上。這樣你就能把每個版本都跑起來，並排比較後，再決定最後要採用哪一種風格。
2. Diagram Design
Diagram Design 會把圖表輸出成一個獨立的 HTML 與 SVG 檔案。它支援 45 種圖表類型，從架構圖、流程圖到雷達圖、維恩圖都有。倉庫裡的截圖其實沒有完全展現它的效果。
你可以用 skills CLI 安裝它：
npx skills add cathrynlavery/diagram-design我請它針對同一個貓咪網站畫一張圖，但沒有特別指定要畫什麼。因為沒有後端，我原本沒抱太大期待。它選的是訪客流程：訪客點擊後，某個動作會執行 change() 或 reset()，接著數值更新，衍生統計再回饋到左右兩個區塊。它也把儲存與讀取到 localStorage 的路徑畫了出來，甚至還沿用了網站本身的粉紅色視覺風格。
Diagram Design 針對這個貓咪網站畫出的圖，開在 Kiro 中。
這是一張簡單的圖，但我很喜歡它的風格，而且我可以想像自己在下一個專案裡使用它。當你打開一個幾乎沒有文件的程式碼庫時，它也很有幫助。在你開始讀程式碼之前，先請它畫幾張圖看看。
其餘清單
我還沒花太多時間研究其他熱門技能。以下是我目前的筆記。
Ponytail 會把你的代理變成房間裡最懶的資深工程師。根據它的 README，你給他看五十行，他什麼都不說，直接幫你改成一行。目標是減少程式碼與 token 用量。在 Kiro 裡它會以永久啟用的規則集載入，所以你不會看到它的斜線指令。
Caveman 會讓代理用簡短的方式回答，以降低 token 使用量。不過我自己還沒看到多少節省。有位在 Reddit 上討論 Kiro 頂級技能倉庫的貼文裡的人說，儘管這個倉庫引用的研究結果不是這樣，他那邊的 token 用量反而增加了。
Addy Osmani 的 agent skills 會替你的代理加入 spec、plan、build、test 的工作流程。Kiro 內建 spec，但如果你的工具沒有這功能，我會用這個或 Superpowers 來加入以規格驅動的開發流程。
我還沒試過 UI UX Pro Max 或 Graphify，雖然它們都排在清單前面。
如果你是做 AWS 上的開發，可以看看 Agent Toolkit for AWS。這是我們提供的一組技能與 MCP 伺服器，讓你能透過代理操作 AWS，而且在 GitHub 上是免費的。
結語
如果你在做網站，我會先安裝 Impeccable。Diagram Design 緊接在後，特別是當你剛接觸一個程式碼庫的時候。
我正在考慮測試 Ponytail 和 Caveman 在 Kiro 裡是否真的能省 token。如果你想看這個實驗，歡迎留言，也告訴我你正在使用哪些技能。
原文出處：https://dev.to/erikch/2-agent-skills-every-frontend-developer-should-try-16pl
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
