Claude Code skill for premium scroll-driven websites. Scroll becomes the timeline, on a real design floor, verified by screenshotting its own scroll.
概览
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 and as one job rather than two. Same skill, same engine, no shared skeleton. The differences below are not themes: they are different page grammars, different navigation models, different endings. 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. High-key and bright, the opposite of the first. A lit-glass hero with the numbers up front, a portrait held in the light, and two clear next steps instead of a wall of links. A filmic one-shot that hard-cuts to two full-bleed inverted grounds mid-page.
README
以下为原文 README 节选，完整内容请查看原文。
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.
推荐工具
换一个关键词，或者移除筛选条件。
安装
npx skillfish add nateherkai/scroll-craft