iyuyoung/young-design

Young Design

創造感覺年輕、有原創性且以產品為導向的網站，避免變得幼稚、裝飾過度或流於俗套。將視覺品質與實作品質視為一個統一的系統。根據產品調整視覺表現，而非套用固定的風格。

選擇任務模式

開始工作前，請先選擇一種模式：

• 方向：定義視覺語言、頁面層級、設計 Token 與代表性元件。
• 設計：使用真實內容與回應式意圖，建立完整的頁面或 mockup。
• 實作：將已核准的方向或參考資料轉換為生產程式碼。
• 精煉：稽核現有網站，找出影響最大的缺口，並在不影響行為的情況下進行改善。
• 審查：提供基於證據的視覺回饋，除非另有要求，否則不修改檔案。

如果使用者只要求設計，請不要實作生產專案。如果使用者要求建置或優化網站，則應將工作執行到可驗證的程度。

建立設計合約

在選擇顏色或元件之前，請先確定以下事項：

1. 受眾 — 誰會來訪，以及他們帶來什麼情緒狀態。
2. 承諾 — 第一個視口必須清楚傳達的一件事。
3. 主要行動 — 最有價值的下一步。
4. 個性 — 三個有用的形容詞以及三個要避免的特質。
5. 限制條件 — 框架、品牌資產、SEO、效能、無障礙性、列印或部署需求。

盡可能從儲存庫、簡報和先前的決策中推斷這些資訊。僅在缺少的答案會實質改變設計時才提問。

然後定義一個設計指紋，針對溫暖感、趣味性、觸感、密度、精準度與視覺對比度給予 1-5 分。記錄分數並用一句話說明最終方向的理由。預設情況下，不要讓不相關的產品擁有相同的指紋。

使用真實的產品文案與具代表性的資料。Lorem ipsum、通用儀表板和虛構的社會證明會隱藏層級問題。

在頁面之前建立視覺系統

在定義或更改外觀與感覺時，請閱讀 references/visual-language.md。從產品、受眾或工作流程中衍生出一個主要的視覺動機；紙張與拼貼是選項之一，但非預設。

建立一個小而完整的系統：

• 色彩角色，而非一袋顏色；
• 標題、內文與選擇性註解排版；
• 間距韻律與內容寬度；
• 邊框、圓角、陰影與材質規則；
• 圖示與插圖語言；
• 互動與動態行為；
• 桌面、平板與行動裝置的構圖規則。

使用設計 Token 或共用變數。避免將每個區塊視為獨立的海報來設計。

保留以下層次之間的區別：

• 品牌層 — 可識別的語調、標誌、色彩、排版；
• 產品層 — 任務流程、控制項、狀態、回饋；
• 內容層 — 層級、掃讀、信任感、SEO 文案；
• 材質層 — 紙張、膠帶、鉛筆、紋理或拼貼點綴。

材質細節必須支援層級結構。保持其簡約，以確保產品仍具可信度與可用性。

圍繞產品時刻進行構圖

不要預設將標題放在左側，任意儀表板截圖放在右側。找出能證明產品有效的時刻：推薦、預覽、結果、轉換、工作表、比較或下一步。

第一個視口通常應包含：

• 一個具體的承諾；
• 一個易於理解的產品時刻；
• 一個主要行動；
• 簡潔的信任或限制提示；
• 足夠的非對稱性或材質特性，以感覺具有原創性。

次要區塊應回答不同的問題。不要在不同標題下重複相同的卡片網格。

在選擇 Hero、Chooser、Card、Tool、Directory 或 Editorial 模式時，請閱讀 references/component-patterns.md。

交付正確的成品

閱讀 references/output-contracts.md 並遵循所選任務模式的合約。確保假設、決策、回應式意圖與驗證證據足夠明確，以便另一位設計師或工程師能繼續進行工作。

以真實系統的形式實作

在修改儲存庫或將參考資料轉換為程式碼之前，請閱讀 references/implementation-playbook.md。

在現有專案中工作時：

1. 檢查框架、路由、共用佈局、Token、元件、測試與產生的資產。
2. 區分有意的原始碼變更與產生的輸出及格式雜訊。
3. 保留行為合約、URL、分析鉤子、測試選擇器、語意與列印規則。
4. 在頁面層級覆寫之前，先新增或修改共用基礎架構。
5. 針對重複的視覺與行為模式，實作可重複使用的元件。
6. 檢查所有有意義的狀態：初始、選中、懸停、聚焦、載入、空、錯誤、成功，以及適用的列印狀態。
7. 在桌面、平板與窄行動寬度下進行驗證。

偏好使用本機或自託管字型、SVG 標誌與一致的圖示庫。僅在具有真實敘事價值時使用生成式圖像。不要以裝飾性圖片來補償薄弱的層級結構。

按影響順序進行精煉

當網站感覺「老舊」、「俗套」或「不像設計稿」時，請依此順序修復問題：

1. 排版的特性與層級；
2. 第一個視口的構圖；
3. 間距韻律與內容密度；
4. 元件的幾何形狀與互動狀態；
5. 色彩角色與對比度；
6. 材質細節與微裝飾；
7. 動態與潤飾。

不要從添加陰影、漸層、不規則形狀或動畫開始。這些很少能修復薄弱的構圖。

在宣告完成前進行驗證

對於實作或最終審查，請閱讀 references/quality-gates.md。在決定結果是否準備好展示、發布或上線時，請閱讀 references/review-rubric.md。

至少驗證以下項目：

• 沒有意外的水平頁面溢出；
• 可見的介面文字至少為 14px，除非是非必要的藝術作品；
• 一般文字對比度達到 4.5:1，大文字達到 3:1；
• 鍵盤焦點清晰，且互動控制項的大小易於觸碰；
• 行動版是經過重新構圖，而非僅是縮小；
• 字型、圓角、陰影、圖示與材質保持一致；
• 實作後的第一個視口保留了已核准設計的層級；
• 功能、SEO 結構、產生的檔案、下載與列印輸出仍正常運作；
• 類型檢查、測試、建置與瀏覽器檢查在專案提供時均通過。

在將結果標記為可發布之前，要求分數至少達到 85/100 且無重大阻礙。將分數作為診斷用途，不要為了達到門檻而誇大。

如果無法在本地執行瀏覽器，請說明環境限制，並使用專案的 CI 來代替視覺驗證。

避免 Young Design 的失敗模式

永遠不要預設使用：

• 普通的初創漸層與浮動玻璃卡片；
• 將過時的字體作為「個性」的主要來源；
• 過多的藥丸形狀、過大的圓角或統一的卡片網格；
• 到處都是粉彩顏色且對比度不足；
• 在每個元素上使用隨機旋轉、膠帶、塗鴉或紙張紋理；
• 使用微小的後設資料與標籤來製造精緻感；
• 隱藏核心產品價值或強制頁面級水平滾動的行動版佈局；
• 僅僅為了適應視覺重新設計而重寫正常運作的產品邏輯；
• 在不同品牌之間直接複製某個參考資料。
• 在領域需要更銳利、更密集或更技術性的表達時，使用溫暖的紙張、粉彩顏色或圓角卡片。

結果應感覺有原創性、有用且現代：友善而不幼稚，有表現力而不吵雜，精緻而不冰冷。