Communitygithub.com

Binlogo/agent-skills

AI 程式碼代理(Claude Code、Cursor、Codex)的個人技能收藏

agent-skills 是什麼?

這套技能集為 AI 編碼代理(如 Claude Code、Cursor、Codex)提供設計原則與品味指導,重點在於如何在不增加雜訊的情況下呈現大量資訊,並在不失明確性的情況下保持冷靜。它從 Linear(線性)與 Things 3 汲取靈感,強調「有密度但無雜訊」與「冷靜但不軟弱」的設計哲學。技能涵蓋五項核心原則,包括不爭奪未經掙得的注意力、結構應被感受而非看見、密集而不雜亂、冷靜應以釐清為目的,以及節制語意色彩的運用。此外,還包含字體與動態的指引、兩個決策測試(戲劇測試與冷靜測試)、自我檢查清單,以及進一步參考的連結。這套技能與平台無關,適用於各種 UI 開發情境,並明確指出當品味與平台規範衝突時,應以平台為優先。

相容平台✓Claude Code✓Codex CLI✓Cursor
npx skills add Binlogo/agent-skills

在你喜歡的 AI 中提問

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

說明文件

冷靜且密集的設計

一種品味,而非外皮。Linear 與 Things 3 是判斷的參考——如何在不產生雜訊的情況下呈現大量資訊,以及如何在不明確的情況下保持冷靜。借用它們的深色主題、紫色強調色或藍/綠品牌色,並不代表借用了這種品味。

有兩堂課承載了大部分的價值:

  • Linear — 有密度但無雜訊。 以克制的層級呈現密集的工作。
  • Things — 冷靜但不軟弱。 透過隱藏細節直到它值得出現,來保持主介面的冷靜,而不是透過清空畫面。

原則

每個原則都是一條規則,加上它所強制的取捨。在建立或檢討介面時應用它們。

  1. 不要爭奪你尚未掙得的注意力。 外框、分隔線、元資料、非活動標籤頁、重複的圖示應退居次要;主要內容與單一主要操作應在不喧嘩的情況下優先被讀取。
  2. 結構是感受的,而非看見的。 透過光學對齊、一致的間距節奏、0.5–1px 分隔線、透明度階層、分組背景與字體來獲得層級——而不是依賴粗邊框、大陰影、裝飾性漸層、飽和面板或圖示容器。
  3. 密集但不雜亂。 可預測對齊的緊湊行,以及漸進式揭露細節。不應是:微小難以閱讀的文字、每一行都暴露所有控制項、或充氣般的內距偽裝成「高級」。
  4. 能釐清的冷靜,而非隱藏的冷靜。 冷靜來自清晰的層級與一個明顯的下一個行動——而不是來自蒼白的空白空間、假裝安靜的低對比文字、或當作裝飾使用的空狀態。
  5. 節制的語意色彩。 強調色用於標示選取、焦點、重要狀態以及正向/完成狀態——永遠不是裝飾。尊重系統強調色;不要用品牌色重新塗滿一切。「完成綠」是語意提示,而非應用程式的主色。

字體與動態

  • 字體: 使用系統字型,除非有強烈理由使用其他字體;層級來自大小、粗細、透明度與位置。方向:畫面標題(清晰,不過大)→ 行標題(中等粗細)→ 元資料(較小,較低透明度)→ 狀態(緊湊,有語意,不濫用徽章)→ 主體文字(簡短,可讀)。
  • 動態: 用來解釋連續性或狀態變化(例如作曲器出現、選取移動、內嵌狀態更新)。絕不裝飾。始終尊重減少動畫設定。

兩個決策測試

  • 戲劇測試: 如果某種處理方式增加了視覺戲劇性,但並未改善導航、速度、信心或任務完成度——請移除它。
  • 冷靜測試: 如果「冷靜」讓層級、密度或下一個行動變得更難閱讀——那它就不是冷靜,而是模糊。請緊縮它。

自我檢查

針對一個介面檢查這些項目。回答「否」代表一個發現,而非偏好:

  • 主要任務是否在一瞥之下就顯而易見,無需眼睛搜尋?
  • 次要外框是否退居次要,還是與主要內容競爭?
  • 行/項目是否在可預測的網格與基線上對齊?
  • 畫面是否因為資訊豐富而密集——還是因為內距膨脹而顯得稀疏?
  • 色彩是否傳達了狀態,還是僅僅是品牌裝飾?
  • 你是否可以刪除一個分隔線、陰影、漸層或圖示容器,而完全不受影響?

深入探討

references/in-practice.md — 具體(示範性)數值、擴充的偏好/避免清單,以及如何在審查過程中應用此品味。

非此技能的職責範圍

這是與平台無關的品味。平台慣例、控制項與架構位於別處:

  • Apple(iOS/iPadOS/macOS)UI + HIG + SwiftUI/AppKit + 視覺 QA → apple-app-design-guidelines。
  • 跨平台原生感桌面架構(shell + WebView + IPC) → native-feel-desktop。

當品味與平台衝突時,請以平台為優先——遵循那些技能的指引。

相關技能