Communitygithub.com

Binlogo/agent-skills

AI编码智能体(Claude Code、Cursor、Codex)的个人智能体技能集合

agent-skills 是什么?

该技能提供了一套名为“平静、密集的设计”的设计品味系统,灵感源自Linear和Things 3等参考应用。它不是一套皮肤或视觉主题,而是一套关于如何在不产生噪音的情况下呈现密集信息、以及如何在保持清晰的同时不失平静的判断准则。技能通过五条核心原则(如“不为未赢得的注意力竞争”和“结构可感而非可见”)指导开发者构建或评审界面时做出设计决策。它涵盖了类型排版与动效、两个决策测试(戏剧性测试和平静测试)以及一个自查清单,帮助开发者检查界面是否真正高效、清晰。此技能是跨平台的,不涉及特定平台的具体惯例或控件,而是聚焦于通用品味,当与平台规范冲突时,以平台为准。

兼容平台✓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。

当品味与平台发生冲突时,以平台为准——请参考那些技能。

相关技能