精選 · 開放 · 免費

HeyGen

使用擬真 AI 數位分身，在幾分鐘內將您的想法轉化為影片。

aivideo

HeyGen 網站截圖

↓ 下載設計系統包 (27 MB)在 OpenDesign 中開啟

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

📦 瀏覽包內檔案 →

01

設計氣質 DNA

AI 影片數位分身生成式毫不費力專業

瀏覽器中的高端 AI 影片工作室

02

色彩

#00C3FFAccent

#171717Ink

#333333Ink soft

#FFFFFFBG

#F2F2F2BG soft

rgba(23, 23, 23, 0.1)Line

乾淨、明亮的白色畫布，搭配深色高對比文字與活力的青綠色強調。

03

字型

geometric-sans · humanist-sans · monospace

display60px · 700
heading32px · 700
body18px · 400
small14px · 400

04

間距

4px

8px

16px

20px

24px

30px

32px

48px

64px

96px

採用一致的 4px 基線格線，並搭配寬鬆的區塊間距。

05

表面 (圓角 / 陰影 / 邊線)

sm · 4px

md · 8px

lg · 12px

pill · 20px

1px solid rgba(23, 23, 23, 0.1)

rgba(0, 0, 0, 0) 0px 0px 0px 0px · rgba(255, 255, 255, 0.9) 2.125px 2.125px 10px 0px inset · rgba(255, 255, 255, 0.4) -2.125px -2.125px 20px 0px inset

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

寬版單欄主視覺區塊，後接結構化的內容區塊。

07

動效與互動

150msmicro

300mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

互動元素的流暢 hover 轉場效果 · 區塊內容的細微入場動畫

按鈕與連結的細微色彩變化或透明度改變。 · 透過狀態改變或縮放提供即時反饋。

08

組件

button 藥丸形 CTA 按鈕，採用青綠色背景與黑色文字；次要按鈕為外框樣式。
card 採用玻璃擬態的 3D 造型展示影片輸出；功能區塊使用乾淨的白色區塊。
chip 細微的藥丸形分類標籤，如「AI 數位分身產生器」。
input 標準的白色輸入欄位，帶有柔和的圓角邊框。
hero 分割式版面，左側為粗體文字排版，右側為互動式 3D 圖形。

09

文案語氣與禁用清單

語氣賦予力量、直接且高度專業。
標題風格 粗體、陳述式的語句，強調速度與品質。
按鈕文案 以行動為導向，強調「免費」層面以降低使用門檻。

不要使用襯線字體——截圖中僅使用幾何與人文主義無襯線字體。
不要使用深色模式背景——主要背景為純白色。
不要使用複雜的多色漸層——強調色為單一、一致的青綠色。
不要使用銳利的方形角——所有按鈕與標籤均採用圓潤的藥丸形。
不要使用密集的多欄文字區塊——內容以寬敞、通透的區塊排版。
不要使用細微、低對比的文字——墨色採用極深灰色以確保高可讀性。
避免: 避免在主要標題中使用過於技術性的術語。
避免: 避免視覺雜亂或令人分心的背景元素。
避免: 避免多個相互競爭的主要行動呼籲。

10

包內真實截圖

HeyGen — 桌面首屏（hero） — 桌面首屏（hero）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

一個用於 AI 影片生成的高端 SaaS 平台。關鍵色彩為純白 (#FFFFFF)、深灰 (#171717) 與鮮明的青綠色強調 (#00C3FF)。字體採用幾何與人文主義無襯線字體，搭配粗體、大標題排版。關鍵注意事項：請勿使用深色模式或深色背景。請勿使用襯線字體或傳統字體排版。請勿使用雜亂的多欄式佈局。請勿在 UI 元素上使用銳利的方形角。請勿使用低對比或柔和的色板。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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