精選 · 開放 · 免費

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

使用系統介面字體作為內文字體，以確保效能與原生體驗。 · 程式碼區塊使用 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

懸停時平滑的顏色與背景過渡效果。 · 細微的透明度變化，作為互動回饋。

細微的背景色與文字色變化。 · 即時的視覺回應，延遲最小化。

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 作為標題，以及乾淨的系統無襯線字體作為內文。關鍵限制：不要使用淺色主題、不要為標題使用襯線字體、不要使用多種強調色或過多裝飾元素使 UI 複雜化，也不要在非藥丸形元件上使用過大的圓角。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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