Skip to main content
AI Learning Resources

Quick Overview

In this build-along tutorial, Nate Herk introduces ScrollCraft, a custom website design skill created for Claude Code. The video demonstrates how the tool interviews users on design requirements, generates interactive landing pages, and uses automated visual verification to refine the final layout.

Key Points

  • 1.ScrollCraft is a custom Claude Code skill designed to generate interactive, scroll-driven websites rather than static generic AI layouts.
  • 2.The tool conducts an interactive onboarding interview to determine aesthetic goals, scroll journey, brand assets, and tone.
  • 3.Media asset generation integrates with Kie.ai to programmatically produce images and videos to populate custom website sections.
  • 4.Claude Code includes an automated visual verification step using Playwright and screenshot analysis to catch layout bugs before presentation.
  • 5.Users can iteratively refine generated websites by providing natural language feedback on animation speeds, hero sections, and layout elements.
  • 6.The skill is distributed as an open plugin available through the AI Automation Society free community.

Summary

Nate Herk presents ScrollCraft, a custom skill built for Claude Code that enables users to design and build interactive, scroll-driven websites. Herk begins by demonstrating several examples created with the skill, including a beverage product landing page, an interactive travel agency journey, and personal branding sites. He argues that standard AI website generators produce static, generic results, whereas ScrollCraft ties user scrolling directly to on-screen animations, typography changes, and narrative pacing.

To demonstrate how ScrollCraft operates, Herk opens Claude Code desktop and initiates the skill via the slash command. The skill starts with an interactive interview process that asks targeted questions regarding the desired user journey, the primary conversion goal, available brand assets, and aesthetic preferences. Herk demonstrates this by initiating a redesign of the AI Automation Society website, asking for a premium, editorial feel backed by real member evidence rather than generic stock imagery. He configures the build to use custom low-poly geometric visuals generated through Kie.ai, an API platform supporting various image and video models.

Once the questionnaire is complete, Claude Code plans the architecture and begins generating the code. The build harness launches a local development server and uses Playwright to capture screenshots across multiple keyframes and mobile viewports. The AI inspects these rendered screenshots to identify visual defects, such as broken text wrapping or unexpected white space, before presenting the completed build.

After approximately thirty minutes, Claude Code produces the first live version of the redesigned site. Herk reviews the site on his local host, noting that it dynamically pulled real-time membership numbers, YouTube statistics, and Skool Games leaderboard screenshots. While noting the strong foundation, Herk identifies areas for improvement: the hero section feels too plain, the interactive global reach map animates too quickly, and a data register section adds unnecessary clutter.

Herk submits these revision notes in plain text back to Claude Code. The system processes the instructions and outputs an updated version. The revised landing page features a magazine cover hero layout, a slower interactive globe animation synced to scrolling, typewriter effects on community testimonials, and clean call-to-action buttons linked to membership onboarding pages. Herk concludes by showing where viewers can download the skill files and plugins within his free Skool classroom.

Introduction to ScrollCraft

Nate Herk introduces ScrollCraft, a Claude Code skill engineered to build dynamic, scroll-driven website experiences. Unlike standard AI-generated pages that often produce generic layouts, ScrollCraft focuses on user pacing, interactive scroll animations, typography, and tailored visual narratives across diverse use cases such as e-commerce, portfolios, and brand landing pages.

Interactive Interview and Asset Configuration

When activated in Claude Code desktop, the skill runs an initial interview phase. It prompts the user to define their brand mission, aesthetic tone, scroll sequence, and available media assets. It also leverages Kie.ai API integrations to generate customized visual assets, such as low-poly geometric figures or product visuals, when existing assets are not provided.

Automated Build and Visual Verification

During the construction phase, Claude Code writes the site code and launches a local server for automated testing. Using Playwright, it captures screenshots across various viewport widths and keyframes. The system inspects these captures to identify formatting bugs, overflowing text, or dead scroll positions before delivering the initial preview to the user.

Iterative Redesign and Refinement

Herk demonstrates redesigning the AI Automation Society website, pulling live metrics and leaderboards directly into the design. After the first generation pass, he provides natural language feedback to adjust the hero layout into a magazine cover style, slow down globe animations, insert typewriter effects, and remove unnecessary sections.

The Bottom Line

The video demonstrates that Claude Code can produce interactive, scroll-driven websites when guided by structured design skills and automated visual verification. By combining an interactive interview flow with Kie.ai asset generation and Playwright testing, ScrollCraft produces custom editorial layouts rather than repetitive templates. While manual feedback remains necessary to refine animation timing and copy specifics, the process establishes a rapid workflow for AI-assisted frontend development.

FAQ

What is ScrollCraft and how does the Claude website design skill work?

ScrollCraft is a custom skill and plugin for Claude Code that builds interactive, scroll-driven landing pages. It conducts an onboarding interview to assess brand requirements, generates necessary media assets via Kie.ai, writes the website code, and performs visual quality checks using screenshot captures.

How does Claude Code visually verify the website during the build process?

Claude Code launches a local development server and uses Playwright to capture screenshots of keyframes across desktop and mobile viewports. It analyzes these images to spot visual bugs, overlapping text, or spacing errors before finalizing the output.

What role does Kie.ai play in the ScrollCraft website generation process?

Kie.ai serves as an API platform for generating AI images and videos. ScrollCraft connects to Kie.ai using an API key in the environment variables to automatically produce visual assets required for the website.

Where can users access the ScrollCraft Claude Code skill plugin?

The skill and its associated files are available for free in the classroom section of Nate Herk's AI Automation Society Skool community.

How does ScrollCraft handle live data and community statistics on generated pages?

ScrollCraft can query live platform statistics, such as community member counts, YouTube subscriber numbers, and competition leaderboard images, and embed them directly into the site's verified data components.

Worth watching for

Web developers, designers, and AI automation builders seeking to generate interactive, scroll-driven landing pages using Claude Code.

  • claude-code
  • web-design
  • scrollcraft
  • ai-web-development
  • kie-ai
Watch on YouTubeMore videos from Nate Herk