「AI 味」到底長什麼樣?
打開任何一個 AI 一句話生出來的網頁,大概率會看到同一組配件:紫色到藍色的漸層背景、置中的超大標題、下面一句灰色副標、三欄並排的功能卡片、每張卡片上一個 emoji 或線條圖示,然後整頁圓角和陰影全開。
單看不難看,甚至比多數人自己刻的還整齊。但看多了就會發現一件事——這不是設計,這是平均值。AI 在訓練階段看過的網頁範本大同小異,你不給方向,它就交出所有網頁的最大公約數。這種頁面拿去給客戶、給老闆、給學員看,內行人一眼就知道是 AI 一句話生的,你的專業感直接打折。
為什麼裝一個 skill 就能換檔次?
先說 skill 是什麼:一份 AI 動手前會先讀的工作守則。設計類的 skill,裡面裝的就是設計師的判斷——什麼字體配什麼場景、留白要抓多少、顏色怎麼選才不俗、動效超過幾毫秒會顯得廉價、哪些「AI 最愛的套路」要主動避開。
差別在哪?你在 prompt 裡寫「幫我做漂亮一點」,AI 每次的理解都不一樣,輸出像抽獎。但 skill 是一整套白紙黑字的規則,每次生成都會被完整執行。等於把一位有品味的設計師常駐在你的 AI 旁邊盯場,而不是每次都重新跟它吵一遍美感。
下面這六個,是目前社群裡討論度最高的網頁設計 skill。每一個的「品味」都不一樣,我把它們的個性、適合場景,還有代表性的視覺調性都整理出來——每個 skill 底下附一個示意 UI,全部用同一個「手沖咖啡工作坊報名區塊」來詮釋,風格差異一眼就看得出來。
六個設計 Skill 逐一看
1. frontend-design——內建的起手式
Anthropic 官方出的 skill,Claude Code 裝完就能用,也是很多人第一個接觸到的。它的核心主張只有一句話:動手前先選定一個明確的美學方向,不准交出訓練資料的平均值。所以它會逼 AI 先決定這個頁面要走大膽、精緻、俏皮還是沉穩,再從字體和顏色開始往下貫徹,而不是打開就鋪漸層。
它給的是方向感,不是鉅細靡遺的規格書,所以輸出品質會浮動——但光是「先選方向再動手」這一步,就已經甩開九成裸奔生成的頁面。零安裝成本,先用它練手感最划算。
週六早上,
把一杯手沖沖到位。
三小時、八個名額,從磨豆刻度到注水節奏,帶你把家裡那包豆子的味道真正打開。
搶下一個位子 →※ 各 skill 範例皆為重現其代表性調性的示意 UI
2. web-design-guidelines——Vercel 家的紀律部隊
這個跟其他五個的性質完全不同:它不是風格包,是一長串「專業前端該守的規矩」。出自 Vercel 之手,內容是上百條可以逐條檢查的介面規範——focus 狀態要看得見、觸控目標不能小於一定尺寸、動效時長怎麼抓、對比度要過無障礙標準、文字被截斷時要怎麼處理。
裝了它,AI 交出來的頁面不一定更「漂亮」,但一定更經得起檢查——鍵盤操作順、手機上點得到、狀態回饋清楚。這種東西平常看不見,出包的時候全都是它。建議跟任何一個風格型 skill 疊著用:風格管臉面,它管骨架。
3. emil-design-eng——把顏色關掉的極簡派
這一個蒸餾的是 design engineer 圈子裡很有名的一號人物 Emil Kowalski 的品味——React 圈那個好用到不行的 toast 元件 Sonner 就是他做的。他的風格用兩個字就能講完:克制。整個畫面幾乎只有灰階,邊框細到一根頭髮,字級偏小、留白偏大,唯一的重色是一顆黑色按鈕。
這種乾淨不是偷懶,是把所有裝飾拿掉之後,層次還站得住——考驗的全是間距和字重的功力。做開發者工具、後台系統、SaaS 產品介面,這一套特別對味;但拿去做熱鬧的行銷頁就會太冷,選它之前先想清楚場合。
手沖咖啡工作坊
三小時的小班實作,從磨豆刻度到注水節奏,一次把基本功練穩。
4. taste-skill——最像真人設計師的手感
如果說上一個是工程師的美感,這一個就是雜誌編輯的美感。它敢用襯線字體、敢把標題放到很大、敢留一整塊空白不填東西,版面常常刻意不對稱,配色偏暖紙、偏印刷質感。出來的頁面第一眼就不像「軟體」,像一本刊物的內頁。
這種編輯感排版正好是 AI 裸奔生成最做不出來的東西——因為它違反平均值。做品牌官網、作品集、活動頁、任何想傳遞「這背後有人在乎」的頁面,它的效果最好。反過來說,資料密集的後台介面就別為難它了。
一杯手沖的慢工夫
NT$1,200・含豆單與器材
預留座位 →
5. ui-ux-pro-max——什麼都有的百科型
六個裡面體積最大的一個。它不只給風格,是直接內建一整座資料庫:幾十種 UI 風格、上百組配色方案、字體搭配表、各平台的 UX 檢查清單,連不同技術棧的實作建議都有。你跟 AI 說要做什麼類型的產品,它就去庫裡撈對應的風格規則出來套。
強項是覆蓋面——SaaS 後台、電商、遊戲風、極簡風,幾乎沒有它接不住的題目,做儀表板類的資訊密集頁面尤其在行。要留意的是資訊量大有時是雙面刃,AI 偶爾會「什麼都想給你加一點」,收斂的工作得自己盯。
手沖咖啡工作坊・07/18
報名進度 72%,開課前 48 小時截止
立即報名 NT$1,2006. impeccable——管最寬的方法論型
最後這個是目前整合度最高的一套。它不是一份文件,是一整套設計方法論:字體階層、色彩系統、間距節奏、動效規範、微互動、狀態設計,一路管到 UX 文案怎麼寫,還內建一份「AI 慣性套路」黑名單,專門防各種一眼假的預設輸出。
更狠的是它附了一整組子指令——audit 幫頁面做體檢、polish 做細節打磨、animate 補動效、typeset 調排版——等於買一套方法論送一箱工具。輸出的特徵不是某種強烈風格,而是完成度:每個陰影、每個圓角、每段字距都像被人調過一輪。想長期把 AI 當設計夥伴用,這套最值得深耕。
手沖咖啡工作坊
小班制三小時實作,從磨豆刻度、水溫到注水節奏,把一杯手沖的基本功一次練穩。
預約座位怎麼挑第一個?
不用六個都裝,先照你最常做的頁面類型挑一個主力,真的有需要再疊。
| 你的情境 | 先裝這個 | 理由 |
|---|---|---|
| 剛開始玩,只想先擺脫 AI 味 | frontend-design |
官方內建、零成本,先建立「選方向再動手」的習慣 |
| 做後台、工具、SaaS 介面 | emil-design-eng 或 ui-ux-pro-max |
一個給你克制的質感,一個給你完整的元件與資訊密度 |
| 做品牌頁、活動頁、作品集 | taste-skill |
編輯感排版最能傳遞「有人在乎」的訊號 |
| 頁面要正式上線給人用 | web-design-guidelines(疊加) |
無障礙、狀態、觸控目標這些看不見的地方它幫你守 |
| 想找一套長期主力 | impeccable |
方法論+工具組最完整,值得花時間摸熟 |
名字直接丟去 GitHub 搜就找得到,裝法都一樣:把 skill 檔案放進 AI 工具的 skills 資料夾,下次生成頁面時點名要它照著做即可。
不寫程式的人,這東西跟你有什麼關係?
關係大了。這些 skill 真正的殺手級用法根本不是「做網站」,是把任何想法變成一頁能看的東西。
開會的逐字稿,丟給 AI 配一個設計 skill,出來是一頁有重點、有層次的會議紀錄網頁,比 Word 檔好讀十倍。季度數字、專案進度、活動企劃,通通可以用同一招變成能直接投影的儀表板頁面。內容還是你的內容,但別人接收到的專業感完全不同——而你多花的成本,只是多打一句「用某某 skill 排版」。
這也是為什麼值得花十分鐘把這六個的個性搞清楚:工具都是現成的,差別只在你知不知道該點名哪一個。
最後提醒
skill 能給你設計師的規矩,不能替你決定要說什麼。頁面的內容、重點、想讓人做的下一步,這些還是得自己想清楚,skill 才有東西可以排。
先挑一個,找一份你手上現成的文字——會議紀錄、課程介紹、產品說明都行——丟給 AI 排一版看看。做完再回來看這篇,你對「AI 味」三個字的理解會完全不一樣。