whicencer/product-landing

Product Landing (제품 랜딩 페이지)

단일 제품을 위한 한 페이지 마케팅 사이트를 일관된 시각적 스타일로 구축합니다. references/ 디렉토리의 각 섹션 파일에 상세 규칙이 있으며, 이 파일은 워크플로와 모든 섹션에 공통된 규칙을 정의합니다.

워크플로

Step 1 — 질문 (코드 작성 전, 단일 메시지)

하나의 메시지로 아래 필수 정보를 수집합니다. 사용자의 언어로 질문하세요.

• 사용자가 이미 요청에 제공한 항목은 건너뜁니다.
• 누락된 항목이 없으면 이 단계를 완전히 건너뜁니다.
• 각 항목에 기본값을 제공하여 사용자가 간단히 답하거나 건너뛸 수 있도록 합니다.

항목	기본값 (건너뛴 경우)
제품명 + 한 문장 설명	— (필수, 건너뛸 수 없음)
4–8개의 주요 기능	제품 설명에서 유추
주요 행동: 버튼 레이블 + 링크	"시작하기" → #
가격: 요금제, 가격, 통화 — 또는 "가격 섹션 없음"	가격 섹션 없음
브랜드 색상	#229ED9

법인명, 주소, 연락처 또는 법적 페이지 링크는 묻지 마세요 — 자리 표시자를 사용합니다 (Step 5 참조). 후속 질문을 하지 마세요. 답변을 받으면 바로 빌드합니다.

Step 2 — 계획

묻지 않고 자동으로 결정:

• 기능 표시 모드 (agent / command / search / task) — references/features.md 참조.
• 기능당 1–3개의 예시, 3–4개의 "작동 방식" 단계, 모든 제목과 카피.

Step 3 — 섹션 규칙 읽기

페이지 순서대로 각 섹션을 빌드하기 직전에 해당 파일을 읽습니다:

1. references/hero.md — 네비게이션 바 + 히어로
2. references/features.md — 기능 쇼케이스 + 테이블 (assets/feature-showcase.js 사용)
3. references/how-it-works.md
4. references/pricing.md — 가격 섹션이 없는 경우 건너뜀
5. references/final-cta.md
6. references/footer.md

Step 4 — 빌드

(사용자가 프레임워크를 요청하지 않은 한) 다음 파일 구조를 출력합니다:

• index.html

• css/styles.css

• js/main.js

• js/feature-showcase.js

• index.html — 마크업만 포함합니다. <style> 블록, style="" 속성(스크립트가 설정하는 경우 제외), 인라인 JS는 없습니다. 유일하게 허용되는 인라인 <script>는 기능 섹션의 JSON 예제 블록입니다.

• css/styles.css — 모든 스타일. :root의 디자인 토큰으로 시작하고, 페이지 순서대로 섹션별로 주석 헤더(/* ===== Hero ===== */) 아래에 구성합니다.

• js/main.js — 직접 작성하는 페이지 동작 (네비게이션 바 상태, 모바일 메뉴, 푸터 연도 등).

• js/feature-showcase.js — assets/feature-showcase.js를 그대로 복사합니다. 절대 main.js에 병합하거나 수정하지 마세요.

• 파일 포함 방식:

  • <link rel="stylesheet" href="css/styles.css">를 <head>에;
  • <script src="js/feature-showcase.js" defer></script> 및 <script src="js/main.js" defer></script>를 <head> 끝에.

• 일반 스크립트만 사용 — type="module" 없음, import 없음. 페이지는 디스크에서 직접 열어도 동작해야 합니다 (file://).

• 상대 경로만 사용하므로 폴더를 그대로 호스팅할 수 있습니다.

Step 5 — 점검 및 보고

1. 각 섹션 파일의 체크리스트와 아래 전역 체크리스트를 모두 확인하고 실패한 항목을 수정합니다.
2. 사용자가 채워야 할 모든 자리 표시자(법인명, 주소, 연락처, 법적 페이지 링크, # 링크, $XX 가격)를 짧게 목록으로 답변합니다.

전역 규칙

사실

비즈니스에 대한 사실을 절대 발명하지 마십시오: 가격, 요금제, 숫자, 고객 이름, 사용 후기, 법인명, 주소, 이메일, 핸들, URL. 명백한 자리 표시자를 사용하고 Step 5에서 목록을 제시합니다.

디자인 토큰

다음을 CSS 변수로 :root에 정의하고 이 변수만 사용합니다:

:root {
  --brand: #229ED9;              /* 사용자의 브랜드 색상으로 대체됨 */
  --brand-tint: color-mix(in srgb, var(--brand) 12%, white);
  --text: #0A0A0A;
  --text-muted: #6B6B70;
  --surface: #EEEEF1;            /* 카드, 플레이트 */
  --bg: #FFFFFF;
  --hairline: rgba(0, 0, 0, 0.08);
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --container: 1040px;
}

• 라이트 테마만 사용합니다. 하나의 강조색(--brand); 나머지는 검정, 회색, 흰색입니다.
• 글꼴: Google Fonts의 Inter (weight 400, 500, 600, 700, 800).
• 아이콘: https://unpkg.com/@phosphor-icons/[email protected] (고정 버전)의 Phosphor Icons.

섹션 헤더 (기능, 작동 방식, 가격에 공통)

• H2: clamp(32px, 5vw, 48px), weight 800, letter-spacing: -0.03em, line-height: 1.05, --text, 왼쪽 정렬.
• 선택적 부제목: 18px, 일반, --text-muted, 최대 너비 ~540px, 아래 여백 12px.

간격과 리듬

• 콘텐츠 컨테이너: max-width: var(--container), 양쪽 패딩 24px (모바일에서는 16px).
• 섹션 간 세로 간격: clamp(80px, 12vw, 140px).
• 무거운 섹션과 가벼운 섹션을 번갈아 배치합니다. 두 개의 인터랙티브 섹션을 연속으로 배치하지 마십시오.

카피

• 평범하고 구체적이며 인간적입니다. 짧은 문장. 실제 명사와 숫자.
• 금지어: 매끄러운, 강력한, 혁명적인, 잠금 해제, 강화, 노력 없는, 최첨단.
• 모든 페이지 카피는 사용자가 요청한 언어로 작성합니다 (기본값: 제품 설명 언어).

모션

• 미묘하게만: 호버 시 살짝 뜨기, 150–250ms 전환, 선택적 스크롤 시 한 번 페이드 인.
• 모든 것은 prefers-reduced-motion을 존중합니다.
• 페이지에서 유일한 반복 애니메이션은 히어로 브랜드 마크 펄스입니다 (references/hero.md 참조). 다른 무한 애니메이션은 없습니다.

전역 체크리스트

• Step 3에 나열된 섹션만, 그 순서대로.
• 토큰의 색상만 사용; 하나의 강조색.
• 비즈니스 사실 발명 없음; 모든 자리 표시자는 사용자에게 보고.
• 히어로 CTA, 네비게이션 바 CTA 및 최종 CTA는 동일한 작업.
• 375px에서 가로 페이지 스크롤 없음; 모든 것이 모바일에서 읽기 가능.
• 키보드 및 스크린 리더 기본: 실제 버튼, 대체 텍스트, 보이는 포커스 상태.
• 모든 인라인 <script>는 실제 닫는 태그에서만 종료: JS 코드, 주석 또는 문자열 내에 </script 없음.
• 파일: index.html, css/styles.css, js/main.js, js/feature-showcase.js — 그 외 없음, 인라인 CSS/JS 없음.
• js/feature-showcase.js는 assets/feature-showcase.js와 동일.
• JSON 예제 블록에 </script 텍스트가 포함되지 않음.
• index.html을 디스크에서 직접 열었을 때 페이지가 동작함.