精选 · 开放 · 免费

Bun

一个极速的一体化 JavaScript 运行时与工具集。

devtoolsruntime

Bun 网站截图

↓ 下载设计系统包 (26 MB)在 OpenDesign 中打开

原站: https://bun.sh

📦 浏览包内文件 →

01

设计气质 DNA

性能开发者优先一体化极速运行时

为 JavaScript 开发者打造的高性能跑车

02

色彩

#F472B6Accent

#FFFFFFInk

#E5E7EBInk soft

#0D0E11BG

#282A36BG soft

#9CA3AFMuted

rgba(255,255,255,0.16)Line

在深色表面上使用高对比度，并搭配一个醒目的粉色强调色。

03

字体

grotesque-sans · system-sans · monospace

display56px · 700
body16px · 400
caption14px · 500
mono16px · 400

为兼顾性能与原生质感，正文使用 system-ui 字体。 · 为代码块使用 JetBrains Mono 或类似等宽字体，以确保可读性。 · 为保持紧凑、现代的视觉感受，标题文本行高应保持紧凑。

04

间距

4px

8px

12px

16px

24px

32px

48px

64px

96px

采用基于 4px 的严格网格系统，确保垂直与水平节奏的一致性。

05

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

sm · 4px

md · 8px

lg · 12px

pill · 999px

使用极细的白色边框（0.16 透明度）来界定深色卡片边缘。

rgba(0, 0, 0, 0.25) 0px 25px 50px -12px · rgba(131, 24, 67, 0.1) 0px 10px 15px -3px

06

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

采用标准的 12 列响应式网格，配合居中的最大宽度容器。

07

动效与交互

150msmicro

200mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

在 hover 状态下平滑的颜色与背景过渡。 · 用于交互反馈的细微透明度变化。

细微的背景颜色偏移与文字颜色变化。 · 以最小延迟做出即时视觉响应。

08

组件

button 高对比度的胶囊形按钮，搭配醒目的背景色。
card 深色表面，带有极细边框和柔和的圆角。
chip 用于分类和筛选的小型胶囊形标签。
input 深色输入框，带有极细边框和用于命令的等宽字体文本。
hero 全宽深色区块，包含一个巨大的粗体标题和一个主要行动号召按钮。

09

文案语气与禁用清单

语气自信、专业、直接。
标题风格 粗体、有冲击力，常使用单个粉色单词作为高亮。
按钮文案 清晰、以行动为导向、视觉上突出。

不要使用浅色背景——截图显示深色主题 (#0D0E11) 作为主要表面。
不要为标题使用衬线字体——截图使用粗体的 grotesque-sans 作为标题字体。
不要使用超过一种强调色——截图使用单一的主导粉色 (#F472B6) 进行强调。
不要对所有元素都使用大圆角——截图使用较小 (4-8px) 或完全的胶囊形 (999px) 圆角。
不要使用复杂阴影——截图主要使用细微的深色阴影来营造深度感。
不要使用纤细、优雅的字体——截图显示粗重、有分量的标题和清晰的正文文本。
避免: 避免冗长或浮夸的措辞。
避免: 避免不必要的装饰性元素。
避免: 避免使用分散核心技术价值的过度复杂布局。

10

包内真实截图

Bun — 桌面首屏（hero） — 桌面首屏（hero）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

Bun 是一个高性能的 JavaScript 运行时与工具集，定位为面向开发者的现代一体化解决方案。设计采用深色背景 (#0D0E11)，搭配高对比度的白色文本 (#FFFFFF) 和单一的亮粉色强调色 (#F472B6)。标题使用粗体的 grotesque-sans 字体，正文使用简洁的 system-sans 字体。关键约束：不要使用浅色主题，不要为标题使用衬线字体，不要通过多种强调色或过多装饰性元素来使 UI 过于复杂，也不要在非胶囊形组件上使用过大的圆角。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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