생동감 있는 단일 파란색이 지배하며, 높은 대비와 친근함을 위해 흰색과 노란색 포인트가 사용됩니다.
03
타이포그래피
geometric-sans
display52px · 700
body16px · 400
caption13px · 400
디스플레이 텍스트는 굵고 자간이 좁습니다. · 본문 텍스트는 정상 굵기에 여유로운 행간을 적용합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
4px 기본 단위와 8px 단계 스케일을 사용합니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 6px
md · 16px
lg · 24px
pill · 999px
최소화하며, 카드와 입력 필드에는 부드러운 둥근 모서리를 적용합니다.
06
레이아웃
1280container
12columns
24pxgutter
768 / 1024breakpoints
왼쪽에 텍스트, 오른쪽에 폰 목업을 배치한 분할 레이아웃으로, 모바일에서는 수직으로 쌓입니다.
07
모션과 인터랙션
100msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 및 focus 상태에서의 미묘한 전환 효과.
인터랙티브 요소에 미묘한 색상 변화 또는 밑줄을 적용합니다. · 지연 없이 즉각적인 시각적 피드백을 제공합니다.
08
컴포넌트
button투명 배경에 흰색 테두리가 있는 둥근 알약 모양입니다.
card부드러운 그림자가 적용된 둥근 직사각형으로, 공지사항을 담고 있습니다.
input흰색 배경에 어두운 텍스트가 적용된 둥근 직사각형입니다.
hero대담한 타이포그래피와 떠 있는 폰 목업을 사용하는 분할 레이아웃입니다.
09
보이스와 금지 목록
톤친근하고, 열정적이며, 직접적입니다.
헤드라인크고 굵으며 재치 있게, 종종 '정말'로 시작합니다.
CTA화살표 아이콘이 포함된 간결한 행동 중심 문구입니다.
채도가 낮거나 빛바랜 색상을 사용하지 마세요 — 스크린샷은 생동감 있고 고채도의 파란색 배경을 보여줍니다.
세리프 또는 모노 폰트를 사용하지 마세요 — 스크린샷은 전반적으로 둥근 기하학적 산세리프를 사용합니다.
작고 절제된 헤드라인을 사용하지 마세요 — 스크린샷은 과감하고 굵은 디스플레이 폰트를 보여줍니다.
날카롭고 네모난 모서리를 사용하지 마세요 — 스크린샷은 모든 UI 요소에 높은 둥근 모서리를 적용합니다.
다크 모드를 사용하지 마세요 — 스크린샷은 밝고 다채로운 라이트 테마를 보여줍니다.
복잡한 다중 컬럼 그리드를 사용하지 마세요 — 스크린샷은 모바일에서 간단한 단일 컬럼 흐름을 보여줍니다.
피하기: 격식 있거나 기업적인 어조.
피하기: 밀도 높은 문단 텍스트.
피하기: 복잡하거나 지저분한 레이아웃.
11
System Prompt
생동감 있고 에너지가 넘치는 성격의, 소비자 중심적인 메시징 앱 인터페이스를 디자인하세요. 지배적인 밝은 파란색 배경(#008CFF)에 흰색 텍스트(#FFFFFF)와 포인트 색상인 노란색(#FFE03D)을 사용하세요. 타이포그래피는 헤드라인용으로 자간이 좁은 굵고 둥근 기하학적 산세리프여야 합니다. 핵심 주의사항: 채도가 낮은 색상, 세리프 폰트, 날카로운 모서리를 피하세요. 레이아웃은 단순하고 집중적이어야 하며, 제품을 실제로 보여주기 위해 크고 재치 있는 헤드라인과 떠 있는 폰 목업을 우선시합니다.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
