nateherkai/scroll-craft

What it solves

Scrollcraft addresses the common failure of AI-generated websites, which tend to be either generic and forgettable or flashy but poorly designed (e.g., bad typography, poor mobile responsiveness, and repetitive layouts). It treats high-end interaction design and aesthetic craft as a single integrated process to create premium, scroll-driven websites that feel bespoke and professional.

How it works

It functions as a skill for Claude Code, utilizing a specialized engine and a set of strict design constraints to guide the AI through a specific production pipeline:

• Page Grammars: It uses eight mutually exclusive layout structures (such as "filmic one-shot" or "continuous world") to ensure sites don't converge into a single generic style.
• Fingerprint Gate: To prevent repetition, new builds must differ from previous projects across at least 4 of 6 dimensions (grammar, navigation, hero, act shape, close, and signature move).
• Design Floor: It enforces strict rules on typography (maximum two families, specific line heights), spacing (4px base rhythm), and color (six roles, no pure black) to maintain a professional standard.
• Feeling Curve: It maps the emotional intent of each "act" of the page before building, ensuring there is one engineered peak of engagement.
• Automated Verification: A headless browser (Playwright) audits the final page for "dead scroll" (areas where scrolling does nothing), contrast issues, and broken assets.

Who it’s for

Designers and developers using Claude Code who want to build high-fidelity, scroll-driven landing pages that avoid the "AI look" and adhere to professional design standards.

Highlights

• Scroll-as-Timeline: Supports advanced interactions like frame-by-frame video scrubbing, pinning sections, and panning rails.
• Bespoke Interactions: Requires every build to invent one unique "signature move" interaction.
• Strict Refuse List: Explicitly forbids common AI tropes like gradient text, identical feature-card grids, and "AI-purple" gradients.
• Brand Integration: Allows brand kits to act as hard constraints that override the skill's default preferences.
• Self-Auditing: Automatically checks for accessibility (contrast) and technical glitches (un-decoded clips) across all scroll positions.