精选 · 开放 · 免费

Shortwave

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

productivityemail

Shortwave 网站截图

↓ 下载设计系统包 (26 MB)在 OpenDesign 中打开

原站: https://www.shortwave.com

📦 浏览包内文件 →

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 — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko