精選 · 開放 · 免費
Vercel
一個高性能開發者平台，採用簡潔的單色美學，並以活潑的漸層作為點綴。
Developer ToolsGeometricMonochromeBold
01
設計氣質 DNA
開發者雲端效能基礎架構AI
現代網路基礎架構的精密儀器
02
色彩
#171717Ink
#4d4d4dInk soft
#ffffffBG
#fafafaBG soft
#666666Muted
rgba(235,235,235,1)Line
以簡潔的單色為基礎，透過字體排印和高對比度的介面元素來承擔視覺重量。
03
字型
geometric-sans · humanist-sans · monospace
- display
48px · 500 - headline
32px · 500 - body
16px · 400 - caption
14px · 400 - mono
14px · 400
標題字級採用緊密的負追蹤值 · 內文保持寬裕的垂直節奏 · 所有程式碼表示均使用等寬字體
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
以 4px 為基礎網格，間距與尺寸採用一致的倍數
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 6px
lg · 12px
pill · 9999px
1px solid #ebebeb
rgba(0,0,0,0.08) 0px 0px 0px 1px · rgba(0,0,0,0.04) 0px 2px 2px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
置中單欄佈局，具有寬邊距，主視覺區域使用可見的 12 欄網格
07
動效與互動
100msmicro
150mssmall
400msmedium
cubic-bezier(0.33, 0.12, 0.15, 1)easing
細微的透明度過渡 · 懸停時的色彩變化 · 點擊時的變形效果
細微的顏色變化或邊框過渡 · 立即的視覺回饋，伴隨輕微的變形或透明度變化
08
組件
- button 高對比度的藥丸形按鈕；主要按鈕為實心黑底白字，次要按鈕為黑字黑框
- card 帶有淺色陰影和寬裕內距的微邊框卡片
- chip 具有最小內距和細邊框的圓角小型標籤
- input 帶有微邊框和內部間距的簡潔文字輸入框
- hero 帶有醒目背景圖形的大型中央標題，配以明確的行動呼籲和輔助說明文字
09
文案語氣與禁用清單
- 語氣 專業、直接且技術精準
- 標題風格 大膽、簡潔且以行動為導向的陳述
- 按鈕文案 清晰的祈使動詞，例如「開始部署」與「取得展示」
- 不要使用鮮豔或霓虹色作為主要介面元素 — 截圖顯示嚴格的單色介面
- 不要在所有元素上使用圓角 — 截圖顯示如標誌和卡片般的銳利幾何形狀
- 不要使用寬飾性字體 — 截圖顯示所有標題使用簡潔、功能性的無襯線字體
- 不要建立包含多欄的複雜佈局 — 截圖顯示寬敞的單欄流動佈局
- 不要使用陰影製造深度感 — 截圖依賴細邊框和高對比度來區隔元素
- 不要在內文中使用全大寫 — 截圖僅將大寫保留給小型標籤或標示
- 避免: 過度俏皮的語言
- 避免: 模糊的術語
- 避免: 過多的感嘆號
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
一個高性能開發者的設計系統。使用以黑色 (#171717) 和白色 (#ffffff) 為中心、搭配功能性灰色的簡潔單色色盤。字體排印應採用簡潔的幾何無襯線字體作為標題，以及人文主義無襯線字體作為內文。佈局寬敞且置中，並運用可見網格。元件採用高對比度，通常為藥丸形狀，帶有微邊框。關鍵約束：保持嚴格的單色基礎，避免柔和或圓角的美學，並確保字體精準且易讀。所有互動元素都應提供清晰、快速的反饋。
en · zh-CN · zh-TW · ja · ko