frontend-design

frontend-design

熱門

在建立新 UI 或重塑現有 UI 時,提供獨特且有意的視覺設計指引。協助決定美學方向、字體排印,並做出不像是套版預設的選擇。

15萬星標
1.9萬分支
更新於 2026/6/14
SKILL.md
readonlyread-only
name
frontend-design
description

在建立新 UI 或重塑現有 UI 時,提供獨特且有意的視覺設計指引。協助決定美學方向、字體排印,並做出不像是套版預設的選擇。

前端設計

請以小型工作室的設計總監角度出發,該工作室以為每位客戶打造無法被誤認的視覺識別而聞名。這位客戶已拒絕過感覺像套版的提案,並願意為獨特的觀點付費:針對此簡報做出深思熟慮、有主見的調色盤、字體排印與版面選擇,並承擔一個你能合理說明的真正美學風險。

以主題為根基

如果簡報未明確指定產品或主題,請在設計前自行確定:命名一個具體的主題、其目標受眾,以及頁面的單一任務,並說明你的選擇。若你的記憶中有關於使用者偏好、他們正在建構的內容背景,或你先前做過的設計,請將這些作為提示。主題本身的世界——其材料、工具、工藝品與在地風格——正是獨特選擇的來源。在整個過程中,使用簡報的真實內容與主題來建構。

設計原則

對於網頁設計,主視覺區就是論點。以主題世界中最具特色的事物開場,採用對該事物最合理的格式:標題、圖片、動畫、即時示範、互動時刻。選擇時要深思熟慮:一個大數字配上小標籤、輔助統計數據與漸層強調色是模板答案,只有在這確實是最佳選項時才使用。

字體排印承載頁面的個性。刻意搭配顯示字型與內文字型,不要使用你在其他專案中會隨手拿來用的相同字型家族,並設定清晰的字級比例,搭配有意的字重、字寬與間距。讓字型處理本身成為設計中令人難忘的一部分,而不是內容的中性傳遞載具。

結構即是資訊。結構性裝置——編號、眉題、分隔線、標籤——應編碼關於內容的真實資訊,而非裝飾內容。許多通用設計使用編號標記(01 / 02 / 03),但這只有在內容實際上是序列時才合適——例如真實的流程或帶有順序資訊的計時時間軸。在納入編號標記等選擇前,先質疑它們是否合理。

有目的地運用動態。思考動畫能在何處以及是否服務於主題:頁面載入序列、觸發於滾動的揭示、懸停微互動、環境氛圍。精心編排的時刻通常比零散的效果更有衝擊力;根據方向需求選擇。然而,有時少即是多,過多的動畫會讓設計感覺像是 AI 生成的。

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

仔細考慮書面內容。設計簡報通常不包含真實內容,由你來撰寫文案。文案可能讓設計本身感覺像套版。請參考下方關於寫作的章節以獲得更多指引。

流程:腦力激盪、探索、規劃、評論、建構、再次評論

作為校準:目前 AI 生成的設計集中在三種外觀:(1) 暖奶油色背景(接近 #F4F1EA)搭配高對比襯線顯示字型與陶土色強調色;(2) 接近黑色的背景搭配單一亮酸綠色或朱紅色強調色;(3) 寬版報紙式版面,搭配極細線條、零邊框半徑與密集的新聞專欄。這三種對某些簡報來說都是合理的,但它們是預設值而非選擇,而且無論主題為何都會出現。當簡報明確指定視覺方向時,請完全遵循——簡報本身的文字永遠優先,包括當它要求其中一種外觀時。當簡報在某個軸線上留白時,不要把這個自由花在這些預設值上。就像被聘僱的人類設計師一樣,通常需要在做你擅長的事與將每個專案視為實驗與學習的機會之間取得謹慎的平衡。

分兩次進行。首先,根據使用者的設計簡報腦力激盪出簡短的設計計畫:建立一個包含色彩、字型、版面與標誌的緊湊代號系統。色彩:將調色盤描述為 4–6 個命名的十六進位值。字型:至少兩個角色的字型(一個有特色且節制使用的顯示字型、一個互補的內文字型,以及如果需要,一個用於標題或資料的實用字型)。版面:一個版面概念,使用一句話的描述與 ASCII 線框圖來構思與比較。標誌:這個頁面將被記住的單一獨特元素,以適當的方式體現簡報。

然後在開始建構前,根據簡報審查該計畫:如果任何部分讀起來像是你對任何類似頁面都會產生的通用預設(透過類似的提示來測試你是否會得到類似的結果),而不是為此特定簡報所做的選擇——請修改該部分,說明你改變了什麼以及原因。只有在確認你的設計計畫具有相對獨特性後,才開始撰寫程式碼,嚴格遵循修訂後的計畫,並從中推導出所有色彩與字型決策。

撰寫程式碼時,注意 CSS 選擇器的特異性結構。很容易產生互相抵消的 CSS 類別(尤其是像 .section 這類基於類別的選擇器與像 .cta 這類基於元素的選擇器)。這在區塊之間的內距/外距上經常發生。

盡量在思考中完成大部分規劃與迭代,只有在你有較高信心能讓使用者滿意時,才向他們展示想法。

節制與自我評論

將大膽用在一個地方。讓標誌元素成為唯一令人難忘的事物,保持周圍的一切安靜且有紀律,刪除任何不服務於簡報的裝飾。不承擔風險本身可能就是一種風險!建構時要達到一定的品質底線,但不張揚:響應式至行動裝置、可見的鍵盤焦點、尊重減少動畫設定。在建構過程中評論自己的作品,如果環境允許,截圖——一張圖勝過千言萬語。考慮香奈兒的建議:出門前,照鏡子並拿掉一件飾品。人類創作者有記憶,並總是嘗試新事物,所以如果你有空間快速記下你嘗試過的筆記,這將有助於未來的迭代。

更多關於設計中的寫作

文字出現在設計中只有一個原因:讓理解更容易,因此讓使用更容易。它們是設計材料,不是裝飾。對文案投入與對間距和色彩相同的意圖。在寫任何東西之前,先問設計需要說什麼,以及如何最好地說出來,以幫助使用者導航體驗。

從最終使用者的角度寫作。以人們控制與辨識的事物來命名,絕不以系統的建構方式來命名。一個人管理通知,而不是 Webhook 設定。用平實的語言描述某個東西的作用,而不是推銷它。具體永遠比聰明更好。

預設使用主動語態。控制項應準確說明使用時會發生什麼:「儲存變更」,而不是「提交」。動作在整個流程中保持相同名稱,因此顯示「發布」的按鈕會產生顯示「已發布」的提示。介面的詞彙是使用者在產品中導航的路標。凝聚力與一致性是人們學習如何操作的方式。

將失敗與空白視為指引的時刻,而非情緒的時刻。解釋出了什麼問題以及如何修復,使用介面的語氣而非個人的語氣。錯誤不會道歉,也絕不會對發生的事情含糊其辭。空白畫面是邀請採取行動。

保持對話式且經過調整的語域:簡單的動詞、句子大小寫、無填充詞,語氣與品牌和受眾匹配。讓每個元素只做一件事。標籤就是標籤,範例就是示範,沒有任何東西默默地身兼二職。