클라이언트 웹 디자인 (AI 슬롭 금지)

모든 웹 디자인 요청(웹사이트, 페이지, 랜딩 페이지, 홈페이지, 목업, 리디자인, 재구축, 피치 사이트)에 이 스킬을 자동으로 적용하세요 — 사용자가 이름을 지정할 필요가 없습니다.

진정한 에이전시가 만든 것처럼 보이는 클라이언트 웹사이트를 구축하세요: 독창적인 디자인, 실제 카피, 깔끔한 코드, 실제 브라우저에서 확인 후 전달.

0단계 — 묻고, 절대 추측하지 마세요

코드를 작성하기 전에, 누락된 것만 확인하세요:

스택: 일반 HTML/CSS/JS, Angular, React/Next.js 또는 WordPress/Elementor.
비즈니스: 이름(정확한 철자), 업종, 도시, 서비스/제품, 대상 고객.
실제 자산: 로고, 사진, 프로젝트 목록, 연락처 번호, WhatsApp, 주소, Google 지도 링크, Google 평점, 소셜 링크.
언어(예: 영어 + 타밀어/칸나다어) — 절대 추측하지 마세요.
사이트의 주요 목표: 통화, WhatsApp 문의, 견적 요청, 예약 또는 온라인 주문. 자산이 누락된 경우 명확히 표시된 TODO 슬롯을 사용하세요 — 재고 인물 사진이나 허위 사실은 절대 사용하지 마세요.

짧은 사양을 작성하고 승인을 받으세요:

미학적 방향 — 하나를 선택하세요: 에디토리얼, 럭셔리, 인더스트리얼, 웜-로컬, 브루탈리스트, 미니멀-프리미엄. 이 비즈니스에 적합한 이유를 한 문장으로 설명하세요.
타이포그래피 — 하나의 독특한 디스플레이 폰트 + 하나의 깔끔한 본문 폰트. 엄격한 모듈러 스케일(예: 1.25)로 clamp()를 사용한 유동적 크기. 디스플레이 폰트로 기본 Inter/Roboto/Arial을 절대 사용하지 마세요.
색상 (60-30-10) — 60% 베이스(예: 따뜻한 오프-화이트 #F7F6F2 또는 차콜 #111214), 30% 구조적 표면, 10% 하나의 강력한 브랜드 악센트. CSS 변수/디자인 토큰으로 정의하세요.
그리드 및 레이아웃 — 12열 그리드, 최소 하나의 비대칭/에디토리얼 스플릿 섹션, 헤어라인 1px 테두리, 넉넉한 여백.
페이지 목록 + 실제 카피 — 각 섹션의 헤드라인과 본문 카피, 이 업종과 도시에 맞게 작성.

주얼리 / 골드: 럭셔리-에디토리얼; 세리프 디스플레이(예: Cormorant, Instrument Serif); 아이보리 + 딥 마룬/그린 + 골드 악센트(아껴서 사용); 대형 제품 사진; 날짜/시간이 포함된 골드-레이트 블록; 저축 제도 섹션; BIS 홀마크 신뢰 스트립.
산업 / 제조 / B2B: 인더스트리얼-프리사이즈; 그로테스크 디스플레이(예: Space Grotesk, Archivo); 차콜 + 스틸 그레이 + 하나의 안전 악센트(주황색/노란색); 사양 표, 프로젝트 사례 연구(클라이언트, 위치, 면적, 기간), 브로셔 다운로드, 상세 견적 양식.
호텔 / 접객업: 웜-에디토리얼; 실제 사진이 포함된 객실 카드, 요금/편의시설, 위치 및 주변 명소, 예약/WhatsApp CTA.
사진 / 창작: 미니멀-갤러리 우선; 이미지 중심 비대칭 메이슨리, 최소 크롬, 이름/카테고리에 강한 타이포그래피.

절대:

보라색/인디고/블루-바이올렛 그라데이션, 글래스모피즘 블롭, 떠다니는 그라데이션 오브.
3열 중앙 정렬 기능 그리드에서 색상 원 안의 일반 아이콘.
플레이스홀더 카피: "워크플로우를 혁신하세요", "비즈니스 역량 강화", "잠재력을 깨우세요", "경험을 한 단계 업그레이드하세요", Lorem Ipsum, "예시 제목".
비즈니스와 관련 없는 미소 짓는 사람들의 스톡 사진.
가짜 통계, 가짜 사용후기, 또는 "0+"를 표시할 수 있는 애니메이션 카운터.
아이콘으로 이모지 사용, 모든 것을 중앙 정렬, 모든 곳에서 동일한 카드 높이.
완성된 사이트에서 "#"으로 연결된 링크.

컴포넌트는 작고 조립 가능(예: 헤더/바디/푸터 파트가 있는 카드), 하나의 거대한 prop-헤비 컴포넌트가 아님.
모바일 우선; 390px 및 1440px 너비에서 테스트.
이미지: 실제 alt 텍스트, width/height 설정(레이아웃 시프트 없음), 접힌 부분 아래에서 지연 로딩, 가능하면 WebP/AVIF.
모션: 미묘하고 목적 있음(스크롤 시 페이드/슬라이드, 실제 호버 상태); prefers-reduced-motion 존중.
접근성: WCAG AA 대비, 가시적 포커스 상태, 의미론적 제목(페이지당 하나의 H1), 설명적 링크 텍스트("자세히 알아보기" 단독 사용 금지).
Angular + TranslateModule: 모든 프로젝트 언어에 대해 항상 i18n 키 파일 생성.
출력이 길어질 경우 먼저 배치 계획을 제안하고 각 배치를 완전히 생성하세요 — 파일을 절대 자르지 마세요.

고정 WhatsApp 버튼 및 클릭-투-콜 (tel:) 링크.
주소 + 삽입된 Google 지도 + 영업 시간.
Google 평점/리뷰 (실제, 프로필에 연결).
실제로 전송되는 연락처/견적 양식(이메일 및/또는 WhatsApp 알림) + 스팸 방지.
검색엔진최적화: 페이지 제목 = "도시의 서비스 | 브랜드"; 페이지별 메타 설명; LocalBusiness JSON-LD 스키마; Open Graph 이미지; sitemap.xml; robots.txt.

Playwright(헤드리스 Chromium) 사용:

선택한 디자인 방향, 구축된 페이지, 체크리스트 결과, 그리고 클라이언트에게 여전히 기다리고 있는 사항(사진, 콘텐츠, 자격 증명)에 대한 간단한 요약으로 마무리하세요.