網站去除AI味，從哪裡改起？10 個前端設計 Agent Skills 推薦

把首頁的品牌名稱遮住，還看得出這是誰的網站嗎？如果書店、旅館和軟體公司的首頁，換張主圖就幾乎能互用，那麼「網站去除AI味」可以從版面改起。以書店活動頁來說，新書發表會可以讓書封當主角，雙人對談則可以從兩位講者和討論題目切入。活動內容變了，頁面的重點也該跟著變。

前端設計 Agent Skill 是一套給 AI 助理使用的工作指引。有些會帶著助理讀懂題材、構思版面，有些適合拿來檢查已經做好的頁面。挑選時，可以先看自己手上有什麼：只有文案和圖片、已經有設計稿，還是網站已經能操作，只剩幾處不順手？

以下從採用歷史、近期動向和累計安裝數三個角度，各選 5 個項目，重複入選的合併計算，共涵蓋 10 個不同的 Skill 或套件。這份清單是編輯精選，沒有做全球品質排名。資料查核於 2026 年 11 月 12 日 10:27（台灣時間）。文中的任務範例用來說明用法，本站未逐項實測。

一、已有採用歷史的 5 個前端設計 Skill

1. Anthropic Frontend Design｜從題材決定頁面長什麼樣子

Anthropic 的官方 Skill 會引導助理先了解產品、受眾和頁面用途，提出簡短的設計方案，再決定字體、配色、版面和動態。它適合官網、形象頁和作品集，尤其是文案與素材已經備妥，卻還拿不定主視覺的時候。

拿前面的書店活動頁來說，可以把書封、講座介紹和報名資訊一起交給助理，請它提出兩種首頁方向，說明讀者第一眼會看到什麼。選定方向後，放進真實書名和講者姓名，看看手機版的標題怎麼換行、報名按鈕是否容易找到。這樣也能看出，當初喜歡的設計放進自己的內容後是否依然合適。Anthropic Frontend Design 站內介紹

2. Vercel Web Design Guidelines｜指出哪個檔案、哪一行需要檢查

這個 Skill 適合已經有頁面的人。你指定檔案或路徑，助理就會讀取當次的 Vercel Web Interface Guidelines，對照程式碼檢查互動、無障礙和介面文案，再附上問題所在的檔案與行號。

例如，結帳表單可以送出，但填錯欄位時，畫面只顯示「發生錯誤」。你可以指定這份表單，請助理檢查欄位標籤、錯誤提示，以及只用鍵盤能不能完成操作。拿到報告後，打開對應的程式碼，再親自填錯一次，就能核對提示有沒有說清楚「哪裡錯、要怎麼改」。Vercel Web Design Guidelines 站內介紹

3. UI UX Pro Max｜讓不同頁面沿用同一套設計規則

UI UX Pro Max 提供可搜尋的產品類型、配色、字體、視覺風格和 UX 指引，也能依技術框架查找做法。它適合 SaaS、後台和多頁網站。像是預約服務裡的選日期、填資料和看結果，雖然分成三頁，使用者仍需要從按鈕樣式認出下一步，也要知道哪段文字是說明、哪段是錯誤提示。

使用時，最好先講清楚哪些東西已經定案。例如「沿用品牌色和現有表單元件，多數人會用手機預約」，再請助理提出兩種版面。你就能比較哪一種在窄螢幕上容易閱讀、哪一種能沿用現有元件，也比較不會拿到一套好看卻和網站其他頁面搭不起來的配色。UI UX Pro Max 站內介紹

4. Impeccable｜找出既有畫面的問題，一次改一處

有時網站已經有自己的風格，只是標題、提示和按鈕全都在搶注意力。Impeccable 把這類修改拆成幾個指令。critique 用來評論使用體驗，audit 檢查技術品質，typeset 處理文字層級，layout 調整版面。

假設設定頁上每段文字都一樣粗、每個區塊都加了框，可以先用 critique 看哪個地方最容易讀錯，再用 typeset 調整那一區。做完把前後畫面並排，看看原本難找的設定有沒有變清楚。這類判斷需要看渲染後的頁面。安裝時請認現行名稱 impeccable，這個專案舊版使用的 frontend-design 名稱已棄用。Impeccable 站內介紹

5. Emil Design Engineering｜處理截圖裡看不出來的操作細節

有些介面截圖看起來沒問題，一操作才覺得慢半拍。Emil Design Engineering 關注的就是這些細節，包括按鈕按下時的回饋、元件進出場的時序、動畫中途被打斷時怎麼接，以及觸控裝置上的滑鼠移入效果該怎麼處理。

可以從一個選單試起。點開後立刻關閉，動畫會不會卡住？開啟系統的「減少動態效果」後，還看得出選單是開是關嗎？如果你的頁面結構已經定案，能明確指出是哪個動作不順，這個 Skill 就比重新設計整頁更切題。改完後記得在實際裝置上操作幾次。Emil Design Engineering 站內介紹

二、近期值得追蹤的 5 個動向

1. Impeccable 4.8.2｜改善安裝、更新和設定流程

11 月 9 日發布的 4.8.2，是前面介紹過的 Impeccable 的版本更新。這次的重點放在安裝、更新和設定流程。已經在用的人可以查看新版的設定方式，第一次接觸的人則可以從一個畫面和一個 critique 指令開始。兩處收錄的是同一套工具。Impeccable 站內介紹

2. Aesthetic Frontend Skills｜把「我喜歡這個風格」說得更精確

作者於 11 月 5 日介紹這個偏實驗性的套件。它把工作交給兩個 Skill。aesthetic-literacy 協助辨認、釐清風格，aesthetic-application 再把選定的方向整理成配色、字體、CSS 變數和元件說明。

假設需求只有「做成 Y2K 風格」，即使雙方用的是同一個詞，腦中想的畫面也可能差很多。這時可以先拿參考圖討論：想保留的是字體、色彩，還是某種材質？確認後，再請助理把那些選擇落到按鈕、背景和標題上。它適合品牌風格還在摸索的階段，元件架構與完整的無障礙驗收仍需另外處理。Aesthetic Frontend Skills 站內介紹

3. RC’s Frontend Skill｜改版時，把原本能用的功能一起帶過去

作者於 11 月 3 日介紹 RC’s Frontend Skill。它串起專案調查、視覺設計、實作與交付檢查。對已經上線的產品來說，最有用的是動手前那一步：先讀專案，查清楚元件如何取得資料、表單怎麼驗證，以及改版後要保留哪些狀態。

例如，你想重新整理服務儀表板，可以請助理沿用既有 API 和表單驗證，交付時列出實際測過的狀態。看成果時，除了比較新舊畫面，也能核對資料載入中、查無資料、提交失敗時分別會顯示什麼。這套做法需要助理能讀取專案檔案，也需要有執行檢查的環境。RC’s Frontend Skill 站內介紹

4. Form & Force｜先看草圖，再決定哪一版值得做

作者於 11 月 3 日介紹 Form & Force。它先讀取專案與題材，畫出幾種草圖供比較，選定後才安排字體、色彩、影像和動態。以咖啡品牌首頁為例，主打商品照片的一版，和從產地故事開場的一版，光看草圖就能討論哪個適合手上的素材，不必等到整頁做完才換方向。

這套流程也涵蓋功能、響應式版面、無障礙與效能檢查。渲染草圖和執行瀏覽器檢查需要 Playwright 與 Chromium。作者表示尚未進行正式的效果對照評估，想試的人可以先拿一個產品頁，比較幾張草圖是否真的幫自己做出了選擇。Form & Force 站內介紹

5. taste-skill-v3｜分別規劃版面、風格和素材

這個專案於 10 月 30 日公開介紹，是 growing7696-cmyk 以 Taste Skill 為靈感製作的獨立第三方分支，未獲原作者背書。名稱裡的 v3 屬於這個分支，原版 Taste Skill 另見下一節。

它把設計引擎、風格、工作流程與素材分層。做產品首頁時，可以先挑版面結構，再安排素材預算，最後逐項檢查畫面、無障礙和效能。這種分工適合想自己掌握每一步的人，但設定也比較多：引擎預期已安裝 taste-core，部分驗證還需要瀏覽器和相關工具。看交付結果時，可以直接核對哪些項目有實際的檢查紀錄。taste-skill-v3 站內介紹

三、累計安裝數較高的 5 個 Skill

以下採用 skills.sh 在查核時間顯示的單一 Skill 累計安裝數。這是觀察採用情況的一項參考，數字會隨時間變動，也無法直接換算成獨立使用者數、社群討論量或設計品質。

Taste Skill｜設計選定之後，打開瀏覽器看結果

表裡的 Taste Skill 是 Leonxlnx 的 design-taste-frontend。它會依網站類型安排配色、字體、版面、照片和動態，再用隨附腳本檢查不同螢幕寬度下的版面、素材、文案和效能。

如果你想替品牌網站去除AI味，又希望保留一套可重複檢查的做法，這個 Skill 值得看。以小旅館網站為例，放哪張照片最能讓人認出這間旅館？房間介紹和訂房資訊要排在哪裡？做出桌面版後，再看手機上有沒有裁掉照片主體、訂房按鈕是否還找得到。照片是否真能代表旅館、是否有權使用，需要由你確認。要跑隨附的檢查工具，則需要 Node.js 22 以上與 Chrome、Edge 或 Chromium。Taste Skill 站內介紹

入門選手先用哪個？看你今天手上有什麼

只有文案和圖片，先試 Anthropic Frontend Design。 挑一頁就好，把真實素材交給助理，告訴它誰會來看、希望對方看完做什麼。例如「這是週末的新書講座，多數人會用手機看。請用這張書封和講者介紹，提出兩種能讓讀者找到報名入口的首頁方向。」你只需要先判斷哪一版更像這場活動，就能開始。Anthropic Frontend Design 站內介紹

有一張做好的頁面，說不上來哪裡不好看，先試 Impeccable。 挑一塊最想改的地方，請它用 critique 解釋原因，再挑一項你也看得出的問題來修。如果困擾你的是整頁每一行都像標題，第一次就只用 typeset 改文字層級。把前後兩版放在一起，能不能更快找到重要資訊，比學會多少指令更容易判斷。Impeccable 站內介紹

有能操作的網站，也看得懂基本程式碼，先試 Vercel Web Design Guidelines。 從一份表單檔案開始，請它檢查欄位標籤、錯誤提示和鍵盤操作。挑報告裡的一項，在頁面上重現問題，改完後再走一次。如果這次能只靠鍵盤完成填寫，或一眼看出哪個欄位填錯，你就有一個可以親自驗證的成果。Vercel Web Design Guidelines 站內介紹