精选 · 开放 · 免费

Synthesia

一款一体化AI视频商务平台，通过数字人和配音简化专业级视频创作。

aivideo
Synthesia 网站截图
↓ 下载设计系统包 (25 MB)在 OpenDesign 中打开

原站: https://www.synthesia.io

📦 浏览包内文件 →

01

设计气质 DNA

AI视频平台商务企业

一款简洁的企业级工具，利用AI简化视频制作流程。

02

色彩

#3E57DAAccent
#0D0F2CInk
#333B52Ink soft
#F5F8FFBG
#FFFFFFBG soft
#EBF6DFBG quiet
#656C86Muted
rgba(230, 234, 244, 1)Line

高对比度、无障碍的配色方案，以主导的蓝色强调色搭配柔和的冷灰色背景。

03

字体

geometric-sans · monospace

所有文本（标题、正文、UI元素）使用几何无衬线字体。 · 避免使用超过两种字体粗细（400和500）。 · 标题应使用负字距以营造紧凑感。

04

间距

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

基于4px的网格系统，采用统一的24px栏间距和卡片32px内边距。

05

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

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

1px solid rgb(230, 234, 244)

0px 6px 20px 0px rgba(16, 24, 40, 0.08) · 0px 2px 16px 0px rgba(16, 24, 40, 0.08) · 0px 0px 0px 1px rgb(230, 234, 244)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中的固定宽度容器（1280px），采用12列网格和24px栏间距，遵循移动优先的断点进行适配。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

悬停和点击时的简单颜色与变换过渡。 · 加载状态的微妙透明度变化。 · 无复杂或分散注意力的动画。

文本链接的颜色变化和按钮的微妙背景偏移。 · 交互元素上的缩放或变换微交互。

08

组件

09

文案语气与禁用清单

10

包内真实截图

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

抓自真实页面 · 真 computed styles

11

System Prompt

Synthesia 是一款企业级SaaS平台，专注于AI驱动的视频创作。其设计呈现简洁、专业的美学，以主蓝色强调色（#3E57DA）和柔和的冷灰色背景（#F5F8FF）为特色。字体采用统一的几何无衬线字体（使用400和500两种粗细），配以大号、紧凑的标题。关键交互模式包括微妙的阴影和12px圆角。重要禁忌：避免使用纯黑色文本、尖锐边角、沉重深色背景、复杂渐变和装饰性字体。布局居中且宽敞，为商务用户优先考虑清晰度和导航便捷性。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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