精選 · 開放 · 免費

E2B

企業級的開源 AI 沙箱，用於自動化與代理。

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

display64px · 700
body16px · 400
mono14px · 400

導覽與標籤使用等寬字體、全大寫。 · 標題使用緊湊的字間距與高字重。 · 內文使用標準的無襯線字體以最大化易讀性。

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

一致的 4px 基準，搭配寬裕的 24px 溝槽間距。

05

表面 (圓角 / 陰影 / 邊線)

sm · 6px

md · 0px

lg · 0px

pill · 999px

1px 純黑實線邊框，強調線框與圖解美學。

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

首頁區域採用居中單欄佈局，過渡到多欄功能區塊。

07

動效與互動

150msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

互動元素在 hover 時有細微的變換效果。

細微的背景或透明度變化。 · 即時回應，無繁複動畫。

08

組件

button 實心黑色背景搭配白色等寬字體文字，或幽靈風格（ghost style）搭配 1px 黑色邊框。
card 極簡風格，由 1px 黑色邊框定義，標題使用等寬字體，類似終端機視窗。
chip 小型，橙色背景搭配白色全大寫等寬字體文字。
input 極簡風格，1px 實線邊框搭配等寬字體標籤。
hero 巨大的粗體幾何風格標題，搭配等寬字體標語與行動號召按鈕。

09

文案語氣與禁用清單

語氣技術性、自信且專注於開發者。
標題風格 全大寫、粗體且簡潔。
按鈕文案 直接、命令式的等寬字體指令（例如：免費開始、查看文件）。

不要使用陰影效果——截圖顯示所有表面都使用扁平的 1px 邊框。
不要使用鮮豔的多色漸層——截圖顯示嚴格的單色調色盤，僅有單一橙色強調。
不要使用裝飾性的襯線或手寫字體——截圖顯示嚴格的幾何無襯線與等寬字體類別。
不要在主要元素上使用圓角——截圖顯示銳利的 0px 圓角邊框。
不要在導覽中使用小寫字母——截圖顯示所有導覽項目都使用嚴格的全大寫等寬字體。
不要使用內文置中對齊——截圖顯示僅標題與行動號召使用左對齊或置中對齊。
避免: 避免過度行銷或空洞的文案。
避免: 避免複雜的漸層或陰影效果。
避免: 避免使用草書或過度裝飾的字體。
避免: 避免雜亂或多色的背景。
避免: 避免在首頁主區域使用大段落的多段文字。
避免: 避免使用俏皮或卡通風格的圖示。

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 沙箱的技術開發者工具，以「藍圖」或「線框」美學定位。它使用嚴格的黑白調色盤，搭配單一高飽和度的橙色強調（#FF8800）。字體排印依賴幾何無襯線字體（用於大型展示標題）與等寬字體（用於導覽、標籤與較小的 UI 元素）的組合。佈局乾淨宽敞，由細 1px 黑色邊框定義，賦予元件技術感、終端機般的風格。關鍵限制：切勿使用陰影或漸層；導覽與行動號召必須使用等寬字體；調色盤嚴格保持單色調，僅橙色為例外。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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