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 Figma, code, a prompt, or a mix.
Copy, download or prompt
Figma → copy it into your workspace. HTML → download and open it. 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: Figma, code & prompts
Not every layer comes in every format. Some are Figma-only, 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.
Figma file
The editable design, ready to copy straight into your own Figma workspace. Layers, styles and structure intact — restyle it and make it yours.
Code (HTML)
A self-contained HTML file. Open it, 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.
Bundle
When a piece needs more than one file — assets, specs or a packaged export — it ships as a bundle you download in one go.
Which AI model do you build against?
There is no single locked model. A lot of the designs are built by hand by our team — some pieces use Fable, others GPT 5.6 — and the prompts we ship are tested to work well across current AI tools.
At the end of the day the quality comes from the team of designers and developers behind each layer, and the creative direction you bring to it. The model is just one tool in that process, not the thing doing the hard part.
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.