厳選・オープン・無料

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

本文テキストにはパフォーマンスとネイティブ感のため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

コンポーネント

09

文体と禁止事項

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を複雑にせず、ピル型コンポーネント以外で過度に大きなボーダー-radiusを使用しないこと。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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