참조 기반 프리미엄 랜딩 페이지 빌더

한국어 출력 스타일: 한국어 사용자 대상 텍스트(HITL 질문, 상태 보고서, 답변)의 경우 $CLAUDE_PLUGIN_ROOT/docs/development/korean-style.md — §"HITL 질문 작성 규칙" 및 §"답변·보고 원칙"을 적용합니다. 디스크에 작성된 한국어 파일은 korean-style PostToolUse 후크에 의해 자동으로 스타일 검사됩니다.

전문 작업을 일반 AI 출력과 구분하는 세 가지 관행을 결합하여 프로덕션 등급의 자체 포함 랜딩 페이지를 생성합니다:

시각적 레퍼런스 우선 — 실제 애니메이션/레이아웃 레퍼런스는 디자인 결정 전에 실제 브라우저로 Pinterest(및 유사 갤러리)에서 수집된 후, 레퍼런스 기반 디자인 브리프(복사 금지)로 요약됩니다.
디자인 자료로서의 AI 비디오 — 히어로 배경은 Google Veo 3.1로 생성된 매끄러운 루프 비디오이며, 디자인 토큰에 맞춰 아트 디렉션되고, 웹용으로 후처리되며, 루프 이음새를 숨기는 무한 루프 스크립트를 통해 재생됩니다.
원샷이 아닌 수렴 — 완성된 페이지는 완료로 보고되기 전에 적대적 screen-quality-loop을 통과합니다.

핵심 원칙:

레퍼런스 기반, 레퍼런스 복사 금지 — 레퍼런스는 패턴(레이아웃 원형, 모션 어휘, 팔레트 방향)에 기여합니다. 특정 디자인이 재현되지 않으며 타사 자산이 결과물에 포함되지 않습니다.
DESIGN.md가 법칙입니다 — docs/design-system/DESIGN.md가 존재하는 경우, 해당 토큰과 aesthetic_rules는 0단계에서 파생된 톤 기본값을 재정의합니다.
모든 외부 의존성에서의 우아한 성능 저하 — Pinterest 접근 불가, Veo 도구 없음, ffmpeg 없음, 브라우저 없음 모두 생존 가능합니다. 각 대체 방안은 최종 보고서에 명시되며, 절대 묵시적으로 대체되지 않습니다.
비용 규율 — 기본 생성 예산은 정확히 1개의 정지 이미지 + 1개의 Veo 클립(8초, veo-3.1-lite)입니다. 그 이상은 명시적인 사용자 요청이 필요합니다(references/veo-loop-video.md §6의 제한된 일회성 Seam-QA 재생성은 기본 예산의 일부이며 초과 비용이 아닙니다).
모션 접근성은 필수입니다 — prefers-reduced-motion 대체, 가시적인 일시 중지 컨트롤(WCAG 2.2.2), 포스터 우선 LCP 전략은 선택 사항이 아닌 필수 사항입니다.

출력 위치: landing/{slug}/ (결과물) + landing/{slug}/.work/ (원시 클립, 정지 이미지, QA 증거 — 페이지에서 참조되지 않음).

🌐 언어 규칙: 이 스킬을 실행하기 전에 프로젝트의 CLAUDE.md를 읽고 ## Language 섹션을 확인하여 프로젝트 언어를 감지하세요. 프로젝트 언어가 한국어(ko)가 아닌 경우, 모든 사용자 대상 페이지 카피와 보고서 출력을 프로젝트 언어로 번역하세요. 기술 식별자(파일 경로, CSS 변수, 클래스 이름)는 번역되지 않은 상태로 유지됩니다. CLAUDE.md 또는 ## Language 섹션이 없는 경우, 기본값은 한국어입니다.

실행 절차

0단계: 접수 및 디자인 톤

A. 인수 파싱

인수	동작
텍스트 브리프 (예: `프리랜서를 위한 AI 회계 SaaS`)	제품/브랜드 브리프로 사용
URL	`WebFetch`로 페이지 가져오기 — 제품, 대상, 기존 브랜드 큐 추출
`docs/planner/{NNN}-*/` 경로	플래너 결과물(페르소나, KPI, 화면 디자인)을 브리프로 읽기
`--refs=<dir>`	`<dir>`에서 사용자 자신의 레퍼런스 이미지 사용; 1단계 캡처 건너뛰기 (분석은 계속 실행)
`--slug=<name>`	결과물 디렉토리 이름; 그렇지 않으면 브랜드/기능에서 케밥 케이스 파생
`--no-video`	Veo 완전히 건너뛰기 — 히어로는 CSS 애니메이션 대체 사용 (경로 C)
`--auto`	HITL 없음 — 명시된 가정으로 진행 (파이프라인 사용용)
(비어 있음)	`docs/planner/`에서 최신 패키지 스캔; 없으면 한 줄 브리프 요청

B. 모호성 확인 (코딩 전 생각 — 최대 1회 HITL)

브리프가 (1) 대상 청중과 (2) 단일 기본 전환 액션(가입/구매/문의/다운로드)을 특정하지 않은 경우, 해석 옵션과 함께 한 번 질문합니다. --auto 하에서는 가장 가능성 있는 해석을 선택하고 최종 보고서의 "가정"에 기록합니다. 한 번 이상의 접수 질문을 하지 마십시오.

C. 디자인 SSoT 로드

docs/design-system/DESIGN.md 존재 → 토큰 + aesthetic_rules 로드; 아래 톤 테이블은 간극만 채웁니다.
그 외 → 브리프에서 디자인 톤 파생:

브랜드/제품 신호	디자인 톤	히어로 모션 방향
SaaS / 개발 도구 / AI 제품	다크 그래디언트 테크	느린 오로라 / 그래디언트 드리프트, 드문 입자 필드
럭셔리 / 프리미엄 상품	에디토리얼 럭셔리	매크로 소재 드리프트 (실크, 액체 금속), 얕은 심도
소비자 앱 / 라이프스타일 / 웰니스	소프트 앰비언트	소프트 포커스 장면, 표류하는 빛 누출, 부드러운 시차
금융 / B2B / 엔터프라이즈	자신감 있는 미니멀	추상 기하학, 느린 선 및 메쉬 모션, 절제된 팔레트
크리에이티브 스튜디오 / 이벤트 / 포트폴리오	볼드 키네틱	고대비 모양, 휩쓰는 색상 필드

두 UX 가이드 로드 — 2-4단계의 모든 미적 및 모션 결정을 제어:
- $CLAUDE_PLUGIN_ROOT/docs/ux/vibe-coding-design-guide.md (§4 프롬프트 기법, §4.1 반AI 미학, §4.2 레퍼런스 기반 프롬프트)
- $CLAUDE_PLUGIN_ROOT/docs/ux/vibe-coding-animation-guide.md (§15 모션 접근성, §18 AI 생성 비디오 배경)

D. 메인 워크트리 보호 및 dev 동기화

랜딩 페이지는 기획 단계 결과물입니다 — 다른 dev-동기화 스킬과 마찬가지로 dev의 메인 워크트리에서 실행:

PLUGIN_ROOT="${CLAUDE_PLUGIN_ROOT:-$(find ~/.claude/plugins/cache -maxdepth 3 -type d -path '*/astra-methodology/*' 2>/dev/null | sort -V | tail -1)}"
if [ -z "$PLUGIN_ROOT" ] || [ ! -f "$PLUGIN_ROOT/scripts/worktree-helpers.sh" ]; then
  echo "ERROR: CLAUDE_PLUGIN_ROOT not found. Check the plugin cache path." >&2; exit 1
fi
source "$PLUGIN_ROOT/scripts/worktree-helpers.sh"
astra_ensure_main_worktree || exit 1

그런 다음 /catalog-generator 0단계 G와 정확히 동일하게 dev 동기화 (브랜치 확인 → 더티면 스태시 → git fetch origin dev && git checkout dev && git pull origin dev → 스태시 팝; dev 없으면 main/master로 폴백).

1단계: 레퍼런스 수집 (Pinterest)

디자인 전에 6-12개의 애니메이션/레이아웃 레퍼런스를 수집합니다. 전체 절차, 쿼리 레시피, 팝업 처리 및 보드 템플릿: 이 단계를 시작하기 전에 $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/reference-collection.md를 읽으십시오.

A. 브라우저 백엔드 확인

플러그인 전체 순서(ego 기본 → Chrome MCP 폴백; SSoT: $CLAUDE_PLUGIN_ROOT/docs/development/browser-backend-policy.md)에 따라:

command -v ego-browser >/dev/null 2>&1 && echo ego || echo ""

출력이 비어 있음 → mcp__chrome-devtools__* 도구가 있으면 chrome-mcp. 둘 다 사용 불가 → 캡처 폴백: 현재 랜딩 페이지/애니메이션 쇼케이스 설명(어워드 갤러리, 모션 쇼케이스)에 대해 WebSearch를 수행하고 텍스트 전용 레퍼런스 보드를 작성; 최종 보고서에 "레퍼런스 보드: 검색 기반 (브라우저 없음)"을 명시.

B. 검색 및 캡처

{톤} + {산업} + 매체에서 4-5개의 Pinterest 검색 쿼리 구축 (레퍼런스 파일의 레시피).
쿼리별: https://www.pinterest.com/search/pins/?q={query} 열기, 오버레이 모달 닫기, window.scrollTo(0, 0) (ego 빈 프레임 보호), 결과 그리드 캡처, 상위 1-2개 핀 열고 세부 보기 캡처.
ego 모드: 하나의 heredoc = 한 라운드, 한 번의 캡처는 세 라운드 이상 필요 (이동 → 준비 프로브 → 휩쓸기+캡처; 절대 하나로 압축하지 않음, 그렇지 않으면 캡처가 비어 나옴 — 레퍼런스 파일 참조); 작업 공간 astra landing {slug}; captureScreenshot 절대 경로 사용; 완료되면 completeTaskSpace('astra landing {slug}', { keep: false })로 닫기.
캡처를 landing/{slug}/design/references/ref-{NN}.png에 저장. Pinterest에 연결할 수 없는 경우(로그인 장벽 지속/네트워크 차단) → 레퍼런스 파일에 나열된 유사 갤러리에서 동일한 쿼리 재시도; 여전히 불가 → 1단계 A의 캡처 폴백.

C. 비전 분석 → 레퍼런스 보드

각 캡처에 대해 구조화된 레코드 추출 (레퍼런스 파일의 분석 프롬프트): 레이아웃 원형, 히어로 처리, 모션 어휘(무엇이 움직이는지, 얼마나 느리게, 어떤 이징), 팔레트 방향, 타이포그래피 특성, 밀도, 적응할 가치가 있는 하나의 독특한 세부 사항. 사용 가능하면 mcp__fect-mcp__vision_analyze 사용; 그렇지 않으면 각 PNG를 직접 Read (다중 모드 읽기).

landing/{slug}/design/reference-board.md 작성 — 이미지별 레코드 + 종합 섹션("이 레퍼런스들이 동의하는 사항"). 보드가 존재한다고 주장하기 전에 [ -f ]로 확인.

독창성 보호 장치: 보드는 패턴을 기록하며, 특정 핀을 복제하라는 지시는 절대 기록하지 않습니다. 레퍼런스 캡처는 내부 작업 자료로 design/references/에 남아 있습니다. index.html에서 링크되지 않으며 페이지 자산으로 제공되지 않습니다.

2단계: 디자인 방향 종합

레퍼런스 보드 + 디자인 톤 + DESIGN.md를 landing/{slug}/design/direction.md의 확정된 디자인 브리프로 요약하며, 정확히 다음 결정을 포함:

레이아웃 원형 — 예: 전체 뷰포트 비디오 히어로 + 교대 기능 밴드 + 마감 CTA.
모션 어휘 — 레퍼런스 보드에서 도출된 페이지 전체 모션 규칙(지속 시간, 이징, 스크롤 공개 스타일)을 vibe-coding-animation-guide.md 기법에 매핑.
히어로 미디어 계획 — 경로 A/B/C 결정(3단계 표), 비디오의 주제, 분위기 및 카메라 동작 포함.
팔레트 + 타이포그래피 — DESIGN.md 토큰이 있으면 사용; 그렇지 않으면 톤 + 레퍼런스에서 파생(OKLCH 값, 디스플레이체 하나 + 본문체 하나).
반AI 독특 요소 — 최소 2개의 구체적인 독특한 선택 (디자인 가이드 §4.1 / DESIGN.md aesthetic_rules 기준): 예: 비대칭 그리드, 에디토리얼 세리프 페어링, 그레인/노이즈 텍스처, 커스텀 스크롤 표시기, 과장된 숫자. 일반적인 중앙 정렬 히어로 + 세 개의 카드 + 보라색 그라디언트 출력은 결함이지 기준선이 아닙니다.

HITL (--auto 하에서는 건너뛰기): 5가지 결정을 간결한 요약으로 제시하고 단일 확인/조정 질문을 합니다. 이것이 마지막 결정 게이트입니다 — 그 이후의 모든 것은无人 관리로 실행됩니다.

3단계: 히어로 루프 비디오 제작 (Veo 3.1)

이 단계 전에 $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/veo-loop-video.md를 읽으십시오 — 프롬프트 레시피, 도구 호출 템플릿 및 모든 ffmpeg 명령이 포함되어 있습니다.

A. 경로 결정

조건	경로
`mcp__fect-mcp__veo_*` 있음 및 `mcp__fect-image__nanobanana_text2img` 있음	A — 북엔드 루프 (기본값)
`mcp__fect-mcp__veo_*` 있음, fect-image 없음	B — text2video + 크로스페이드 루프
Veo 도구 없음, 또는 `--no-video`	C — CSS 애니메이션 히어로 (비디오 없음; `references/video-integration.md`의 템플릿)

도구 존재 여부는 세션의 사용 가능한 도구에서 결정됩니다 (fect-mcp 서버는 사용자 수준이며 번들되지 않음 — 부재는 정상, 오류가 아님). 선택한 경로를 기록합니다. 최종 보고서는 경로를 명시해야 하며, B/C의 경우 그 이유를 명시해야 합니다.

B. 경로 A — 북엔드 루프 (첫 번째 프레임 == 마지막 프레임)

매끄러운 루프 트릭: 하나의 아트 디렉션된 정지 이미지를 생성한 다음, Veo가 해당 프레임에서 다시 해당 프레임으로 애니메이션을 적용하도록 합니다 — lastImagePath가 sourceImagePath와 동일한 파일로 설정된 veo_img2video. 클립의 첫 번째와 마지막 프레임은 픽셀 단위로 동일하므로 눈에 보이는 이음새 없이 루프되며, 정지 이미지는 LCP 포스터 역할을 합니다.

정지 이미지: mcp__fect-image__nanobanana_text2img → landing/{slug}/.work/hero-frame.png — 16:9, 토큰 일치 팔레트, 헤드라인이 위치할 조용한 네거티브 공간, 텍스트 없음, 로고 없음, 얼굴 없음 (레퍼런스 파일의 톤별 프롬프트 템플릿).
클립: mcp__fect-mcp__veo_img2video — sourceImagePath = lastImagePath = hero-frame.png, durationSeconds: 8, resolution: "1080p" (1080p는 8초 필요), aspectRatio: "16:9", 기본 모델 (veo-3.1-lite — 라이트 출력이 Seam QA를 두 번 실패하는 경우에만 fast/전체로 상향). 프롬프트 = 시작으로 눈에 띄게 돌아오는 순환 앰비언트 모션 (레퍼런스 파일의 톤별 레시피; 컷 없음, 새로운 주제 없음, 텍스트 없음).
확인 (없이 주장하지 마십시오): [ -f ] mp4 + ffprobe 지속 시간 ≥ 7초. 누락/짧음 → 한 번 재생성; 여전히 실패 → 경로 B; Veo 완전히 오류 → 경로 C.
Seam QA: 첫 번째 + 마지막 프레임 추출, mcp__fect-mcp__vision_compare (또는 Read 둘 다)로 비교. 눈에 띄는 점프 → 위에 레퍼런스 파일의 ffmpeg 크로스페이드 루프 적용.

C. 경로 B — text2video + 크로스페이드 루프

루프 친화적인 프롬프트 레시피로 mcp__fect-mcp__veo_text2video를 사용한 다음, ffmpeg 자체 크로스페이드 (마지막 1초를 처음 1초와 혼합; 명령은 레퍼런스 파일에 있음)로 매끄럽게 만듭니다. 포스터 = 추출된 첫 번째 프레임.

D. 후반 작업 (모든 비디오 경로)

ffmpeg (command -v ffmpeg) 사용: 오디오 제거 (-an — 배경 비디오는 항상 음소거; Veo의 기본 오디오 트랙은 데드 웨이트), hero-desktop.mp4 (1920 w, H.264 CRF 24, +faststart) + hero-mobile.mp4 (720 w, CRF 26) 인코딩, hero-poster.jpg 생성 (경로 A: hero-frame.png에서 변환; 경로 B: 첫 번째 프레임). 출력은 landing/{slug}/assets/video/에 저장.

ffmpeg 없음 → 원시 Veo mp4를 두 변형으로 모두 사용; JS 크로스페이드 플레이어(4단계)가 남은 이음새를 마스킹합니다. 최종 보고서에 누락된 압축을 명시하십시오 — 페이지를 크기 최적화된 것으로 제시하지 마십시오.

예산 게이트: hero-desktop.mp4 ≤ 4 MB, hero-mobile.mp4 ≤ 1.5 MB, 포스터 ≤ 200 KB (stat -f%z / du -k로 확인). 예산 초과 → CRF를 높이고 계속 진행하기 전에 다시 인코딩하십시오.

9:16 세로 변형 (두 번째 Veo 생성)은 명시적인 사용자 요청 시에만 생성됩니다 — 기본 모바일 전략은 720 w 다운스케일 + 포스터 우선 로딩입니다.

4단계: 페이지 구현

이 단계 전에 $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/video-integration.md를 읽으십시오 — 히어로 마크업, 전체 loop-video.js 무한 루프 플레이어, CSS 애니메이션 폴백(경로 C), 접근성 요구 사항 및 LCP 최적화를 포함합니다.

A. 프로젝트 부트스트래핑

출력 플랜 landing/{slug}/ 생성:
```
mkdir -p landing/{slug}/{assets/{video,images,fonts},design/references,js}
```
assets/fonts/는 자체 호스팅 웹 글꼴 전용입니다 (Google Fonts 링크는 허용되지 않음 — 모든 글꼴은 프로젝트에 배송됨).

SSoT가 DESIGN.md가 아닌 경우, 2단계 결정을 landing/{slug}/design/tokens.css에 작성 — CSS 사용자 정의 속성으로서의 브랜드 파라미터:

:root {
  --color-bg: oklch(…);
  --color-text: oklch(…);
  --color-accent: oklch(…);
  --color-surface: oklch(…);                 /* 카드, 섹션 배경 */
  --color-accent-secondary: oklch(…);        /* 버튼 호버, 강조 */
  --font-display: '…', serif/sans-serif;
  --font-body: '…', serif/sans-serif;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);  /* 기본 이징 */
  --duration-slow: 1200ms;
  --duration-medium: 600ms;
  --duration-fast: 250ms;
}

$CLAUDE_PLUGIN_ROOT/skills/landing-page/references/tokens.css의 템플릿 사용 (항상 OKLCH 색상 공간, 최소 글꼴 2개 패밀리, 사용자 정의 이징 곡선을 기본값으로).

B. `index.html` 마크업

다음을 사용하여 단일 파일, 자체 포함 index.html을 구축:

video-integration.md 템플릿과 일치하는 히어로 섹션 — <video> + JS 플레이어 + CSS 폴백을 단일 마크업 블록에 포함.
LCP 요소로서의 포스터 이미지 — <img> (표시: none이 아닌 block, 지연 로딩 없음, 명시적 width/height).
tokens.css를 <style> 블록으로 직접 인라인 — 별도 CSS 파일이 없음; index.html은 자체 포함되어야 함.
시맨틱 HTML5 랜드마크: <header role="banner">, <main>, <section> (히어로, 기능, 통계, CTA), <footer>. 각 섹션에는 해당하는 경우 aria-labelledby가 있는 레이블 지정 영역이 있어야 합니다.
스크린 리더 친화적인 히어로 비디오: 비디오 태그의 aria-label + 영역의 aria-hidden="true" (비디오는 장식용 배경이므로).

경쟁적 분석 보호 장치: 일반적인 SaaS 페이지 구조(히어로 + 3개 기능 + CTA)는 설계상의 경우에만 사용하십시오. 브리프가 뉴스레터, 이벤트 등록 또는 제품 출시와 같은 다른 패턴을 요구하는 경우, 해당 원형을 사용하십시오.

C. 브랜드 정체성 (글꼴 + 파비콘)

assets/fonts/에 자체 호스팅할 웹 글꼴 식별. 크기의 경우, / 경로에서 System 글꼴로만 대체할 수 있습니다. 사용 가능한 모든 최적화 사용 (woff2, font-display: swap, 하위 집합).
assets/images/favicon.svg 생성 — href가 절대 경로(/favicon.svg)인 SVG 파비콘. 사용 가능한 astro-favicon이 없는 경우 간단한 SVG를 생성(또는 브랜드 마크가 있는 경우 사용).
모든 글꼴이 로드될 때까지 텍스트가 표시되지 않는 것을 방지하기 위해 <link rel="preload" … as="font" crossorigin>을 <head>에 포함.

D. 스타일링 및 반응형 레이아웃

모바일 우선 CSS — min-width 미디어 쿼리로 구축. 중단점: 640px(태블릿), 1024px(데스크톱).
데스크톱 가로 제한: 1280px 최대 너비, 브라우저 가장자리에서 패딩.
베이스 글꼴 크기: 16px(모바일) → 18px(태블릿) → 20px(데스크톱), clamp() 사용.
히어로 최소 높이: min-height: 100dvh (동적 뷰포트 단위).
시차 정지: 히어로 콘텐츠 영역 min-height: 100vh를 채우고 과도한 스크롤을 방지하기 위해 overflow: hidden을 사용합니다.

E. 모션 및 상호작용

스크롤 공개 애니메이션: Intersection Observer를 사용하여 기능 섹션과 CTA에 @keyframes fadeInUp 적용. 비순차적 재생을 위해 각 섹션의 data-reveal 지연 시간을 조정.
히어로 비디오 플레이어: video-integration.md의 loop-video.js 복사 — 지연 로딩 없음, IntersectionObserver를 통한 자동 재생/일시 중지 제어, 액세스 가능한 일시 중지 버튼, 포스터 우선 로드.
prefers-reduced-motion 미디어 쿼리 — @media (prefers-reduced-motion: reduce)에서 animation: none, transition: none, scroll-behavior: auto. 이 쿼리는 JS 애니메이션 플레이어의 matchMedia 확인과 페어링됩니다.
CTA 호버 효과: scale(1.02) + 질감 있는 background-image 전환. 부드러운 페이드 및 이동 전환.
스크롤바 스타일링: ::-webkit-scrollbar을 현재 디자인 시스템과 일치하도록 스타일링.

F. 성능 최적화

CSS는 <style> 블록으로 인라인 — 외부 요청 없음. JS는 외부 .js 파일(예: async/defer) 또는 인라인 중 성능에 더 나은 쪽을 선택합니다.
font-display: swap — 텍스트 렌더링을 차단하지 않습니다.
지연 로딩: 모든 <img>는 loading="lazy"를 가져야 합니다 (hero-poster.jpg 제외 — LCP 요소이므로 eager).
LCP 최적화: 포스터 <img>는 fetchpriority="high"를 가져야 하며 사용자 정의 width/height로 CLS를 방지합니다. 비디오는 LCP 후보가 아니므로 <link rel="preload">가 필요하지 않습니다.
Cumulative Layout Shift 최소화: 모든 미디어 요소에는 명시적 크기가 있어야 합니다. 히어로 섹션 높이는 동적 높이를 수용하기 위해 height: 100dvh여야 합니다.

G. 생산성 증대

페이지를 열기 위해 브라우저 도구를 사용할 수 있는 경우(ego 또는 chrome-mcp), 표시되는 내용을 캡처하고 발생하는 레이아웃 이동이나 시각적 결함을 수정하십시오. 이것은 필수는 아니지만 종종 디테일을 발견합니다.

5단계: 적대적 QA — `screen-quality-loop`

1단계-4단계 파이프라인은 결정적이지 않으며, screen-quality-loop이 페이지를 프로덕션 품질로 끌어올립니다. 이 루프는 전체 페이지를 주의 깊게 검사하고 다음 기준을 충족할 때까지 수정합니다.

QA 시작

index.html이 작성되면 screen-quality-loop을 시작합니다 — $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/screen-quality-loop.md에 정의된 대로(본 문서의 일부가 아닌 별도의 참조 파일). 절차:

지정된 순서로 브라우저를 사용하여 페이지 로드 및 캡처 (ego → chrome-mcp).
screen-quality-loop.md의 3가지 적대적 검사 실행:
- 검사 A: 달성 vs 의도된 디자인 — 레퍼런스 보드 + direction.md + DESIGN.md에 대해 캡처를 평가. 불일치 수정.
- 검사 B: 모션 및 상호작용 충실도 — prefers-reduced-motion 동작, 스크롤 공개 타이밍, 히어로 루프 이음새 감지, CTA 호버 확인.
- 검사 C: 접근성 및 성능 — 탭 순서, 키보드 함정, 누락된 alt 텍스트, 로드 시간, CLS를 자동화된 도구(사용 가능한 경우) 또는 수동 검사로 확인.
실패한 검사에 대해 각각 최대 2회 재시도로 수정.
3가지 검사가 모두 통과되었음을 확인 가능한 증거와 함께 최종 보고서에 기록하기 전에 확인. (이것은 "이 페이지가 준비되었습니다" 신호입니다.)

6단계: 최종 보고서

게이트 체크와 함께 landing/{slug}/LANDING-REPORT.md 작성:

항목	값
슬러그	`{slug}`
히어로 경로	A / B / C
레퍼런스 보드	예 (Pinterest capture, N 이미지) / 예 (검색 기반) / 아니오
디자인 소스	`DESIGN.md` + direction.md / direction.md 전용
히어로 비디오	`hero-desktop.mp4` (X MB, X초), `hero-mobile.mp4` (X MB)
포스터	`hero-poster.jpg` (X KB)
ffmpeg	예 (인코딩됨) / 아니오 (원시 mp4)
font-display	swap
모션 접근성	`prefers-reduced-motion` 폴백 (예 / 아니오), 일시 중지 컨트롤 (예 / 아니오)
LCP 요소	`hero-poster.jpg` (X × Y)
Seam QA	통과 (픽셀 차이 없음 / X 픽셀 차이 — 허용 가능)
screen-quality-loop	통과 (검사 A: 예, 검사 B: 예, 검사 C: 예)
가정	`--auto` 모드에서만 기록됨
대체/폴백	모든 의존성 오류 내역 (Pinterest 다운 → 검색 사용, Veo 다운 → CSS 애니메이션, ffmpeg 없음 → 압축되지 않은 비디오)

전체 경로 landing/{slug}/index.html을 인쇄하고 장치로 이동할 수 있음을 확인 (존재 및 크기 > 0).

참조 파일

이 스킬은 여러 외부 참조 문서를 가져옵니다 — 각 참조 파일은 그 목적과 위치

…

[번역을 위해 잘림]

ASTRA-TECHNOLOGY-COMPANY-LIMITED/astra-methodology

astra-methodology 是什么？

在你喜欢的 AI 中提问

文档

참조 기반 프리미엄 랜딩 페이지 빌더

실행 절차

0단계: 접수 및 디자인 톤

A. 인수 파싱

B. 모호성 확인 (코딩 전 생각 — 최대 1회 HITL)

C. 디자인 SSoT 로드

D. 메인 워크트리 보호 및 dev 동기화

1단계: 레퍼런스 수집 (Pinterest)

A. 브라우저 백엔드 확인

B. 검색 및 캡처

C. 비전 분석 → 레퍼런스 보드

2단계: 디자인 방향 종합

3단계: 히어로 루프 비디오 제작 (Veo 3.1)

A. 경로 결정

B. 경로 A — 북엔드 루프 (첫 번째 프레임 == 마지막 프레임)

C. 경로 B — text2video + 크로스페이드 루프

D. 후반 작업 (모든 비디오 경로)

4단계: 페이지 구현

A. 프로젝트 부트스트래핑

B. `index.html` 마크업

C. 브랜드 정체성 (글꼴 + 파비콘)

D. 스타일링 및 반응형 레이아웃

E. 모션 및 상호작용

F. 성능 최적화

G. 생산성 증대

5단계: 적대적 QA — `screen-quality-loop`

QA 시작

6단계: 최종 보고서

참조 파일

相关技能

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

在你喜欢的 AI 中提问

文档

참조 기반 프리미엄 랜딩 페이지 빌더

실행 절차

0단계: 접수 및 디자인 톤

A. 인수 파싱

B. 모호성 확인 (코딩 전 생각 — 최대 1회 HITL)

C. 디자인 SSoT 로드

D. 메인 워크트리 보호 및 dev 동기화

1단계: 레퍼런스 수집 (Pinterest)

A. 브라우저 백엔드 확인

B. 검색 및 캡처

C. 비전 분석 → 레퍼런스 보드

2단계: 디자인 방향 종합

3단계: 히어로 루프 비디오 제작 (Veo 3.1)

A. 경로 결정

B. 경로 A — 북엔드 루프 (첫 번째 프레임 == 마지막 프레임)

C. 경로 B — text2video + 크로스페이드 루프

D. 후반 작업 (모든 비디오 경로)

4단계: 페이지 구현

A. 프로젝트 부트스트래핑

B. index.html 마크업

C. 브랜드 정체성 (글꼴 + 파비콘)

D. 스타일링 및 반응형 레이아웃

E. 모션 및 상호작용

F. 성능 최적화

G. 생산성 증대

5단계: 적대적 QA — screen-quality-loop

QA 시작

6단계: 최종 보고서

참조 파일

相关技能

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

B. `index.html` 마크업

5단계: 적대적 QA — `screen-quality-loop`