Communitygithub.com

cdesiles/设计美学

在没有品牌或设计系统可遵循时,选择和坚持一种视觉方向。适用于任何开放式设计需求。

设计美学 是什么?

该技能帮助AI代理在没有既定品牌或设计系统的情况下,为开放式设计任务建立并坚持明确的视觉方向。它通过要求代理在构建前明确“目的”、“基调”和“核心记忆点”,来对抗默认的通用设计趋同(如Inter字体、渐变主视觉、三列卡片)。技能强调细节决策(字体选择、单主色、构图与运动)比表面装饰更重要,并提供了具体的配色、字体配对及无障碍设计准则(如对比度4.5:1、最小字号16px)。它适用于Claude Code等编码代理,在生成前端界面或视觉素材时提供设计决策依据,并指导代理如何正确解读用户提供的参考案例(学习逻辑而非表面复制)。

兼容平台~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.

相关技能