精選 · 開放 · 免費
Browserbase
Browserbase 為 AI 代理人提供可靠且可程式化的網頁介面。
devai
01
設計氣質 DNA
可程式化可靠代理人API網頁
為 AI 代理人提供的工業級發電廠
02
色彩
#FF5500Accent
#000000Ink
#F1F0ECBG
#FFFACDBG soft
#C5D3E8BG quiet
#686562Muted
rgba(0,0,0,1.0)Line
大地色系的中性背景，搭配活潑的橘色強調，以實現高可見度與技術精準度。
03
字型
grotesque-sans · monospace
- display
187px · 500 - heading
36px · 500 - body
16px · 400 - caption
12px · 500
大型展示標題使用緊湊的負字距 · 小型標籤使用寬鬆的大寫字距 · 字重 500 是 UI 與展示文字的標準
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
基於 4px 網格的統一間距系統
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 99px
1px solid black
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
置中的內容，搭配寬邊距與充裕的垂直間距
07
動效與互動
200msmicro
300mssmall
800msmedium
cubic-bezier(0.3, 0, 0.15, 1)easing
互動元件上的背景色與色彩平滑過渡 · 彈出視窗或覆蓋層的透明度與可見性變化
細微的色彩或背景偏移，搭配平滑過渡 · 透過背景色變化提供即時視覺回應
08
組件
- button 實心黑色膠囊按鈕（白色文字）或描邊膠囊按鈕（黑色文字）
- card 淺黃或奶油色背景，搭配簡潔的內容區塊
- chip 小型圓角標籤，大寫文字與細微邊框
- input 標準文字輸入框，具有清晰邊框
- hero 巨大的展示排版，搭配活潑的橘色文字強調
09
文案語氣與禁用清單
- 語氣 技術性、直接且能力強大
- 標題風格 大膽有力，關鍵詞以橘色標示
- 按鈕文案 以行動為導向且清晰，常使用箭頭
- 不要使用柔和的粉彩色調 — 截圖顯示應使用銳利的黑色與活潑的橘色
- 不要過度使用圓角 — 截圖顯示應使用銳利的膠囊形按鈕與方形邊框
- 不要使用寬邊距 — 截圖顯示應使用置中、緊密的佈局，搭配充裕的垂直內距
- 不要使用淺灰色文字 — 截圖顯示應使用高對比的黑色與深灰色以確保可讀性
- 不要使用裝飾性襯線字體 — 截圖顯示應使用簡潔、現代的 grotesque-sans 排版
- 不要使用細微的漸層 — 截圖顯示應使用平坦的色塊與純色強調
- 避免: 浮誇的行銷術語
- 避免: 過於複雜的技術解釋
- 避免: 被動語態
- 避免: 含糊不清的行動號召
- 避免: 過度使用驚嘆號
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
此設計系統是為 Browserbase 設計的高對比度、以開發者為中心的介面。它使用中性米白色與奶油色調色板 (#F1F0EC, #FFFACD)，搭配深黑色文字 (#000000) 與活潑的橘色強調色 (#FF5500)。排版以現代 grotesque-sans 為核心，用於展示與內文，技術程式碼片段則使用等寬字體。關鍵限制包括避免使用柔和的粉彩色調、過度圓角與裝飾性襯線。佈局居中且緊密，使用 4px 網格與充裕的垂直間距。確保所有互動元件使用自訂的 cubic-bezier 緩動曲線，具有流暢、靈敏的過渡效果。所有文案維持直接、技術性的語氣。
en · zh-CN · zh-TW · ja · ko