큐레이션 · 오픈 · 무료
HeyGen
실감 나는 AI 아바타를 사용하여 몇 분 만에 아이디어를 비디오로 변환하세요.
ai video
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 · 700heading 32px · 700body 18px · 400small 14px · 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
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
넓은 단일 열 히어로 섹션 다음에 구조화된 콘텐츠 섹션이 이어집니다.
07
모션과 인터랙션
150ms micro
300ms small
800ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
인터랙티브 요소의 부드러운 hover 트랜지션 · 섹션 콘텐츠의 은은한 진입 애니메이션
버튼과 링크에 은은한 색상 변화 또는 불투명도 변경. · 상태 변화 또는 스케일을 통한 즉각적인 피드백.
08
컴포넌트
button 시안 배경에 검정 텍스트를 사용한 알약 형태의 CTA 버튼; 이차적으로는 아웃라인 버튼. card 비디오 출력을 보여주는 글래스모피즘 3D 형태; 기능을 위한 깨끗한 흰색 섹션. chip 'AI 아바타 생성기'와 같은 은은한 알약 형태의 카테고리 태그. input 부드러운 둥근 테두리를 가진 표준 흰색 입력 필드. hero 왼쪽에 굵은 타이포그래피, 오른쪽에 인터랙티브 3D 그래픽을 배치한 분할 레이아웃.
09
보이스와 금지 목록
톤 강력하고 직접적이며 매우 전문적인 어조. 헤드라인 속도와 품질을 강조하는 굵고 선언적인 문장. CTA 자체를 줄이기 위해 '무료' 요소에 초점을 맞춘 행동 지향적 스타일. 세리프 폰트를 사용하지 마세요 — 스크린샷에는 기하학적이고 휴머니스틱한 산세리프만 사용되었습니다. 다크 모드 배경을 사용하지 마세요 — 주요 배경은 단색 흰색입니다. 복잡한 다색 그라데이션을 사용하지 마세요 — 포인트 컬러는 하나의 일관된 시안입니다. 날카롭고 사각형 코너를 사용하지 마세요 — 모든 버튼과 칩은 둥근 알약 형태를 사용합니다. 빽빽하고 다중 열 텍스트 블록을 사용하지 마세요 — 콘텐츠는 넓고 숨 쉴 듯한 섹션으로 배치됩니다. 은은하고 낮은 대비의 텍스트를 사용하지 마세요 — 잉크 색상은 높은 가독성을 위해 매우 진한 회색입니다. 피하기: 메인 헤드라인에 지나치게 기술적인 용어를 사용하지 마세요. 피하기: 시각적 혼란이나 집중을 방해하는 배경 요소를 사용하지 마세요. 피하기: 경쟁하는 여러 주요 CTA를 사용하지 마세요.
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
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 강렬한 타이포그래피와 깨끗하고 미니멀한 미학의 균형을 맞춘 세련된 프리미엄 AI SaaS 예시입니다.