랜딩 페이지 빌더

랜딩 페이지 빌더은(는) 무엇을 하나요?

프롬프트, 와이어프레임, 무드보드, 또는 부분 샘플이 아닌 완성된 페이지를 구축하세요. 실제 브라우저 QA로 뒷받침되는 작동하는 코드를 제공합니다. 프리미엄 품질은 브랜드 특화 결정, 우수한 타이포그래피/구성/이미지, 전환 명확성, 반응형 장인정신, 목적 있는 모션, 접근성, 성능, 사실적 무결성을 의미합니다.

호출 시 metadata.version을 읽고 프로젝트 브리프에 landing-page v<version>을 기록하세요. 완료 보고서에 정확한 버전을 반복하여 생성된 모든 랜딩 페이지가 이를 생성한 스킬 릴리스에 추적 가능하도록 하세요.

하드 출력 계약

제공:

• 새 프로젝트 또는 명시적으로 승인된 기존 프로젝트의 완전한 반응형 구현
• 사용자가 제공한 카피를 그대로 보존; 사용자가 명시적으로 요청한 경우에만 카피 작성, 편집 또는 재구성
• 작동하는 브랜드 시스템, 에셋 매니페스트/출처 노트, 통합 노트
• 이미지 생성 또는 승인된 에셋을 사용할 수 있을 때 플레이스홀더 대신 실제 이미지
• 목적 있는 GSAP 안무, 스크롤 트리거 섹션 이동 및 제어 마이크로 인터랙션(전체 빌드 기본, 문서화된 모드 예외 적용)
• SEO/OG 메타데이터, 시맨틱 구조, 접근성 상태, 최적화된 미디어
• 브라우저 테스트 완료: 사용자 뷰포트, 중단점 경계, 태블릿, 좁은 모바일, 일반적인 모바일 상태
• Vercel 배포 기본, 이어서 라이브 데스크톱/모바일 확인; 인증 또는 다른 실제 차단 요인이 있을 때만 질문

허위 주장, 지표, 자격 증명, 사용후기, 고객 로고, 규제 문구, 제품, 스크린샷, 연락처 정보, 양식 성공을 절대 만들어내지 마세요.

필수 스킬 라우팅

빌드 전 로드:

1. frontend-design - 브랜드별 아트 디렉션 및 비주얼 테제
2. design-taste-frontend - 안티-슬롭 구현 및 반응형 사전 점검
3. imagegen-frontend-web - 권위 모드 매트릭스가 시각적 모호성, 이미지 주도 방향, 요청된 컨셉, 또는 충분하지 않은 승인 에셋에 대해 해결할 때만
4. 이 landing-page 스킬 - 오케스트레이션, 빌드, QA, 제공
5. 사용 가능한 프로덕션 이미지 생성 기능 또는 media-use - 공식/제공 에셋 인벤토리가 승인된 비주얼 방향을 지원할 수 없을 때
6. imagegen-frontend-mobile - 명확하게 라벨링된 컨셉 앱 스크린 미디어 또는 모바일 앱 마케팅 페이지의 승인된 제품 스크린 컨셉에만 사용. 반응형 모바일 웹을 디자인하거나 생성된 스크린이 검증된 제품 기능임을 암시하는 데 절대 사용하지 마세요.

스택 충돌 규칙은 references/frontend-skill-stack.md를 읽으세요.

프로젝트 모드 결정

references/policy-matrix.md를 읽으세요. 이것이 Imagegen, GSAP, 보존, 승인, 통합 안전, 뷰포트 커버리지, 품질 게이트 라우팅에 대한 단일 권위 소스입니다. 여섯 가지 모드 중 정확히 하나를 선택하고 해결된 결정과 근거를 기록하세요. 다른 곳의 어떤 산문도 매트릭스를 재정의할 수 없습니다.

사용자가 "처음부터" 또는 "이전 빌드를 건드리지 마세요"라고 말하면 고유한 이름의 프로젝트를 만들고 이전 작업을 절대 편집하지 마세요.

1단계: 호출 인테이크

한 번에 하나의 짧은 질문을 하세요. 여러 필드를 한 문단이나 설문지로 결합하지 마세요. 다음 진정으로 필요한 질문을 하기 전에 답변을 기다리세요.

이 순서를 사용하며, 이미 제공되었거나 안전하게 유추할 수 있는 것은 건너뛰세요:

1. 어떤 회사/제품이며 공식 웹사이트는 무엇인가요?
2. 최종 사용자 승인 카피는 어디에 있나요? 카피는 필수이며 그대로 보존됩니다.
3. 브랜드 가이드, 로고 및 승인된 에셋은 어디에 있나요? (있는 경우)
4. 새로운 별도 빌드인가요 아니면 기존 프로젝트 편집인가요?
5. 제공된 사이트/카피가 답변하지 않고 구현을 실질적으로 차단하는 경우에만 대상 고객, CTA 목적지, 통합 또는 규정 준수에 대해 물어보세요.

카피를 다시 작성할 수 있는지 묻지 마세요. 카피를 작성하거나 변경할 것을 제안하지 마세요. 작성, 편집 또는 재구성은 명시적인 사용자 요청에 의해서만 활성화됩니다. 배포할 것인지 묻지 마세요. Vercel 배포가 기본입니다.

references/intake-brand-assets.md를 읽고 그 소스 계층, 로고 복구, 브랜드 가이드 폴백, 규정 준수, 통합, 출처 규칙을 따르세요.

2단계: 증거 및 브랜드 감사

인테이크 후:

1. 프로젝트 지침, 승인된 브리프/콘텐츠, 사전 승인, 제공된 참조를 읽으세요.
2. 공식 웹사이트가 있으면 실제 브라우저에서 열고, 그렇지 않으면 새 브랜드/사이트 없음 조건을 기록하고 제공된 컨텍스트에서 계속 진행하세요.
3. 계산된 글꼴/색상, 로고 변형, 간격, 그리드, 반경, 버튼, 아이콘, 이미지, 탐색, 양식, 푸터, 반응형 동작, 모션을 추출하세요.
4. 공식 SVG 또는 투명 고해상도 PNG 로고를 복구하고 시각적으로 확인하세요. 기존 로고를 사용할 수 없으면 사용자에게 요청하세요. 로고가 없으면 일반 텍스트 제품명 처리가 허용되는지 확인하고 로고 디자인이 범위를 벗어남을 기록하세요. 클라이언트 로고를 다시 그리거나 생성하지 마세요.
5. 문서 텍스트와 이미지를 함께 추출하고 이미지-카피 관계를 보존하세요.
6. 검증된 에셋 매니페스트를 만드세요.
7. 브랜드 가이드가 없으면 간결한 에이전트 작성 프로젝트 가이드를 만들고 정직하게 라벨링하세요.

규제/신뢰 민감 작업의 경우, 편집이 명시적으로 승인되지 않는 한 제공된 면책 조항, 라이선스, 수상 문구, 자격, 동의, 자격 증명을 보존하세요.

3단계: 콘텐츠 및 전환 아키텍처

디자인 전에 콘텐츠 매니페스트를 만드세요:

• 각 섹션의 소스 기반 헤드라인/본문/CTA/주장
• 섹션 역할: 유인, 설명, 증명, 차별화, 응답 또는 전환
• 증거 출처 또는 미해결 플레이스홀더
• 의도된 시각적/미디어 및 에셋 상태
• 기본 전환 경로 및 CTA 목적지
• approval_status와 verification_status는 사실적 주장, 사용후기, 지표, 자격 증명, 규제 문구에 대해 별도로 추적

기본 콘텐츠 정책은 사용자가 제공한 카피를 정확하게 보존하는 것입니다. authorized_editing 또는 agent_draft_unapproved는 사용자가 명시적으로 편집 또는 작성을 요청할 때만 선택될 수 있습니다. 에이전트 초안은 승인되지 않은 상태로 남아 있으며 지원되지 않는 주장을 포함할 수 없습니다.

실제 전환 질문에 답하는 섹션만 사용하세요. 히어로 + 신뢰 + 세 개의 카드 + 사용후기 + FAQ를 기계적으로 포함하지 마세요. 섹션당 하나의 기본 아이디어. 변경이 승인되지 않는 한 기존 프로젝트의 승인된 정보 아키텍처를 보존하세요.

4단계: 디자인 브리프 및 Imagegen

코드 작성 전 브리프 작성:

• 대상 고객, 전환 목표, 진실의 소스, 프로젝트 모드
• 하나의 주제별 비주얼 테제와 내러티브 스파인
• 팔레트, 타이포그래피 역할, 그리드/간격, 모양/컴포넌트 문법
• 이미지 등급, 에셋 맵, 이미지 생성 계획, 시그니처 요소
• 데스크톱/태블릿/모바일 첫 화면 및 복잡한 섹션 동작
• 각 시퀀스에 목적이 있는 모션 스토리보드
• 명시적 회피 목록 및 수용 기준

방향성이 관련 없는 브랜드에 변경 없이 재사용될 수 있으면 거부하세요.

정책 매트릭스가 Imagegen을 켜면 references/imagegen-production.md를 읽으세요:

1. imagegen-frontend-web을 사용하고 선택된 참조 수를 알리세요.
2. 선택된 각 섹션에 대해 별도의 수평 참조를 생성하고 검사하세요.
3. 구도와 밀도를 다양화하면서 하나의 브랜드 세계를 유지하세요.
4. 사용자 체크포인트(요청/결과적 트레이드오프) 또는 에이전트 수용 게이트(자율, 되돌릴 수 있음, 소스 기반)를 통해 방향을 고정하세요. 어떤 승인 모드가 사용되었는지 기록하세요.
5. 프로덕션 에셋을 실제 종횡비로 별도로 생성/해결하며 텍스트, 로고, 주장 또는 워터마크가 내장되지 않도록 하세요. UI는 정책 라우팅된 명확하게 라벨링된 컨셉 앱 스크린 경우를 제외하고 제외됩니다.
6. 검사, 자르기, 최적화, 대체 텍스트 추가, 출처 기록.

할당량보다 내러티브 유용성, 눈에 띄는 반복, 브랜드 특이성, 에셋 품질로 이미지를 판단하세요. 의도적인 타이포그래피 주도 또는 에셋이 풍부한 페이지는 기록된 근거와 함께 생성을 건너뛸 수 있습니다. 우연히 텍스트 중심이거나 스톡 제네릭 페이지는 실패합니다.

5단계: 정적 구현 및 승인

브리프를 만족하는 가장 간단한 스택을 선택하세요:

• 기존 저장소의 프레임워크, 스타일링, 라우팅, 컴포넌트, 분석, 에셋 파이프라인을 보존
• 진정한 정적 페이지에는 시맨틱 HTML, 외부 CSS, 외부 JS 사용
• 기존 아키텍처, 재사용 가능한 컴포넌트, 통합, 상태 또는 복잡한 상호작용이 정당화할 때만 React/Vite/Next 사용
• 가져오기 전에 의존성을 확인하세요.

모션 전에 정적 페이지를 완료하세요. 이미 다음을 갖추고 있어야 합니다:

• 올바른 카피, 검증된 로고/에셋, 실제 CTA 목적지
• 일관된 토큰 및 컴포넌트 문법
• 사용자 뷰포트에서 제어된 타이포그래피 및 줄 바꿈
• 눈에 띄는 반복을 피하기에 충분한 구성적 다양성(숫자 레이아웃 할당량 없음)
• 의도적인 이미지 자르기 및 예약된 치수
• 작동하는 탐색, 양식/링크, 포커스 및 상호작용 상태
• 우발적인 쌓기가 아닌 의도적인 반응형 재배치
• 깨진 미디어, 오버플로, 클리핑, 가짜 UI, 플레이스홀더, 소스 잔재 없음

GSAP을 시작하기 전에 정적 구성을 스크린샷 QA하고 수정하세요.

6단계: GSAP 프로덕션 패스

모든 전체 빌드 및 실질적인 리디자인에 대해 references/gsap-motion.md를 읽으세요. 브리프에서 모션을 계획하고 정적 구성 QA 후 구현하세요.

모션은 정책 매트릭스 하에 전체 빌드에 기본적으로 켜져 있습니다. 히어로 안무, 콘텐츠별 섹션 이동 및 기존 대화형 컨트롤에 대한 피드백을 제공하세요. 강도를 브랜드에 맞게 조정하세요. 유효한 정적/런타임/보존 제약이 이를 변경할 수 있습니다. 명시적 애니메이션 요청이 없다고 해서 건너뛰는 이유가 되지 않습니다. QA/motion-review.md에 런타임 관찰을 기록하세요. 스크린샷만으로는 모션 승인을 통과할 수 없습니다.

스크립트가 실패하거나 느리게 로드되면 중요한 콘텐츠를 계속 볼 수 있도록 하세요. 원시 창 스크롤 리스너를 사용하지 마세요. 활성 탭 애니메이션을 확인하세요. 백그라운드 탭이 타이머를 제한하기 때문입니다.

7단계: 브라우저 QA

페이지를 로컬에서 실행하고 실제 스크린샷과 상태를 검사하세요:

• 사용자의 실제 뷰포트, 모든 레이아웃 중단점 경계, 한 개의 태블릿, 한 개의 좁은 모바일, 한 개의 일반적인 모바일; 375px/390px은 보편적 요구사항이 아닌 기본값
• 첫 화면, 여러 중간 페이지 섹션, 최종 CTA/푸터
• 활성 및 정지 모션 상태와 축소 모션
• 메뉴, 앵커, 양식, 아코디언, 탭, 캐러셀 및 키보드 사용
• 타이포그래피가 중요한 경우 계산된 글꼴 패밀리/두께
• 이미지 로드/자연 치수, 자르기, 대체 텍스트
• 가로 오버플로, 클리핑, 콘솔/네트워크 오류, CLS 위험
• 양식/CTA 목적지 및 성공/오류 동작. 샌드박스/테스트 엔드포인트 및 합성 데이터를 사용하세요. 명시적 승인 없이 실제 리드, CRM 레코드, 결제, 이메일 또는 분석 이벤트를 제출하지 마세요.

인계 전에 결함을 수정하세요. 빌드가 통과하는 것은 디자인 QA가 아닙니다.

8단계: 프리미엄 품질 게이트

references/premium-quality-gate.md를 읽고 증거로 점수를 매기세요:

1. 브랜드 특이성
2. 전환 및 내러티브
3. 타이포그래피
4. 구성 및 간격
5. 이미지 및 아트 디렉션
6. 컴포넌트 장인정신
7. 반응형 디자인
8. 모션
9. 접근성 및 무결성
10. 성능 및 프로덕션 준비

이진 중요 검사와 증거 기반 0/5/8/10 앵커를 사용하세요. 적용 가능한 카테고리는 8/10 미만으로 점수를 매길 수 없습니다. 전체 목표는 9+. N/A는 서면 근거와 함께만 허용되며, 의도적인 정적 페이지의 모션을 포함합니다. 모든 점수에 대해 스크린샷, DOM, 감사 또는 테스트 증거를 인용하세요. 모든 중요 거부 기준은 평균에 관계없이 페이지를 실패시킵니다. 가장 약한 적용 가능한 카테고리를 수정하고, 증거를 다시 실행하고, 다시 점수를 매기세요.

사용자가 작업을 기본적, 제네릭 또는 나쁘다고 부르면 현재 아트 디렉션을 무효화하세요. 미세 조정을 중단하고, 시스템적 원인을 식별하고, 테제/참조/첫 화면을 재설정하고, 다시 빌드하고, 다시 QA하세요.

9단계: SEO, 성능 및 배포

제공 전:

• 하나의 H1, 논리적 제목 구조, 제목, 설명, 표준 URL, OG 메타데이터 및 파비콘
• 반응형 최적화 이미지, 적절한 히어로 우선순위/프리로드, 지연 로드 아래 접힌 미디어
• 최대 두 개의 정당화된 글꼴 패밀리 및 필요한 두께만
• 시맨틱 요소, 라벨, 대체 텍스트, 대비, 포커스, 키보드 및 축소 모션 지원
• 가짜 통합, 검증되지 않은 주장, 콘솔 오류, 깨진 링크, 해결되지 않은 비밀 없음
• 카피/에셋/로고/이미지젠/통합 출처가 있는 소스 노트

완료된 모든 랜딩 페이지를 기본적으로 프로젝트의 기존 Vercel 구성 또는 격리된 새 프로젝트 이름을 사용하여 Vercel에 배포하세요. 인증, 소유권, 비밀 또는 다른 실제 차단 요인이 배포를 방해하면 해당 차단 요인에 대해서만 질문하세요. 실제 브라우저에서 데스크톱 및 모바일로 정확한 라이브 별칭을 확인하세요. 제목/콘텐츠 마커, 에셋, 탐색, 양식, 오버플로, 콘솔, 모션 및 별칭 소유권을 확인하세요. CLI 성공 또는 HTTP 200만으로는 증거가 아닙니다.

안티-슬롭 거부 목록

거부:

• 제네릭 보라색/파랑 AI 그라데이션, 블롭, 의미 없는 유리 카드, 떠다니는 3D 필러
• 관련 없는 스톡 악수, 가짜 대시보드, 발명된 차트/KPI, 가짜 소셜 프루프
• 브랜드 이유 없이 크거나 좁은 헤드라인, 작은 본문 텍스트, 어색한 줄바꿈
• 동일한 세 카드 행, 반복되는 레이아웃 패밀리, 과도한 알약/반경/그림자
• "혁신", "해방", "차세대", "매끄럽게" 또는 모호한 CTA 라벨 같은 카피
• 프로덕션 이미지 내부의 생성된 단어/로고/UI
• 단순히 데스크톱을 세로로 쌓은 모바일
• 약한 정적 디자인을 숨기는 데 사용되는 애니메이션
• 유일한 역할이 공간을 채우는 장식 요소

검증된 브랜드 에셋, 주제별 이미지, 제어된 타이포그래피, 다양하지만 일관된 구성, 하나의 기억에 남는 시그니처, 목적 있는 여백, 명확한 증거, 하나의 결정적인 전환 경로를 선호하세요.

참조 맵

필요 항목	읽기
권위 있는 프로젝트 모드 라우팅	references/policy-matrix.md
인테이크, 사이트/브랜드/로고/콘텐츠/에셋/통합	references/intake-brand-assets.md
프론트엔드 스택 라우팅/충돌	references/frontend-skill-stack.md
이미지 생성 프로덕션 참조	references/imagegen-production.md
GSAP 모션 문서	references/gsap-motion.md
프리미엄 품질 게이트	references/premium-quality-gate.md