큐레이션 · 오픈 · 무료

Cap

화면 녹화 도구를 위한 깔끔하고 현대적인 SaaS 랜딩 페이지입니다.

productmacoss
Cap 스크린샷
↓ 디자인 시스템 다운로드 (8 MB)OpenDesign 에서 열기

원본 사이트: https://cap.so

📦 팩 내용 보기 →

01

디자인 DNA

개발자 도구화면 녹화오픈 소스스크린샷

화면 녹화 도구를 위한 깔끔하고 현대적인 SaaS 대시보드

02

컬러

#0D74CEAccent
#000000Ink
#202020Ink soft
#fcfcfcBG
#838383Muted
rgba(229, 231, 235, 1)Line

거의 흰색 배경 위의 고대비 검은색 타이포그래피와, 주요 액션을 위한 단일의 선명한 블루 악센트를 사용합니다.

03

타이포그래피

sans-serif · ui-monospace

04

여백

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

섹션 간 여유로운 세로 간격을 가진 일관된 4px 기본 단위를 사용합니다.

05

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

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

1px solid rgb(229, 231, 235)

rgba(0, 0, 0, 0.05) 0px 4px 10px 0px · rgba(0, 0, 0, 0.05) 0px 20px 25px -5px

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

12컬럼 그리드를 갖춘 표준 중앙 정렬 컨테이너

07

모션과 인터랙션

150msmicro
150mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

인터랙티브 요소에서의 부드러운 hover 전환 · 비디오 타임라인의 재생 헤드 애니메이션

버튼과 링크에서의 부드러운 색상 전환 · 미묘한 스케일 또는 색상 변화

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

이것은 오픈 소스 화면 녹화 도구인 Cap을 위한 깔끔하고 현대적인 SaaS 랜딩 페이지입니다. 디자인 DNA는 밝고 거의 흰색 배경(#fcfcfc), 고대비 검은색 타이포그래피, 그리고 'Sign Up'이나 'Upgrade' 같은 주요 액션을 위한 단일의 선명한 블루 악센트(#0D74CE)가 특징입니다. 폰트는 넓은 스케일(헤드라인 60px)로 사용되는 중립적인 humanist sans-serif이며, 자간이 좁습니다. 핵심 주의사항: 1) 스크린샷이 밝은 테마를 보여주므로 다크 모드나 어두운 배경을 사용하지 마세요. 2) 버튼이나 카드에 날카로운 모서리를 사용하지 마세요. 둥근 알약 형태와 둥근 모서리를 사용하세요. 3) 강한 그림자를 사용하지 마세요. 깊이감을 위해 미묘하고 부드러운 그림자를 사용하세요. 레이아웃은 여유로운 여백을 가지며, 명확함과 전문성을 강조합니다. 인터랙티브 요소는 부드럽고 미묘한 전환 효과를 갖습니다. 톤은 전문적이고 직접적이며, 제품의 유용성과 오픈 소스 특성에 초점을 맞춥니다.

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

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

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

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