精选 · 开放 · 免费
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 带有清晰聚焦状态的简洁边框输入框
- 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