scroll-craft

scroll-craft
프리미엄 스크롤 기반 웹사이트를 실제 디자인 표준과 함께 만드는 에이전트 스킬입니다.

Codex, Claude Code 또는 지시를 읽고 파일을 편집하며 명령을 실행하고 브라우저를 검사할 수 있는 다른 코딩 에이전트와 함께 사용하세요. 이 스킬에는 디자인 워크플로, 참고 자료, 엔진, 검증 도구가 포함되어 있습니다. 편리한 설치를 위해 Claude Code 플러그인으로도 제공됩니다.

대부분의 AI 웹사이트 결과물은 두 방향 중 하나에서 실패합니다. 얌전하지만 잊히는 결과물이거나, 본문 텍스트가 2.1:1인 화려한 스크롤 애니메이션이며, 헤드라인이 휴대폰에서 여섯 줄로 줄바꿈되고, 다른 모든 AI 페이지와 똑같은 여섯 개 섹션을 가진 경우입니다. scroll-craft는 어느 쪽으로도 실패하지 않도록 만들어졌습니다. 상호작용과 크래프트를 두 가지 일이 아닌 하나의 일로 다룹니다.

0.3.0의 새로운 기능: 승인된 10개 사이트 표준
이 스킬에는 이제 승인된 10개의 몰입형 웹사이트 뒤에 있는 프로세스가 포함됩니다:
AI Automation Society, PERKFORM, Glaido, Herkules Advisory, Serein, FORME,
Pelagic, NOEMA, OFFGRID, Afterhours.

실제 동작하는 예시 보기
승인된 여러 사이트를 보여주는 50초 워크스루로, 레이어드 히어로, 포인터 반응, 스크롤 전환을 보여줍니다.

website-examples.mp4

독립적인 깊이 평면, 접점 앵커, 오프닝/중간/종료 상태를 계획하세요.
이미지를 생성하기 전에 진짜 브랜드 자산과 검증된 제품 세부 정보를 사용하세요.
주제에 맞게 사진 합성 또는 실제 3D 렌더링을 선택하세요.
각 사이트에 고유한 내비게이션, 정보 순서, 유용한 컨트롤, 엔딩을 부여하세요.
휴대폰은 별도로 아트 디렉팅하고 실제 스크롤 프레임, 폴백, 패키지를 검증하세요.
불필요한 인터뷰를 강요하지 않고 명시적인 창작 위임을 존중하세요.

실제 예시와 프로덕션 워크플로
그리고 hero-depth 가이드를 읽어보세요.
이 예시들은 디자인 동작을 설명합니다. 클라이언트 자산과 비공개 폼 데이터는
포함되지 않습니다. 기존 엔진과 비디오 호환성 수정 사항은 유지됩니다.

세 가지 빌드, 완전히 다른 세 개의 페이지
같은 스킬, 같은 엔진, 공유된 골격 없음. 아래의 차이는 테마가 아닙니다. 서로 다른 페이지 문법, 서로 다른 내비게이션 모델, 서로 다른 엔딩입니다.

AI Automation Society · AI 커뮤니티
45만 명 규모 커뮤니티를 위한 다크 에디토리얼 랜딩. 하나의 통계가 전체 약속을 담고, 라이브 제품 표면이 프레임 안으로 떠오르며, 페이지를 아래로 내려갈수록 증거가 그 아래로 쌓입니다.

Nate Herk · 크리에이터 포트폴리오
하이키의 밝은 톤으로, 첫 번째와 정반대입니다. 숫자를 앞세운 조명 유리 히어로, 빛 속에 담긴 인물 사진, 링크의 벽 대신 두 가지 명확한 다음 단계.

PERKFORM · 단백질 커피
페이지 중간에 두 개의 풀블리드 반전 배경으로 하드컷하는 필름 같은 원샷. 강렬하고 제품 중심이며, 세 가지 중 유일하게 목소리를 높입니다.

실제로 하는 일
상호작용, 몰입감, 반복 불가능성

스크롤이 타임라인입니다. 휠 아래에서 비디오가 프레임 단위로 스크럽되고, 섹션은 논지가 진행되는 동안 고정되며, 레일은 옆으로 패닝되고, 헤드라인은 줄 단위로 조립되며, 페이지 배경은 이동하면서 색이 바뀌고, 포인터는 스크롤되지 않는 것들을 움직입니다.
여덟 가지 상호 배타적 페이지 문법. 필름 원샷, 챕터형 에디토리얼, 라이브 표면, 연속 세계, 타이포그래픽 포스터, 갤러리, 분할 무대, 리드미컬 컷리스트. 각각은 다른 것들이 요구하는 것을 금지하므로, 두 빌드가 조용히 수렴할 수 없습니다.
필수 시그니처 무브. 모든 빌드는 그 사이트에만 존재하는 맞춤형 상호작용을 하나씩 발명합니다. 색만 바꾼 스포트라이트는 인정되지 않습니다.
핑거프린트 게이트. 새 빌드는 6개 차원 중 최소 4개(문법, 내비게이션, 히어로, 막의 형태, 클로즈, 시그니처 무브)에서 이미 만든 모든 페이지와 달라야 합니다. 실패하면 기록이 아니라 계획을 바꿉니다.

크래프트, 그리고 페이지가 실제로 느껴지는 방식

어떤 막이 존재하기 전의 감정 곡선. 막마다 한 줄: 감정, 그리고 화면에서 그것을 유발하는 것. 인접한 두 막이 같은 감정을 가지면 하나는 채우기입니다.
하나의 설계된 피크. 피크-엔드 규칙을 문자 그대로 적용합니다. 피크는 자산 예산, 그 앞의 침묵, 가장 많은 스크롤 공간을 받습니다. 피크가 세 개인 페이지는 피크가 없는 것입니다.
타이포그래피 하한선. 최대 두 개의 패밀리, 크기가 커질수록 좁아지는 트래킹, 45~75ch 측정 폭, 측정 폭에 반비례하는 줄 높이, 세 축에서 보정된 라이트-온-다크.
실제 리듬이 있는 간격 스케일. 4px 기준, 제목 위가 아래보다 많은 공간, 유동적인 섹션 패딩으로 휴대폰이 데스크톱의 여백을 물려받지 않도록.
여섯 가지 역할과 하나의 액센트가 있는 색상, 평평한 회색이 아닌 색조를 띤 보조 텍스트, 순수 검정 없음, 밝은 배경과 어두운 배경 사이를 하드컷하는 페이지를 위한 문서화된 예외.
깊이는 하나가 아닌 다섯 가지 도구. 오프셋 그림자, 엣지 라이트, 거리로서의 스케일 앤 블러, 겹침, 그레인.
브랜드 가이드라인은 장식이 아닌 입력입니다. 브랜드 키트를 지정하면 그 하드 규칙이 우선하며, 스킬이 그렇지 않으면 선택했을 것들을 금지하는 규칙도 포함됩니다.
거부 목록. 똑같은 기능 카드 그리드, 01 / 06 카운터, 스크롤 큐, 그라디언트 텍스트, 엠 대시, 지어낸 통계, 가짜 대시보드, AI 퍼플 그라디언트, 모든 크래프트 브랜드가 기본으로 쓰는 크림 앤 브라스 장인 팔레트.

스스로 작업을 검사합니다

헤드리스 브라우저가 완성된 페이지를 모든 스크롤 위치에서 순회하고, 비디오 재생 헤드가 안정될 때까지 기다린 뒤 다음을 보고합니다:

죽은 스크롤: 화면에서 아무것도 바꾸지 않는 스크롤
완전한 불투명도에 절대 도달하지 않는 큐: 독자가 항상 흐리게만 볼 수 있는 카피
합성된 페이지에서 측정된 대비, 줄 단위로, 그 아래를 지나가는 가장 밝은 프레임에서, 라이트-온-다크와 다크-온-라이트 모두 올바르게 평가되도록 줄마다 방향을 선택
포스터에 멈춘 레그: 조용히 디코딩되지 않은 클립으로, 일시정지된 필름과 똑같이 보임

그런 다음 콘택트 시트를 작성합니다. 기계는 페이지가 작동함을 증명할 수 있지만 그것이 의미가 있는지는 말해줄 수 없기 때문입니다.

설치
Codex 및 기타 코딩 에이전트
이 저장소를 클론하거나 다운로드하세요. 완전한 스킬은
plugins/nateherk-design/skills/scroll-craft/ 에 있습니다.
참고 자료, 스크립트, 템플릿, 엔진을 포함해 해당 폴더를 그대로 유지하세요.

Codex: 완전한 scroll-craft 폴더를 프로젝트의
.agents/skills/ 디렉터리에 복사한 뒤, Codex에게 Scrollcraft 스킬을 사용하라고 요청하세요.
스킬 지원이 있는 다른 에이전트: 에이전트가 문서화한
스킬 디렉터리에 폴더를 두세요.
파일 접근이 가능한 모든 코딩 에이전트: 저장소를 워크스페이스에 두고
스킬을 직접 읽고 따르라고 요청하세요:

Read plugins/nateherk-design/skills/scroll-craft/SKILL.md and use it to build
my website. Follow the referenced design and verification workflow.

저장소가 하위 폴더에 있다면 경로를 조정하세요. 에이전트는 파일 접근, 셸 명령, 브라우저 검사, 사용자 질문에 자체 도구를 사용합니다. 디자인 워크플로는 공유되지만, 도구 이름과 자동 스킬 검색은 다를 수 있습니다. 여기에 문서화된 10개 사이트 재빌드는 Codex로 만들어졌습니다.

Claude Code 플러그인
/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-design
그런 다음 원하는 것을 설명하여 사용하거나, 직접 호출하세요:

/nateherk-design:scroll-craft

설치 요약에 Run /reload-plugins to activate. 가 표시되면 그것을 실행하세요.

설치 없이 스킬을 해킹하려면:

claude --plugin-dir ./plugins/nateherk-design
첫 실행
이 저장소의 루트에서 실행하세요:

node plugins/nateherk-design/skills/scroll-craft/scripts/doctor.mjs
node plugins/nateherk-design/skills/scroll-craft/scripts/workspace.mjs --ensure
스킬을 다른 곳에 설치했다면 그 폴더의 scripts/ 경로를 대신 사용하세요.

무엇보다 먼저 doctor를 실행하세요. 가장 흔한 세 가지 설정 결함은 그렇지 않으면 나중에 오해를 부르는 오류로 나타납니다: 필터가 제거된 ffmpeg는 누락된 필터를 명령의 구문 오류로 보고하고, WebP 먹서가 없으면 잘못된 파일명으로 보고되며, playwright-core는 잘못된 디렉터리에서 해석됩니다.

요구 사항

이유
비고

Node 18+
모든 스크립트

완전한 ffmpeg 빌드
클립이 재생이 아닌 스크럽되도록 인코딩
일부 툴체인은 약 50개의 필터만 있고 scale 이 없는 필터 제거된 ffmpeg를 PATH에 둡니다. doctor는 실제 빌드가 있으면 찾습니다. SCROLLCRAFT_FFMPEG로 재정의합니다.

playwright-core + Chrome
검증 패스
빌드 폴더에서 npm i playwright-core

KIE_AI_API_KEY
자산 생성을 원하는 경우에만
선택 사항. 자신의 사진과 영상으로 빌드하면 키도 비용도 필요 없으며, 이는 일급 경로입니다. .env.example 참조.

워크스페이스
빌드와 핑거프린트 레지스트리는 하나의 디렉터리에 있으며, 가정이 아닌 해석으로 결정됩니다. 먼저 맞는 것이 이깁니다:

SCROLLCRAFT_HOME
현재 디렉터리에서 위로 올라가며 찾은 가장 가까운 .scrollcraft.json: { "workspace": "path/to/builds" }
<project root>/scrollcraft

빌드는 <workspace>/builds/<name>/ 에 생성되고, 레지스트리는 <workspace>/FINGERPRINTS.md 입니다.

레지스트리는 비어 있는 상태로 시작하며, 그것이 올바릅니다. 게이트는 자신을 반복하는 것을 막기 위해 존재하므로, 첫 빌드에는 통과할 것이 없고 그 이후의 모든 빌드에는 있습니다. EXAMPLES.md는 작성자의 12행 표로, 채워진 레지스트리가 어떻게 보이는지, 어떤 형태가 충돌하는 경향이 있는지 볼 수 있도록 포함되어 있습니다. 이는 예시이며 제약이 아닙니다.

여기에는 무엇이 있나
plugins/nateherk-design/
└── skills/scroll-craft/
├── SKILL.md 절차: 브리프, 문법, 점수, 빌드, 검증
├── references/
│ ├── approved-collection.md 10개 사이트 워크플로와 실제 예시
│ ├── hero-depth.md 독립 평면, 접점 앵커, 모바일 구성
│ ├── uniqueness.md 여덟 가지 페이지 문법, 시그니처 무브, 핑거프린트 게이트
│ ├── feel.md 감정 곡선, 설계된 피크, 느낌 검사
│ ├── devices.md 아홉 가지 스크롤 장치와 큐 계약
│ ├── worldflight.md 연속 세계 모드: 하나의 고정 무대, 이음새 없음
│ ├── worlds.md 아트 디렉션, 그리고 스타일 프리앰블 방법
│ ├── taste.md 디자인 하한선: 간격, 타이포, 색상, 깊이, 모션
│ ├── assets.md 생성, 카메라 무브, 스크러빙용 인코딩
│ ├── verify.md 하네스, 그리고 그것이 말해줄 수 없는 것
│ └── template.html 시작 골격이며 레이아웃이 아님
├── engine/ scrollcraft.js + .css. 메커니즘이며 프로젝트마다 절대 편집되지 않음
├── templates/ 새 워크스페이스가 시드되는 빈 레지스트리
└── scripts/ doctor · workspace · kie · encode · serve · shoot · worldflight-assert

CHANGELOG.md는 그 자체로 읽을 가치가 있습니다. 기능 목록이 아니라 각 빌드에서 무엇이 깨졌고 그로부터 어떤 규칙이 나왔는지를 기록합니다.

가장 중요한 하나의 규칙
엔진은 메커니즘이며 프로젝트마다 절대 편집되지 않습니다. 여섯 개의 색상 토큰과 두 개의 폰트로 테마를 지정하고, 자신만의 시맨틱 HTML을 작성하며, 맞춤형 동작은 엔진이 게시하는 --sc-c 커스텀 프로퍼티로 구동하세요. 설정 객체로 페이지를 빌드하는 런타임이 바로 그 위에 만들어진 모든 사이트가 똑같아 보이는 이유입니다.

솔직한 한계

Windows에서만 실행되었습니다. 스크립트는 Windows, macOS, Linux 위치에서 ffmpeg와 Chrome을 찾지만, Mac에서 빌드된 적은 없습니다. SCROLLCRAFT_FFMPEG와 SCROLLCRAFT_CHROME가 검색을 재정의합니다.
생성된 비디오는 무료가 아닙니다. 10개 레그 연속 세계 플라이트는 실제 비용입니다. 자신의 자산으로 빌드한 페이지는 비용이 들지 않습니다.
의도적으로 주관적입니다. AI 페이지를 알아볼 수 있게 만드는 레이아웃과 팔레트를 거부하며, 당신의 피크에 대해 논쟁할 것입니다. 다른 모든 것과 똑같아 보이는 페이지를 원한다면, 이것은 잘못된 도구입니다.

라이선스
MIT. LICENSE 참조.