精选 · 开放 · 免费

tldraw

一款极简的协作画布工具，旨在为你的创意让路。

01

设计气质 DNA

一个干净的数字白板，界面元素被巧妙隐藏

02

色彩

以中性画布为底，使用单一的鲜明蓝色作为主要操作色。

03

字体

humanist-sans

• body12px · 500
• caption16px · 500
• h124px · 700

为界面元素使用中性无衬线字体 · 为标准界面文本保持一致的500字重 · 粗体仅用于标题，慎用

04

间距

8像素基础网格

05

表面 (圆角 / 阴影 / 边线)

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

rgba(0, 0, 0, 0.16) 0px 0px 2px 0px · rgba(0, 0, 0, 0.24) 0px 2px 3px 0px

07

动效与交互

界面面板显示/隐藏的平滑过渡

光标在交互元素上变为指针 · 激活状态通过颜色变化或细微阴影来指示

08

组件

• button 主要按钮为实心蓝色，白色文字，圆角药丸形状；次要按钮为灰色或带轮廓线。
• card 无传统卡片；界面表现为带阴影的浮动面板。
• chip 未观察到标签组件。
• input 未见文本输入框；界面主要基于图标。
• hero 整个画布即为主视觉区域。

09

文案语气与禁用清单

• 语气 极简、功能性、不打扰
• 标题风格 简洁、行动导向的标签
• 按钮文案 直接清晰，例如「登录以共享」

• 不要使用深色背景——截图显示的是明亮的白色画布。
• 不要使用多种字体——截图显示的是统一的 humanist-sans 字体。
• 不要使用厚重的投影——截图显示的是细微、真实的阴影。
• 不要让界面显得杂乱——截图显示的是极简的浮动工具栏。
• 不要使用复杂的配色方案——截图显示的是中性底色搭配单一蓝色点缀。
• 不要使用过于复杂的排版——截图显示的是基于字重的简洁层级。
• 避免: 用不必要的UI元素扰乱画布
• 避免: 使用过于装饰性的字体
• 避免: 使用过多的主色调

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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