TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南
unslop 開源 Claude Skill，把 AI 介面的 AI 味逐道拆掉
AI 生成的介面常有固定樣貌：紫色漸層、emoji 當圖示、驚嘆號文案。設計師 Damir Sokolovsky 把去除這些特徵的流程做成免費開源的 Claude Skill「unslop」，先審計徵兆、再從產品推方向、按固定順序跑九道工法，最後用換名測試驗收，授權 CC BY 4.0 可商用。
用 AI 摘要這篇文章：
設計師 Damir Sokolovsky 在 10 月 27 日於 X 放出一支影片，只寫了一句 “Unslopping a vibecoded dashboard”，把一個 AI 生成的儀表板逐項改掉 AI 味，這則貼文累積超過一萬六千個讚。兩天後他沒有停在影片，直接把整套流程做成免費 skill 開源：儲存庫 heydamir/unslop 在 10 月 29 日建立，11 月 10 日查詢時已有 12,643 顆星、711 個 fork，最近一週還併入了多位外部貢獻者的修改，社群已經開始幫它補功能。
unslop 是給 Claude Code、Codex 與 Google Antigravity 使用的 skill，對象是用 Next.js、React、Vue、Svelte、Tailwind 或純 HTML 與 CSS 做出來的儀表板、app 與落地頁，手上只有一個網址也能先把頁面存下來改。它值得看的原因，在於作者把設計師審圖的完整流程寫成了規格：先審計哪些徵兆、再從產品本身推方向、按固定順序跑九道工法，最後用一個換名測試驗收。就算你不裝，這份規格裡的判斷順序與驗收方法，照樣能拿來檢查自己畫面上的 AI 味。
先審計再動手，改之前還會停下來等你
整個 skill 的流程定義在 SKILL.md，讀起來像一份設計部門的工作手冊。它面對一個畫面時分幾段走：先找到渲染畫面的檔案，能跑就截圖，判斷使用者實際看到的樣子；接著照內附的徵兆清單逐條審計，每一行寫出徵兆與它出現的位置；然後判斷要改多少，才開始動手。徵兆清單 signs.md 分成九組，從顏色、字體、圖示、間距、文案、元件、落地頁首屏、視覺到動態，每一條都配了對應的修法，例如「紫色到藍色的漸層換成單一中性表面」「標題權重 800 到 900 換成 400 與 500，用大小做階層」。
改動量分三種情況。徵兆很多的重度畫面跑完整流程；大部分已經設計好、只剩零星徵兆的輕度畫面只修審計到的項目，方向沿用既有品牌，不另起爐灶；至於沒有 AI 味的畫面，原文寫得很直接：明說沒有，最多建議兩三個附具體數值的小調整，使用者同意才套用，並且「永遠不要為了不一樣而改動一個好的畫面」。這條規則把 skill 和常見的一鍵美化工具拉開了距離，它自己先學會不動手。
方向確認也是流程的一部分。skill 會先寫出五行方向設定，連同審計結果一起給使用者看，等你回答之後才開始改，因為方向事後翻案等於全部重做；只有你一開始就說直接做，才會略過等待。手上只有網址時，內附腳本會先把頁面存成靜態檔再處理，腳本會先捲動整頁，讓延遲載入的區塊完整收進來；只有截圖時，則先把畫面重建成一份靜態 HTML 當原件。最終產出是一份可以直接交給網站負責人的程式碼，不是一張漂亮圖片。
九道工法的順序有理由，順序本身就是知識
正式修改分成九道工法，順序固定：間距、顏色、圖示、文案、字體、版面、細節、視覺、動態。官方給了順序的理由：間距先做，因為節奏對了之後其他東西的讀法都會跟著變；文案排在字體與版面之前，因為標題的長度決定它的字級與位置；視覺與動態放最後，因為它們要配上一個已經成立的畫面。這段理由本身就值得抄下來，多數人叫 AI 改介面時想到什麼改什麼，順序亂了就會來回推翻。
| 工法 | 代表規則 |
|---|---|
| 間距 | 所有尺寸落在 4 的倍數，同類元素同尺寸；導覽列每列 32 到 36 高，列間 2 到 4 |
| 顏色 | 一組帶色調的中性色階撐起背景、表面、邊線與文字，全畫面一個強調色；強調色上的文字對比要達 4.5 比 1 |
| 圖示 | 當圖示用的 emoji 換成同一套線條圖示，統一 16 或 18px、線寬 1.5 |
| 文案 | 介面文字不用驚嘆號；變化要寫跟什麼比，像 +12% vs last month；查不到的宣稱先向使用者確認，否則拿掉 |
| 字體 | 字重只用 400 與 500，偶爾強調才 600；數字用等寬的 tabular-nums；全大寫加寬字距的標籤改句首大寫 |
| 版面 | 保留原本的區塊與順序；儀表板維持真實比例，側欄約 240 到 280，不縮成置中窄欄 |
| 細節 | 巢狀圓角等於外圓角減去內距；快捷鍵做成小按鍵框；一張圖表只用一個強調色 |
| 視覺 | 拿掉純填版的裝飾，光滑色球、星雲、發光格線、全像腦袋與機器人；儀表板幾乎不需要生成圖片 |
| 動態 | 移除沒有理由的循環動畫；只轉場 color、background、border、opacity、transform 並寫明屬性；整個畫面一條緩動曲線 |
表格內容出自儲存庫的 SKILL.md 與徵兆清單，授權 CC BY 4.0。細看這些規則會發現它們的共同點：每一條都帶著可檢查的數值或可指認的對象，4 的倍數、4.5 比 1 的對比、一條緩動曲線，不是「讓畫面更有質感」這類無法驗收的形容。
方向五行程式，換名測試當最後一關
這個 skill 最有意思的設計在方向層。SKILL.md 開頭就講明：去味只完成一半，一個乾淨但放到任何產品都成立的畫面，只是下一個模板。所以每個畫面動工前要先寫五行設定：產品做什麼給誰用、性格兩三個具體的詞、產品自然歸屬的世界、一兩個承載色彩與細節的重點時刻、一個只有這個產品才有的招牌細節。
性格那一行有明文禁用詞：clean、modern、sleek、minimal、premium 一律列入禁用，理由是這些詞形容每一個模板。世界那一行給的例子很具體：筆記 app 靠近紙與墨，監控工具靠近儀表與夜班，旅遊 app 靠近地圖與窗光。這套問答跟人類設計師開工前寫 brief 是同一件事，也跟提示詞工程相通：給形容詞會得到模板，給名詞與數字才會得到判斷。
最後的檢查表用一個換名測試收尾：把產品名換成別家的，畫面還說得通嗎？說得通就代表方向推得不夠，要回頭在文案、視覺與招牌細節上再使力。徵兆清單甚至多列了一組「模板臉」項目，說明這些不算 AI 味，但沒人做決定時，清理完的畫面就會退回那個樣子。這一條大概整份儲存庫裡最容易帶走的工具，不需要裝 skill，任何自己做的 AI 介面都能拿來自測。
免費的邊界：授權、生圖費用與三天服務
授權是 CC BY 4.0，可以商用、可以修改，條件是署名 Damir Sokolovsky 並連回儲存庫，skill 檔頭自己也帶著這行提醒。產生主視覺時才會碰到費用：需要生成圖像的場景要另外接圖像服務，README 列了 fal、Replicate、OpenAI images 與 Higgsfield，沒接的話 skill 會提議幫你裝一個，而且每次付費生成前都會先顯示提示詞並詢問。作者也說得很保守，儀表板與 app 很少需要生成圖片。
安裝在 Claude Code 是兩行指令，clone 儲存庫之後把 skills 目錄複製進 ~/.claude/skills；Codex 走內建的 skill 安裝器或手動放進 ~/.agents/skills，把技能目錄同時送上兩個平台這件事也有前例，Unity 官方就把整套遊戲開發技能包分別接上了 Claude Code 與 Codex；Google Antigravity 也有自己的目錄。想在安裝前多看看同類資源，站上先前介紹過的 13 個免費 Claude Skills 是另一個起點，而 Claude Code 十月的更新 也把 Mods 與用量歸因做成了正式功能，技能生態的管理面正在補齊。想要它輸出那種逐項變化的短影片，再補裝 Playwright 與 ffmpeg 就行。那支爆紅影片的做法也寫在儲存庫裡：整段片不換頁面，只疊加 CSS 讓間距、顏色、圓角從舊值漸變到新值，被改掉的項目先打上紅色標記與量測尺寸，修好後轉白，元素再從左上到右下分批啟動，看起來像一波改動掃過畫面。成品低於十秒、方形裁切，方便直接貼上社群，等於把行銷素材的產生方式一起開源了。商業模式分成兩層：skill 免費開源，想找人代工的話作者在服務頁提供三天處理一個關鍵畫面的付費服務，邊界寫得乾淨。
叫得出名字、寫得出數字，不裝 skill 也用得到
這波討論裡還有兩個可以單獨拿來用的源頭。工程師 Andrew Gao 在今年 2 月的貼文裡說，只要學會不同 UI 元件叫什麼，就能讓 vibecoded 前端強十倍，他的原話是 Opus 做出千篇一律的成品，因為你會的詞只有 menu 和 button。十倍是他的說法，沒有附實驗；他對成因的解釋是模型被要求做前端時，預設走向訓練資料的中間樣式，它做得到不同的樣子，但你得開口要求。這則貼文有一萬六千多個讚，反映詞彙問題確實戳中很多人。
叫不出名字有現成的正名來源。Component Gallery 收錄 60 種元件、95 個設計系統、2,671 個範例，元件頁會列出官方別名，例如 Modal 又叫 Dialog、Popup、Modal window，Toast 的別名是 Snackbar。中文習慣把彈出的東西統稱彈窗，但對 AI 說彈窗時，它猜的可能是全頁對話窗，也可能是貼在某個頭像旁的小面板，兩種互動差很多。
具體數字則可以看 transitions.dev。開發者 Jonathan Wilke 在 9 月推薦了它，寫道在所有人都在出 AI 粗糙成品的時候，這些小細節讓產品突出。網站提供 44 個現成的介面轉場，免費層 33 個、Pro 層 11 個，每個都附可複製的參數，例如彈窗開啟 250 毫秒、關閉 150 毫秒、從 0.96 的縮放起動，還附 prefers-reduced-motion 的防護。這些數字可以直接抄進給 AI 的指令。把幾個源頭放在一起看，共同點很清楚：跟 AI 溝通介面時，形容詞換成名詞與數字，unslop 的整份徵兆清單、元件的正名、轉場的毫秒值，全部都在示範同一句話。
效果只有作者示範，動手前的三個核對
品質面要誠實說：這個 skill 的效果證據目前只有作者自己的示範影片與文字流程定義，公開的第三方評測還沒有出現。想先看看它面對什麼，儲存庫的 examples 目錄附了兩個示範畫面，其中 EmberAI 儀表板就是標準的 AI 味樣本，讀原始碼會看到紫到藍的線性漸層、拿 ✨ 當 logo、紫色發光的陰影，剛好對著徵兆清單逐條成立。
動手前建議做三個核對。看授權，改作或內嵌要保留署名與連回儲存庫；看費用，需要主視覺的專案先確認圖像服務怎麼計費；看內容，任何從網路上 clone 來的第三方 skill，安裝前自己讀一遍 SKILL.md 與附帶腳本，unslop 的兩支腳本做的事情是截圖與錄影，不算複雜，但這個習慣適用於所有 skill。
適合的對象很明確：用 Claude Code 或 Codex 快速做原型、有畫面要交出去的人。對它的合理預期是整理 craft，招牌細節與方向還是你要給；至於發明功能、補宣稱、改產品名這些事，它自己的五條禁則已經明文擋掉了。
