精選 · 開放 · 免費

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 元素）使用幾何無襯線字體。 · 避免使用超過 2 種字重（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

在 hover 和點擊時，進行簡單的顏色與變形過渡。 · 載入狀態使用細膩的 opacity 變化。 · 避免複雜或分散注意力的動畫。

文字連結變色，按鈕產生細微背景色調變化。 · 互動元素進行縮放或變形的微交互。

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