큐레이션 · 오픈 · 무료

Jitter

모든 팀을 위한 초고속 모션

designmotion
Jitter 스크린샷
↓ 디자인 시스템 다운로드 (9 MB)OpenDesign 에서 열기

원본 사이트: https://jitter.video

📦 팩 내용 보기 →

01

디자인 DNA

모션애니메이션속도협업팀

브라우저용 디지털 애니메이션 스튜디오

02

컬러

#A481FFAccent
#19171CInk
#6E6E73Ink soft
#FFFFFFBG
#F2F1F3BG soft
#E5E4E7BG quiet
#97979BMuted
rgba(215, 215, 219, 1)Line

단일 부드러운 보라색 강조가 적용된 단색 스케일

03

타이포그래피

grotesque-sans · humanist-sans · monospace

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

40px 섹션 패딩과 일관된 4px 기준 격자

05

표면 (라운드 / 그림자 / 경계선)

sm · 4px
md · 8px
lg · 12px
pill · 999px

없음 또는 미묘한 1px solid

0px 9px 21px 0px rgba(25, 23, 28, 0.1) · 0px 38px 38px 0px rgba(25, 23, 28, 0.09) · 0px 85px 51px 0px rgba(25, 23, 28, 0.05)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

중앙 정렬 단일 칼럼 히어로, 전체 폭 로고 밴드

07

모션과 인터랙션

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

스크롤 트리거 페이드인 · 복잡한 스프링 기반 선형 transform · 불투명도 전환

부드러운 전환이 적용된 포인터 커서 · 미묘한 scale 또는 불투명도 피드백

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Jitter — 桌面首屏（hero）
桌面首屏（hero）
Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jitter — 移动首屏
移动首屏

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

Jitter는 빠르고 협업적인 모션 디자인 도구입니다. 디자인은 깨끗한 흰색 배경과 CTA에 사용되는 단일 부드러운 보라색 강조 색상을 사용합니다. 타이포그래피는 굵고 깨끗하며, 디스플레이용 grotesque-sans와 본문용 humanist-sans를 사용합니다. 핵심 디자인 요소로는 크고 임팩트 있는 헤드라인, 알약 형태 버튼, 넉넉한 여백이 포함됩니다. 다크 모드, 복잡한 팔레트, 또는 세리프 타이포그래피는 사용하지 마세요. 중요 금지 사항: 복잡한 배경, 다양한 색상, 버튼의 날카로운 모서리를 피하세요.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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