精选 · 开放 · 免费
Browserbase
Browserbase 为 AI 智能体提供了一个可靠且可编程的网络界面。
devai
01
设计气质 DNA
可编程可靠智能体API网络
为 AI 智能体提供的工业级发电站
02
色彩
#FF5500Accent
#000000Ink
#F1F0ECBG
#FFFACDBG soft
#C5D3E8BG quiet
#686562Muted
rgba(0,0,0,1.0)Line
采用温暖的中性背景与充满活力的橙色点缀，确保高可见度与技术精确性。
03
字体
grotesque-sans · monospace
- display
187px · 500 - heading
36px · 500 - body
16px · 400 - caption
12px · 500
大型展示标题使用紧凑的负字间距 · 小型标签的大写字母间距可适当放宽 · 字重 500 是 UI 和展示文本的标准
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于 4px 网格的统一间距系统
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 99px
1px solid black
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中内容，搭配宽边距与充足的垂直间距
07
动效与交互
200msmicro
300mssmall
800msmedium
cubic-bezier(0.3, 0, 0.15, 1)easing
交互元素上的背景色和平滑颜色过渡 · 模态框或覆盖层的透明度与可见性变化
带有平滑过渡效果的细微颜色或背景变化 · 通过背景色变化实现即时视觉反馈
08
组件
- button 纯黑色圆角按钮配白色文字，或描边圆角按钮配黑色文字
- card 浅黄色或米白色背景，搭配简洁的内容模块
- chip 带有大写文字和细微边框的小型圆角标记
- input 带有清晰边框的标准文本输入框
- hero 超大尺寸的展示型排版，搭配充满活力的橙色文字高亮
09
文案语气与禁用清单
- 语气 技术感、直接且能力出众
- 标题风格 粗体有力，关键词使用橙色高亮
- 按钮文案 面向行动、清晰明确，常使用箭头
- 勿使用柔和的粉彩色系——截图显示应使用锐利的黑色与充满活力的橙色
- 勿过度使用圆角——截图显示应使用锐利的圆角按钮与方形边框
- 勿使用宽边距——截图显示应采用居中、紧凑的布局，搭配充足的垂直内边距
- 勿使用浅灰色文字——截图显示应使用高对比度的黑色与深灰色以确保可读性
- 勿使用装饰性衬线字体——截图显示应使用简洁、现代的 grotesque-sans 字体
- 勿使用微妙的渐变——截图显示应使用纯色块与实心高亮
- 避免: 浮夸的营销术语
- 避免: 过于复杂的技术解释
- 避免: 被动语态
- 避免: 模糊的行动号召
- 避免: 过度使用感叹号
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Browserbase 的此设计系统是一个高对比度、面向开发者的界面。它使用了中性米白色与奶油色背景（#F1F0EC, #FFFACD），搭配深黑色文字（#000000）与充满活力的橙色点缀（#FF5500）。排版以现代的 grotesque-sans 字体用于展示和正文，等宽字体用于技术代码片段。关键约束包括避免使用柔和粉彩、过度圆角和装饰性衬线字体。布局居中且紧凑，采用 4px 网格与充足的垂直间距。确保所有交互元素使用自定义 cubic-bezier 缓动曲线实现平滑、迅捷的过渡效果。在所有文案中保持直接、技术性的语调。
en · zh-CN · zh-TW · ja · ko