nateherkai/scroll-craft

해결하는 문제

Scrollcraft는 AI로 생성된 웹사이트가 일반적이고 잊히기 쉬운 스타일이거나, 화려하지만 설계가 부실했던(예: 나쁜 타이포그래피, 모바일 반응성 부족, 반복적인 레이아웃) 경향을 해결합니다. 고급 인터랙션 디자인과 미적 기술을 통합된 프로세스로 다루어, 맞춤형이고 전문적인 느낌을 주는 고품질의 스크롤 기반 웹사이트를 만듭니다.

작동 방식

Claude Code의 스킬로 작동하며, 전용 엔진과 엄격한 디자인 제약을 사용해 AI가 특정 생산 파이프라인을 따르도록 안내합니다.

• 페이지 문법: "필믹 원샷" 또는 "연속 세계"와 같은 상호 배타적인 8가지 레이아웃 구조를 사용하여 사이트가 단일한 일반적인 스타일로 수렴하지 않도록 합니다.
• 지문 게이트: 반복을 방지하기 위해 새로운 빌드는 이전 프로젝트와 최소 6개의 차원(문법, 네비게이션, 헤로, 액트 형태, 클로즈, 시그니처 무브) 중 4개 이상에서 다릅니다.
• 디자인 바닥선: 타이포그래피(최대 2개의 폰트, 특정 줄 간격), 간격(4px 기준 리듬), 색상(6가지 역할, 순수 검정 금지)에 엄격한 규칙을 적용하여 전문적인 기준을 유지합니다.
• 감정 곡선: 각 "액트"의 감정적 의도를 빌드 전에 매핑하여 하나의 공학적으로 설계된 몰입 피크를 보장합니다.
• 자동 검증: 헤드리스 브라우저(Playwright)를 사용해 최종 페이지의 "무효 스크롤"(스크롤해도 아무런 반응이 없는 영역), 대비 문제, 손상된 자산을 감사합니다.

대상 사용자

Claude Code를 사용하여 AI의 "일반적인 외관"을 피하고 전문적인 디자인 기준을 준수하는 고해상도의 스크롤 기반 랜딩 페이지를 만들고자 하는 디자이너 및 개발자.

주요 특징

• 스크롤 = 타임라인: 프레임 단위의 비디오 스트로브, 섹션 고정, 팬 레일과 같은 고급 상호작용을 지원합니다.
• 맞춤형 상호작용: 모든 빌드에서 고유한 "시그니처 무브" 상호작용을 창출해야 합니다.
• 엄격한 금지 목록: 그라데이션 텍스트, 동일한 기능 카드 그리드, "AI 보라색" 그라데이션과 같은 일반적인 AI 트로프를 명시적으로 금지합니다.
• 브랜드 통합: 브랜드 킷이 스킬의 기본 설정을 오버라이드하는 하드 제약으로 작동할 수 있습니다.
• 자기 감사: 모든 스크롤 위치에서 접근성(대비) 및 기술적 결함(디코딩되지 않은 클립)을 자동으로 검사합니다.