厳選・オープン・無料

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

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

コンポーネント

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コンポーネントに鋭角の角を使用しない。コントラストが低く控えめなカラーパレットを使用しない。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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