精选 · 开放 · 免费

Liveblocks

面向多人在线应用与智能体的实时基础设施。

devtoolscollab

Liveblocks 网站截图

↓ 下载设计系统包 (12 MB)在 OpenDesign 中打开

原站: https://liveblocks.io

📦 浏览包内文件 →

01

设计气质 DNA

实时基础设施协作多人在线开发者

实时协作功能的 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

统一4像素网格，留白充足以保证呼吸感。

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.1至0.3秒。 · 即时响应，视觉反馈最小化。

08

组件

button 药丸形或圆角矩形按钮，高对比度（白底黑字或黑底白字）。
card 深色卡片，带细微1像素边框，无背景色区分。
chip 小型圆角标签，采用细微背景或边框处理。
input 深色背景，1像素边框，圆角处理。
hero 大号居中字体，配大幅产品截图与双行动号召按钮。

09

文案语气与禁用清单

语气技术化、直接、权威。
标题风格 加粗、简洁、价值导向。
按钮文案 行动导向且清晰，常强调“免费”或“开始”。

不要使用彩色渐变作为主背景——截图显示为纯黑与深灰色。
不要使用衬线字体作为标题——截图显示为简洁的几何人文无衬线字体。
不要使用柔和、圆润的粉彩色——截图显示为高对比度单色板。
不要用不必要的边框或阴影使界面杂乱——截图显示为极简的表面处理。
不要使用两端对齐文本——截图显示为居中与左对齐布局。
不要使用俏皮或过度装饰的图标——截图显示为简洁的线条图标。
避免: 避免过于随意或俚语化的语言。
避免: 避免UI文案中冗长绕弯的句子。
避免: 避免分散技术价值焦点的装饰性元素。

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