데이트 웹 스킬
일요 신문 데이트 칼럼을 소프트웨어로 구현한 듯한 단일 화면 소비자 대시보드를 만듭니다. 편집적인 타이포그래피, 단일 절제된 악센트, 넉넉한 여백을 사용하며, 스와이프 카드나 훅업 문화의 전형적인 요소는 없습니다.
작업 흐름
- 활성화된 DESIGN.md를 읽습니다 (위에 주입됨). 메트릭 숫자에는 세리프체 디스플레이 폰트를 사용하세요 — 이 화면은 숫자로 결정됩니다.
- 브랜드 보이스를 선택합니다 — 비꼬는 듯, 관찰적이며, 약간 문학적인 느낌. 실제적이고 구체적인 카피를 생성합니다. 예: "하루 안에 답장할 사람들", "관리 가능함. 두 명은 이제 친구입니다.", "당신의 가장 큰 호환성 자산."
- 레이아웃, 순서대로:
- 상단 티커 — 상단에 가로로 한 줄로 배치된 스트립, 산세리프체 눈썹 스타일: 왼쪽에 태그라인, 오른쪽에 "NEXT TIER AT 2,080 MUTUALS" (둘 다 단일 대문자, 자간 조정). 아래 가는 선.
- 왼쪽 레일 — 220–260px 사이드바. 상단에 세리프체 이탤릭 브랜드 워드마크. 사용자 카드 (아바타 / 핸들 / 비율 / 티어). 세 가지 탐색 그룹: "TODAY" (표본, 받은 편지함, 대기열, 알림), "YOU" (내 통계, 상호 및 커뮤니티, 차단 목록, 설정), "ARCHIVE" (지난 호, 만료된 매칭). 활성 항목은 악센트 텍스트 + 악센트 점.
- 메인 콘텐츠:
- KPI 그리드 — 3열 × 3행 (또는 9개 셀). 각 셀: 작은 대문자 모노 라벨, 큰 세리프체 숫자 (긍정은 악센트 또는 절제된 녹색, 주의는 절제된 빨간색), 한 줄 이탤릭체 각주. 그럴듯한 구체적 내용 — "1,842 ↑ 이번 주 41 · 건강한 성장.", "코호트 중위값보다 14% 높음.", "4 / 내 주변 전 애인 · 관리 가능. 두 명은 이제 친구입니다."
- 막대 차트 패널 — "mutuals — last 30 days". 길고 얇은 검은색 막대, 마지막 이틀은 악센트로 강조. 상단 캡션에 "↑ TRENDING UP · +3 CLOSE MUTUALS THIS MONTH · TWO VIA THE SAME OFFSITE" 모노체.
- 추세 패널 — "match rate — last 12 weeks". 아래 한 줄 본문 ("STEADY CLIMB FROM 8% → 14%. ATTRIBUTABLE TO ONE COMMUNITY JOIN…"). 하단 구분선.
- 단일 HTML 문서를 작성합니다:
<!doctype html>부터</html>까지, CSS는 인라인.- 배경은 크리미한 오프화이트, 본문 세리프체, 모든 라벨은 모노체.
- 메트릭 숫자에
font-feature-settings: 'tnum'사용. - 약 30개의 막대, 다양한 높이의 SVG 막대 차트.
- 티커, 사이드바, KPI 그리드, 차트, 추세에
data-od-id추가.
- 자체 점검:
- 절제되고, 편집적이며, 약간 재미있게 읽혀야 함 — 선정적이지 않게.
- 단일 악센트 토큰을 최대 3–4곳에만 사용 (KPI 하나, 강조 막대 두 개, 탐색 활성 상태 하나).
- 스와이프 카드 없음, 하트 없음, 불 이모지 없음.
출력 조건
다음과 같이 <artifact> 태그 사이에 출력합니다:
<artifact identifier="dating-slug" type="text/html" title="데이트 대시보드 — 제목">
<!doctype html>
<html>...</html>
</artifact>
아티팩트 전에 한 문장, 이후에는 아무것도 없어야 합니다.