unslop：先審計再九輪調整，去除Claude／Codex介面的模板感

重點：把修介面拆成有先後順序的設計工作

unslop 不是一套套用即完成的 UI 模板，也不是獨立的介面生成模型。它是 Damir Sokolovsky（@heydamir）提供給 Claude Code、Codex 的 Skill，以文字指令、設計參考和輔助腳本，引導 coding agent 先找問題、再定方向，最後逐層修改程式碼。它針對的例子包括四處發光的卡片、紫藍漸層、裝飾 emoji、誇張文案及不一致的間距。[3][4]

本文是文件與固定原始碼覆核，不是改版實測。查核以 2026 年 11 月 2 日保存的 repository commit a6f121eee5f29c2f74976b75456feae8b66afb3a 為準；沒有安裝這個 Skill、修改任何私有產品介面、執行快照或 story 影片，也沒有接通或付費呼叫影像服務。[3–8]

社群原帖與作者補充說了什麼？

Threads 的 laohu.ai 將 unslop 介紹為「先審計、再定方向、分九遍調整」的工具，並用同一塊儀表板改造前後的圖像說明效果。作者續文補充 CC BY 4.0 授權、Claude Code／Codex 安裝方式、多種前端技術與網址快照用途，並提醒它會直接改程式碼，應先在分支試用。[1][2]

保存的公開頁面已取得原帖及作者續文，但留言覆蓋僅屬部分；相關串文與推薦內容不是這篇的留言證據。這次沒有取得能確認屬於原帖的圖 1、圖 2，因此不以推薦圖片替代，也不宣稱已重現其前後差異。上游另有完成畫面的參考檔，那是作者示例，不是本次執行產物。[1][2][9]

原帖提及 10 月 29 日公開，保存的 GitHub repository metadata 顯示建立時間為 2026-10-29T15:41:21Z；這只能確認 repository 的建立時間，不能代表每一項功能當日即已存在。原帖中的星數屬時點性人氣指標，本文不將它當作品質或效果證據。[1][10]

真正的入口：先看畫面，不要直接全面重畫

1. 找出畫面與檔案：能執行專案就先看瀏覽器實際畫面，而非只讀程式碼；只有網址則保存靜態副本；只有截圖則先重建成單一靜態 HTML。[4]
2. 列出審計結果：依問題清單寫出具體位置，再區分重度問題、輕度潤飾或沒有明顯問題。輕度模式應沿用既有品牌與結構，不是藉機換掉整個設計。[4]
3. 提出五行方向：產品做什麼、服務誰；兩三個具體性格詞；產品所屬的場景或材質世界；一兩個承載色彩與細節的重點；一個一致使用的識別細節。[4]
4. 先等方向確認：預設要把審計與方向交給使用者，得到回覆才編輯；僅在使用者已要求直接做時略過等待。若畫面本來就好，最多提出少量精修建議，取得同意才套用，不應為了看起來不同而強改。[4]

例如，付款工具可以把視覺重點放在有意義的收入圖表或卡片物件，而不是讓每個按鈕、背景與標籤都競相發光。這是上游設計方向的示例，並非每個產品都必須採用的固定版型。[4][9]

九輪順序：先修基礎，再加視覺與動效

Skill 要求每一輪先跨整個畫面完成，再進入下一輪；大幅改寫時可先依序規劃後一次寫入，但不能略掉各輪。以下是固定版本的工作順序與重點，不是九個互不相關的一鍵操作。[4][5]

輪次	主要檢查
1. Spacing／間距	以 4px 網格建立節奏，同類列與卡片保持一致；讓群內距離小於群間距離，修正圖示、標籤和數字的對齊。
2. Color／顏色	背景與介面框架採克制的中性色階；主要強調色少量使用；圖表多色應有資料意義，而非裝飾。
3. Icons／圖示	使用同一套線性圖示，統一大小、筆畫與對齊，移除無資訊價值的 emoji。
4. Copy／文案	明確描述產品與情境，縮短標籤；變化數字說清楚比較基準，不捏造效能、用戶數或功能宣稱。
5. Type／字體	依產品性格選字體，既有真實品牌字體應保留；減少字級與字重種類，統一數字格式。
6. Layout／版面	保留既有段落與順序，改善比例及對齊；儀表板維持應用程式尺度，手機則依閱讀順序堆疊。
7. Details／細節