OpenDesign·你的设计资产库

网页参考

Cognition

一个扩展人类能力的自主软件工程师。

AIDeveloper Tools
Cognition 网站截图

01

设计气质 DNA

自主工程协作人类能力

软件开发未来的建筑蓝图。

02

色彩

#2200FFAccent
#000000Ink
#191919Ink soft
#F7F6F5BG
#8E8E8EMuted
rgba(0,0,0,0.1)Line

高对比度的单色系,配以单一、大胆的电光蓝作为主要交互的强调色。

03

字体

transitional-serif · geometric-sans · monospace

  • display56px · 400
  • heading20px · 400
  • body16px · 400
  • caption12px · 400

大号、高冲击力的标题使用过渡衬线体。 · 正文和 UI 元素使用几何无衬线体。 · 所有元素保持一致的 400 字重。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

充裕的留白,主容器左右留有 64px 的内边距。

05

表面 (圆角 / 阴影 / 边线)

sm · 0px
md · 0px
lg · 0px
pill · 999px

使用 rgba(0,0,0,0.1) 的微妙 1px 边框。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

桌面端采用简洁的 12 列网格布局,并配有持久化的左侧导航栏。

07

动效与交互

100msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

元素出现时的平滑透明度过渡。 · 交互元素的微妙悬停状态。

微妙的色彩偏移或透明度变化。 · 立即反馈,延迟极小。

08

组件

  • button 主要操作按钮为黑色填充、白色文字;次要操作使用描边或文字按钮。
  • card 用于文章的简洁布局,通常包含标题和日期。
  • chip 使用小型等宽字体的简单标签或元数据标记。
  • input 用于简单表单的极简、无边框文本输入框。
  • hero 一个大型的、居中的文本块,具有宽大的边距和一个次要的背景块。

09

文案语气与禁用清单

  • 语气 权威而又协作,聚焦于工程的未来。
  • 标题风格 关于产品核心能力的粗体、直接陈述。
  • 按钮文案 清晰、以行动为导向的短语,例如“探索角色”。
  • 不要使用多种高饱和度颜色——截图显示主要是黑白配色,带一个蓝色强调色。
  • 不要在主要元素上使用圆角——截图显示按钮和卡片的边缘是锐利的直角。
  • 不要使用厚重的投影——截图显示的是扁平、干净的设计,深度感极小。
  • 不要使用复杂的背景——截图显示的是纯色的浅中性背景 (#F7F6F5)。
  • 不要使用粗体字重——截图显示所有文本都使用一致的 400 字重。
  • 不要在标题上使用无衬线体——截图显示主要标题文本使用的是过渡衬线体。
  • 避免: 过于技术性的行话
  • 避免: 炒作驱动的营销语言
  • 避免: 侵入式弹窗

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这个设计系统适用于一个专注于自主软件工程的高端 AI 开发者工具。它使用过渡衬线体作为展示标题,几何无衬线体作为正文,等宽字体用于代码元素。配色方案严格采用单色系(墨黑 #000000 在背景 #F7F6F5 上),并谨慎地使用一个高饱和度的电光蓝 (#2200FF) 作为交互状态的强调色。关键禁忌:永远不要使用多种强调色,避免在所有主要组件上使用圆角,永远不要使用粗体字重;设计依靠尺寸和字体家族来构建层次。保持充裕的留白和干净的编辑感,以强调产品的技术复杂性和权威性。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。