Shijiuwei/unslop

unslop 是做什麼的？

unslop 由 Damir Sokolovsky (@heydamir) 創建，他發起了 X 上的 Unslopping 系列。它採用 CC BY 4.0 許可證，因此請在任何副本或改編中保留此聲明。

顫抖編碼的 UI 會以同樣可預測的方式失敗。每個表面都在發光，每個標籤都有表情符號，間距是模型當天隨意打出的，文案則在大聲嚷嚷。去除 AI 痕跡能修復工藝，同時保留產品。功能、內容和章節順序保持不變。改變的是，每個尺寸、顏色、文字和圖像都變得深思熟慮。

去除雜亂只有一半的工作。一個乾淨但可能屬於任何產品的畫面只是下一個樣板。每一次執行結束時，都會產生一個專屬於這個產品的畫面。

雜亂與工藝的區別在於豐富度放在何處。雜亂將顏色和效果散佈在鍍鉻元素上：背景、按鈕、邊框和標籤。工藝則讓鍍鉻元素保持安靜，並將豐富度集中於一兩個令人難忘的內容時刻，例如一個渲染的物體、一個美麗的圖表或來自產品世界的圖像。

像設計師做紅線審查一樣工作，一次只專注一個層面，遍及整個畫面。

好的設計長怎樣

• 一個明亮的元素。 每個畫面都有一個精緻的東西來承載色彩和工藝：一個渲染的物體、一幅繪製的場景或一個豐富的圖表。周圍的一切都保持安靜，使其一目了然。
• 安靜的鍍鉻元素。 導航、按鈕和文字使用帶色調的中性色和一個強調色。沒有東西發光，沒有東西與明亮的元素競爭。
• 一個清晰的概念。 你可以用一句話說出視覺展示了什麼，以及為什麼它屬於這個產品。
• 平靜空間上的文字。 標題位於圖像或佈局中預留給它的空白區域，簡短而具體，附帶一個主要和一個次要操作，且下方沒有層疊的東西。
• 真實的產品，真實的材質。 預覽看起來像真實的應用程式，帶有合理的數據，物體看起來像真實的東西，具有重量、光線和陰影。

哪些視覺風格通常有效，哪些會失敗，請參閱 references/visuals.md。可供學習的完成範例在 references/refs.md 中，而程式碼處理方式（例如在字形中繪製圖像）則在 references/effects.md 中。

執行它

1. 查看畫面。 找到渲染它的檔案。如果你能執行應用程式或在瀏覽器中開啟檔案並截圖，請這樣做，這樣你就能判斷人們看到的是什麼，而不僅僅是程式碼。
   • 只有一個指向線上網站的連結，沒有程式碼？使用 node <skill folder>/scripts/snapshot.mjs <url> unslop/original.html 儲存頁面，並在該檔案的副本上工作。加上 --dark 或 --light 以匹配使用者看到的佈景主題。它也會儲存 original.live.png，即即時頁面的截圖，因此請先渲染儲存的副本並比較兩者，然後再開始。由腳本繪製的動畫背景無法保存，因此請從即時頁面將它們描述在審計中。
   • 只有截圖？首先將畫面重建為一個靜態 HTML 檔案，並精確匹配，然後將其視為原始檔案。
   • 在這兩種情況下，結果都是一個重新設計的頁面程式碼，使用者可以交給任何擁有真實網站的人，因此在報告中請說明這一點。
2. 審計。 瀏覽 references/signs.md，列出你發現的每一個跡象，每個一行，並說明它們所在的位置。
3. 決定改變多少。 在規劃任何事情之前，誠實地閱讀審計報告。
   • 重度雜亂，在顏色、字體、圖示和文案中出現許多跡象。執行下面的完整流程。
   • 輕度雜亂，一個大部分已設計好，但留有少數跡象的畫面。進入潤飾模式。僅修復審計發現的問題，從現有品牌而非發明新方向中汲取靈感，並保留配色、字體、佈局和視覺效果。更大的想法（例如缺失的時刻或英雄場景）則作為建議放入報告中，而不是作為更改。
   • 沒有雜亂。 直接說明，並最多建議兩三個小的改進，附上確切數值。僅在使用者同意時才應用它們，然後停止。切勿僅為了讓畫面不同而更改一個好的畫面。
4. 設定方向並停止。 撰寫下述的五行內容。向使用者展示審計結果和方向，並等待他們回覆後再進行編輯，因為之後更改方向意味著重做一切。如果你有用於詢問使用者的工具，請透過它詢問，否則以純文字詢問並停止。僅在使用者已經說「直接做吧」時，才跳過等待。
5. 依序進行九次修正。 在開始下一次修正之前，先完成整個畫面的本次修正。當幾乎每一行都要更改時，依序規劃修正，然後一氣呵成地撰寫新的畫面，前提是每次修正都已應用。間距優先，因為一旦節奏正確，其他所有東西的讀取方式都會不同。文案在字體和佈局之前，因為標題的長度決定了其大小和位置。視覺效果和動畫最後進行，因為它們應適合一個已經在沒有它們的情況下也能正常運作的畫面。
6. 檢查。 運行此文件末尾的檢查清單，再次渲染並與審計清單進行比較。任何仍然在清單上的東西都要修復。
7. 報告 方向、每次修正更改了什麼的幾行說明，以及你撰寫的任何圖像提示。
8. 記錄，當被要求或用戶想要分享時。構建故事檔案並渲染 故事影片 中描述的影片。如果使用者一開始就要求，請在進行時將每次修正寫入故事檔案。

保持執行快速。最多渲染畫面三次以進行檢查。當你生成圖像時，在方向確認後立即開始，並在運行時繼續執行先前的修正，而不是等待它。

每次修正的具體數值都存在於 references/tokens.md 中。

方向

在觸碰任何東西之前，撰寫五個短句。從頁面所說產品是做什麼的以及為誰而做來推導。永遠不要從時下流行的事物推導。

• 產品。 用一句簡單的話說明它是做什麼的以及為誰而做。
• 性格。 兩三個具體的詞，例如 冷靜、精確、有點溫暖 或 快速、技術性、有趣。不允許使用像乾淨、現代、時尚、簡約和極簡這樣的詞，因為它們描述每一個模板。
• 世界。 產品自然歸屬的地方或材質。一個筆記應用程式存在於紙和墨水附近，一個監控工具存在於儀器和夜班附近，一個旅遊應用程式存在於地圖和窗邊光線附近。這個世界設定了中性色、強調色和視覺效果的色調。
• 時刻。 畫面中一到兩個會獲得豐富色彩、材質和細節的地方，從產品展示的內容中選擇。預覽中的一個渲染卡片或裝置，一個每種顏色代表一個系列的圖表，一個來自世界並放置在內容旁邊的物體。寫出它們是什麼。
• 標誌。 一個只有這個產品會擁有的一致使用的小細節。監控工具的即時狀態點，開發者工具的按鍵帽，教學應用程式的手繪底線，配送應用程式的路線。一個細節，不是五個。

這裡的範例僅顯示答案的形狀。從你面前的產品推導你的答案，即使某個範例恰好符合。

如果產品已經有一個真實的品牌，例如一個標誌檔案、顏色或字體，並且不是雜亂，請保留它並圍繞它構建方向。即使它們存在於標誌中，紫到藍漸層、閃光和發光也是雜亂，除非使用者說它們算數，否則它們不被視為品牌。

1. 間距

• 所有東西都位於 4px 網格上。邊距、內距、間隙和固定高度都是 4 的倍數，因此 28 或 104 即使不在代幣列表中也是可以的。在小型控制項內進行微調時，2px 步長是可以的，而精確居中某物的奇數值則保留。
• 同樣的東西，同樣的大小。列表中的所有行共享一個高度和一個間隙，一行中的所有卡片共享一個內距。
• 空間顯示分組。組內空間小於組間空間，因此一個列表讀起來像一個區塊，而章節讀起來像獨立的部分。
• 東西對齊。圖示位於一列，標籤從一行開始，數字在列中右對齊。沒有東西透過奇怪的 translate 或奇數邊距被推離線。
• 內距遵循密度。緊湊面板和側邊欄約 16，卡片 20 至 24，頁面邊緣 24 至 32。
• 導航是應用程式中最密集的部分。行高 32 至 36，之間間距 2 至 4，圖示在一列，標籤在一行。章節標籤更靠近其自己的項目，而不是其上方章節，例如上方 24，下方 8。在這次修正後測量側邊欄，這是間距最常出錯的地方。
• 移除打破節奏的一次性數值，例如 mt-[13px] 或 py-[11px]，並用比例中的步長替換它們。

2. 顏色

• 從一個中性色階建立，根據方向中的世界對其進行著色。從代幣中選擇石墨色、暖色或墨水色，或以相同方式自行著色。背景、凸起表面、邊框和文字都來自此色階。
• 在應用程式和儀表板中，背景、表面、邊框和文字保持中性，即石墨色階或類似的灰色。人們會長時間注視它們，內容必須承載顏色。背景讀起來是橙色、棕色、藍色或綠色的畫面已經過頭了。世界顯示在強調色、圖表和時刻中，而不是在表面。著陸頁可以將其表面進一步朝向世界著色。
• 三種文字角色：主要、次要和靜音。不是十種略有不同的淡紫色。
• 在鍍鉻元素中，一個強調色，很少使用。它標記主要操作、選項或重要的數字。
• 方向中的時刻是例外。在它們內部，顏色可以豐富，圖表中的幾種色調，具有真實材質的渲染物體，具有自身光線的圖像，只要它保持在世界內並且每種顏色都有意義。
• 如果品牌有真實顏色，它將成為強調色並離開表面。如果沒有真實的品牌顏色，則從世界中取用強調色。
• 帶有文字的強調色需達到 4.5 比 1 的對比度。如果沒有，則加深它或在上面放置深色文字。用作淺色表面上文字或墨水的強調色需要同樣的對比度，因此在該處使用其較深的色調。
• 在深色主題上，主要按鈕可以是色階中的近似白色，搭配深色文字，而強調色可以存在於較小的位置，例如選項或關鍵數字。這通常看起來比彩色按鈕更有意為之。
• 語義顏色僅承載意義，例如綠色表示好的變化，紅色表示錯誤，並且它們被調低以適合調色板。
• 移除表面上的色調漸層、漸層文字、彩色發光和彩色陰影、內容後面的徑向顏色漸層和斑點，以及霓虹邊框。
• 邊框是安靜的細線，色階中的文字顏色，透明度為 6% 至 10%。
• 在深色主題上，深度來自表面層級和細線，而不是陰影。浮動在圖像上的視窗或物體可能保留柔和的黑色陰影。在淺色主題上，陰影是中性的、柔軟的且小的。
• 漸層僅允許作為一個中性色內的小色調轉變，例如活動行從 #2b2b2b 變為 #1f1f1f。絕不允許從一個色調變為另一個色調。

3. 圖示

• 用作圖示或標籤中裝飾的每個表情符號都變成來自一組的線條圖示。使用專案已有的組，否則使用 lucide。
• 整個地方使用一種尺寸和一種筆觸：16 或 18px，搭配 1.5 筆觸。
• 圖示採用其文字角色的顏色，通常是次要或靜音。它們永遠不會有自己的顏色。
• 圖示框在每一行中具有相同的寬度，並且與標籤的間隙是固定的，8 或 10，以便標籤對齊。
• 移除沒有增加任何東西的圖示，例如每個卡片標題中或每個章節標籤前的表情符號。需要顏色分類的類別可以獲得一個小的狀態點。

4. 文案

• 標題用簡單的詞語說明產品為誰做什麼，因此它們不可能適合另一個產品。使用頁面上已有的資訊，不要發明新的。
• 介面文字中沒有驚嘆號，絕不使用 !!。
• 沒有像 Welcome back, Damir! 👋 這樣的問候標題。標題指明上下文的名稱，例如頁面名稱或時間段，例如 October 2026。
• 簡短標籤。Search，而不是 Search anything...。
• 變化會說明它與什麼相比，例如 +12% vs last month 或 3 fewer vs last month。
• 標題、副標題、標籤、按鈕和說明文字結尾不加句號。只有包含幾個句子的段落才保留句號。
• 沒有炒作詞彙，如 supercharge、seamless、unlock、magic、revolutionize 或 game-changing，也不在每件事上都用 AI-powered。
• 無法驗證的主張，例如 Loved by 10,000+ teams 或 10x faster，如果使用者確認是真實的則變得安靜而具體，否則移除。詢問，並將它們列在報告中。
• 模擬數據看起來真實，具有合理的數字和名稱，絕不使用 [X] 或 123,456。
• 像 PRO、New ✨ 或 Beta 🚀 這樣的徽章會消失，除非產品真的需要它們，然後它們變成安靜的文字。

5. 字體

• 從代幣中的字體家族中，為方向中的性格選擇字體。當專案的字體是真實品牌的一部分時，保留它。像 Inter 這樣的默認字體（沒有人選擇它）可能會被替換，如果另一個家族更適合性格。介面使用一個家族，加上最多一個來自代幣中任何一行的合作字體：用於數字和元資料的等寬字體，或用於大標題的顯示字體。
• 來自比例的一些尺寸和兩個粗細：400 和 500，最多 600 用於罕見的強調。沒有 700 到 900 的標題，沒有漸層文字。
• 層級結構來自尺寸和顏色，而不是粗細。
• 所有地方都使用句子大小寫。像 NAVIGATION 或 PAID THIS MONTH 這樣帶有寬追蹤的標籤變成 Navigation 和 Paid this month。
• 小文字永遠不會有負的字距。小文字的可讀性意味著更大、稍粗或稍微鬆散。緊湊追蹤僅用於大顯示文字。
• 數字使用 tabular-nums 並且在整個畫面中使用一種格式。如果一個數字

…

[為翻譯而截斷]