01
设计气质 DNA
协作AI画布工作流规划
一块作为团队创意构思与AI智能体协作中枢神经系统的数字白板。
02
色彩
#4B5BF0Accent#1C1C1EInk#555A6AInk soft#FFFFFFBG#F0F0F0BG soft#F5F5F5BG quiet#C7CAD5Mutedrgba(0,0,0,0.1)Line采用洁净的白色画布搭配高对比度深色文字以确保可读性,使用单一的鲜明蓝色作为主要操作色,并以柔和的灰色构建结构。
03
字体
- display
56px · 500 - h1
48px · 500 - h2
24px · 600 - body
16px · 400 - small
12px · 400
使用 font-weight 500 的 display 标题以保持友好而专业的氛围。 · 为大号标题应用负字母间距(tracking)以收紧视觉节奏。 · 正文保持中性的 400 字重,并采用充裕的行高以提升可读性。
04
间距
4px8px12px16px20px24px32px40px48px64px80px96px基于4的网格系统,内部间距与组件间隔采用一致的 8px 和 16px 步进。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
xl · 20px
pill · 999px
仅在输入框和卡片上谨慎使用细微的 1px 边框。
0px 1px 3px rgba(0,0,0,0.1) · 0px 10px 10px -3.75px rgba(0,0,0,0.06) · 0px 2.28px 2.28px -2.5px rgba(0,0,0,0.16)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
采用标准的12栏网格,主容器居中。
07
动效与交互
150msmicro
200mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
按钮与交互元素上平滑的 hover 过渡动画。 · 交互状态下的背景色与变换动画。
细微的背景色变化或边框色改变。 · 缩放或变换的微动画。
08
组件
- button 纯黑色的「免费开始」与「了解更多」按钮,采用胶囊形或圆角矩形;首屏主按钮「免费开始」使用蓝色。
- card 浅灰色背景的圆角卡片,内含标题、图标和描述性文本。
- chip 用于用户光标或标签的小型胶囊形元素。
- input 带有细微边框的简洁圆角矩形输入框。
- hero 居中的文字型首屏区域,包含醒目的输入框和行动号召按钮。
09
文案语气与禁用清单
- 语气 赋能、专业且富有前瞻性。
- 标题风格 关于协作与AI的简短、有力、突出收益的陈述。
- 按钮文案 直接且面向行动(例如:「免费开始」、「前往控制面板」)。
- 不要使用衬线字体 — 截图显示的是简洁的人文主义无衬线字体排版。
- 不要使用深色模式主题 — 截图显示的是以白色/浅灰色为主的背景。
- 不要使用厚重的装饰性阴影 — 截图显示的是细微、柔和的阴影。
- 不要使用杂乱的多色调色板 — 截图显示的是克制的白色、黑色、灰色和单一蓝色强调色的调色板。
- 不要处处使用生硬、尖锐的直角 — 截图显示的是圆角矩形(12px, 20px)与胶囊形的混合使用。
- 不要使用密集的小字作为标题 — 截图显示的是大号、留白充足且字母间距紧密的标题。
- 避免: 首屏中使用过于技术化的术语或冗长段落。
- 避免: 激进或推销式的语言。
- 避免: 分散核心信息的杂乱布局。
10
包内真实截图













11
System Prompt
Miro 是一款协作白板 SaaS 平台。其视觉识别由简洁的亮色模式美学(白色 #FFFFFF 和灰色 #F0F0F0 背景)定义,搭配高对比度的深色墨迹(#1C1C1E)以实现最大可读性。主要的强调色是用于交互元素的鲜明蓝色(#4B5BF0)。字体采用人文主义无衬线体,标题具有紧密的字母间距。关键禁忌:切勿将深色模式作为主要界面。避免使用厚重、复杂的阴影;保持其细微。不要使用衬线字体或杂乱的多栏首屏区域。保持简洁、居中的布局,强调留白和清晰的行动号召。
