OpenDesign·你的设计资产库

网页参考

Miro

Miro 是协作层,团队与AI智能体在此共同思考、规划与构建。

SaaSCollaborationProductAIClean
Miro 网站截图

01

设计气质 DNA

协作AI画布工作流规划

一块作为团队创意构思与AI智能体协作中枢神经系统的数字白板。

02

色彩

#4B5BF0Accent
#1C1C1EInk
#555A6AInk soft
#FFFFFFBG
#F0F0F0BG soft
#F5F5F5BG quiet
#C7CAD5Muted
rgba(0,0,0,0.1)Line

采用洁净的白色画布搭配高对比度深色文字以确保可读性,使用单一的鲜明蓝色作为主要操作色,并以柔和的灰色构建结构。

03

字体

humanist-sans · monospace

  • display56px · 500
  • h148px · 500
  • h224px · 600
  • body16px · 400
  • small12px · 400

使用 font-weight 500 的 display 标题以保持友好而专业的氛围。 · 为大号标题应用负字母间距(tracking)以收紧视觉节奏。 · 正文保持中性的 400 字重,并采用充裕的行高以提升可读性。

04

间距

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px

基于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)。字体采用人文主义无衬线体,标题具有紧密的字母间距。关键禁忌:切勿将深色模式作为主要界面。避免使用厚重、复杂的阴影;保持其细微。不要使用衬线字体或杂乱的多栏首屏区域。保持简洁、居中的布局,强调留白和清晰的行动号召。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。