重新設計技能
運作方式
當應用於現有專案時，請遵循以下順序：
- 掃描 — 閱讀程式碼庫。識別框架、樣式方法（Tailwind、純 CSS、styled-components 等）以及當前設計模式。
- 診斷 — 執行以下審計。列出你發現的每個通用模式、弱點和遺失的狀態。
- 修復 — 在現有技術棧上進行有針對性的升級。不要從頭重寫。改進現有內容。
設計審計
排版
檢查並修復以下問題：
- 瀏覽器預設字型或到處都是 Inter。 替換為有個性的字型。好的選擇：
Geist、Outfit、Cabinet Grotesk、Satoshi。對於編輯/創意專案，搭配襯線標題與無襯線正文。 - 標題缺乏存在感。 增加顯示文字的大小，收緊字距，減少行高。標題應感覺厚重而有目的性。
- 正文太寬。 將段落寬度限制在大約 65 個字元。增加行高以提高可讀性。
- 僅使用 Regular (400) 和 Bold (700) 字重。 引入 Medium (500) 和 SemiBold (600) 以形成更細膩的層次。
- 數字使用比例字型。 對於數據密集的介面，使用等寬字型或啟用表格數字 (
font-variant-numeric: tabular-nums)。 - 缺少字距調整。 對大型標題使用負字距，對小型大寫或標籤使用正字距。
- 到處都是全大寫的子標題。 嘗試改為小寫斜體、句首大寫或小型大寫。
- 孤兒詞。 單詞單獨出現在最後一行。使用
text-wrap: balance或text-wrap: pretty修復。
色彩與表面
- 純
#000000背景。 替換為近黑色、深炭色或帶色調的深色（#0a0a0a、#121212或深海軍藍）。 - 過度飽和的重點色。 保持飽和度低於 80%。降低重點色的飽和度，使其與中性色融合，而不是刺眼。
- 超過一個重點色。 選擇一個。移除其餘的。一致性勝過多樣性。
- 混合暖灰與冷灰。 堅持使用一種灰色家族。將所有灰色用一致的色調（暖或冷，不要兩者）染色。
- 紫色/藍色「AI 漸層」美學。 這是最常見的 AI 設計指紋。替換為中性底色和單一、經過考量的重點色。
- 通用的
box-shadow。 使陰影色調與背景色調匹配。使用彩色陰影（例如，藍色背景上的深藍色陰影），而不是低透明度的純黑色。 - 零紋理的扁平設計。 在背景中添加微妙的雜訊、顆粒或微圖案。純扁平向量感覺生硬。
- 完全均勻的漸層。 使用徑向漸層、雜訊疊加或網格漸層來打破均勻性，而不是標準的線性 45 度漸變。
- 不一致的光照方向。 審計所有陰影，確保它們暗示單一、一致的光源。
- 淺色模式頁面中隨機的深色區域（反之亦然）。 單個深色背景區域打斷原本淺色的頁面，看起來像複製貼上意外。要麼承諾完全深色模式，要麼在整個頁面保持一致的背景色調。如果需要對比，使用同色系中稍深的色調——而不是在奶油色頁面中間突然跳到
#111。 - 空曠、平坦、無視覺深度的區域。 僅由文字加上純色背景組成的區域感覺未完成。添加高品質的背景圖像（模糊、疊加或遮罩）、微妙的圖案或環境漸層。在沒有真實素材時，使用可靠的佔位來源，如
https://picsum.photos/seed/{name}/1920/1080。嘗試在英雄區、功能塊或行動呼籲背後使用背景圖像——即使是低透明度的微妙全寬照片也能增加存在感。
佈局
- 所有內容居中且對稱。 使用偏移邊距、混合長寬比或左對齊標題搭配居中內容來打破對稱。
- 三個等寬卡片列作為功能行。 這是最通用的 AI 佈局。替換為 2 列之字形、不對稱網格、水平滾動或瀑布流佈局。
- 使用
height: 100vh作為全屏區域。 替換為min-height: 100dvh以防止在行動瀏覽器上出現佈局跳動（iOS Safari 視口錯誤）。 - 複雜的 flexbox 百分比計算。 替換為 CSS Grid 以獲得可靠的多欄結構。
- 沒有最大寬度容器。 添加容器約束（約 1200-1440px）並設定自動邊距，使內容在寬螢幕上不會從邊緣延伸到邊緣。
- 由 flexbox 強制等高的卡片。 當內容長度不同時，允許可變高度或使用瀑布流。
- 所有元素的 border-radius 統一。 變化半徑：內部元素更緊湊，容器更柔和。
- 沒有重疊或深度。 元素扁平地彼此相鄰。使用負邊距來創建分層和視覺深度。
- 對稱的垂直內距。 上下內距總是相同。根據視覺進行調整——底部內距通常需要稍大一些。
- 儀表板總是有左側邊欄。 嘗試頂部導航、浮動命令選單或可折疊面板。
- 缺少空白。 將間距加倍。讓設計呼吸。密集佈局適用於數據儀表板，不適用於行銷頁面。
- 按鈕未在卡片組底部對齊。 當卡片內容長度不同時，行動呼籲按鈕最終會出現在隨機高度。將按鈕固定到每張卡片的底部，以便無論上方內容如何，它們都能形成一條乾淨的水平線。
- 功能列表從不同垂直位置開始。 在定價表或比較卡片中，功能列表應在所有欄的相同 Y 位置開始。使用列表上方一致的間距或固定高度的標題/價格區塊。
- 並排元素的垂直節奏不一致。 將卡片、欄或面板彼此相鄰放置時，對齊所有項目中的共享元素（標題、描述、價格、按鈕）。未對齊的基線使佈局看起來有問題。
- 數學上對齊但在視覺上看起來不對。 按數學計算居中並不總是看起來對眼睛是居中的。圖示旁邊的文字、圓圈內的播放按鈕或按鈕內的文字通常需要 1-2px 的視覺調整才能感覺正確。
互動性與狀態
- 按鈕沒有懸停狀態。 添加背景變化、輕微縮放或懸停時的位移。
- 沒有活動/按下回饋。 在按下時添加微妙的
scale(0.98)或translateY(1px)來模擬物理點擊。 - 即時切換，持續時間為零。 為所有互動元素添加平滑過渡（200-300ms）。
- 缺少焦點環。 確保鍵盤導航有可見的焦點指示器。這是可訪問性要求，不是可選項。
- 沒有載入狀態。 將通用圓形旋轉器替換為與佈局形狀匹配的骨架載入器。
- 沒有空狀態。 顯示空白的儀表板是錯失的機會。設計一個組合好的「入門」視圖。
- 沒有錯誤狀態。 為表單添加清晰的行內錯誤訊息。不要使用
window.alert()。 - 死鏈接。 鏈接到
#的按鈕。要麼鏈接到真實目標，要麼在視覺上禁用它們。 - 導航中沒有當前頁面的指示。 使用不同的樣式區分活動導航鏈接，以便用戶知道他們在哪裡。
- 滾動跳躍。 錨點點擊會立即跳轉。添加
scroll-behavior: smooth。 - 使用
top、left、width、height的動畫。 切換到transform和opacity以實現 GPU 加速的平滑動畫。
內容
- 通用名稱，如「John Doe」或「Jane Smith」。 使用多樣化、聽起來真實的名字。
- 虛假的整數，如
99.99%、50%、$100.00。 使用有機的、混亂的數據：47.2%、$99.00、+1 (312) 847-1928。 - 佔位公司名稱，如「Acme Corp」、「Nexus」、「SmartFlow」。 發明有上下文脈絡、令人信服的品牌名稱。
- AI 文案寫作陳腔濫調。 永遠不要使用「提升」、「無縫」、「釋放」、「次世代」、「遊戲規則改變者」、「深入」、「掛毯」或「在……的世界裡」。使用平實、具體的語言。
- 成功訊息中的驚嘆號。 移除它們。要自信，不要大聲。
- 「哎呀！」錯誤訊息。 要直接：「連線失敗。請重試。」
- 被動語態。 使用主動語態：「我們無法儲存您的變更」而不是「錯誤已發生」。
- 所有部落格文章日期相同。 隨機化日期使其看起來真實。
- 多個用戶使用相同的頭像圖片。 為每個不同的人使用獨特的素材。
- Lorem Ipsum。 永遠不要使用佔位拉丁文字。撰寫真實的草稿文案。
- 每個標題都使用標題大小寫。 改用句子大小寫。
元件模式
- 通用卡片外觀（邊框 + 陰影 + 白色背景）。 移除邊框，或僅使用背景色，或僅使用間距。卡片僅在高度用於傳達層級時才應存在。
- 總是一個實心按鈕 + 一個幽靈按鈕。 添加文字鏈接或第三級樣式以減少視覺雜訊。
- 藥丸形狀的「New」和「Beta」徽章。 嘗試方形徽章、旗標或純文字標籤。
- 手風琴 FAQ 區塊。 使用並排列表、可搜尋幫助或行內漸進式揭露。
- 帶圓點的 3 卡片輪播推薦。 替換為瀑布流牆、嵌入的社交貼文或單一旋轉引言。
- 帶有 3 欄的定價表。 使用顏色和強調來突出推薦方案，而不僅僅是額外高度。
- 所有內容都使用模態框。 對於簡單操作，使用行內編輯、側滑面板或可折疊區塊，而不是彈出視窗。
- 僅使用圓形頭像。 嘗試圓角方形，以獲得不那麼通用的外觀。
- 淺色/深色切換始終是太陽/月亮開關。 使用下拉選單、系統偏好偵測，或將其整合到設定中。
- 4 欄的頁尾鏈接農場。 簡化。專注於主要導航路徑和法律要求的鏈接。
圖標
- 僅使用 Lucide 或 Feather 圖標。 這些是「預設」的 AI 圖標選擇。使用 Phosphor、Heroicons 或自訂集合以實現差異化。
- 火箭用於「發布」，盾牌用於「安全」。 用不那麼明顯的圖標（閃電、指紋、火花、保險庫）替換陳腐的比喻。
- 圖標間筆劃寬度不一致。 審計所有圖標並標準化為一種筆劃粗細。
- 缺少 favicon。 始終包含一個品牌化的 favicon。
- 庫存「多元團隊」照片。 使用真實團隊照片、抓拍或一致的插圖風格，而不是詭異的庫存圖像。
程式碼品質
- Div 湯。 使用語意化 HTML：
<nav>、<main>、<article>、<aside>、<section>。 - 行內樣式與 CSS 類別混合。 將所有樣式移至專案的樣式系統。
- 硬編碼的像素寬度。 使用相對單位（
%、rem、em、max-width）以實現靈活佈局。 - 圖像缺少 alt 文字。 為螢幕閱讀器描述圖像內容。永遠不要在有意義的圖像上留下
alt=""或alt="image"。 - 如
9999的任意 z-index 值。 在主題/變數中建立清晰的 z-index 層級。 - 註解掉的死代碼。 在發布前移除所有除錯殘留物。
- 匯入幻覺。 檢查每個匯入是否確實存在於
package.json或專案依賴中。 - 缺少 meta 標籤。 添加適當的
<title>、description、og:image和社交分享 meta 標籤。
策略性遺漏（AI 通常會忘記的）
- 沒有法律鏈接。 在頁尾添加隱私權政策和服務條款鏈接。
- 沒有「返回」導航。 用戶流程中的死胡同。每個頁面都需要一條返回的路。
- 沒有自訂 404 頁面。 設計一個有幫助且品牌化的「找不到頁面」體驗。
- 沒有表單驗證。 為電子郵件、必填欄位和格式檢查添加客戶端驗證。
- 沒有「跳至內容」鏈接。 對鍵盤使用者至關重要。添加一個隱藏的跳轉鏈接。
- 沒有 Cookie 同意。 如果管轄區要求，添加一個合規的同意橫幅。
升級技巧
升級專案時，從這些高影響力技巧中提取，以替換通用模式：
排版升級
- 可變字型動畫。 在滾動或懸停時插值字重或寬度，使文字感覺生動。
- 輪廓到填充的過渡。 文字以筆畫輪廓開始，並在滾動進入或互動時填充顏色。
- 文字遮罩揭示。 大型排版作為視窗，顯示其後方的影片或動畫圖像。
佈局升級
- 破碎網格/不對稱。 故意忽略欄結構的元素——重疊、溢出螢幕、或帶有計算隨機性的偏移。
- 最大化空白。 積極使用負空間，將焦點強制在單個元素上。
- 視差卡片堆疊。 在滾動過程中黏住並物理堆疊在一起的區塊。
- 分屏滾動。 螢幕的兩半以相反方向滑動。
動態升級
- 帶慣性的平滑滾動。 將滾動與瀏覽器預設解耦，以獲得更沉重、電影般的感覺。
- 交錯進入。 元素以輕微延遲級聯進入，結合 Y 軸位移與透明度淡入。永遠不要同時掛載所有內容。
- 彈簧物理。 用基於彈簧的運動取代線性緩動，為所有互動元素提供自然、有重量的感覺。
- 滾動驅動的揭示。 內容通過擴張遮罩、擦除或與滾動進度關聯的繪製 SVG 路徑進入。
表面升級
- 真正的玻璃態效果。 超越
backdrop-filter: blur。添加 1px 內部邊框和微妙的內部陰影來模擬邊緣折射。 - 聚光燈邊框。 在游標下動態點亮的卡片邊框。
- 顆粒與雜訊疊加層。 一個固定、pointer-events-none 的疊加層，帶有微妙的雜訊，以打破數位扁平感。
- 彩色、著色陰影。 攜帶背景色調而不是使用通用黑色的陰影。
修復優先級
按以下順序應用變更，以獲得最大視覺衝擊力和最小風險：
- 字型替換 — 最大的即時改進，風險最低
- 色盤清理 — 移除衝突或過度飽和的顏色
- 懸停和活動狀態 — 即時互動性提升
- 間距調整 — 讓佈局呼吸
- 內容審計 — 替換虛假和通用文字
- 表面改進 — 添加紋理、色調陰影、玻璃效果
- 佈局模式 — 不對稱、分層、破碎網格
- 元件重構 — 卡片、按鈕、圖標的一致性
- 無障礙和錯誤處理 — skip-link、焦點管理、載入狀態
- 動態和過渡 — 交錯進入、彈簧物理、滾動驅動的揭示