흰색 배경 위의 고대비 어두운 텍스트와, 주요 액션 및 하이라이트를 위한 단일의 생동감 있는 보라색입니다.
03
타이포그래피
humanist-sans · monospace
display48px · 700
h232px · 700
body16px · 400
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
섹션 간에는 넉넉한 수직 간격을, 컴포넌트 내부에는 좁은 간격을 적용합니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid #E5E7EB
0px 4px 20px rgba(0, 0, 0, 0.05)
06
레이아웃
1200container
12columns
24pxgutter
768 / 1024breakpoints
전폭의 히어로 섹션과 그 뒤에 상세한 앱 미리보기가 오는, 정중앙 단일 컬럼 랜딩 페이지입니다.
07
모션과 인터랙션
200msmicro
350mssmall
600msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing
버튼의 배경색이 미묘하게 변합니다. · 즉각적인 시각적 피드백을 제공합니다.
08
컴포넌트
button보라색 배경에 흰색 텍스트의 둥근 모서리 메인 버튼과, 흰색 배경에 회색 테두리의 세컨더리 버튼입니다.
card대시보드 미리보기에는 은은한 그림자와 회색 테두리를 사용한 흰색 카드로 데이터 영역을 표시합니다.
chip스크린샷에 보이는 것이 없습니다.
input스크린샷에 보이는 것이 없습니다.
hero정중앙에 굵고 큰 헤드라인, 부제, 나란히 배치된 두 개의 CTA 버튼, 그리고 그 아래에 상세한 앱 스크린샷이 있습니다.
09
보이스와 금지 목록
톤직설적이고, 자신감 넘치며, 신뢰감을 줍니다.
헤드라인짧고 강렬하며, 혜택 중심적입니다.
CTA명확하고 행동을 유도하는 방식('무료 체험 시작', '라이브 데모 보기' 등)입니다.
복잡한 그라디언트를 사용하지 마세요 — 스크린샷은 평면적이고 단색 배경을 보여줍니다.
여러 포인트 색상을 사용하지 마세요 — 스크린샷은 단일 주요 보라색(#5850EC)만 사용합니다.
장식용 폰트나 세리프 디스플레이 폰트를 사용하지 마세요 — 스크린샷은 깔끔한 휴머니스트 산세리프를 사용합니다.
레이아웃을 복잡하게 만들지 마세요 — 스크린샷은 넉넉한 여백과 정렬된 콘텐츠를 보여줍니다.
다크 모드나 과도한 그림자를 사용하지 마세요 — 스크린샷은 은은한 그림자가 있는 밝고 가벼운 인터페이스를 보여줍니다.
복잡한 아이콘ography를 사용하지 마세요 — 스크린샷은 미니멀하고 단순한 UI 아이콘을 사용합니다.
피하기: 기술 용어
피하기: 애매한 마케팅 문구
피하기: 공격적인 영업 언어
11
System Prompt
이것은 프라이버시 중심 분석 도구를 위한 깨끗하고 전문적인 SaaS 랜딩 페이지입니다. 디자인은 흰색 배경과 주요 액션을 위한 단일의 생동감 있는 보라색(#5850EC) 포인트 색상에 의존합니다. 타이포그래피는 가독성을 우선시하는 깔끔한 휴머니스트 산세리프입니다. 레이아웃은 중앙 정렬되어 넓으며, 제품을 소개하기 위해 큰 히어로 섹션을 사용하고 신뢰를 구축하기 위해 상세한 앱 스크린샷을 사용합니다. 어조는 직설적이고 혜택 중심적입니다. 가장 중요한 주의사항: 다크 모드 사용 금지, 여러 포인트 색상 사용 금지, 복잡한 그라디언트 사용 금지, 지저분한 레이아웃 사용 금지, 장식용 폰트 사용 금지, 공격적인 영업 언어 사용 금지.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
