精选 · 开放 · 免费

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

基于4像素的基准网格，章节间距宽敞一致。

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过渡 · 章节内容细微的入场动画

按钮和链接在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