Communitygithub.com

cdesiles/設計美學

在沒有品牌或設計系統可遵循時,選擇並堅持一個視覺方向。適用於任何開放式設計需求。

設計美學 是什麼?

這個技能幫助 AI 代理在缺乏明確品牌或設計系統的開放式設計任務中,建立並堅持一致的視覺方向。它強調避免設計落入平庸的陷阱,例如預設使用 Inter 字體、漸層主視覺或三欄卡片佈局。技能的核心是引導代理在開始建構前,先明確陳述設計的「目的」、「色調」和「一個重點」,並確保所有設計元素都服務於這三個關鍵點。此外,技能提供了具體的細節原則(如字體與色彩的運用、構圖與動態的取捨)、專案間的變化策略(如色票與字體選擇),以及無關方向的通用護欄(如對比度、字體大小和互動區域的最小值)。此技能支援任何以程式碼或文字為基礎的設計工具和 AI 代理平台,能顯著提升設計輸出的意圖性與品質。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cdesiles/opencode-kit/tree/HEAD/skills/design-aesthetic

在你喜歡的 AI 中提問

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

說明文件

美學方向

缺乏系統時,設計會趨向於你見過的一切的平均值:白色的 Inter 字體、漸層主視覺、三欄卡片佈局。刻意地抵擋這種趨勢。

在開始建構之前

用幾行文字寫下:

  • 目的 — 要解決的問題、閱讀對象、他們看到它的那一刻。
  • 色調 — 選一個並堅持:極簡、編輯風、工業風、溫馨居家、學院風、玩趣風、奢華風、技術風、檔案風。不要寫「現代又簡潔」。那句話代表你還沒決定。
  • 一個重點 — 讓人一小時後還記得的東西。一個以不合理大小呈現的展示字體、一種在灰褐色背景上的純色、一個刻意的不對稱、一條貫穿頁面全高的線條。

然後讓所有建構都服務於這三行文字。如果某個元素不符合色調或重點,就刪掉它。

方向藏在細節裡

  • 字體比色彩承擔更多工作。 一個獨特的展示字體搭配一個低調的正文字體,就完成了大部分工作。在實際使用的大小下測試配對,再決定是否採用。
  • 一種強調色,少量使用。 主導的中性色加上一個全飽和的強調色,勝過五個柔和的顏色。
  • 先構圖,後裝飾。 不對稱、重疊、寬大的邊距、一個元素打破網格一次。而不是在對稱佈局上疊加紋理。
  • 動態是一個瞬間,而非許多個。 單一交錯進場感覺像工藝;四散各處的滑鼠懸停效果則感覺像模板。

在不同專案間變化

如果你最近完成的兩個成果看起來很像,改變你總是預設使用的東西 — 通常是色溫、展示字體或密度。有目的地從一個小集合中選擇,而不是隨意地漂移到同一個選項:

  • 色票:象牙白配墨色 · 深海軍藍配暖白色 · 灰褐色配氧化紅 · 森林綠配奶油色 · 黑色配螢光黃 · 沙色配陶土色。
  • 字體:高對比襯線展示體 · 緊密字距的怪誕體 · 人文無襯線體 · 粗襯線體 · 窄展示體 · 全篇使用單一字體。

在開始建構前,用一句話說出你選了哪個以及為什麼。這句話也給了對方一個具體可以回應的東西。

護欄

無論方向為何,這些都必須遵守:

  • 內文對比度 4.5:1,標題對比度 3:1。
  • 螢幕上內文字體至少 16px,印刷品至少 12pt,1080p 投影片上至少 24px。
  • 點擊目標至少 44px。
  • 除非品牌已經在使用,否則不要用表情符號當作圖示。
  • 不要將照片繪製成 SVG。在有 FLUX 工具時用它生成;否則使用佔位符並說明該處應放置什麼。

當對方提供參考資料時

遵循參考資料的邏輯,而非其表面。如果他們分享了一個喜歡的網站,找出原因 — 間距的韻律、克制、字體粗細 — 然後應用那個原因。複製表面會讓你最終得到一個看起來像是拙劣模仿某個東西的設計。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

相關技能