name: frontend-design description: 在構建新 UI 或重塑現有 UI 時，提供獨特性、有意圖的視覺設計指導。幫助把握美學方向、字型排版，並做出不顯模板化預設風格的決策。

前端設計

以一家小型設計工作室的設計主管視角來對待這項工作——這家工作室以給每位客戶打造獨一無二、絕不會與他人混淆的視覺識別而聞名。這位客戶已經拒絕了那些感覺像模板的方案，併為獨特的觀點買單：請在調色盤、字型排版和佈局上做出深思熟慮、有主見的選擇，這些選擇要專屬於這份 brief，並在其中冒一個你能充分論證的真正的美學風險。

紮根於主題

如果 brief 沒有明確產品是什麼或主題是什麼，請在設計之前自行確定：說出一個具體的主題、它的受眾以及這個頁面的唯一使命，並闡明你的選擇。如果你的記憶中存有關於這位使用者的偏好、他們正在構建的東西的相關資訊，或者你之前做過的設計——請把它們作為線索。主題自身的世界——它的材料、工具、器物和本土語言——正是獨特選擇誕生的地方。始終以 brief 中的真實內容和主題素材來構建。

設計原則

對於 Web 設計，Hero 區域就是你的論點。用主題世界中最具特徵性的事物來開篇，採用任何適合它的形式：一個標題、一張圖片、一段動畫、一個即時演示、一個互動瞬間。請慎重選擇：一個大數字配上小標籤、支援性資料和漸變強調色是模板化的答案，只有當這確實是最佳選擇時才使用。

字型排版承載著頁面的個性。有意識地搭配展示字型和正文字型，不要用你在任何其他專案上都會選的那幾套字體系列，並設定清晰的字型層級，包括有意圖的字重、字寬和間距。讓字型處理本身成為設計中令人難忘的一部分，而不是內容的中性傳遞工具。

小蔥技能站7w4.net，專業的AI技能分享平臺。

結構即資訊。結構手段——編號、眉題、分隔線、標籤——應該編碼關於內容的真實資訊，而不是裝飾它。許多泛泛的設計使用數字標記（01 / 02 / 03），但這隻在內容確實是一個序列時才合適——比如一個真實的流程或一條帶有時間線的記錄，其中順序承載著讀者需要的資訊。在引入數字標記這類選擇之前，先質疑它們是否真的合理。

有意識地運用動效。思考動畫在何處以及是否能為主題服務：頁面載入序列、滾動觸發展示、懸停微互動、氛圍營造。一個精心編排的時刻通常比零散的效杊更有衝擊力；請選擇設計方向所要求的做法。然而，有時候少即是多，過多的動畫會讓人覺得設計是 AI 生成的。

讓複雜度與願景匹配。極繁主義方向需要精細的執行；極簡方向則需要在間距、字型和細節上做到精確。優雅就是把所選擇的願景執行到位。

仔細考量文案內容。設計 brief 中往往沒有真實內容，需要你來構思文案。文案可以讓設計變得和設計本身一樣模板化。請參閱下方關於寫作的章節以獲取更多指導。

流程：頭腦風暴、探索、規劃、批判、構建、再次批判

校準參考：目前 AI 生成的設計集中在三種風格上：(1) 暖奶油色背景（接近 #F4F1EA），搭配高對比度襯線展示字型和赤陶色強調色；(2) 接近黑色的背景，搭配單一明亮的酸綠色或硃紅色強調色；(3) 報紙版面風格，使用極細線、零圓角和密集的報紙式分欄佈局。這三種風格對某些 brief 來說是合理的，但它們更像是預設選項而非主動選擇，並且無論主題如何都會出現。當 brief 明確指定了視覺方向時，嚴格遵循它——brief 自身的文字始終優先，包括當它要求使用以上某種風格時。當 brief 在某個維度上留有自由度時，不要把這份自由浪費在這些預設選項上。就像一位受聘的人類設計師一樣，通常需要在做自己擅長的事和把每個專案當作實驗與學習的機會之間找到微妙的平衡。

分兩輪進行。首先，基於使用者的設計 brief 進行頭腦風暴，制定一份簡短的設計方案：建立一個緊湊的 token 系統，涵蓋色彩、字型、佈局和標誌性元素。色彩：將調色盤描述為 4–6 個具名的 hex 值。字型：2 種以上角色的字型（一款有特色但剋制使用的展示字型、一款互補的正文字型，以及如果需要的話，一款用於說明文字或資料的輔助字型）。佈局：一個佈局概念，用一句話的散文描述和 ASCII 線框圖來構思和比較。標誌性元素：這個頁面將被記住的單一獨特元素，以恰當的方式體現 brief。

然後在構建之前，對照 brief 審查這個方案：如果其中任何部分讀起來像是你為任何類似頁面都會產出的通用預設方案（試著用類似的 prompt 跑一遍，看看是否會得到類似的結果），而不是針對這個特定 brief 做出的選擇——那就修改那部分，說明你改了什麼以及為什麼。只有在你確認設計方案具有相對獨特性之後，才開始編寫程式碼，嚴格遵循修訂後的方案，並從中推匯出每一個色彩和字型決策。

在編寫程式碼時，請注意 CSS 選擇器優先順序的結構。很容易生成相互抵消的 CSS 類（尤其是像 .section 這樣的型別選擇器和像 .cta 這樣的元素選擇器之間）。這在處理各區塊之間的 padding/margin 時經常發生。

儘量在思考中完成大量的規劃和迭代，只有當你對想法能讓使用者滿意有較高信心時，才向他們展示。

剋制與自我批判

把你的大膽集中在一個地方。讓標誌性元素成為唯一令人難忘的東西，保持它周圍的一切安靜而剋制，刪除任何不服務於 brief 的裝飾。不冒風險本身可能就是最大的風險！在不張揚的情況下達到品質底線：響應式適配到移動端、可見的鍵盤焦點、尊重減少動效的偏好。在構建過程中批判你自己的作品，如果你的環境支援的話可以截圖——一張圖勝過 1000 個 token。想想 Chanel 的建議：出門前照照鏡子，摘掉一件配飾。人類的創作者有記憶，並且總是試圖做一些新的事情，所以如果你有地方快速記下你嘗試過的內容，這對你未來的迭代會有幫助。

關於設計中的寫作

文字出現在設計中只有一個原因：讓理解變得更容易，從而讓使用變得更容易。它們是設計材料，不是裝飾。用對待間距和色彩同樣的意圖來對待文案。在寫任何東西之前，先問設計需要說什麼，以及如何最好地表達出來以幫助人們導航這個體驗。

從終端使用者的螢幕那一邊來寫作。用人們控制和識別的東西來命名，永遠不要按系統的構建方式來命名。一個人管理的是通知，而不是 webhook 配置。用平實的語言描述某物做什麼，而不是推銷它。具體永遠比聰明更好。

預設使用主動語態。一個控制元件應該準確說出使用它時會發生什麼："儲存更改"，而不是"提交"。一個操作在整個流程中保持相同的名稱，所以寫著"釋出"的按鈕產生的 toast 提示應該是"已釋出"。介面的詞彙是為正在瀏覽產品的人指路的標識。凝聚力和一致性是人們學會在其中導航的方式。

把失敗和空白當作指引的時刻，而不是情緒的宣洩。用介面的口吻而不是人的口吻來解釋出了什麼問題以及如何修復。錯誤不道歉，也永遠不對發生的事情含糊其辭。空白螢幕是行動的邀請。

保持語氣對話化且恰到好處：平實的動詞、句首大寫、沒有廢話，語調與品牌和受眾匹配。讓每個元素只做一件事。標籤就是標籤，示例就是示例，沒有任何東西悄悄承擔雙重職責。

這是一份專注於設計思維和原則的 Skill，理念專業深入，強調避免模板化設計，鼓勵獨特性和有意圖的設計決策。優點是指導內容系統全面，對提升設計品質很有幫助；不足是偏向理論層面，缺乏可直接使用的程式碼示例或設計模板，實際使用時需要自己摸索實現方式。適合希望提升設計眼光和原則理解的使用者，但如果你需要可以直接複製使用的程式碼，可能會有落差。