Shuffle's Editors
Shuffle’s design systems
Behind the Barro Studio design
Learn how to create websites like this with Shuffle
One prompt, three AI videos and scroll effects described in plain words. The prompt says how the whole page moves, then gives every section its own effect. Read it below and open the video tags to see how each video was made.
A great prompt describes
- Who you are: Name, what you offer, where and for whom.
- Look & feel: Style, theme, exact colors, fonts and logo.
- Scroll effects: How the page moves, then one effect per section. Not sure how to describe it? Pick a Scroll flow under the prompt.
- Sections, in order: Real headlines, copy and buttons for each one.
- Your media: Add media → Generate video for the sections with a video.
- Final touches: Rules that apply to the whole page.
The prompt
Landing page for Barro Studio, a small handmade stoneware ceramics studio in an old riverside warehouse in Porto, Portugal. Six potters throw, fire and glaze every piece by hand: mugs, bowls, plates and vases made for everyday use, sold online and shipped worldwide.
Style: warm, tactile, artisanal and cinematic. Light theme. Colors: warm clay-white #F4EFE8 background, deep espresso #1E1A17 text, terracotta #C4572E for buttons and accents, glaze blue #3F5E73 for small details. Headings in an elegant serif (e.g. Instrument Serif), body in a clean sans-serif (e.g. DM Sans). Generous spacing, very large headlines, few words. Logo: "Barro" in the serif font with a small round bowl icon, and the word "STUDIO" in small spaced-out capitals next to it.
Scroll effects: the page should feel smooth and alive as you scroll, but calm, never flashy. Use smooth scrolling and the effects described in each section below. Headlines and text blocks should fade in and slide up slightly when they enter the screen. All animations should be smooth and tied to scroll position where stated. If the user prefers reduced motion, turn the effects off and show everything statically.
Sections:
1. Navigation: logo on the left; links: Process, Collection, Studio; button "Shop the collection". Scroll effect: the navigation is transparent over the hero and becomes a solid clay-white bar with a thin border after you scroll down.
2. Hero: full-screen section with a video background.
How video 1 was made (Hero)
1Click Add media under the prompt, then Generate video.
2
In Generate with AI, describe the starting image (16:9, High 2K). Say where the subject goes and keep an empty, calm area for your text:
Close view of wet terracotta-colored clay spinning on a potter's wheel, two hands gently shaping it into a rising bowl, water glistening on the clay surface. Soft warm daylight comes from a large old factory window on the side, fine dust floating in the light. Place the wheel and hands in the right third of the image; keep the left half calm and simple: soft, out-of-focus warm brick wall. Photorealistic, cinematic, warm terracotta and cream tones with soft shadows, no faces, no text.
3Click Continue and drag the box over the left half, on the soft brick wall. The video stays calm there, so the text is easy to read.
4Click Generate video, then Add to prompt, and move the added text here.
What moves: the spinning clay, hands shaping the bowl, dust floating in the light.
Headline: "Made by hand. Made to be used." Subheadline: "Stoneware thrown, fired and glazed in our Porto studio, one piece at a time." Buttons: "Shop the collection" (primary) and "See how it's made" (secondary, outline). Small line below: "Free shipping on orders over €80".
Scroll effect: as you scroll down, the hero video shrinks from full-screen into a large rounded frame with margins around it, while the headline moves up and fades out.
3. Manifesto: no video, plain clay-white background. One very large paragraph centered on the page: "We believe a mug should feel good in your hands every morning. So we make fewer things, slowly, from local clay, and we make them to last for years."
Scroll effect: the paragraph reveals word by word as you scroll; words start light and faded and turn fully dark espresso one after another as the section moves through the screen.
4. Process: full-screen section with a video background, pinned while you scroll through it.
How video 2 was made (Process)
1Click Add media under the prompt, then Generate video.
2
In Generate with AI, describe the starting image (16:9, High 2K). Say where the subject goes and keep an empty, calm area for your text:
Interior of a pottery kiln seen through its open door, rows of stoneware bowls and vases on shelves glowing bright orange from the heat, soft waves of heat shimmer in the air. The edges of the old brick kiln are in deep shadow. Place the kiln opening and glowing pottery in the left third of the image; keep the right half dark, calm and simple: plain shadowed brick wall. Photorealistic, cinematic, deep brown and black with glowing orange highlights, no people, no text.
3Click Continue and drag the box over the right half, on the plain brick wall. The video stays calm there, so the text is easy to read.
4Click Generate video, then Add to prompt, and move the added text here.
What moves: glowing pottery, shimmering heat in the air.
Eyebrow: "The process". Headline: "Three steps. No shortcuts." Three steps, each with a large number and a small line icon: "01 Shape - every piece is thrown on the wheel from local Portuguese clay", "02 Fire - two firings, the last one at 1 280°C, for stoneware that lasts", "03 Glaze - mixed by hand in our studio, so no two pieces are exactly alike". Button: "Shop the collection".
Scroll effect: the section stays pinned to the screen while you scroll; the three steps appear one at a time on the right side, the active step fully visible and the others faded, with a thin terracotta progress line filling up next to them. When the third step is done, the section unpins and the page continues.
5. Collection: no video, clay-white background. Eyebrow: "The collection". Headline: "Everyday pieces". Four product cards, each with a product photo, name, short description and price:
- "Morning Mug" - €32 - 350 ml, speckled cream glaze. Photo: "A handmade speckled cream stoneware mug on a light linen surface, soft side daylight, plain warm beige background, photorealistic product photo, no text."
- "Rio Bowl" - €38 - 15 cm, deep glaze blue. Photo: "A handmade deep blue glazed stoneware bowl with a raw clay rim on a light linen surface, soft side daylight, plain warm beige background, photorealistic product photo, no text."
- "Douro Plate" - €44 - 27 cm, matte terracotta. Photo: "A handmade matte terracotta stoneware dinner plate seen from slightly above on a light linen surface, soft side daylight, plain warm beige background, photorealistic product photo, no text."
- "Ribeira Vase" - €68 - 24 cm, white glaze dripping over raw clay. Photo: "A handmade tall stoneware vase with white glaze dripping over raw brown clay, holding one dry olive branch, on a light linen surface, soft side daylight, plain warm beige background, photorealistic product photo, no text."
Each card has a button "Add to cart". Mark "Morning Mug" as "Bestseller" with a small terracotta label. Button below the cards: "See all pieces".
Scroll effect: the section is pinned and the cards move horizontally from right to left as you scroll down (horizontal scroll gallery). Product photos zoom in slightly on hover.
6. Numbers: no video, deep espresso #1E1A17 background with clay-white text. Three large numbers in a row: "6 potters", "12 000 pieces a year", "100% made in Porto". Scroll effect: the numbers count up from zero when they enter the screen.
7. Visit the studio: full-screen closing section with a video background.
How video 3 was made (Visit the studio)
1Click Add media under the prompt, then Generate video.
2
In Generate with AI, describe the starting image (16:9, High 2K). Say where the subject goes and keep an empty, calm area for your text:
Wide view of a bright ceramics studio in an old warehouse at golden hour, long wooden shelves full of finished stoneware mugs, bowls and vases in cream, blue and terracotta glazes. Warm sunlight streams through tall arched windows, with the Douro river and Porto rooftops softly visible outside. Place the shelves in the lower third of the image; keep the upper half calm and simple: soft, bright window light and plain wall. Photorealistic, cinematic, warm golden and cream tones, no people, no text.
3Click Continue and drag the box over the upper half, in the soft window light. The video stays calm there, so the text is easy to read.
4Click Generate video, then Add to prompt, and move the added text here.
What moves: sunlight slowly moving through the windows, dust drifting in the light.
Headline: "Come say hello." Subheadline: "Our studio shop is open Tuesday to Saturday, 10:00 to 19:00. Watch us work and take a piece home." Buttons: "Plan your visit" (primary) and "Shop online" (secondary, outline). Below: small text "Barro Studio · Rua da Reboleira 41, Porto, Portugal".
Scroll effect: the video reveals as you scroll into the section, starting as a small rounded rectangle in the center and expanding to full-screen; the headline fades in once the video is full-screen.
8. Footer: logo, address, opening hours, newsletter field with "Subscribe" button, Instagram link, small copyright line.
All text over videos must be easy to read, with strong contrast (use a soft dark overlay on the videos and clay-white text). Keep the three video sections visually consistent so the page feels like one brand.
The Add media → Generate video tags are where each video goes. Click one to see how it was made.
One prompt and three AI videos, nothing else. The result looks like one brand because the prompt describes it in detail. Read it below and open the video tags to see how each video was made.
A great prompt describes
- Who you are: Name, what you offer, where and for whom.
- Look & feel: Style, theme, exact colors, fonts and logo.
- Sections, in order: Real headlines, copy and buttons for each one.
- Your media: Add media → Generate video for the sections with a video.
- Final touches: Rules that apply to the whole page.
The prompt
Landing page for Ember & Tide, a Nordic sauna and cold-plunge retreat on the rocky coast of the Lofoten Islands, Norway. Wood-fired saunas by the sea, a natural cold-plunge pool and quiet cabins: a place to slow down and reset.
Style: premium, calm, Scandinavian and cinematic. Dark theme. Colors: deep charcoal #0E1113 background, bone white #F2EDE4 text, warm ember orange #E8743B for buttons and accents, sea-glass teal #7FB7B0 for small details. Headings in an elegant serif (e.g. Fraunces), body in a clean sans-serif (e.g. Inter). Generous spacing, large headlines, few words. Logo: "Ember & Tide" in the serif font with a small flame icon.
Sections:
1. Navigation: logo on the left; links: The Ritual, Stays, Pricing; button "Book your stay".
2. Hero: full-screen section with a video background.
How video 1 was made (Hero)
1Click Add media under the prompt, then Generate video.
2
In Generate with AI, describe the starting image (16:9, High 2K). Say where the subject goes and keep an empty, calm area for your text:
A small black wooden barrel sauna standing on dark wet rocks at the edge of a calm Nordic sea at blue hour. A thin column of white smoke rises from its chimney, a warm orange glow shines through its small round window, and gentle waves wash over the rocks below. Snowy mountains fade into soft mist in the distance. Place the sauna and rocks in the right third of the image; keep the left half open and calm: smooth sea and soft, even sky. Photorealistic, cinematic, deep blue and charcoal tones with warm ember-orange light, no people, no text.
3Click Continue and drag the box over the left half, where the sea and sky are calm. The video stays calm there, so the text is easy to read.
4Click Generate video, then Add to prompt, and move the added text here.
What moves: waves on the rocks, rising smoke, the flickering window glow.
Headline: "Fire, ice and the North Sea." Subheadline: "Wood-fired saunas on the rocks of Lofoten, a cold plunge in the Arctic, and nothing else to do." Buttons: "Book your stay" (primary) and "See the ritual" (secondary, outline). Small line below: "Open all year · 68°N".
3. The Ritual: full-width section with a video background.
How video 2 was made (The Ritual)
1Click Add media under the prompt, then Generate video.
2
In Generate with AI, describe the starting image (16:9, High 2K). Say where the subject goes and keep an empty, calm area for your text:
Interior of a dark wooden sauna, close view of a black cast-iron wood stove with glowing embers and small flames behind its glass door, a pile of hot stones on top releasing soft clouds of steam, a wooden ladle resting on the stones. Warm amber light on smooth cedar walls, the rest of the room in deep shadow. Place the stove and steam in the left third of the image; keep the right half dark, calm and simple: plain shadowed cedar wall. Photorealistic, cinematic, deep charcoal with warm ember-orange highlights, no people, no text.
3Click Continue and drag the box over the right half, on the plain cedar wall. The video stays calm there, so the text is easy to read.
4Click Generate video, then Add to prompt, and move the added text here.
What moves: flickering flames, drifting steam, glowing embers.
Eyebrow: "The ritual". Headline: "Heat. Cold. Rest. Repeat." Three short steps in a row, each with a small line icon: "Heat - 15 minutes in a wood-fired sauna at 85°C", "Cold - a plunge into 4°C Arctic water", "Rest - by the fire, wrapped in wool, looking at the sea". Button: "Plan your first visit".
4. Pricing: no video, plain charcoal background with a subtle ember-orange glow. Headline: "Choose your stay". Three cards:
- "Day pass" - 590 NOK per person - 3 hours of saunas and cold plunge, towels and robe, herbal tea. Button "Book a day pass".
- "Cabin night" - 2 900 NOK per night for 2 people - a sea-view cabin, unlimited sauna access, breakfast by the fire. Highlighted as "Most loved", ember-orange border. Button "Book a cabin".
- "Membership" - 9 900 NOK per year - unlimited day visits, 2 cabin nights, a guest pass every month. Button "Become a member".
5. Book your stay: full-screen closing section with a video background.
How video 3 was made (Book your stay)
1Click Add media under the prompt, then Generate video.
2
In Generate with AI, describe the starting image (16:9, High 2K). Say where the subject goes and keep an empty, calm area for your text:
A natural cold-plunge rock pool by the sea at early dawn, its still dark water steaming with soft mist, framed by snow-covered rocks. Light snow is falling. Behind it, a calm sea and a pale pink-and-blue sky above distant snowy mountains. A single wooden ladder leads into the pool. Place the pool and ladder in the lower third of the image; keep the upper half open and calm: soft, even sky. Photorealistic, cinematic, cool blue tones with a faint warm sunrise glow, no people, no text.
3Click Continue and drag the box over the upper half, in the open sky. The video stays calm there, so the text is easy to read.
4Click Generate video, then Add to prompt, and move the added text here.
What moves: falling snow, mist over the water, a gentle sea.
Headline: "The sea is waiting." Subheadline: "Saunas and cold plunge open all year, from first light until late." Button: "Book your stay". Below: small text "Ember & Tide · Henningsvær, Lofoten, Norway".
6. Footer: logo, address, opening hours, Instagram link, small copyright line.
All text over videos must be easy to read, with strong contrast. Keep the three video sections visually consistent so the page feels like one brand.
The Add media → Generate video tags are where each video goes. Click one to see how it was made.
One prompt. Multiple designs.
Make them yours.
Start with a prompt and watch multiple website designs come to life side by side. Then fine-tune the best one visually in Shuffle.
Your vision for the website
Once started, all models run in parallel and generate independent layout variants.
See where else your design could go.
You’ve seen one direction. Upgrade to explore many more and pick the one you love.
- Many more AI generations every month
- Try new styles, layouts and design directions
- Run GPT, Claude and Gemini side by side on every idea
- Polish your favorite and export it as clean code
Redesign the Hacker News website for 2030, including sample entries that could realistically appear on the platform in that year.
Your prompt was replaced with the AI version.
Enter a prompt to start generation.
Prompt Builder
Set your website's structure and styling with a clear, precise prompt.
Configure your sections
Prompt improvement
See how each design looks on a full-width desktop screen. Mobile preview
Check how each design adapts to a small phone screen.Available once generation starts. Run your prompt to preview every design on a phone screen.
See every design at a glance and compare them side by side. 2 per row
Bigger previews that make it easier to judge details. Full-screen carousel
Opens each design full-screen in a carousel.Opens each design full-screen in a carousel. Available once all models finish generating.
Stop ?
Most designs are ready in about 2 minutes. If you stop now, this design won’t be saved. The other models keep generating.
This generation already counts toward your demo limit, so stopping won’t give it back. Need more tries? A Lifetime License includes 1,000 AI generations every month.
Unlock export for all your projects
Download every project you create as production-ready code, for the platform your website already runs on.
You can also import your project into Figma, fully editable. New
Shuffle designs them live in the style of the marked design, so you see how the look holds up across a whole website, not just the homepage.
See this design as a whole website
A homepage shows only part of a design. More pages help you rate it as a whole: how its type, colors and layout hold up from page to page.
This is just the start of your website
With full access, add every page your business needs with your own content, refine each detail in the visual editor, then publish or export clean code.
From first draft to a finished website
Once your designs are ready, pick the one you like and take it all the way: more pages, every detail refined, clean code for the stack you use.
-
01
Open your favorite in the editor
Compare the designs side by side and open the one you like in the Shuffle Editor with a single click.
-
02
Add more pages
Grow your design into a full website. AI designs matching subpages, right here or anytime in the editor.
-
03
Edit visually or with the AI Agent
Click any element to change it, or describe the change in plain words and let the AI apply it.
-
04
Export production-ready code
Download clean code for Next.js, WordPress, Laravel and more, or publish straight from Shuffle.
Your website could look like this. In minutes.
Each of these designs started as a prompt typed into the box above. No templates, no designer, no code: describe your idea and AI builds a complete page you can edit visually, publish or export.
Case study · Booking.com
From live site to full redesign in 2 minutes
One URL, one short brief, four AI models. Follow the whole process below and click any step to jump to that moment in the video.
Your website is next.Same workflow, your URL.
Redesign your siteOne prompt, multiple AI designs, your call
AI Design Arena pits leading AI models against each other so you get diverse website concepts from a single brief - no guesswork, no settling for one output.
Describe your website
Write a prompt with your goals, audience, and style preferences. The more detail you provide, the sharper the results.
AI models compete
Claude, GPT, Gemini, and Kimi receive your prompt simultaneously and generate independent website designs in parallel.
Compare side by side
Review every design in a live preview grid. Each AI interprets your brief differently - discover layouts and ideas you wouldn't have considered.
Pick & customize
Choose the winning design and open it in Shuffle's visual editor. Drag, drop, and tweak components, colors, and typography - no code needed.
Export clean code
Download production-ready code in Next.js, Laravel, WordPress, or plain HTML/CSS - ready to deploy to your project.
Each model brings a unique design perspective. More options mean a stronger final result, chosen on merit rather than luck.
No more regenerating and hoping for something better. See all AI-generated concepts at once and make confident design decisions.
AI gets you 80% there. Shuffle's drag-and-drop editor handles the last 20% so the result is exactly what you envisioned.
Write prompts that win the arena
"SaaS landing page that drives free-trial sign-ups" beats "make a nice website." Clear intent helps every model deliver stronger results.
List the sections you need - hero, features, pricing, testimonials. The AI fills each with relevant content and layout variations.
Add style cues like "dark mode, bold gradients, minimal UI" to anchor the aesthetic and reduce iteration cycles.
Build Faster. Ship Sooner.
Own It Forever.
Join 25,000+ developers, founders and agencies building professional websites, templates, and MVPs 10x faster with Shuffle.
The Shuffle Advantage
All-in-One Toolkit
Get access to everything you need to create beautiful websites: Shuffle Editor, Multi-AI Designer, Components Gallery, and Design CLI.
No Lock-In
Export code to Next.js, Astro, Laravel, WordPress, static HTML, and more.
10x Faster Development
AI creates layouts in seconds so you can stay focused on building, not designing.
The selected plan includes lifetime access to Multi-AI Designer and Shuffle Editor.
What would you like to add?
Use your own files or let AI create something new for your design.
How should the AI use your file?
Pick one. You can always come back and change it.
Generate an image
Describe the image you need, or upload one and tell the AI what to change.
Your image will appear here
Create a looped video
Start with an image, set your frames, and create a video that plays on repeat.
Bring your designs to life with video.
Turn any image into a smooth background video that plays on repeat. Upgrade to create videos for your sections.
- Turn your images into looping background videos
- Create or edit the starting image with AI
- Mark where your text goes, the video keeps it readable
- Add the video to your design in one click
Include in the design
The AI will include it in the generated projects (upload logo, icons, videos, or other visual elements).
Uploading file, please wait
Your prompt extension
Clearly tell the AI where to insert the asset and how to position any related content (for example, "Use it as a logo").
Build websites faster with an AI Visual Editor
Products
Extensions
UI Components
Company
© 2026 Shuffle. All rights reserved.
You’ve already used your free demo
Here’s the design you made on . Each account gets one free Multi-AI Design try.
Each account gets one free Multi-AI Design try, and this one has used it.
Unlock DESIGN.md with a full account
- Generate a reusable design.md that agents can follow to recreate this design in new or existing projects.
- Keep access to your projects and export them in Next.js, Laravel, WordPress, plain HTML, and more.
- Use built-in AI inside Shuffle Editor to refine layouts, content, and visuals after you upgrade.
Demo projects are marked for deletion after 6 hours. To keep your work and unlock design.md, sign up for a full account.
What's new
See what you're getting before you commit.
See your whole project at once
Switch the editor to Grid and every page of your project appears side by side on one canvas. Arrange them freely, zoom in and out, and add as many new pages as you need in a few clicks.
The AI Agent just got a lot more powerful
Describe what you need in one chat and the Agent does the rest: it adds new sections, edits copy and styles, moves blocks around or removes them across your whole page. No modes, no switching, just tell it what to change.
Multi-AI Designer can now regenerate designs
Not quite there yet? Ask for tweaks like missing assets, your logo or other details, and regenerate the design without starting from scratch.