OpenDesign·你的设计资产库

网页参考

OpenAI

极简的单色界面,采用鲜明的黑白色彩、开阔的留白以及整洁的无衬线字体排版。

AIMinimalMonochrome
OpenAI 网站截图

01

设计气质 DNA

极简自信易用高端智能

一个干净、极简的研究实验室,既平易近人又具权威性。

02

色彩

#000000Ink
rgba(0,0,0,0.6)Ink soft
#FFFFFFBG
#F1F1F1BG soft
rgba(0,0,0,0.44)Muted
rgba(0,0,0,0.12)Line

纯粹的单色,绝对不引入任何色彩强调,完全依赖高对比度的黑与白。

03

字体

humanist-sans · monospace

  • display56px · 500
  • heading22px · 500
  • body17px · 400
  • caption13px · 400

04

间距

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

设计大量依赖开阔的留白和垂直 padding(最大可达 96px)来营造呼吸感和高端质感。

05

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

sm · 4px
md · 6px
lg · 12px
pill · 9999px

1px solid rgba(0,0,0,0.12)

rgba(0, 0, 0, 0.05) 0px 0px 2px 0px · rgba(0, 0, 0, 0.04) 0px 3px 6px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中内容,拥有充足的 margin,常悬浮于全出血背景元素之上。

07

动效与交互

220msmicro
250mssmall
300msmedium
cubic-bezier(0, 0, 1, 1)easing

平滑的颜色与背景过渡 · 细微的透明度淡入淡出 · 基于 transform 的缩放与位移

细微的透明度变化或背景切换,transition 时长为 0.25s。 · 反馈最小化,主要依赖背景色或 transform 的过渡。

08

组件

  • button 胶囊形状的主要操作按钮,采用高对比度的黑色背景和白色文字;或次要的胶囊形状轮廓按钮,带有圆角边框。
  • card 图像简洁,边框或阴影极简,常搭配简洁的左对齐文字排版。
  • chip 小巧的胶囊形状标签,带有浅色边框和圆角,用于分类标记。
  • input 一个大型、醒目的文本区域,采用圆角和细微边框设计,旨在聚焦用户注意力。
  • hero 一个极简的、以文字为主的版块,拥有醒目的大标题和居中的交互式输入框。

09

文案语气与禁用清单

  • 语气 权威而不失亲和,专业且聚焦。
  • 标题风格 简短、直接、对话式的提问或陈述。
  • 按钮文案 以行动为导向,表述清晰,使用如 “Try” 或 “Log in” 这类标准措辞。
  • 请勿使用明亮、饱和的色彩——截图展示的是严格的单色黑白方案。
  • 请勿使用厚重的阴影或景深效果——截图仅显示非常细微、几乎不可见的阴影。
  • 请勿使用装饰性或手写体字体——截图展示的是干净、现代的人文无衬线字体。
  • 请勿使用尖锐的直角——截图显示所有 UI 元素均采用一致的圆角。
  • 请勿添加复杂的渐变或纹理——截图显示的是纯色、扁平的背景。
  • 请勿让布局元素过于拥挤——截图显示极其开阔的留白和居中对齐方式。
  • 避免: 营销术语
  • 避免: 视觉杂乱
  • 避免: 刺眼、饱和的色彩
  • 避免: 复杂的装饰性元素

10

包内真实截图

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

11

System Prompt

该网站是 OpenAI 的主要 Web 界面,定位为通往先进 AI 的权威且高度易用的入口。其视觉基因严格遵循极简与高端,由纯粹的单色方案定义(#FFFFFF 背景,#000000 墨色,以及用于柔和文本的 rgba(0,0,0,0.6))。字体完全依赖于干净、现代的人文无衬线字体(OpenAI Sans),并注重紧凑的字距调整。关键布局特征包括:极其开阔的留白、居中的列以及细微的、几乎不可见的边框(rgba(0,0,0,0.12))和阴影。UI 偏好柔软、圆润的元素而非尖锐的直角,尤其体现在按钮和输入框上。关键禁忌:不要在核心布局中引入任何高饱和度的强调色;避免使用装饰性或复杂的衬线字体;绝不要让界面显得拥挤,因为呼吸感对其高端质感至关重要。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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