OpenDesign·你的设计资产库

网页参考

Bun

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

Developer ToolsRuntime
Bun 网站截图

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 — 移动首屏
移动首屏

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

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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