How to work with GetLayers

Ask an AI for a website and you tend to get the same one everyone else gets: a centred hero, three feature cards, a flat gradient. That's not the model failing — it's the model with nothing to work from. With no foundation to build on, it gives you the average of everything it's seen.

A layer is that foundation. Each one is a finished piece of design — motion, depth, atmosphere — that goes to the AI as context. The model isn't inventing the hard parts; it's building on craft that's already there. The result is immersive because the thing you started from already was.

From there you do the easy part. Grab a layer, download or copy its prompt, and prompt exactly the way you always do — change the copy, swap the palette, make it about your business. Ordinary prompting on a strong foundation, and the result stands out from anything you've shipped before.

Open any layer and you get its prompt. Copy it, paste it into the AI tool you already work in, and it generates the layer as a single self-contained HTML file. Open that file and the page is there, motion and all. That HTML file is the starting point — from here, we'd port it into your own stack.

To move it into another technology, hand the file to an AI and tell it which stack to rebuild it in. From there you extend it, rebrand it, and wire it to real content. Nothing about the result is locked to us.

If you'd rather skip the generation step entirely, Full Stack subscribers can download the source files instead — the actual code we built the layer from. Which format you get depends on the category, and that distinction is the one thing worth understanding properly before you start.

This is the core mental model in the whole product. Almost every question people ask — how do I get this into Vue, why is the source Next.js, can I just download it — is really a question about this one distinction.

A prompt is portable. Since the AI outputs one self-contained HTML file, it assumes nothing about your framework, your build step, or your folder structure. That single file is the universal handoff: give it to any AI with "recreate this following my project's structure" and you're in Vue, Astro, Svelte, WordPress, or anything else.

A source file is direct. There's no generation step and nothing to interpret — you get exactly what we built, which is exactly what you saw in the preview. The catch is that it comes in a specific format, and that format depends on the category: templates and sections ship as Next.js, 3D scenes as standalone HTML, and video backgrounds as the file itself.

Neither is better in the abstract. Reach for a prompt when you want the layer in a stack we don't ship, or when you're going to reshape it heavily anyway. Reach for a source file when you want the result as designed, with as little as possible between you and a running page.

A prompt is only as good as the model reading it. We test each one against Opus 4.8 and don't publish until the output matches the layer as designed — not roughly, but recognisably the same page.

Other models will still run these prompts, and most will produce something good. What weaker models lose first is exactly what makes the layers worth having: the motion timing, the depth and layering, the restraint. You keep the structure and lose some of the craft.

If a prompt isn't producing what the preview showed, check the model before anything else — before the prompt, before your setup. In practice, a wrong or outdated model is behind most mismatches.

A template is the whole thing: layout, motion, type, and the atmosphere that holds them together. Some are heroes made to sit at the top of a page you already have; others are full landing pages you can ship as-is once the copy is yours.

Copy the prompt and your AI rebuilds the template as one self-contained HTML file — everything inline, nothing to install. Most people start here, because you can open it straight away and move it into another stack easily.

Download the source instead and you get a Next.js project. That's on purpose: templates carry a lot of motion, and server-side rendering is what keeps a heavily animated page fast and crawlable instead of a blank screen to a search bot.

Some templates need optimisation for mobile performance and load speed. Next.js gives you most of this out of the box — content ships in the initial HTML so crawlers index it without executing animation JS, and heavy scenes can be client-side only so they never block first paint.

A 3D scene isn't a page. It's a component you drop into a page you're already building — behind a hero, as a section backdrop, as an interactive centrepiece. It has to travel well, because it always ends up inside someone else's project.

So this is the one category where the prompt and the source file give you the same thing: a single self-contained HTML file. There's no Next.js version, and that's on purpose. Wrapping a drop-in scene in a full framework would hand you a whole project environment when all you wanted was the scene.

The file carries its own Three.js setup, its own render loop, and its own shaders. Lift the parts you need into your component, or point your AI at the file and tell it to port the scene into your existing structure.

Sections are for pages you've already started. You have a site, it works, and one part of it falls flat — the FAQ accordion, the testimonial slider, the contact form. A section replaces just that part with something better made, without making you rebuild the page around it.

As a prompt, a section arrives like everything else: one self-contained HTML file you can view straight away and port anywhere.

Because sections are meant to be composed, they're written to be pulled apart. Take the interaction and leave the styling, or keep the layout and rewrite the copy.

You can't prompt your way to a video. A background isn't code to recreate, it's an asset to use — so it works the way assets always have: grab the file, or a link to it, and put it in your page.

A background does quiet, atmospheric work: it should sit behind your content without competing with it. In practice that means lower contrast and slower motion than feels right when you look at it on its own.

The alternative would be for prompts to emit framework code directly — a React component, a Vue SFC, a Svelte file. That sounds handier but is actually less useful, because it makes a choice that should be yours. The moment a prompt emits React, it's wrong for everyone who isn't on React.

It's also the cleanest handoff to another AI. One file fits comfortably in context, complete and unambiguous, which is why "recreate this following my project's structure" works as well as it does. Give a model a single self-contained file and it can read the whole thing; give it a folder tree and it starts guessing.

So the file isn't the final format. It's the portable intermediate — the thing you translate from, into whatever you actually ship.

There's a familiar trade-off in web design: the more immersive the page, the worse it tends to perform and the less a search engine can see. Sites like these are usually one big client-side bundle — the bot arrives, finds an empty div, and leaves.

Server-side rendering breaks that trade-off. The markup is rendered on the server, so a crawler gets a complete, readable document with real headings and real copy, while the visitor's browser hydrates the same page into the full animated experience. Neither side loses out.

Bundle separation does the other half of the work. The heavy parts — 3D, shaders, large motion code — are split out and loaded when they're actually needed, rather than sitting in the critical path holding up the first paint.

Next.js is simply the most direct route to both. If you ship something else, the prompt path is there for exactly that reason — nothing in the design depends on the framework.

It looks inconsistent — templates and sections ship as Next.js, 3D scenes don't — but the two cases really are different, and the difference comes down to what each one is for.

A template is a page. It's the destination, so it makes sense for it to arrive with its environment. A 3D scene is never the destination: it goes inside someone else's hero, someone else's section, someone else's stack.

The scene, its Three.js setup, and its shaders are all right there, in one readable file that fits any stack because it assumes none.

Three things do most of the work. Server-side rendering means the document arrives complete, so a bot can scan real headings and real copy instead of waiting on JavaScript it may never run. Bundle separation keeps the expensive code — shaders, 3D, motion engines — out of the first paint, loading it once the page is already usable. And keeping the motion itself restrained leaves the main thread free during the moments the score is actually measured.

That said, not every template is SEO-optimised out of the box — some will still need work from your side.

This is the shortest path through the product and the one most people use daily.

Every prompt outputs one self-contained HTML file, and that file is stack-agnostic — which is what makes rebuilding it in your own framework straightforward. There are two ways to get there, and the only real difference is whether you see the layer before it's reshaped. Generating the HTML first lets you check it against the preview — the safer default; building it directly in your stack is fewer steps but skips that check.

Either way, the AI needs to see your project — your components, your conventions, your environment. A rebuild without that context produces code that works and looks nothing like the rest of your codebase.

Both approaches work for anything the AI can reach: Vue, Astro, Svelte, WordPress, Rails. If you're not committed to a stack yet and want the shortest route to something production-ready, use Next.js and take the source files instead of rebuilding at all.

This is the path with no generation step. You download exactly what we built, so what you get is exactly what you saw in the preview.

The layers are ordinary Next.js code — components, styles, and the motion setup they rely on.

If you're not on Next.js, don't force this path — generate the HTML and port it instead.

Four attributes do the work, and all four matter. Muted and playsinline are what let the video autoplay at all on mobile; browsers block anything else. Loop keeps it seamless. A poster image covers the gap before the video is ready, which is the difference between a hero that fades in and a hero that flashes black.

Compress your videos before shipping. Never put a 4K file behind a simple video player on production — 1080p, H.264 or WebM, with a poster frame and preload="none" covers almost every hero background. Claude Code can run the ffmpeg for you if you don't want to look up the flags.

Free is exactly that — a curated set of prompts, open to everyone. It's meant for browsing and experimenting rather than shipping client work.

Unlimited opens the full prompt library and comes with a commercial-use licence — the part that matters if you're billing someone for the result. You can ship what the prompts produce, in any product, with no attribution required.

Full Stack is everything: the source files behind every layer, a private Discord, and every future weekly drop. It's for people who'd rather start from working code than a generation step. For the full plan comparison and current prices, see our pricing page.

License — what's allowed. You're free to use the prompts to build websites and deliverables and sell those to your own clients. What isn't permitted is copying, redistributing, or reselling the prompts or source templates themselves as standalone products — in a marketplace, say — or as a competing product. Refer to our Terms of Use for the full detail.

Whatever the plan, don't ship a layer exactly as it comes. Extend it, rework it, make it yours — the layers are a starting point, and the whole premise of the product falls apart if everyone ships the same page.

If something isn't working, check the model first. A wrong or outdated model accounts for most reported mismatches, well ahead of anything to do with the prompt itself.