Create High-End 3D Websites With This Premium Library
Marcelo Design X · 31.7K subscribers
What is Sparks?
Sparks lets you start a project from something real, instead of a blank page. Ask an AI for a website from nothing and you get the average of everything it has seen — a centered hero, three cards, a flat gradient. That is not the model failing; it is the model with nothing to build on.
A layer is that foundation. Each one is a finished piece of design — motion, depth and atmosphere already worked out. Take it, adapt it, learn how it was built, or use it to kickstart something new. It is a library to inspire and accelerate, not a from-scratch generator.
When to use it
When you want to move fast on something that still looks intentional — and you would rather adapt a strong starting point than design from zero.
How it works
Three steps, and the middle one depends on the format.
Pick a layer
Browse Explore and open anything that fits. Every asset page lists its exact Format — so you know upfront whether it is code, a prompt, or both.
Copy or prompt
Code → copy it straight into your project. Prompt → paste it into your AI tool and generate a self-contained file.
Make it yours
Restyle it, port it to your framework, or use it as the spark for something new. The craft is done — your creative direction takes it the rest of the way.
Formats: code, prompts & live previews
Not every layer comes in every format. Some are code-only, some are just a prompt — and a few are a mix. Each asset page shows its exact Format upfront, so you always know what you are getting.
Code (HTML)
A self-contained HTML file you copy to your clipboard. Ship it as-is, or port it to React, Svelte or Vue — whatever your stack is. Stack-agnostic on purpose.
Prompt
The prompt behind the piece. Paste it into Claude or your AI tool of choice and regenerate, remix or take it in a new direction.
Design tokens
The colour, type and spacing tokens behind a design system, as a JSON file plus a DESIGN.md you can hand to an AI tool.
Live preview
An AI-generated, clickable build of the piece rendered right in the page — try the real thing before you copy anything.
Which AI model do you build against?
There is no single locked model. The prompts in the library are tested to work well across the current AI tools, and the live previews on this site are generated by an AI model from those prompts.
The model is one tool in the process, not the thing doing the hard part — the prompt and the creative direction you bring to it decide the result.
The library — three shapes
Templates
Full pages and standalone heroes — a complete starting point you can adapt end to end, or lift a single screen from.
Sections
Self-contained blocks — sliders, feature grids, pricing, FAQs, forms. Drop one into a project or study how it is built.
Components
The smaller pieces — cards, navs, buttons, micro-interactions. The building blocks behind the bigger layouts.