네이티브 렌더링 성능을 위해 system-ui 스택을 사용합니다 · 주요 제목에만 엄격히 600 웨이트를 사용합니다
04
여백
4px
8px
16px
24px
32px
48px
검증 위젯을 격리하기 위한 넉넉한 수직 여백
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 4px
lg · 4px
pill · 999px
위젯에 대한 얇은 1px solid 밝은 회색 테두리
06
레이아웃
1280container
1columns
24pxgutter
768breakpoints
왼쪽 정렬 텍스트와 푸터가 있는 수직 중앙 정렬 스택
07
모션과 인터랙션
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
체크박스 상호작용 시 미묘한 상태 전환
대화형 요소에 대한 포인터 커서 · 검증 상태 토글
08
컴포넌트
button체크박스 스타일의 대화형 위젯 컨테이너
card검증 로직을 위한 단순한 테두리 컨테이너
hero사이트 로고가 있는 미니멀리스트 상태 메시지
09
보이스와 금지 목록
톤직접적이고 기술적이며 안심시키는 어조
헤드라인간결한 상태 업데이트
CTA암시적인 검증 트리거
장식 이미지를 사용하지 마세요 — 스크린샷은 기능적 UI 요소만 보여줍니다
다중 열 레이아웃을 사용하지 마세요 — 스크린샷은 단일 중앙 정렬 열을 보여줍니다
주요 위젯에 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카로운 직사각형 모서리를 보여줍니다
드롭 섀도우를 사용하지 마세요 — 스크린샷은 단순한 테두리가 있는 플랫 디자인을 보여줍니다
장식적 배경 패턴을 사용하지 마세요 — 스크린샷은 순백 여백을 보여줍니다
소문자 제목을 사용하지 마세요 — 스크린샷은 표준 대문자 사용을 보여줍니다
피하기: 마케팅성 문구
피하기: 장식적 이미지
피하기: 복잡한 탐색
11
System Prompt
신뢰와 명확성을 우선시하는 미니멀리스트, 보안 중심의 검증 인터페이스를 디자인하세요. 짙은 회색(#313131) 텍스트와 표준 파란색(#0000ee) 링크가 있는 순백 배경을 사용하세요. 최대 호환성과 빠른 렌더링을 위해 system-ui 폰트 스택을 구현하세요. 주요 제약 사항: 장식 이미지 없음, 주요 위젯에 둥근 모서리 없음, 드롭 섀도우 없음, 복잡한 그리드 레이아웃 없음, 브랜드 특정 타이포그래피 없음. 레이아웃은 검증 과제에 집중하기 위해 넉넉한 여백으로 수직 중앙 정렬되어야 합니다. 마케팅 언어 없이 보안 상태를 전달하는 엄격히 기능적인 어조를 유지하세요.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
