디스플레이 타이포그래피는 날카로운 세리프를 가진 고대비 전환기 세리프를 사용합니다. · 본문 및 UI 요소는 깔끔하고 표준적인 기하학적 산세리프 시스템 폰트를 사용합니다. · 극단적인 폰트 크기 대비가 뚜렷한 시각적 계층 구조를 만듭니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
여유로운 여백과 강한 정렬 기준이 레이아웃을 고정시킵니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 0px
md · 0px
lg · 0px
pill · 0px
구분을 위해 1px의 얇은 선을 사용합니다.
06
레이아웃
1440container
12columns
24pxgutter
768 / 1024breakpoints
대형 헤더를 가진 비대칭 2열 레이아웃.
07
모션과 인터랙션
200msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
hover 전환 · fade
텍스트 요소에 대한 미묘한 opacity 변경. · 표준 포인터 커서.
08
컴포넌트
button배경이나 테두리가 없는 일반 텍스트 링크.
card단순한 수평 구분선이 있는 목록 기반 프로젝트 행.
chip칩 미사용.
input입력 필드 미사용.
hero전체 너비를 차지하는 대형 타이포그래피 헤더.
09
보이스와 금지 목록
톤직설적이고 개인적이며 절제된 어조.
헤드라인대형 세리프 및 숫자 중심.
CTA미니멀한 텍스트 전용 링크.
둥근 모서리를 사용하지 마세요 — 스크린샷에서 날카롭고 사각적인 가장자리가 보입니다.
밝은 포인트 컬러를 사용하지 마세요 — 스크린샷에서 엄격한 단색 팔레트가 보입니다.
그림자를 사용하지 마세요 — 스크린샷에서 평면적이고 테두리 없는 표면이 보입니다.
장난스러운 산세리프 디스플레이 폰트를 사용하지 마세요 — 스크린샷에서 헤드라인에 날카로운 전환기 세리프가 사용되었습니다.
모든 것을 중앙 정렬하지 마세요 — 스크린샷에서 구조화된 좌측 정렬 그리드가 보입니다.
요소들을 비좁게 배치하지 마세요 — 스크린샷에서 여유로운 여백이 보입니다.
피하기: 과도한 장식
피하기: 밝은 네온 컬러
피하기: 둥근 모서리
11
System Prompt
고급 에디토리얼 기사처럼 느껴지는 포트폴리오 웹사이트를 디자인하세요. #FFFFFF 배경과 #282828 텍스트를 사용하는 엄격한 단색 팔레트를 사용하고, 밝은 포인트 컬러는 피하세요. 주요 디스플레이 타이포그래피는 대형 스케일(142px)의 날카로운 전환기 세리프(Times New Roman과 같은)로 설정하되, UI 요소는 깔끔한 산세리프를 유지하세요. 레이아웃은 강한 좌측 정렬과 여유로운 여백을 가진 비대칭 그리드여야 합니다. 핵심 제약 조건: 둥근 모서리, 그림자, 밝은 포인트 컬러 사용 금지; 디자인은 타이포그래피 중심으로 강렬하게 유지되어야 합니다.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
