ScrollCraft: The Free Claude Skill That Fixes Boring AI Websites
ScrollCraft is a free Claude Skill that turns basic Claude-built sites into scroll-animated, premium-feeling pages. Here's how it works.
What is ScrollCraft?
ScrollCraft is a Claude Skill built specifically for web design. It takes a website you’ve already built (often with Claude itself) and rebuilds it as a scroll-driven, interactive experience: sections that animate in as you scroll, numbers that count up, images that transition based on scroll position, and layouts that feel closer to a designed product site than a typical AI-generated landing page. It was created and released for free by an AI automation educator, distributed as a downloadable skill folder or plugin that installs into Claude Code.
The core idea is that scrolling should mean something. Instead of a static page with a few fade-ins, the skill treats the scrollbar as a control the visitor uses to move through a story, similar to how well-made product pages or editorial long-reads are structured.
TL;DR
- ScrollCraft is a free Claude Skill that redesigns existing websites into scroll-animated, premium-feeling pages while keeping the original copy and branding intact.
- The skill runs an interview process first, asking about the desired vibe, the visitor’s scroll journey, what real assets exist, and what single belief the site should leave visitors with.
- It uses fal.ai, an API for image and video generation models, to fill in any visual assets the site is missing, then stitches them into the final build.
- After generating the site, Claude runs a verification pass, taking screenshots of key frames and inspecting them to catch visual errors before handing back the result.
- Output varies site to site: the skill isn’t a single template, so a travel agency, a personal brand site, and a physical product page all come out looking distinct.
- Builds shown in testing took around 30 minutes and could pull in live data (such as current membership numbers) and generate supporting graphics like leaderboard screenshots.
- The skill works inside Claude Code, either installed as a plugin or dropped in as files, and assumes at least basic familiarity with Claude Code workflows.
Plans first. Then code.
Remy writes the spec, manages the build, and ships the app.
How does ScrollCraft actually work?
ScrollCraft works in three broad phases: interview, generation, and verification.
The interview phase is a structured back-and-forth where Claude asks about the site’s purpose and feel before writing any code. Questions include what the visitor should see first, what one sentence the visitor should believe by the end of the page, what real photos or brand assets already exist, and what one thing the site should do that no other site the user has seen does. This last question is meant to produce a “signature move,” a distinct interactive element that makes the site memorable rather than generic.
Once the interview is done, Claude begins generating and assembling the site. If the existing assets (photos, logos, screenshots) aren’t enough to fill out the design, the skill calls fal.ai to generate additional images or videos matching the requested style, whether that’s photorealistic photography or something more stylized like low-poly geometric illustration. Those assets get synced to scroll triggers so that specific images, stats, or animations appear at specific scroll positions.
The final phase is verification. Claude takes screenshots of key sections of the built site and inspects them before finishing, checking for layout problems or visual mistakes that wouldn’t be obvious just from reading code. This step is meant to catch errors that would otherwise only surface once a human opened the page.
What makes it different from a typical AI-generated website?
Most sites built quickly with AI coding tools tend to look similar: a hero section, some cards, a call to action, minimal motion. ScrollCraft’s output is explicitly judged against that baseline. The skill encodes design taste, spacing, typography, pacing, and scroll behavior, into the build process, so the result leans toward editorial, premium-feeling layouts rather than a template with a new coat of paint.
It also isn’t locked into one visual style. Example builds referenced during testing included a travel agency site built around a scrolling “journey” narrative, a personal branding page, and a physical product page with multiple flavor variants, each with a different tone: one energetic and hype-driven with AI-generated flying-world visuals, another calmer and more trust-focused with subtle scroll effects. The skill’s interview step is what drives that variation, since the answers about tone, pacing, and intensity shape the final design rather than a fixed template.
Sites built with the skill can also pull in live or dynamic content. In one demonstrated build, a nonprofit’s site pulled current membership numbers as of the day it was generated, and sourced supporting graphics (like leaderboard screenshots) that weren’t part of the original site’s assets, essentially having Claude go find supporting evidence for claims made on the page.
How do you install and use it?
Remy is new. The platform isn't.
Remy is the latest expression of years of platform work. Not a hastily wrapped LLM.
ScrollCraft is distributed as a Claude Skill, meaning it can be installed as a plugin inside Claude Code or added manually by placing the skill’s folders and files into a Claude project. Once installed, typing a relevant trigger (like “scroll”) inside Claude Code surfaces the skill, described as building a premium, scroll-driven interface for a landing page for any business, product, or service.
To use it on an existing site, you point Claude at the current website, invoke the skill, and describe the general direction you want (for example, “premium and trusted” versus “energetic and product-focused”). From there, the interview phase takes over, asking clarifying questions about journey, tone, and available assets before generating anything.
Because the skill can call out to fal.ai for image and video generation, using it to its full extent requires a fal.ai API key added to the Claude Code project’s environment variables. Without it, the skill can still work off assets already provided, but won’t be able to generate new visuals to fill gaps.
Is ScrollCraft worth using?
For anyone who has already built a basic site with an AI coding tool and found the result flat or generic, ScrollCraft addresses a specific gap: motion and pacing. Static AI-built sites tend to read as competent but forgettable. Scroll-driven interaction, done well, is one of the more reliable ways to make a page feel considered rather than templated, and that’s the exact problem the skill is built to solve.
The tradeoffs are worth knowing going in. Builds take real time (roughly 30 minutes in the demonstrated example), require at least basic comfort with Claude Code, and benefit heavily from having real brand assets on hand rather than relying entirely on generated imagery. The interview process also rewards specificity. Vague answers about “make it look nice” will get a reasonable result since the skill has built-in taste, but detailed answers about tone, pacing, and what the visitor should feel at each point in the scroll produce more distinct, less generic outcomes.
For solo builders, small agencies, or anyone shipping landing pages for clients, the appeal is straightforward: it’s a free way to push AI-built websites past the “obviously AI-generated” look without hiring a designer or hand-coding scroll animations from scratch.
Frequently Asked Questions
What is a Claude Skill?
A Claude Skill is a packaged set of instructions, and sometimes supporting files, that extends what Claude can do for a specific task. Skills can be installed into Claude Code and invoked by name, giving Claude specialized workflows and domain knowledge (in this case, web design taste and a scroll-animation build process) that go beyond its default behavior.
Do I need coding experience to use ScrollCraft?
You need at least basic familiarity with Claude Code, since the skill runs inside it and assumes you can install plugins or manage project files. It’s not aimed at absolute beginners with zero AI coding tool experience, though it removes the need to hand-write animation code yourself.
Does ScrollCraft replace my existing website content?
No. In the demonstrated builds, the skill kept the original copy, branding, and color scheme intact. It restructures how that content is presented and adds scroll-based interactivity and supporting visuals rather than rewriting the site’s messaging.
What is fal.ai used for in this workflow?
Remy doesn't build the plumbing. It inherits it.
Other agents wire up auth, databases, models, and integrations from scratch every time you ask them to build something.
Remy ships with all of it from MindStudio — so every cycle goes into the app you actually want.
fal.ai is an API platform for image and video generation models, comparable to a router service but for visual media instead of text models. ScrollCraft calls it to generate additional images or videos when a site doesn’t have enough existing assets to fill out the design, then incorporates those generated assets into the scroll-synced build.
How long does it take to build a site with ScrollCraft?
In the demonstrated example, a full rebuild of an existing site took about 30 minutes, including the interview phase, asset generation, page assembly, and Claude’s own verification pass on the finished screenshots. Actual time will vary based on site complexity and how many assets need to be generated.
