精选 · 开放 · 免费

Excalidraw

一款为速度和简洁性而设计的协作白板工具，具有标志性的手绘美学。

01

设计气质 DNA

一张空白画布配上铅笔，随时可进行快速创意构思

02

色彩

在柔和、中性的画布背景上绘制高对比度的手绘线条。

03

字体

hand-drawn · humanist-sans · monospace

• display32px · 700
• body16px · 400
• caption14px · 400

为标志和画布上的元素使用手绘风格字体。 · 为 UI 元素、菜单和系统消息使用干净的 humanist-sans 字体。 · 保持画布 UI 使用标准 16px 基础尺寸以确保高可读性。

04

间距

灵活且自然，由画布元素而非严格网格决定。

05

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

UI 容器使用中性灰色的细微 1px 边框。

0px 0px 0px 1px rgba(255, 255, 255, 1) · 0px 0px 1px 0px rgba(0, 0, 0, 0.17) · 0px 7px 14px 0px rgba(0, 0, 0, 0.05)

06

布局

无限画布，使用绝对定位放置用户创建的元素。

07

动效与交互

用于工具选择和 UI 状态变化的流畅过渡。 · 交互元素的细微变换动画。

交互元素上的细微阴影变化和颜色偏移。 · 工具选择时的即时视觉反馈。

08

组件

• button 带有细微阴影的圆角矩形，用于 UI 控件。
• card 用于设置或工具提示的简单带边框容器。
• chip 在带边框的圆角矩形中显示的键盘快捷键指示器。
• input 带有干净边框和极简样式的文本输入框。
• hero 居中的品牌标志和主要号召性用语链接。

09

文案语气与禁用清单

• 语气 乐于助人、直接且略带非正式。
• 标题风格 手绘、富有表现力且视觉上独特。
• 按钮文案 清晰且面向行动，通常与键盘快捷键配对。

• 不要使用深色主题 — 截图显示的是浅色、明亮的画布背景。
• 不要在 UI 元素上使用尖锐的 90 度角 — 截图显示偏好 4px 到 12px 的圆角。
• 不要使用纯粹几何、无菌的字体 — 截图突出显示了品牌的手绘字体。
• 不要隐藏键盘快捷键 — 截图显示它们清晰地标注在 UI 操作旁边。
• 不要使用厚重、深色的边框 — 截图显示的是浅色、细微的 1px 边框和柔和阴影。
• 不要使用复杂、多列的布局 — 截图显示的是极简、以画布为中心的界面。
• 避免: 避免过于公司化或无菌的语言。
• 避免: 避免复杂或令人困惑的说明文本。
• 避免: 避免需要探索才能发现的隐藏 UI 元素。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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