OpenDesign·你的设计资产库

网页参考

Shortwave

AI驱动的邮件自动化与团队协作平台

ProductivityEmail
Shortwave 网站截图

01

设计气质 DNA

AI 邮件自动化生产力协作智能体

像团队成员一样工作的智能邮件助手

02

色彩

#356affAccent
#ffffffInk
#a1a1a1Ink soft
#161620BG
#1e1e2eBG soft
#0f0f16BG quiet
#dededeMuted
rgba(53, 106, 255, 1)Line

深海军蓝背景，搭配高对比度白色文字，并使用醒目的蓝色点缀来突出焦点区域

03

字体

humanist-sans · monospace

  • display52px · 600
  • h234px · 600
  • body16px · 400
  • small13px · 400

所有界面文字使用humanist-sans字体 · 标题在大尺寸时使用更紧凑的字间距 · 正文保持一致的0.2px字间距

04

间距

4px
8px
16px
24px
32px
48px
64px
72px
80px
96px

以8px为基础单位，并使用充足的垂直间距以营造高级感

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 12px
xl · 32px
pill · 999px

1px实线边框，使用低不透明度的边框颜色

0 4px 24px rgba(0, 0, 0, 0.3)

06

布局

1200container
12columns
24pxgutter
768 / 1024breakpoints

主视觉区采用单列居中，功能区块采用双列布局

07

动效与交互

200msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素上的平滑颜色过渡 · 微妙的backdrop-filter模糊效果

颜色和背景色过渡，使用0.2秒ease-in-out · 即时的视觉反馈

08

组件

  • button 圆润的胶囊按钮，使用纯色点缀填充或微妙的边框
  • card 深色卡片，带有微妙的边框和圆角（12-32px）
  • chip 胶囊形标签，带有边框轮廓
  • input 大尺寸的圆角输入框，带有占位符文字和发送图标
  • hero 居中标题，使用渐变AI文字，配有副标题和输入框展示

09

文案语气与禁用清单

  • 语气 专业且平易近人，强调效率和智能
  • 标题风格 使用直接的行动动词，陈述聚焦于收益
  • 按钮文案 清晰、低门槛的行动号召，例如“免费开始使用”
  • 不要使用浅色背景——截图显示的是持续的深海军蓝主题
  • 不要使用装饰性衬线字体——截图显示的是干净的无衬线字体排版
  • 不要使用暖色调——截图仅使用冷色调的蓝色和灰色
  • 不要在主视觉区使用复杂的多列布局——截图显示的是居中的单列聚焦布局
  • 不要使用狭小的间距——截图显示的是充足的内边距和间隙
  • 不要到处使用渐变文字效果——截图仅将渐变用于“AI”高亮
  • 避免: 过多专业术语的技术语言
  • 避免: 过于随意或俏皮的语气
  • 避免: 侵略性的销售语言

10

包内真实截图

Shortwave — 桌面首屏（hero）
桌面首屏（hero）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Shortwave — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Shortwave 是一个AI驱动的邮件自动化与团队协作SaaS平台。定位：具备智能自动化能力的高端生产力工具。关键颜色：深海军蓝背景（#161620, #0f0f16），白色文字（#ffffff），灰色点缀（#a1a1a1），以及醒目的蓝色点缀（#356aff）。字体类别：所有界面元素使用humanist-sans，主要字体为Poppins。布局特点：居中的主视觉区块，拥有充足留白，以及双列功能网格。关键禁忌：绝不使用浅色背景（保持深色主题），避免装饰性字体（保持干净的无衬线字体），不要挤满UI元素（保持充足间距），避免暖色调（坚持冷色蓝色调板），不要使用复杂动效（保持交互微妙），不要让界面显得杂乱（保持聚焦、极简的风格）。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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