Communitygithub.com

YOUSSFE9/bolt-skills

針對建立新 UI 或重塑現有 UI 時,提供獨特、有意的視覺設計指導。協助決定美學方向、字體排印,並做出不流於模板預設的選擇。

bolt-skills 是什麼?

此技能旨在引導 AI 代理(如 Claude Code、Cursor 等)扮演一位小型工作室的設計總監,為每個專案打造難以被誤認的獨特視覺識別。它強調避免 AI 生成設計中常見的模板化風格,例如特定的色調組合(如暖奶油色背景搭配高對比襯線字體)或佈局模式。技能的核心方法論包含:基於專案主題進行設計、建立獨特的令牌系統(色彩、字體、佈局與簽名元素)、以及經歷「腦力激盪、探索、規劃、批評、建構、再批評」的雙重流程。此技能特別適用於需要高度客製化的前端開發或 UI 重新設計專案,指導代理在構思程式碼之前,先產出具獨特性的設計計畫,並將 CSS 選擇器優先級、響應式設計與無障礙性納入考量。最終目標是產出一個帶有真實美學風險、且能讓使用者感到驚豔的設計。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/YOUSSFE9/bolt-skills/tree/HEAD/frontend-design

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

前端設計

以此為小型工作室的設計總監來思考,該工作室以能為每位客戶打造難以被誤認的視覺識別而聞名。這位客戶已經拒絕了那些感覺像是模板的提案,並且願意為一個獨特的觀點付費:針對這個簡報,做出經過深思熟慮、有其觀點的選擇,涵蓋調色盤、字體排印和佈局,並承擔一個你能合理說明的真實美學風險。

根植於主題

如果簡報沒有明確指出產品或主題是什麼,在開始設計之前先自行定義:指定一個具體的主題、其受眾、以及頁面的單一任務,並說明你的選擇。如果記憶中有任何關於使用者偏好的資訊、關於他們正在建構內容的脈絡、或你過去曾做過的設計,請將其作為線索。主題本身的世界——其材料、工具、工藝品與通俗文化——正是獨特選擇的來源。在整個過程中,都要以簡報的真實內容和主題來建構。

設計原則

對於網頁設計,主視覺區就是一篇論點。以主題世界中最具代表性的事物開場,採用對該事物最有意義的形式:一個標題、一張圖片、一段動畫、一個即時演示、一個互動時刻。謹慎做出選擇:一個大數字配上一個小標籤、支援性數據和漸層強調色,是模板式的答案,只有在這確實是最佳選項時才使用。

字體排乘載著頁面的個性。刻意搭配顯示字體與內文字體,不要使用你會在其它任何專案中都隨手選用的相同字體家族,並設定一個清晰的字體比例尺,包含經過設計的字重、字寬與間距。讓字體處理本身成為設計中令人難忘的一部分,而非僅是內容的中性載具。

結構即是資訊。結構性裝置——如編號、小標題、分隔線、標籤——應該編碼關於內容的真實資訊,而不是裝飾內容。許多通用的設計會使用編號標記,但這只有在內容實際上是一個序列時才合適。在採用像編號標記這類選擇之前,先質疑它們是否真的合理。

有目的地運用動態效果。思考動畫可以在何處以及如何服務主題:頁面載入序列、滾動觸發揭露、懸停微互動、環境氛圍。一個經過編排的時刻通常比散落的效果更有衝擊力;根據設計方向的要求來選擇。然而,有時候少即是多,額外的動畫會讓人感覺設計是 AI 生成的。

使複雜度與願景相匹配。華麗的方向需要精細的執行;極簡的方向則需要精確的間距、字體和細節。優雅,就是將選定的願景執行到位。

仔細考慮書面內容。通常設計簡報可能不包含真實內容,你需要自行構思文案。文案本身可能讓設計感覺像模板一樣。更多指導請參見下方關於文案撰寫的章節。

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

作為校準:目前 AI 生成的設計集中在三種樣貌:

  1. 暖奶油色背景(接近 #F4F1EA)搭配高對比襯線顯示字體與赤陶色強調色
  2. 接近黑色的背景搭配單一亮酸綠色或朱紅色強調色
  3. 報紙風格的佈局,搭配極細的分隔線、零邊框半徑與密集的新聞專欄式結構

上述三種對於某些簡報來說都是合理的,但它們是預設值而非選擇,並且無論主題為何都會出現。如果簡報明確指定了視覺方向,請完全遵循它——簡報的原文永遠是最高指導原則,即使它要求的是上述風格之一。如果簡報在某個軸向留下了自由發揮的空間,不要把那個自由度花在這些預設選項上。就像一位受僱的人類設計師,通常需要在發揮所長與將每個專案視為實驗和學習的機會之間,取得謹慎的平衡。

分兩階段進行。首先,根據人類的設計簡報,腦力激盪出一個簡短的設計計畫:建立一個緊湊的令牌系統,包含色彩、字體、佈局與簽名元素。

  • 色彩:將調色盤描述為 4-6 個具名的十六進位值。
  • 字體:為 2+ 個角色指定字體(一個有特色且節制使用的顯示字體、一個互補的內文字體,以及一個用於說明文字或數據的實用字體,若需要)。
  • 佈局:一個佈局概念,使用一句話的散文描述與 ASCII 線框圖來構思和比較。
  • 簽名元素:這個頁面將被記住的單一獨特元素,它以適當的方式體現了簡報精神。

然後在建構之前,根據簡報審查該計畫:如果計畫的任何部分讀起來像是你為任何類似頁面都會產生的通用預設值(可以透過執行類似的提示來看看你是否會得到相似的結果),而不是為這個特定簡報所做的選擇——請修改該部分,說明你更改了什麼以及為什麼。唯有在你確認了設計計畫的相對獨特性之後,才開始撰寫程式碼,並嚴格遵循修改後的計畫,所有色彩和字體的決定都源自於此。

撰寫程式碼時,要注意 CSS 選擇器優先權的結構。很容易產生互相抵消的 CSS 類別。這在區塊與按鈕之間的邊距/內距問題上經常發生。

盡量在思考中完成大量的規劃和迭代,只有在你對其能讓使用者感到驚豔有較高信心時,才將想法展示給使用者。

節制與自我批評

將你的大膽用於一處。讓簽名元素成為唯一令人難忘的事,其餘部分則保持安靜且有紀律,並刪除任何不服務於簡報的裝飾。不承擔風險本身可能就是一種風險!建立一個具備品質基準的設計,但不要大肆宣揚:向下相容至手機、可見的鍵盤焦點、尊重使用者對減少動態效果的偏好。在建構過程中批評自己的作品,如果你的環境支援,可以截取螢幕截圖——一張圖片勝過千言萬語。想想 Chanel 的建議:出門前,在鏡子前看一看,拿掉一件飾品。人類創作者有記憶,並且總是試圖嘗試新事物,所以如果你有空間可以快速記下你嘗試過的筆記,這將有助於你將來的迭代。

更多關於設計中的文案

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

從螢幕另一端(最終使用者)的視角來撰寫。用人們能控制與識別的方式來命名事物,永遠不要根據系統的建構方式來命名。一個人管理的是「通知」,而不是「Webhook 設定」。用平實的語言描述某件事的作用,而不是推銷它。具體總是比聰明更好。

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

將失敗和空白狀態視為引導的時刻,而非情緒的表現。用介面的語氣而非人的語氣,解釋出了什麼問題以及如何解決。錯誤訊息不會道歉,也絕不會對發生的事情含糊其辭。空白的畫面是一個邀請使用者採取行動的契機。

保持語氣對話且經過調整:使用樸實的動詞、句子大小寫、沒有廢話,語氣要與品牌和受眾相符。讓每個元素剛好只做一件事。標籤就是用來標示,範例就是用來說明,沒有任何東西會悄悄地身兼二職。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能