01
设计气质 DNA
极简自信易用高端智能
一个干净、极简的研究实验室,既平易近人又具权威性。
02
色彩
#000000Inkrgba(0,0,0,0.6)Ink soft#FFFFFFBG#F1F1F1BG softrgba(0,0,0,0.44)Mutedrgba(0,0,0,0.12)Line纯粹的单色,绝对不引入任何色彩强调,完全依赖高对比度的黑与白。
03
字体
- display
56px · 500 - heading
22px · 500 - body
17px · 400 - caption
13px · 400
04
间距
4px8px12px16px24px32px48px64px96px设计大量依赖开阔的留白和垂直 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 偏好柔软、圆润的元素而非尖锐的直角,尤其体现在按钮和输入框上。关键禁忌:不要在核心布局中引入任何高饱和度的强调色;避免使用装饰性或复杂的衬线字体;绝不要让界面显得拥挤,因为呼吸感对其高端质感至关重要。











