精选 · 开放 · 免费

Diagram

一个超极简、抽象的视觉系统,将界面设计还原至最基本的结构组件。

AIToolingGradient
Diagram 网站截图
在 OpenDesign 中打开

原站: https://diagram.com

01

设计气质 DNA

极简实验性抽象虚空结构性

一个展示未渲染基础图形元素的画廊,或是软件概念性的“幕后”视图。

02

色彩

#000000Ink
#FFFFFFBG
rgba(0,0,0,1.0)Line

采用纯黑与纯白的绝对高对比度极简主义,以传达结构与本质。

03

字体

transitional-serif

为所有文本角色使用相同的过渡型衬线字体。 · 保持一致的 16px 基准尺寸,标准字重为 400。 · 为所有元素应用过渡效果,以实现细微的状态变化。

04

间距

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

无明显定义;依赖绝对定位或间距基础单元。

05

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

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

1px solid rgb(0, 0, 0),应用于结构边界。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing

通过全局 'all' 过渡属性,为所有元素应用平滑的状态过渡。

通过全局过渡属性实现的细微状态变化。 · 基础元素上的标准指针交互。

08

组件

09

文案语气与禁用清单

11

System Prompt

Diagram 是一个极简、实验性的设计系统,将数字界面精简至其本质的黑白结构基础单元。其视觉语言由强烈的单色调色板(墨色 #000000,背景 #FFFFFF)和一致使用的单一过渡型衬线字体(标准 16px)定义。交互通过所有属性上细微、通用的过渡来处理。布局如同一个基础 UI 组件的抽象画廊。关键约束:绝不引入高饱和度强调色。不使用多种字体类别或装饰性字体。避免为任何元素添加阴影、景深或圆角。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

en · zh-CN · zh-TW · ja · ko