精選 · 開放 · 免費
Whimsical
為技術團隊與代理程式量身打造的專業白板
designtool
01
設計氣質 DNA
白板協作技術創意規劃
專為工程師設計的數位畫布會議室
02
色彩
#9E39E5Accent
#220A33Ink
#5C275EInk soft
#FFFFFFBG
#F5F4F5BG soft
#6A5C70Muted
rgba(224,219,227,1)Line
在乾淨的表面上使用高對比墨色，並搭配鮮明的紫色強調
03
字型
humanist-sans · monospace
- display
96px · 700 - h2
32px · 700 - body
16px · 400
大型展示文字採用緊湊的負字距 · 互動元素使用中等字重 · 維持嚴謹的字體層級結構
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
8px 垂直節奏
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(224,219,227,1)
0px 16px 32px -4px rgba(37,8,53,0.06) · 0px 12px 16px -4px rgba(37,8,53,0.2)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
12 欄流動格線，內容置中
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.3, 0.1, 0, 1)easing
互動元素具備流暢的 hover 過渡效果 · 卡片 hover 時帶有細微浮起效果
細微的背景色變化或變形效果 · 立即的視覺回饋
08
組件
- button 深色實心背景搭配白色文字，或採用外框樣式
- card 帶有細膩陰影與圓角的簡潔容器
- chip 用於標籤的小型圓角標記
- input 帶有清晰 focus 狀態的簡潔邊框輸入欄位
- hero 大型漸層背景搭配置中的粗體排版
09
文案語氣與禁用清單
- 語氣 專業、清晰且具鼓勵性
- 標題風格 關於價值主張的粗體、簡潔陳述
- 按鈕文案 直接的行動動詞，如「免費開始使用」
- 勿使用深色模式介面 — 截圖顯示以白色/淺灰為主的背景
- 勿使用厚重的投影陰影 — 截圖顯示柔和、漫射的浮起陰影
- 勿使用活潑、圓潤的展示字體 — 截圖顯示乾淨、幾何風格的無襯線字體
- 勿使用霓虹或高飽和度色彩 — 截圖顯示以深紫色強調的克制配色
- 勿在佈局中使用過多邊框而顯得雜亂 — 截圖顯示極簡的邊框運用
- 勿將長段落文字置中對齊 — 截圖顯示功能格線中的內文採左對齊
- 避免: 過於隨意的俚語
- 避免: 缺乏脈絡的艱澀技術術語
- 避免: 具侵略性的銷售用語
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Whimsical 是一款專業的生產力工具，定位為為技術團隊量身打造的專業白板。設計採用高對比配色方案，以深邃豐富的紫色作為主要強調色，搭配純淨白色與柔和灰色表面。字體方面，大型且具衝擊力的標題搭配展示字體，內文則使用高度易讀的無襯線字體。關鍵限制包括避免深色模式或過於活潑的美學；介面講求結構化與效率。需保留充足的留白，並確保所有互動元素具備流暢、刻意的過渡效果。佈局應優先考慮清晰度與專注協作，避免視覺噪音或繁複裝飾。
en · zh-CN · zh-TW · ja · ko