精選 · 開放 · 免費

Liveblocks

為多人應用程式與代理提供即時基礎設施。

devtoolscollab

Liveblocks 網站截圖

↓ 下載設計系統包 (12 MB)在 OpenDesign 中開啟

原站: https://liveblocks.io

📦 瀏覽包內檔案 →

01

設計氣質 DNA

即時基礎設施協作多人開發者

Realtime 協作功能的 Vercel

02

色彩

#FFFFFFInk

#918D8DInk soft

#000000BG

#111111BG soft

#171616BG quiet

#A3A3A3Muted

rgba(255,255,255,0.1)Line

高對比單色調暗色模式，極度克制。

03

字型

humanist-sans · monospace

display68px · 500
h152px · 500
body16px · 400
small14px · 400

標題使用幾何/人文無襯線字體，字距緊湊且字重高。 · 內文保持寬鬆的 1.5 行高以利閱讀。 · 等寬字體嚴格用於程式碼區塊與技術標籤。

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

一致的 4px 格線，搭配寬裕內距以保留呼吸空間。

05

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

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(255,255,255,0.1)

0 0 0 1px rgba(255,255,255,0.1) · 0 2.767px 2.214px 0px rgba(0,0,0,0.05) · 0 100px 80px 0px rgba(0,0,0,0.17)

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

置中欄位列版面，含最大寬度容器與全寬背景區塊。

07

動效與互動

100msmicro

150mssmall

300msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

互動元素上的平滑透明度與顏色過渡。 · 懸停時的細微變形與縮放效果。

細微顏色或背景變換，時長 0.1s 至 0.3s。 · 立即回應，搭配最小視覺回饋。

08

組件

button 膠囊狀或圓角矩形按鈕，高對比（白底黑字或黑底白字）。
card 暗色卡片，帶細微 1px 邊框，無背景色區分。
chip 小型圓角標籤，帶細微背景或邊框處理。
input 暗色背景，1px 邊框與圓角。
hero 大尺度置中排版，搭配大型產品畫面截圖與雙重行動呼籲。

09

文案語氣與禁用清單

語氣技術性、直接且具權威感。
標題風格 大膽、簡潔且以價值為導向。
按鈕文案 行動導向且清晰，常強調「免費」或「開始」。

不要使用彩色漸層作為主要背景——畫面截圖顯示為純黑與深灰。
不要使用襯線字體作為標題——畫面截圖顯示為簡潔的幾何人文無襯線字體。
不要使用柔和、圓潤的粉彩色調——畫面截圖顯示為高對比單色調色板。
不要在介面上堆砌不必要的邊框或陰影——畫面截圖顯示極簡的表面處理。
不要使用左右對齊的文字排版——畫面截圖顯示置中與左對齊版面。
不要使用俏皮或過度裝飾性的圖示——畫面截圖顯示簡單的線條圖示。
避免: 避免過度口語或俚語化的語言。
避免: 避免介面文案中冗長蜿蜒的句子。
避免: 避免分散技術價值的裝飾性元素。

10

包內真實截圖

Liveblocks — 桌面首屏（hero） — 桌面首屏（hero）

Liveblocks — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Liveblocks — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Liveblocks — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Liveblocks — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Liveblocks — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Liveblocks — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Liveblocks — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Liveblocks — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Liveblocks — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Liveblocks — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Liveblocks — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Liveblocks — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Liveblocks — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Liveblocks — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Liveblocks 是一個以開發者為中心的 SaaS，提供即時基礎設施。設計特色為極簡、高對比的暗色模式，使用純黑（#000000）背景與白色（#FFFFFF）或淺灰（#918D8D）文字。字型採用簡潔的人文無襯線（Suisse Int'l），大標題字距緊湊，另有一種次要等寬字體。關鍵限制：絕不使用襯線字體，避免彩色或漸層背景而採用單色調表面，版面保持極度克制，留白寬裕且邊框極簡。不使用損害專業技術語調的裝飾性元素。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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