프리미엄 스크롤 기반 웹사이트를 구축하는 에이전트 역량, 실제 디자인 기준을 갖춘 기술.

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

대부분의 AI 웹사이트 결과물은 두 가지 방향 중 하나로 실패합니다. 하나는 잘 행동하고 기억에 남지 않거나, 2.1:1 본문 텍스트가 화려한 스크롤 애니메이션이고, 휴대폰에서는 헤드라인이 6줄로 감기며, 다른 AI 페이지와 같은 6개 섹션이 있는 경우입니다. 스크롤크래프트는 어느 쪽이든 실패하지 않도록 설계되어 있습니다: 상호작용과 크래프트를 두 가지 작업이 아닌 하나의 작업으로 취급합니다.

---

0.3.0의 새로운 기능: 승인된 10개 사이트 표준입니다

이 기술은 이제 10개의 승인된 몰입형 웹사이트 뒤에 숨겨진 과정을 포함합니다: AI 자동화 협회, PERKFORM, 글라이도, 헤르쿨레스 자문, 세라인, FORME, 펠라지크, 노에마, 오프그리드, 그리고 애프터아워즈.

동작하는 예제들을 보세요

여러 승인된 사이트를 50초 동안 둘러보며, 그들의 레이어드 히어로를 보여줍니다. 포인터 응답과 스크롤 전환.

https://github.

scroll-craft

An agent skill for building premium, scroll-driven websites, with a real design standard.

Use it with Codex, Claude Code, or another coding agent that can read instructions, edit files, run commands, and inspect a browser. The skill contains the design workflow, references, engine, and verification tools. It also ships as a Claude Code plugin for convenient installation.

Most AI website output fails in one of two directions. It is either well behaved and forgettable, or it is a flashy scroll animation with 2.1:1 body text, a headline that wraps to six lines on a phone, and the same six sections every other AI page has. scroll-craft is built to fail neither way: it treats interaction and craft as one job rather than two.

---

New in 0.3.0: the approved ten-site standard

The skill now includes the process behind ten approved immersive websites: AI Automation Society, PERKFORM, Glaido, Herkules Advisory, Serein, FORME, Pelagic, NOEMA, OFFGRID, and Afterhours.

See the worked examples in motion

A 50-second walkthrough of several approved sites, showing their layered heroes, pointer response, and scroll transitions.

https://github.com/user-attachments/assets/d193073b-5af9-45de-93ae-95bf7c6934d5

• Plan independent depth planes, contact anchors, and opening/midpoint/exit states.
• Use authentic brand assets and verified product details before generating imagery.
• Choose photographic compositing or real 3D rendering to suit the subject.
• Give each site its own navigation, information order, useful controls, and ending.
• Art-direct phones separately and verify actual scroll frames, fallbacks, and packages.
• Honor explicit creative delegation without forcing a redundant interview.

Read the worked examples and production workflow and the hero-depth guide. These examples describe design behavior; client assets and private form data are not bundled. The existing engine and video compatibility fixes are preserved.

Three builds, three completely different pages

Same skill, same engine, no shared skeleton. The differences below are not themes: they are different page grammars, different navigation models, different endings.

AI Automation Society · an AI community

A dark editorial landing for a 450,000-member community. One stat carries the whole promise, a live product surface rises into the frame, and the proof stacks under it as you fall down the page.