Website Building

Make a Vibe-Coded Website Look Modern

14 prompt libraries and design galleries, from MotionSites to Transitions.dev, that turn a boring vibe-coded website into a modern one, with the prompts.

About 1 hour8 steps4 promptsBeginner

Tools How to use Step-by-step guide Prompts Monetize it Built with

01 · Tools

AI tools you’ll use.

MotionSitesWhole-page website prompts: heroes, landing pages, 3D sites and animated backgrounds for Lovable, Bolt, Cursor and Claude.

VibePromptsA UI prompt library for vibe coders: 286 layout prompts in 15 categories that return clean Tailwind CSS.

SceneAIA prompt library of cinematic hero sections, landing pages, animated backgrounds and gradients.

Transitions.devUI transitions for web apps (modals, tabs, number pop-ins, shimmer text) that your coding agent can install.

OriginkitA free animated component library: 547 WebGL backgrounds, text effects, cursors, galleries, loaders and buttons.

OpenMotionA Mac app that turns a prompt into editable motion scenes and exports a launch video.

MengTo SkillsFree agent skills by Meng To that turn a screen recording or a site you admire into a detailed prompt.

Navbar GalleryEvery navbar pattern worth copying: static, dropdown, mega menu, sidebar, search bar and full-screen.

FooterFooters that don't feel like an afterthought, filtered by style: typographic, grid, animated, dark.

CTA.galleryCalls to action that actually convert: buttons, buy sections, forms, pop-ups and newsletter blocks.

UnsectionFull website sections from real products, ready to lift: hero, features, pricing, FAQ, team, footer.

BentoGridsThe cleanest bento grid layouts, filtered by web design or animation, light or dark.

404s404 pages worth landing on: a gallery of creative page-not-found designs.

60fpsThe tiny motion details that read as expensive: 2,000+ recorded animations from the best apps.

02 · How to use

How to use each one.

How to use MotionSitesWhole-page website prompts: heroes, landing pages, 3D sites and animated backgrounds for Lovable, Bolt, Cursor and Claude.

Open motionsites.ai and filter by your kind of site: Portfolio, SaaS, Agency, 3D Website.
Open a design you like and copy its prompt.
Paste it into the Restyle prompt (prompt 2) where it says DESIGN PROMPT, so the look changes and your words stay.
Check the result at laptop and phone width before you move on.

03 · Guide

Step-by-step guide.

8 of 8 open

SetupOpen your site in your AI builder

Open the project in Claude Code, Lovable, Bolt or Cursor. Work on a copy or a new branch so you can go back.

PromptRun the design audit

Prompt 1 lists what makes each section look generic and the five changes that matter most. Nothing changes yet.

StepPick one look

Browse MotionSites, SceneAI or VibePrompts and copy one prompt for the whole site. One reference, not three.

PromptRestyle the whole site

Paste the copied prompt into prompt 2. It changes the fonts, colours, spacing and layout and keeps all your words.

PromptSwap the weak sections

Screenshot a navbar, footer, CTA, bento grid or 404 page from the galleries and rebuild that one section with prompt 3.

PromptAdd motion last

Install the free transitions (npx transitions-dev add --free), borrow a detail from 60fps or Originkit, and run prompt 4.

TestCheck it on your phone

Open every page at phone width and with reduced motion turned on. Fix one thing at a time in one sentence each.

HandoverMake a launch video

Describe your site scene by scene in OpenMotion, export the video and post it with a before-and-after.

04 · Prompts

The prompts that built it.

prompt-1.txt

Look at every page of this website as a senior web designer would. Do not change any code yet.

List what makes it look generic or AI-made, section by section: the fonts, the colours, the spacing, the hero, the navbar, the cards, the call to action, the footer and the 404 page. For each one, say in one line what a modern, premium version would do instead.

Then give me the five changes that would make the biggest difference, in order.

05 · Monetize it