nateherkai/scroll-craft

해결하는 문제

대부분의 AI 생성 웹사이트는 either 무미건조하고 잊히기 쉬운 것 또는 화려하지만 설계가 부실했습니다 (예: 나쁜 타이포그래피, 모바일 반응성 부족, 반복적인 레이아웃). scroll-craft는 상호작용과 고급 디자인 기술을 하나의 통합된 과정으로 간주함으로써 AI 에이전트가 '표준화된' AI 페이지를 생성하는 것을 방지합니다.

작동 방식

Codex나 Claude Code와 같은 코딩 에이전트와 함께 사용할 수 있는 '에이전트 스킬'(지침, 참조, 도구의 세트)으로 작동합니다. 에이전트가 따라야 할 엄격한 디자인 프레임워크를 제공합니다:

• 페이지 문법 (Page Grammars): 서로 배타적인 8가지 레이아웃 스타일(예: 영화적 원샷, 타이포그래피 포스터)을 정의하여 다양성을 보장합니다.
• 디자인 제약 (Design Constraints): 타이포그래피 하한선, 특정 간격 스케일, 제한된 색상 팔레트를 강제하여 전문적인 기준을 유지합니다.
• 지문 게이트 (Fingerprint Gate): 반복을 방지하기 위해 새로운 빌드는 6가지 차원(문법, 네비게이션, 헤로 섹션, 액트 형태, 클로즈, 서명 움직임) 중 적어도 4개에서 이전 프로젝트와 달라야 합니다.
• 검증 엔진 (Verification Engine): 헤드리스 브라우저가 완성된 페이지를 자동으로 감사하여 '사라진 스크롤'(스크롤 시 아무 반응이 없는 영역), 대비 문제, 손상된 비디오 클립을 확인합니다.
• 기술 엔진 (Technical Engine): 프로젝트별로 코어 메커니즘을 수정하지 않고도 스크롤 기반 애니메이션(예: 프레임 단위 비디오 스트로브)을 처리하는 핵심 JavaScript/CSS 엔진을 제공합니다.

대상 사용자

고급이고 몰입감 있는 스크롤 기반 웹사이트를 AI 코딩 에이전트로 구축하면서도 높은 전문 디자인 기준을 유지하고, 'AI 스타일'을 피하고자 하는 개발자 및 디자이너.

주요 특징

• 스크롤 = 타임라인: 비디오가 프레임 단위로 스트로브되며, 사용자가 스크롤할 때 섹션이 고정되는 복잡한 상호작용을 가능하게 합니다.
• 무개성 방지 가드레일: 동일한 기능 카드 그리드와 'AI 보라색' 그라데이션과 같은 일반적인 AI 디자인 패턴을 명시적으로 금지합니다.
• 자동 품질 검사: 헤드리스 브라우저를 사용하여 시각적 및 기능적 실패를 보고하는 검증 프로세스를 포함합니다.
• 에이전트 호환: Claude Code 플러그인과 다른 코딩 에이전트용 이식 가능한 스킬 폴더로 제공됩니다.