How to work with GetLayers
Featured templates
01 · Start here
GetLayers is a library of designed layers (templates, 3D scenes, sections, backgrounds and gradients) that you build on with AI, so you don't end up with the generic site an AI makes from scratch.
A layer gives your AI the hard parts up front: motion, depth and atmosphere. You copy its prompt and work the way you already do. Change the copy, swap the palette, make it about your business.
Next to the library there are 13 free AI design tools for making effects of your own, and a Figma plugin that places layers in Figma as editable design.
When you want a site that stands out and would rather direct an AI than start from a blank file.
02 · Start here
Copy a layer's prompt, paste it into your AI tool, and keep building from what it generates.
The AI builds the layer as one self-contained HTML file. To move it to another stack, ask the AI to rebuild that file in the stack you use.
Full Stack subscribers can download the source files instead and skip generation. Or connect the GetLayers MCP and let your assistant pull from the library itself.
Want to design first? Place a layer in Figma with the Figma plugin. Want an effect nobody else has? Make it with the free AI design tools and copy its prompt the same way.
03 · Start here
A prompt tells your AI how to recreate a layer as one self-contained HTML file. A source file is the code we built the layer with, ready to run.
Use a prompt when you want the layer in your own stack (Vue, Astro, Svelte, WordPress or anything else) or plan to reshape it heavily.
Use a source file when you want exactly what you saw in the preview. Templates come as Next.js, sections and 3D scenes as standalone HTML, and backgrounds as the video file.
Source files come with Full Stack, on free layers too. A free layer's prompt is free for everyone, and a free background's file is free to download.
05 · Start here
The MCP gives your assistant 17 tools in five groups. You never call them yourself: ask in plain words and it picks the right one.
Start and plan. Load the playbook, turn your brief into a style and the templates that fit it, and keep every section in that style.
Find in the library. Search in plain words, browse a category by mood and tone, or take in the whole library at once.
Build with it. Pull a layer's real source tinted to your style, take a single file from a template, design a new 3D scene from your description and reference images, or rebuild a template you edited in Figma.
Tools and favourites. Make a new effect with any of the AI design tools, list everything you saved on getlayers.ai, and rebuild any of it 1:1 in your project.
Restyle anything. Layout skeletons, colour palettes and production fonts to re-dress what it built.
Fair use. Pulling source, taking a file and designing a scene count toward the fair-use limit. So does rebuilding a hearted layer or a tuned gradient or scene. Browsing, searching, your saved list, matching a Figma frame and making or rebuilding a /tools look don't.
Every tool, with what it covers, is in the capabilities table.
04 · Start here
Yes. The GetLayers MCP connects your AI coding assistant to the library (templates, 3D scenes, sections, backgrounds and gradients), to your favourites and to the looks you save in the AI design tools. It searches, previews and pulls in what it needs while it builds, so you don't copy prompts by hand.
You connect it once. It works in Claude Code, Cursor, Codex, and any MCP-capable client such as ChatGPT, Windsurf or Cline. In the Claude app (claude.ai or Claude desktop), add it under Settings → Connectors → Add custom connector with the server URL https://mcp.getlayers.ai/mcp, then sign in with your GetLayers account. Setup for each is on the MCP page.
Besides building, it can restyle what it built with new palettes, fonts and layouts, rebuild a site from a template you edited in Figma, and rebuild any look you saved on getlayers.ai.
The MCP comes with Full Stack Lifetime.
Tools that hand over library source count toward a generous fair-use limit; browsing, searching, your saved list and rebuilding a /tools look never do.
When you're building a whole site, or would rather direct your assistant than paste prompts.
06 · Start here
Everything you keep lives in one place on your account: hearted layers, tuned gradients and scenes, and looks saved in the AI design tools. It follows you to the Figma plugin and the MCP.
Favourites shows every layer you hearted or saved a look for, across all five categories. Tool favourites shows your saved tool looks, grouped by tool. Your profile lists both.
The Figma plugin shows the same favourites and saved looks, and what you save there appears on the site. With the MCP, your assistant can read the whole list and rebuild anything on it.
Saving needs an account. A free one is enough.
07 · The library
Every category has its own page with a search box and filters, and every layer has its own page you can share.
Search matches titles, descriptions, tags and keywords. Press ⌘K (or /) to search the whole library from any page.
Filters narrow a category by Tone (dark or light), Mood, Type and Pricing (free or premium), plus Media (animated or static) on backgrounds. The URL keeps your filters, so a filtered view can be shared.
Without a paid plan, each category opens with a strip of its most-liked free layers. Free layers are commercially licensed like every other layer.
08 · The library
A template is a complete page: a standalone hero or a full landing page. The prompt gives you one HTML file; the source is a Next.js project.
Every template ships optimized, with its own desktop, tablet and phone layouts. Open any template and check its Performance tab for how smoothly it scrolls, measured in our lab, and its SEO tab for Google's PageSpeed reports.
30+ templates also come as Figma designs: press Edit in Figma on the template, or add it from the Figma plugin.
When you need a whole page or a finished hero: a launch site, a product page, a portfolio.
09 · The library
3D scenes are Three.js effects (particle fields, shaders, animated geometry) that you drop into a page behind a hero, a section, or as a centrepiece.
Prompt and source both give you one self-contained HTML file, so a scene fits any stack. There is no Next.js version on purpose: a scene shouldn't bring a whole project with it. The source adds a Controls panel for tuning the effect.
To use it, point your AI at the file and ask it to port the scene into your project.
When a section needs depth that flat CSS can't give it.
10 · The library
Sections are single blocks (sliders, FAQs, forms, feature rows) for a page you've already started. The prompt and the source both give you one self-contained HTML file.
Swap out the one part of your page that falls flat without rebuilding the rest. Take what you need: keep the interaction and drop the styling, or keep the layout and rewrite the copy.
When the page exists and one block of it needs to be better.
11 · The library
Backgrounds are ready-made video loops. Download the file, or copy the prompt, which links the video so your AI embeds it instead of generating anything.
Premium backgrounds (4K) and background prompts come with Unlimited Plus and Full Stack. Free backgrounds can be downloaded by anyone.
When a hero or section needs motion and a 3D scene would be too heavy.
12 · The library
Gradients are animated backdrops that react to the pointer, written in plain WebGL with no three.js and no build step. Tune the colours in the browser and copy the prompt for exactly that version.
They're the lightest layer we ship and drop into React, static HTML or any theme. Pick a colour preset or set your own; what you copy is what you tuned.
The gradient roller, the tile at the top of the gradients page, deals you another live gradient from the whole catalog with each click. Gradients also tune live in the Figma plugin.
Free gradients are open to everyone. Premium gradients, live tuning and the gradient roller come with Unlimited Plus and Full Stack. Live tuning works on desktop.
Hero backdrops, dividers and card fills where even a 3D scene is too much.
13 · The library
Yes. 3D scenes and gradients run live in the browser with a tuning panel, and the prompt you copy carries the values you set.
Start a 3D scene's live preview to open its Controls panel: colours, counts, speed, density. A gradient takes a colour preset or your own colours. Save a tuned version as a look to come back to it later.
The gradient roller on the gradients page is the same idea at catalog scale: one click, one new live gradient, so you hunt by eye instead of by name. Without access you see a demo of it.
Free scenes and gradients run live for everyone. Premium ones, and the roller, need Unlimited Plus or Full Stack on a yearly or lifetime plan. Live tuning works on desktop, 1024px and wider.
14 · Tools & integrations
The AI design tools are 13 effect makers that run in your browser: text animation, custom cursors, ASCII art, 3D from an SVG, holographic cloth, gradients and more. Every tool is free.
Pick a tool and move its controls; the preview redraws as you go. When it looks right, copy the prompt into your AI tool, or download the result as a PNG or a video where the tool offers it. Image Compressor is a utility: its output is the compressed file.
Several tools take your own image, video or SVG. Copy link shares the exact settings you dialled in, but not your uploads, so a shared link opens on the tool's sample.
Save to favourites keeps a look on your account (a free account is enough). Saved looks are in Tool favourites, grouped by tool, and reopen exactly as you left them.
Connect the GetLayers MCP and your agent can use the tools too.
When you want an effect made to your settings rather than picked from a catalog.
15 · Tools & integrations
Yes, through the GetLayers MCP, which comes with Full Stack Lifetime. Your agent creates with the tools on the fly: it starts from a tool's preset, tunes it to your brief and builds it into your project. It can also find the looks you saved and rebuild them.
getlayers_tools lists the tools and their presets, and getlayers_tool_look turns a preset plus your changes into the tool's exact build prompt.
getlayers_my_favourites lists your saved looks. getlayers_reproduce rebuilds one 1:1 from its exact build prompt, with the files you uploaded into the tool.
It works for 12 tools. Image Compressor has no saved looks, because its output is the file itself.
Making or rebuilding a tool look doesn't count toward fair use.
16 · Tools & integrations
The GetLayers Figma plugin brings the library into Figma. It's free in Figma Community, and free layers work without an account.
Templates and sections land as real, editable design: frames, text, auto-layout and styles, with desktop, tablet and phone frames. Gradients run live in the plugin, so you tune one and place exactly that. 3D scenes and backgrounds place as an image or a video.
Not every layer has a Figma design: 30+ templates do, and those carry the Figma mark. Video needs a paid Figma team; on a free Starter team the plugin places the still. Premium backgrounds come watermarked below Unlimited Plus.
Premium designs, clean backgrounds and tuning premium gradients come with Unlimited Plus or Full Stack, yearly or lifetime. Your favourites and saved looks are shared with the site.
17 · Tools & integrations
Edit a GetLayers template in Figma, then give the frame's link to your agent with both the Figma MCP and the GetLayers MCP connected. It reads your design and rebuilds it from the template's real source, motion included.
The Figma MCP lets the agent read your edits: copy, colours, layout. The GetLayers MCP gives it the template's source, so the site keeps the motion and 3D a static design can't carry. The GetLayers MCP comes with Full Stack Lifetime.
18 · Core concepts
Because one HTML file works with any stack. It has no build step, no dependencies and no assumptions about your project.
If a prompt produced React, it would be wrong for everyone not using React. A single file is also easy for an AI to read in full. Treat it as a starting point you translate into whatever you ship.
19 · Core concepts
Templates are full, heavily animated pages, and Next.js keeps them fast and crawlable through server-side rendering and code splitting.
The server sends complete HTML with real headings and copy, so search engines can read the page. The 3D, shader and motion code loads after the page is usable. If you don't use Next.js, use the prompt instead.
20 · Core concepts
Yes. Every template is optimized out of the box: in Google PageSpeed Insights the median mobile Performance is 98 and every measured template scores 100 for SEO, and in our lab the median template scrolls without a dropped frame on a phone with a 4× slower CPU.
Each template's Performance tab shows how smoothly it scrolls in our lab, and its SEO tab links Google's full PageSpeed reports, so you can check the numbers yourself. If you rebuild a template to render only in the browser, you lose most of this.
21 · Help
Free gives you a curated set of layers. Unlimited adds every premium template, 3D scene and section prompt. Unlimited Plus adds premium backgrounds and gradients, live preview and Figma designs. Full Stack adds source files, the GetLayers MCP and private Discord support. The AI design tools are free on every plan.
Signed out, you can copy one free prompt and download one free background a day. A free account removes that cap.
Unlimited and Unlimited Plus are sold yearly or lifetime. Full Stack is a one-time lifetime purchase, and the MCP comes only with Full Stack Lifetime. Unlimited Plus also covers live tuning for 3D scenes and gradients (desktop), the gradient roller, and Figma designs in the Figma plugin.
Every AI design tool is free for everyone, signed out included: run it, tune it, copy its prompt, download the result. The paid part is the MCP, which lets your agent use them.
Fair use. Unlimited and Unlimited Plus include a daily allowance of premium prompt copies, counted per category, and Unlimited Plus a daily allowance of background downloads. Lifetime plans get more than yearly ones, and Full Stack has none on the site; the MCP has its own fair-use limit. Free layers and re-copies don't count. Prices are on the pricing page.
Licence. Every layer, free ones included, can be used commercially, with no attribution. You can build sites for clients and sell them. You can't resell or redistribute the prompts or source files themselves. Details are in the Terms of Use.
22 · Help
Everything is on your profile. Lifetime is a one-time payment that never renews; yearly renews each year until you cancel.
Upgrading charges only the difference. A yearly plan to a higher yearly plan is prorated; moving to lifetime, or up between lifetime plans, charges what's left after what you've already paid.
Manage subscription on your profile opens the billing portal, where you can update payment details or cancel. Cancelling stops the renewal, and you keep access until the end of the paid period. Purchases are non-refundable.
23 · Help
Yes. Ask AI for guides, the button at the bottom of the page, answers questions about layers, plans, the tools and the MCP, and links you to the right layer or page.
It knows what's public on this site. It can't see your account and doesn't build sites; that's your AI coding tool's job. There's a daily message limit.
24 · Help
Yes. Apply on the affiliate page. Once approved, you get a personal link and earn 20% on every purchase made through it.
It's free to join, and paid ads aren't allowed. Someone who signs up through your link stays yours for every later purchase. Commissions unlock 14 days after the sale and show in your profile's affiliate tab. Details are in the Affiliate Terms.
25 · Help
Yes, two free repos from the team behind GetLayers. Neither needs a plan.
The Next.js + Claude starter is the base every template's source is built on.
The AI design vault works with any stack and helps your AI keep one design language across a whole project.
26 · Help