精選 · 開放 · 免費

Excalidraw

一款專為速度與簡潔性而設計的協作白板工具，具有標誌性的手繪美學。

01

設計氣質 DNA

一張空白畫布配上鉛筆，準備進行快速構思

02

色彩

在柔軟、中性的畫布背景上，使用高對比的手繪線條。

03

字型

hand-drawn · humanist-sans · monospace

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

主要標誌與畫布上的元素使用手繪風格字體。 · UI 元素、選單與系統訊息使用清晰的人文無襯線字體。 · 畫布 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

文案語氣與禁用清單

• 語氣 helpful、直接且略帶非正式。
• 標題風格 手繪、表達力強且視覺上獨特。
• 按鈕文案 清晰且以行動為導向，常與鍵盤快捷鍵搭配。

• 不要使用深色主題——截圖顯示的是淺色、明亮的畫布背景。
• 不要在 UI 元素上使用銳利的 90 度直角——截圖顯示偏好 4px 至 12px 的圓角半徑。
• 不要使用純粹幾何、死板的字體——截圖顯著地使用了手繪字體作為品牌標誌。
• 不要隱藏鍵盤快捷鍵——截圖顯示它們清晰地標示在 UI 操作旁邊。
• 不要使用厚重、深色的邊框——截圖顯示的是淺色、細微的 1px 邊框與柔和陰影。
• 不要使用複雜、多欄佈局——截圖顯示的是以畫布為中心的極簡介面。
• 避免: 避免過於企業化或死板的語言。
• 避免: 避免複雜或令人困惑的指示性文字。
• 避免: 避免需要使用者探索的隱藏式 UI 元素。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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