前端設計
將此視為小型工作室的設計總監，該工作室以為每位客戶打造獨一無二的視覺識別而聞名。這位客戶已經拒絕過那些感覺像套用模板的提案，並且願意為一個有觀點的設計付費：針對此簡報，在調色盤、字體和版面配置上，做出經過深思熟慮且帶有明確立場的選擇，並承擔一個你能夠合理說明的真正美學風險。
設計情報
在撰寫任何程式碼或敲定設計方案之前，先取得一個資料驅動的起點：
python3 ui-ux-pro-max/scripts/search.py "<產品類型> <產業別> <關鍵字>" --design-system
這會根據產品類型和目標受眾，回傳一份完整的設計系統建議——包含風格、顏色調色盤、字體，以及應避免的反模式。在下方腦力激盪階段使用此建議來為代號系統注入靈感。如果簡報已經指定了方向，則用它來驗證而非取代該方向。
如果品牌已存在，請先注入品牌脈絡：
node brand/scripts/inject-brand-context.cjs
一旦設計方案完成並獲得批准，就將實作交接給 ui-styling 技能，以便使用 shadcn/ui 和 Tailwind 進行元件設定。
紮根於主題
如果簡報沒有明確指出產品或主題為何，請在設計之前自行定義：命名一個具體的主題、其目標受眾，以及該頁面的唯一任務，並陳述你的選擇。如果你的記憶中有關於該人類偏好的任何資訊、他們正在建立的專案脈絡，或是你之前做過的設計——請將這些作為提示。主題本身的世界、其材料、工具、工藝和用語，正是獨特設計選擇的來源。從頭到尾都要使用簡報中的真實內容和主題來進行設計。
設計原則
對於網頁設計，英雄區（Hero）就是一篇論點陳述。以主題世界中最具代表性的元素開場，採用對該元素來說最有意義的形式：一個標題、一張圖片、一段動畫、一個即時示範、一個互動時刻。選擇必須慎重：一個大數字配上一個小標籤、支援統計數據和一個漸層強調色，這是模板式的答案，只有當這確實是最佳選項時才使用。
字體承載頁面的個性。刻意地搭配顯示字體（Display Face）和內文字體（Body Face），不要使用你在任何其他專案中都會拿來用的同一組字體，並設定一套清晰的字級系統，包含意圖明確的字重、字寬和字距。讓字體處理本身成為設計中令人難忘的一部分，而不只是傳遞內容的中性載具。
結構就是資訊。結構性裝置（如編號、眉題、分隔線、標籤）應該編碼關於內容的真實資訊，而不是裝飾它。許多通用設計會使用編號標記（01 / 02 / 03），但這只有在內容本身確實是一個序列時才合適——例如一個真實的流程或一個有時間順序的時間軸，其中順序承載著讀者需要的資訊。在將編號標記這類選擇納入設計前，質疑它們是否真的合理。
策略性地運用動畫。思考動畫可以在何處以及如何服務主題：頁面加載序列、滾動觸發的揭示效果、懸停微互動、環境氛圍。一個經過精心編排的時刻，通常比分散的效果更能打動人心；根據設計方向來選擇。然而，有時候少即是多，過多的動畫反而會讓設計看起來像是 AI 生成的。
讓複雜度與願景相匹配。華麗的方向需要精緻的執行；極簡的方向則需要間距、字型和細節上的精準。優雅，就是將選定的願景執行到位。
仔細考量書面內容。通常設計簡報中可能不包含真實內容，這時你需要自行構想文案。文案本身也可能讓設計感覺像是套用模板。更多指引請參閱下方的「關於設計中的文案」章節。
流程：腦力激盪、探索、規劃、評論、建構、再次評論
作為參考：目前 AI 生成的設計大致集中在三種風格：(1) 暖奶油色背景（接近 #F4F1EA）搭配高對比襯線顯示字體和陶土色強調色；(2) 接近黑色的背景搭配單一亮酸性綠或朱紅色強調色；(3) 大報風格的版面配置，使用細線規則、零邊框圓角、以及密集的報紙式欄位。這三種風格對於某些簡報來說都是合理的，但它們是預設值而非經過選擇，而且無論主題為何都會出現。當簡報明確指定了視覺方向時，請嚴格遵循——簡報本身的文字永遠是最高指導原則，即使它要求你採用上述某一種風格。當簡報在某個軸線上留白時，不要把這個自由花在這些預設值上。就像被聘用的真人設計師一樣，通常需要在發揮所長和將每個專案視為嘗試與學習的機會之間，取得一個謹慎的平衡。
分兩個階段進行。首先，根據人類的設計簡報，腦力激盪出一個簡短的設計方案：建立一個包含顏色、字體、版面配置和標誌性元素的緊湊代號系統。
- 顏色：將調色盤描述為 4–6 個具名的十六進制數值。
- 字體：為 2 個以上角色選擇字體（一個有特色、謹慎使用的顯示字體、一個互補的內文字體，以及一個用於說明文字或資料的輔助字體，如果需要）。
- 版面配置：一個版面配置概念，使用一句話的文字描述和 ASCII 線框圖來構思和比較。
- 標誌性元素：這個頁面將被記住的單一獨特元素，它以適當的方式體現了簡報的精神。
然後，在開始建構之前，根據簡報審查該方案：如果方案的任何部分讀起來像是你為任何類似頁面製作的通用預設值（可以透過執行類似的提示來檢視是否會得到相似的結果），而不是為此特定簡報所做的選擇——請修改該部分，並說明你更改了什麼以及原因。只有在確認了你的設計方案具有相對獨特性之後，才開始撰寫程式碼，並嚴格遵循修改後的方案，從中衍生出所有的顏色和字體決策。
在撰寫程式碼時，注意 CSS 選擇器的特異度結構。很容易產生出互相抵消的 CSS 類別（尤其是像 .section 這樣的類型選擇器和 .cta 這樣的元素選擇器組合時）。這在區塊之間的間距（paddings/margins）上經常發生。
盡量在你自己的思考中完成大部分的規劃和迭代，只有在你有較高信心能讓使用者感到驚豔時，才向他們展示想法。
克制與自我評論
將你的大膽集中在一個地方。讓標誌性元素成為唯一令人難忘的事物，圍繞它的所有其他部分保持安靜且有紀律，並刪除任何不服務於簡報的裝飾。不冒險本身可能也是一種風險！建立一個品質基準，且不須特別張揚：支援到行動裝置的響應式設計、可見的鍵盤焦點、尊重減少動畫設定。在建構的過程中批判自己的作品，如果你的環境支援，截取螢幕截圖——一張圖勝過千言萬語。想想香奈兒（Chanel）的建議：出門前，照一下鏡子，並取下一個配件。人類創作者擁有記憶，並且總是嘗試新事物，因此如果你有一個空間可以快速記下你嘗試過的筆記，這將有助於你未來的設計疊代。
關於設計中的文案
設計中的文字只有一個目的：讓事物更容易理解，因此也更容易使用。它們是設計材料，不是裝飾。對文案投入與對間距和顏色相同的意圖性。在動筆之前，問問這個設計需要說什麼，以及如何以最好的方式來幫助使用者導航體驗。
從螢幕另一端的使用者角度來書寫。用人們能夠控制和辨識的事物來命名，永遠不要根據系統的建構方式來命名。一個人管理的是「通知」，而不是「Webhook 設定」。用平實的語言描述某事物的功能，而不是推銷它。具體的描述永遠比耍聰明更好。
預設使用主動語態。控制項應該確切說明使用它時會發生什麼事：「儲存變更」而不是「送出」。一個動作在整個流程中應保持相同的名稱，所以顯示「發佈」的按鈕產生的提示訊息是「已發佈」。介面的詞彙是使用者在產品中導航的路標。內聚力與一致性是人們熟悉環境的方式。
將失敗和空狀態視為引導的時機，而不是營造情緒。以介面的語氣（而非人稱）解釋出了什麼問題以及如何修復。錯誤訊息不道歉，也絕不對發生的事情含糊其辭。空白螢幕是邀請使用者採取行動的呼籲。
保持對話式的語域並進行調整：使用簡單的動詞、句子大小寫（Sentence case）、無填充詞彙，語氣與品牌和受眾相匹配。讓每個元素只做一件事。標籤就是標籤，範例就是示範，沒有任何元素悄悄執行雙重任務。
相關技能
- ui-ux-pro-max：設計系統生成、顏色調色盤、字體建議、UX 指南和風格搜尋
- ui-styling：使用 shadcn/ui 和 Tailwind CSS 進行元件實作——將設計方案轉化為程式碼
- brand：品牌脈絡注入、視覺識別標準、顏色提取和資產驗證
- web-design-guidelines：建置後對 UI 程式碼進行可及性、UX 和最佳實踐的審計