인터랙티브 요소의 부드러운 background-color 및 border-color 트랜지션.
버튼 및 인터랙티브 지도 요소에 미세한 색상 전환. · 사이드바의 데이터 업데이트를 트리거합니다.
08
컴포넌트
button미세한 테두리와 hover 트랜지션이 적용된 미니멀한 알약 모양 버튼.
card미세한 그림자와 좁은 padding이 적용된 깔끔한 카드.
chip데이터 상태를 표시하는 소형 태그 형태 요소.
input둥근 테두리가 있는 표준 텍스트 입력 필드.
hero인터랙티브 지도 시각화를 중심으로 한 전체 너비 섹션.
09
보이스와 금지 목록
톤객관적이고 정보 전달적.
헤드라인직접적이고 질문 기반의 제목.
CTA미니멀하고 기능적.
장식적 폰트를 사용하지 마세요 — 스크린샷은 깔끔하고 가독성 높은 산세리프 타이포그래피를 보여줍니다.
무거운 드롭 그림자를 추가하지 마세요 — 스크린샷은 미세하고 부드러운 box-shadow를 보여줍니다.
미검증된 밝은 강조 색상을 사용하지 마세요 — 스크린샷은 데이터용 기능적 빨강과 주황을 보여줍니다.
복잡한 그라디언트를 사용하지 마세요 — 스크린샷은 단색과 단순한 선형 스케일을 보여줍니다.
UI를 과도하게 채우지 마세요 — 스크린샷은 넉넉한 여백과 집중된 레이아웃을 보여줍니다.
너무 많이 둥근 모서리를 사용하지 마세요 — 스크린샷은 대부분 날카롭거나 약간 둥근 가장자리를 보여줍니다.
피하기: 감정적 언어
피하기: 마케팅 과장
피하기: 복잡한 전문 용어
11
System Prompt
VouchAtlas는 크라우드소싱된 여행 안전 및 인프라 시각화 도구입니다. 디자인은 흰색(#FFFFFF)과 밝은 회색(#F4F4F5, #E4E4E7)의 깔끔하고 중립적인 팔레트와 어두운 텍스트(#18181B)를 기반으로 합니다. 데이터는 장식적 악센트가 아닌, 빨강(#DC2626) 및 주황(#EA580C)과 같은 기능적 색상을 통해 전달됩니다. 타이포그래피는 다양한 데이터 밀도에서 가독성을 최적화한 깔끔한 휴머니스트산세리프입니다. 레이아웃은 인터랙티브 지도를 주축으로 하며, 상세 데이터를 위한 사이드바가 이를 보완합니다. 주요 제약 조건으로는 장식적 요소 회피, 높은 데이터-잉크 비율 유지, 데이터 시각화를 위한 명확한 색상 대비 확보가 있습니다. 너무 많이 둥근 모서리를 사용하지 말고, 무거운 그림자를 추가하지 말며, 복잡한 그라디언트를 사용하지 마세요.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
