精选 · 开放 · 免费
HeyGen
使用逼真的AI数字形象,在几分钟内将您的想法转化为视频。
aivideo
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
- display
60px · 700 - heading
32px · 700 - body
18px · 400 - small
14px · 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
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
一个用于AI视频生成的高端SaaS平台。关键颜色为纯白(#FFFFFF)、深灰(#171717)和活力十足的青色点缀(#00C3FF)。排版采用几何无衬线和人文主义无衬线字体,配有加粗、大尺寸的标题。关键禁忌:不要使用深色模式或深色背景。不要使用衬线字体或传统排版。不要使用杂乱的多栏布局。不要在UI组件上使用尖锐的直角。不要使用低对比度或柔和的调色板。
en · zh-CN · zh-TW · ja · ko