프롬프트
claude-opus-4아래 조건을 모두 만족하는 단일 HTML 파일(CSS 포함, 외부 CDN 없음)을 작성해줘. # 레이아웃 구조 - 상단 고정 헤더 (sticky, blur 배경) - 왼쪽: 로고 / 가운데: 네비게이션 / 오른쪽: CTA 버튼 - 좌측 사이드바 (220px) - 섹션별 그룹: 메뉴, 카테고리, 태그 - 활성 항목 하이라이트 - 메인 콘텐츠 영역 - 히어로 배너 카드 - 4열 통계 박스 - 카드 그리드 (3열) - 리스트 테이블 # 디자인 요구사항 - 다크 테마 (#0f0f0f 배경) - 포인트 컬러: 초록(#22c55e), 서브: 보라(#a855f7) - 카드 hover 효과 (border-color 전환) - 반응형: 모바일에서 사이드바/헤더 네비 숨김 - backdrop-filter blur 유리 효과 # 결과물 - 파일 하나로 완성 (인라인 style) - 브라우저에서 바로 열면 동작 - 한국어 텍스트, 더미 데이터로 실제 서비스처럼
Claude, ChatGPT에 붙여넣으면
위와 같은 결과를 만들 수 있어요