joyeking/redesigned-portfolio

重新設計技能

運作方式

當應用於現有專案時，請依循以下順序：

1. 掃描 — 讀取程式碼庫。識別其框架、樣式方法（Tailwind、原生 CSS、styled-components 等）以及當前設計模式。
2. 診斷 — 執行下列審查。列出你發現的每個通用模式、弱點和缺失狀態。
3. 修復 — 在現有技術堆疊內套用目標性升級。不要從頭重寫。改進既有的東西。

設計審查

排版

檢查以下問題並修正：

• 瀏覽器預設字型或到處都是 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 強制等高的卡片。 當內容長度變化時，允許可變高度或使用瀑布流。
• 所有元素的邊框半徑都相同。 變化半徑：內部元素更緊湊，容器更柔和。
• 沒有重疊或深度。 元素平平地相鄰排列。使用負邊距來創造層次感和視覺深度。
• 對稱的垂直內距。 上下內距總是相同。進行視覺調整—底部內距通常需要稍大一些。
• 儀表板總是搭配左側邊欄。 嘗試頂部導航、浮動命令選單或可折疊面板。
• 缺少留白。 將間距加倍。讓設計呼吸。密集佈局適合數據儀表板，不適合行銷頁面。
• 按鈕未在卡片組中底部對齊。 當卡片內容長度不同時，行動呼籲按鈕會落在不同的高度。將按鈕固定在每張卡片的底部，使它們無論上方內容如何都能形成一條整齊的水平線。
• 功能列表從不同的垂直位置開始。 在定價表或比較卡片中，功能列表應在所有欄位中從相同的 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 文案寫作陳腔濫調。 絕不使用「Elevate」、「Seamless」、「Unleash」、「Next-Gen」、「Game-changer」、「Delve」、「Tapestry」或「In the world of...」。使用樸實、具體的語言。
• 成功訊息中的驚嘆號。 移除它們。要有自信，而非大聲。
• 「哎呀！」的錯誤訊息。 直接了當：「連線失敗。請再試一次。」
• 被動語態。 使用主動語態：「我們無法儲存您的變更」而不是「錯誤已發生」。
• 所有部落格貼文日期相同。 隨機化日期以使其看起來真實。
• 多位使用者使用相同的大頭貼。 為每個不同的人使用獨特的資源。
• Lorem Ipsum。 絕不使用佔位拉丁文字。撰寫真實的草稿文字。
• 每個標題都使用標題大小寫。 改為使用句首大寫。

元件模式

• 通用的卡片外觀（邊框 + 陰影 + 白色背景）。 移除邊框，或僅使用背景色，或僅使用間距。卡片應僅在高度能傳達層級時存在。
• 總是有一個實心按鈕 + 一個幽靈按鈕。 加入文字連結或第三級樣式以減少視覺噪點。
• 藥丸形狀的「New」和「Beta」徽章。 嘗試方形徽章、旗幟或純文字標籤。
• 手風琴式常見問題區塊。 使用並排列表、可搜尋幫助或行內漸進式揭露。
• 帶有點點的 3 張卡片輪播推薦。 替換為瀑布牆、嵌入的社群貼文或單個輪播引文。
• 包含 3 個方案的定價表。 透過顏色和強調來突出顯示推薦的方案，而不僅僅是增加高度。
• 所有東西都用模態框。 使用行內編輯、側滑面板或可展開區塊來替代彈出視窗執行簡單操作。
• 清一色圓形大頭貼。 嘗試圓角方形以獲得不那麼通用的外觀。
• 淺色/深色切換總是太陽/月亮開關。 使用下拉選單、系統偏好偵測，或將其整合到設定中。
• 包含 4 欄的頁尾連結農場。 簡化。專注於主要導航路徑和法律要求的連結。

圖示

• 僅使用 Lucide 或 Feather 圖示。 這些是「預設」的 AI 圖示選擇。使用 Phosphor、Heroicons 或自訂圖示集以示區別。
• 用火箭代表「啟動」，盾牌代表「安全性」。 用不那麼明顯的圖示（閃電、指紋、火花、金庫）來取代陳腐的隱喻。
• 圖示間的筆畫寬度不一致。 審查所有圖示並標準化為一種筆畫粗細。
• 缺少 favicon。 務必包含品牌 favicon。
• 庫存「多元團隊」照片。 使用真實團隊照片、抓拍鏡頭或一致的插圖風格，而不是怪異的庫存照片。

程式碼品質

• Div 混亂。 使用語意化 HTML：<nav>、<main>、<article>、<aside>、<section>。
• 行內樣式與 CSS 類別混用。 將所有樣式移至專案的樣式系統。
• 硬編碼的像素寬度。 使用相對單位（%、rem、em、max-width）以實現彈性佈局。
• 圖片缺少替代文字。 為螢幕閱讀器描述圖片內容。對於有意義的圖片，絕不留下 alt="" 或 alt="image"。
• 任意的 z-index 值，如 9999。 在主題/變數中建立清晰的 z-index 層級。
• 註解掉的死亡程式碼。 在出貨前移除所有除錯遺留物。
• 匯入幻覺。 檢查每個匯入是否確實存在於 package.json 或專案依賴中。
• 缺少 meta 標籤。 加入適當的 <title>、description、og:image 和社交分享 meta 標籤。

策略性遺漏（AI 通常忘記的事）

• 沒有法律鏈結。 在頁尾加入隱私權政策和服務條款鏈結。
• 沒有「返回」導航。 使用者流程中的死路。每個頁面都需要一條返回的路。
• 沒有自訂 404 頁面。 設計一個實用、有品牌感的「找不到頁面」體驗。
• 沒有表單驗證。 為電子郵件、必填欄位和格式檢查加入客戶端驗證。
• 沒有「跳至內容」鏈結。 對鍵盤使用者至關重要。加入隱藏的跳躍鏈結。
• 沒有 Cookie 同意。 如果司法管轄區要求，加入符合規定的同意橫幅。

升級技巧

在升級專案時，可從這些高影響力的技巧中選用，以取代通用模式：

排版升級

• 可變字型動畫。 在滾動或懸停時插值字重或寬度，使文字感覺有生命力。
• 輪廓到填滿的過渡。 文字以筆畫輪廓開始，在進入視口或互動時填入顏色。
• 文字遮罩揭示。 大型排版作為觀看其後影片或動態圖像的窗口。

佈局升級

• 破壞網格 / 不對稱。 故意忽略欄結構的元素—重疊、延伸到畫面外、或帶有計算隨機性的偏移。
• 最大化留白。 積極使用負空間，將焦點強制到單一元素上。
• 視差卡片堆疊。 在滾動過程中固定並物理堆疊在一起的區塊。
• 分割畫面滾動。 螢幕的兩半朝相反方向滑動。

動態升級

• 帶有慣性的平滑滾動。 將滾動與瀏覽器預設解耦，以獲得更有重量、電影般的感覺。
• 交錯進入。 元素以輕微延遲依序出現，結合 Y 軸位移與透明度淡入。絕不要一次安裝所有東西。
• 彈簧物理。 在所有互動元素上，以基於彈簧的運動取代線性緩動，以獲得自然、有重量的感覺。
• 滾動驅動的揭示。 內容透過與滾動進度綁定的擴展遮罩、擦除或 SVG 路徑繪製來進入。

表面升級

• 真正的玻璃擬態。 超越 backdrop-filter: blur。加入 1px 內邊框和微妙的內陰影以模擬邊緣折射。
• 聚光燈邊框。 在游標下動態亮起的卡片邊框。
• 顆粒與噪點疊加。 一個固定、pointer-events-none 的疊加層，帶有微妙的噪點，以打破數位扁平感。
• 有色、帶色調的陰影。 帶有背景色調而非使用通用黑色的陰影。

修復優先級

依此順序套用變更，以在最低風險下獲得最大的視覺衝擊：

1. 字型更換 — 最大的即時改善，最低的風險
2. 色板清理 — 移除衝突或過度飽和的顏色
3. 懸停與啟動狀態 — 最大的回饋改善
4. 間距與留白 — 最大的呼吸感提升
5. 內容去通用化 — 用真實內容取代預設資料
6. 佈局重組 — 打破對稱與通用模式
7. 微互動與動畫 — 加入層次感
8. 表面處理 — 紋理、陰影、玻璃效果
9. 可及性清理 — 焦點環、語意化 HTML、替代文字
10. 特殊頁面 — 404、載入、空白與錯誤狀態