精選 · 開放 · 免費

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 solid 邊框顏色，搭配低不透明度

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.2s 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