OpenDesign·你的设计资产库

网页参考

HeyGen

使用逼真的AI数字形象，在几分钟内将您的想法转化为视频。

AIVideo
HeyGen 网站截图

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 — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

一个用于AI视频生成的高端SaaS平台。关键颜色为纯白（#FFFFFF）、深灰（#171717）和活力十足的青色点缀（#00C3FF）。排版采用几何无衬线和人文主义无衬线字体，配有加粗、大尺寸的标题。关键禁忌：不要使用深色模式或深色背景。不要使用衬线字体或传统排版。不要使用杂乱的多栏布局。不要在UI组件上使用尖锐的直角。不要使用低对比度或柔和的调色板。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。