設計規則
在簡報、專案的 DESIGN.md 與所使用的設計技能（通常是 impeccable）留有選擇空間時，套用這些規則。若前述任何一項有明確指示，則以其為準。在進行第一次 UI 編輯或撰寫審查／稽核報告前，請先閱讀此文件。
文案
- 控制項的標籤應說明其結果，且相同的用詞應在流程中保持一致：例如「發佈」按鈕產生「已發佈」的確認訊息。
- 錯誤訊息應說明失敗原因及如何修正，使用產品自身的語氣，且不需道歉。
- 在導覽列、英雄區與頁尾中，同一意圖只使用一個標籤（選擇「聯絡銷售」或「與我們聊聊」，不要兩者並用）。主要按鈕標籤應能在一行內顯示，且不超過三個詞。
- 標題與按鈕的大小寫規則應遵循專案既有慣例；新專案則使用句首大寫。
- 每一頁應保持一種語氣：誇張與簡潔的產品文案不應同時出現在同一畫面。
- 使用彎引號與撇號、真正的省略號（…），不要使用 em 破折號（改用句號、逗號或冒號），每行最多一個中點符號。
- 推薦語應在三行以內，並附上推薦者的姓名與職稱。
- 在交付前，請逐字閱讀渲染頁面上的所有可見文字，包括替代文字、空白狀態及頁尾，並刪除「空話」：那些僅說明產品有多好的句子。
當軸線自由時應避免的提示
- 調色板：暖奶油色背景約 #F4F1EA 搭配陶土色強調色約 #D97757（Claude 自己的介面顏色）；高級消費者色組 #F5F1EA, #EFEAE0, #B08947, #B6553A, #9A2436, #1A1714；使用帶有淡色的近黑色（#0B0B0B, #111）替代純黑。
- 排版：標題中的一個詞以斜體、粗體或顏色區分；全大寫追蹤標籤；在連結與按鈕文字後附加「→」；以「WORD — fragment」形式構建的標籤。
- 裝飾：英雄區的版本標籤（V0.6, BETA）或版本頁尾；向下滾動提示；地區、時鐘或天氣條；裝飾性狀態點或藥丸圖示置於圖片上；裝飾性照片版權資訊；如「BRAND. MOTION. SPATIAL.」的口號條；「Quietly trusted by」文字。
- 資料：超過五項的清單以上下有橫線分隔的行列顯示；使用填滿的進度條來比較數值。
說服頁面
- 英雄區：在桌面寬度下標題不超過兩行，說明文字不超過 20 個詞，主要動作按鈕無需滾動即可見，文字元素不超過四個，上方內距 6rem 或更少，且動作按鈕下方無任何內容（無標語、信任條或定價預告）。
- 將標題設定在寬容器中，使用流體尺寸（約
clamp(3rem, 5vw, 5.5rem)），使其在所有寬度下都能容納兩到三行。 - 導覽列位於一行，高度 64–72px，絕不超過 80px。
- 每頁最多一個跑馬燈，且連續的圖片／文字交錯區塊最多兩個。
- 一個包含 N 個項目的 bento 網格必須恰好有 N 個儲存格，且無空儲存格；使用緊湊排列時，請檢查每個斷點處的跨距是否交錯。
- 說出訪客在第一眼後應記住的一件事，並讓後續的選擇服務於此。
元件與細節
- 嵌套圓角：內圓角半徑 = 外圓角半徑 − 兩者間距。
- 在一行卡片中，將每張卡片的動作固定在其底部邊緣，使按鈕對齊；定價功能清單應在每列中從相同高度開始。
- 具有下伸部的斜體顯示字型應設定 line-height 為 1.1 或以上，並在底部添加一點內距，以避免裁切。
- 正文段落使用
text-wrap: pretty，避免段落結尾只剩一個單詞。 - 在人們會返回的內容（文件、文章列表）中，已訪問連結應顯示不同的樣式。不要交付含有
href="#"的佔位符。 - 可折疊的側邊欄寬度為 56–72px，其標籤保留在 DOM 中，目標點擊區域為 44×44px，在切換按鈕上設定
aria-expanded，並對隱藏內容設定inert。 - 全高區塊應使用
dvh或svh，絕不使用100vh。 - 在任何寬度下皆無水平滾動。對動畫或偏移元素使用
overflow-x: clip裁剪溢出內容；hidden會破壞固定定位。 - 滾動關聯效果應使用 CSS 滾動驅動動畫或 IntersectionObserver 實現，而非針對每次滾動事件或每楨寫入框架狀態。
- 視埠 meta 應允許縮放（不使用
user-scalable=no或maximum-scale=1）。過渡效果應指定其屬性名稱，而非使用transition: all。 - 公開網站應提供跳至內容連結、自訂 404 頁面、favicon、標題、meta 描述與 Open Graph 標籤，以及頁尾中的法律連結。
- 保持 CSS 選擇器權重扁平化，並檢查區塊級規則（
.section）與元件規則（.cta）是否互相抵消彼此的內距或外距。
暗色模式
- 在根元素上設定
color-scheme: dark，讓表單控制項與滾動條跟隨主題。 - 正文文字為米白色（約 #E0E0E0，由調色板調整），非純白。
- 強調色比淺色主題降低 10–20% 的飽和度。
審查與稽核
將以下發現報告為設計技能自身的審查或稽核結構的一部分，不新增任何報告區段。
- 主幹測試（每頁）：初次造訪的訪客是否能說出這是哪個網站、目前所在頁面、主要區塊有哪些、在此處有哪些選項、在結構中的位置以及如何搜尋？若只有三個或更少的明確答案，則為高嚴重性發現。
- 好感度：起始 70 分。隱藏定價或聯絡資訊或強制導覽扣 15 分；懲罰性輸入格式（拒絕信用卡號中的空格）或要求任務不需要的資訊扣 10 分；每個模糊選項扣 5 分。報告分數時附上每次扣分原因。
- 第一印象：列出視線最先落到的三個事物，並說明它們是否為最重要的三個。
- 空話：報告頁面的字數統計，以及空話所佔的比例。
重設計
在替換現有網站的樣式之前，請記錄 SEO 基線（標題、meta 描述、標題、已索引的 URL）。除非使用者同意更改，否則保留 URL 別名、導覽標籤、表單欄位名稱與順序、標誌、法律與同意文案，以及分析 ID。
變體、合成圖與字型
- 若兩個變體的標題互換後無人能察覺差異，則表示它們過於接近；應將其中一個推得更遠。
- 若要查看合成圖中的細節，請將該區塊放大重新生成，而非裁切版面。
- 批次截圖應涵蓋 375、768 與 1440px 三種寬度。
- 針對已建置的頁面，僅對失敗的部分進行局部編輯修正；僅在需要重建時才重新生成整個檔案。
- 在官方清單（Google Fonts、Fontshare 或字型廠商）上確認每個字型，並從該處取得其 URL；未經確認的字型應標記為「待定」，而非猜測名稱或 URL。