網頁設計 是做什麼的？
AI生成的UI總是以可預測的方式失敗：相同的字型、相同的紫羅蘭漸層、卡片內的卡片、置中的英雄區塊搭配三個圖示方塊、用裝飾取代觀點。這項技能用決策取代預設值，然後檢查渲染結果。
下方的 <skill-dir> 指的是此技能本身的資料夾。請從專案根目錄執行其腳本，這樣輸出才會落在專案中，而不是安裝的技能資料夾內。
1. 載入或建立設計脈絡
尋找 DESIGN.md（也可以是 docs/DESIGN.md、BRAND.md）。如果存在，請在觸碰UI之前先閱讀它；其標記和規則優先於你的個人品味。如果它不存在且工作量超過一個小修正，請透過閱讀程式碼來從模板建立一個：從CSS/Tailwind設定檔中取得真實的標記、真實的字型、真實的元件。將任何你推斷的內容標記為「推斷」。
當一個工作階段做出持久性的決策（例如一個新的標記、一個被拒絕的方向及其原因）時，請更新 DESIGN.md。這樣下一次工作階段才能避免回歸到預設值。
2. 決定方向
首先命名模式。 它設定了表面能獲得多大的大膽程度：
- 說服（登陸頁、定價頁、發布頁）：設計就是產品；堅持一個觀點。
- 操作（應用程式UI、儀表板、設定、表單）：精準且克制；熟悉的模式必須證明其存在價值；品牌精神存在於細節中。
- 閱讀（文件、文章、更新日誌）：為理解而結構化，然後讓閱讀變得愉快。
- 體驗（作品集、展示、遊戲）：作品領銜；介面退居幕後。
是優化還是重新設計？ 優化會保留現有的品牌識別、文案和行為，並在其內部進行改善。重新設計則保留產品的事實和功能，但完全替換其外觀。切勿透過打磨一個你打算拋棄的外觀來腳踏兩條船。
然後在撰寫程式碼之前，分兩個階段進行規劃。
第一階段，規劃：
- 任務：誰在這裡、他們首先需要什麼、下一步行動。
- 調色盤：四到六個具名色碼，以及允許使用強調色的位置。
- 字型：字體及其角色、字級、數字。
- 佈局：一句話描述和粗略的ASCII線框；明確說明對齊方式。
- 一個大膽的元素：唯一令人難忘的元素。周圍的一切都保持低調。
第二階段，通用性測試：你是否會針對任何類似的簡報提出這個計劃？將其對照目前的AI預設外觀（這些會隨時間變化）進行檢查。奶油色背景搭配襯線顯示字型和陶土色強調色、接近黑色搭配一種酸蝕強調色、以及大報紙般的細線，是今日的常見組合，正如去年的紫羅蘭漸層。如果計劃中的某個部分與簡報未曾要求的預設外觀相符，請替換它，並記下你更改了什麼以及原因。簡報本身的文字永遠是最終決定權，即使它要求的是上述其中一種外觀。
從主題的世界中選擇：其材料、地點、人工製品和詞彙。一個遛狗者的網站和一個分析師的儀表板不應該能夠互換調色盤。
當使用者提供參考資料時，請正確研究它們：參考資料研究會從實際網站中提取計算後的樣式，因此你借鑒的是關係（比例、節奏、密度），而不是表面裝飾。
3. 在產品的系統中建構
- 使用現有的標記、基本元件和元件。在添加一次性數值之前，先添加一個標記。
- 僅使用真實內容：真實姓名、長名稱、真實數字、空資料。永遠不要使用假字或發明的指標來填滿佈局。
- 與畫面一起設計狀態：載入、空白、錯誤、成功、禁用、溢出。看起來壞掉的空白狀態是一個錯誤。
- 隱藏無話可說的內容。零行、零餘額和空白圖表會變成誠實的空白狀態或消失；不要顯示一堆零。
- 標題就是標籤。重新解釋標題的副標題應被刪除。
- 行動裝置有其自己的佈局：按優先級重新排序，在桌面使用格線的地方使用水平快照導軌，使用
dvh/svh而非100vh，輸入框至少為16像素，點擊目標至少44像素。
在建構過程中，就要堅守工藝底線，而不是在最後一關才做。對於任何動畫或轉場，請先閱讀動態：一次編排好的時刻、一個小的時序系統、可中斷安全、處理減少動畫偏好，並像觀看影片膠片一樣觀看它。
4. 查看它
node <skill-dir>/scripts/shoot.mjs http://localhost:3000/page --full # 390 + 1440, light + dark
node <skill-dir>/scripts/shoot.mjs http://localhost:3000/page --widths 320,390,768,1440 --themes light
node <skill-dir>/scripts/shoot.mjs http://localhost:3000/page --click '[aria-controls=menu]' --widths 390
打開每張截圖並實際閱讀它。然後按以下順序進行檢查：
- 首次閱讀：瞇著眼看。最重要的事情是否最突出？你能在三秒內分辨出這是什麼以及該做什麼嗎？
- 破損：溢出、文字被裁剪、圖層重疊、孤立文字、焦點不可見、深色模式對比度。
shoot.mjs會標記其中幾項；檢查其輸出。 - 層級和節奏：標題上方間距大於下方間距；群組內間距一致，群組間間距更大；每個視圖只有一個主要操作。
- 通用性：執行
deslop的掃描或檢查反模式。陌生人能否從移除標誌的截圖中猜出這個產品？ - 工藝：在2倍縮放下像素級對齊、圖示和文字的光學平衡、表格中數字使用等寬數字。
修正最嚴重的問題，重新截圖，重複。對於新作品來說，兩到三次完整的循環是正常的。
5. 完成
報告你檢查的畫面、狀態（寬度、主題）、你做出的決定，以及任何未檢查的項目（你無法訪問的已認證狀態、你沒有的真實資料）。將 DESIGN.md 的變更與UI一同提交。
規則
- 使用者的簡報和 DESIGN.md 優先於此技能。如果品牌就是紫羅蘭漸層，那就是紫羅蘭漸層。
- 不要為了局部變更而新增UI函式庫、圖示集或字型。
- 不要編造社交證明、推薦、標誌、使用者數量或「備受信賴」。
- 不要偽造即時性：除非有真實資料以該頻率支持，否則不要有脈動的「直播」點、跑馬燈或活動（例如，當實際情況為「每10秒更新一次」時才這麼做）。
- 絕不要將不同的狀態（已提交、已接受、已確認）合併為一個成功勾號。