厳選・オープン・無料

E2B

Automations と Agents のための、エンタープライズグレードのオープンソース AI Sandbox。

devai
E2B のスクリーンショット
↓ デザインシステムをダウンロード (6 MB)OpenDesign で開く

オリジナル: https://e2b.dev

📦 パックの中身を見る →

01

デザイン DNA

AISandboxAutomationsAgentsOpen-source

エンタープライズ AI インフラのための、クリーンで等幅の設計図。

02

カラー

#FF8800Accent
#000000Ink
#333333Ink soft
#FAFAFABG
#EBEBEBBG quiet
#666666Muted
rgba(0,0,0,0.1)Line

鮮やかなオレンジのアクセントを一点だけ加えた、対比の効いたモノクロム・パレット。

03

タイポグラフィ

geometric-sans · grotesque-sans · monospaced

ナビゲーションとラベルは等幅、大文字で設定。 · 見出しは tightened tracking と高いウェイトを使用。 · 本文は最大限の可読性のため、標準的な sans-serif を使用。

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

一定の 4px ベースに、ゆったりとした 24px のガター。

05

サーフェス (角丸 / 影 / 罫線)

sm · 6px
md · 0px
lg · 0px
pill · 999px

ワイヤーフレームと図式的 aesthetic を強調する、細い 1px 実線黒い罫線。

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

ヒーロー部分はセンタル配置の単一カラム・レイアウト、その後、マルチカラムの機能セクションへ移行。

07

モーションとインタラクション

150msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

インタラクティブ要素の hover 時の微妙な transform。

背景または透明度の微妙な変化。 · 即座の応答。重たいアニメーションなし。

08

コンポーネント

09

文体と禁止事項

10

パック内の実スクリーンショット

E2B — 桌面首屏（hero）
桌面首屏（hero）
E2B — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
E2B — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
E2B — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
E2B — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
E2B — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
E2B — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
E2B — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
E2B — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
E2B — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
E2B — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
E2B — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
E2B — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
E2B — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
E2B — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
E2B — 移动首屏
移动首屏

実ページから取得 · 実 computed styles

11

System Prompt

このサイトは、AI Sandbox に焦点を当てたテクニカルな開発者ツールであり、「設計図」または「ワイヤーフレーム」 aesthetic でポジショニングされている。厳格な黒と白のパレットに、ハイクロマのオレンジ色アクセント（#FF8800）を一点だけ使用している。タイポグラフィは、巨大なディスプレイ見出しには幾何学的 sans-serif を、ナビゲーション、ラベル、より小さな UI 要素には等幅フォントを組み合わせて使用。レイアウトはクリーンでゆったりとしており、コンポーネントにテクニカルでターミナルのような印象を与える、細い 1px 黒い罫線で定義されている。重要な制約：決してドロップシャドウやグラデーションを使用しないこと；ナビゲーションと CTA には常に等幅フォントを使用すること；パレットは厳格にモノクロムとし、オレンジを唯一の例外とすること。

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

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

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

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