Awesome Vibe Coding Websites

269 original website templates and 556 live demos built by AI coding agents — each with the exact prompt and a DESIGN.md.
Pick one, swap the [VARIABLES], paste it into Claude Code, Cursor or Codex, and ship your own.

▶ Browse all 556 live demos  ·  简体中文  ·  Use with your agent

Awesome Vibe Coding Websites is a free, open library of 269 original vibe coding website templates and 556 live demos, built by 8 AI models — Gemini 4 Carbon, Kimi K3.1 Pro, GPT-6.1 Sol, Claude Opus 5.5, Grok 4.7, Claude Sonnet 5.5, DeepSeek V4.1 Flash and GLM-5.3. Every template ships the exact prompt that built its demo and a DESIGN.md, so you can paste it into Claude Code, Cursor, Codex or any other AI coding tool and get the same kind of site: landing pages, SaaS sites, portfolios, online stores, dashboards, 3D scenes and browser games. Preview every site live on VibeFather.

Categories: Landing Pages & Product Launches ₁₃ · SaaS, AI & App Sites ₄₃ · Games, 3D & Interactive Toys ₃₇ · Interactive Explainers & Slides ₂₂ · Portfolios, Studios & Blogs ₃₃ · E-commerce & Product Pages ₃₀ · Local Business & Services ₆₅ · Restaurants, Hotels & Travel ₁₂ · Events & Communities ₁₀ · More Landing Pages ₄

Same prompt, two AI models

Each pair below was built from the identical prompt by two different models — the clearest way to see how they differ at front-end design. All 9 model comparisons →

Y2K Chrome Fashion Drop Page Claude Opus 5.5 vs Gemini 4 Carbon · all 15

Music Festival Website Claude Sonnet 5.5 vs Gemini 4 Carbon · all 8

3D Flower Garden Toy DeepSeek V4.1 Flash vs Kimi K3.1 Pro · all 70

Templates

Landing Pages & Product Launches

_{13 templates · One-page launches, waitlists, pitches and campaign pages.}

Luxury Watch Brand Website PRO A quiet-luxury watch brand site with a craft scroll story and a dial-and-strap configurator. GLM-5.3 · DeepSeek V4.1 Flash · Live demo · Prompt	Perfume Product Page A blush-and-amber perfume page with an unfolding scent pyramid and mood photography. GLM-5.3 · DeepSeek V4.1 Flash · Live demo · Prompt
Quirky Gadget Product Launch Page PRO A bold Memphis product launch with a draggable 3D gadget, tactile demos, and a local preorder. GPT-6.1 Sol · GLM-5.3 · Live demo · Prompt	Space Tech Startup Website PRO Deep-space startup site with an animated orbit diagram, ticking telemetry and a launch manifest rail. GLM-5.3 · DeepSeek V4.1 Flash · Live demo · Prompt

_{↑ Back to top}

SaaS, AI & App Sites

_{43 templates · Software marketing sites, app landings, dashboards and docs.}

Template Library Landing Page Near-black template-library landing with an auto-scrolling wall of browser demos and one acid-lime accent. Claude Opus 5.5 · Live demo · Prompt	WebGL Gradient SaaS Landing Page Bright SaaS landing page with a cursor-reactive WebGL gradient hero and floating code-drawn product panels. Claude Opus 5.5 · Claude Sonnet 5.5 · DeepSeek V4.1 Flash · Live demo · Prompt
AI Music Generator Landing Page PRO Holographic music software with original bundled audio, a real spectrum, and an honest local demo workflow. GPT-6.1 Sol · GLM-5.3 · Live demo · Prompt	Kids Learning App Landing Page A bright clay learning app page with playful lessons, age-aware paths, and a useful parent view. GPT-6.1 Sol · GLM-5.3 · Live demo · Prompt

_{↑ Back to top}

Games, 3D & Interactive Toys

_{37 templates · Browser games, Three.js scenes and playful web toys.}

3D Flower Garden Toy Plant a living 3D meadow, tune the wind, and save your garden as a snapshot. Kimi K3.1 Pro · DeepSeek V4.1 Flash · Live demo · Prompt	Indie Game Launch Page PRO A painterly indie game launch page with parallax scenes, a world map teaser and a wishlist close. GLM-5.3 · DeepSeek V4.1 Flash · Live demo · Prompt
Snow Globe Toy Shake a miniature world, watch the snow settle, and leave a message on its brass base. Kimi K3.1 Pro · DeepSeek V4.1 Flash · Live demo · Prompt	Harbor Town Delivery Game PRO Drive a tiny van, follow the tram lines, and finish six cozy harbor deliveries before time runs out. Kimi K3.1 Pro · DeepSeek V4.1 Flash · Live demo · Prompt

_{↑ Back to top}

Interactive Explainers & Slides

_{22 templates · Scrollytelling explainers, playable diagrams, slide decks and reports.}

Interactive Science Explainer PRO A calm, science-magazine scrollytelling explainer with a live canvas wave, a phase slider and a quiz. Claude Opus 5.5 · Live demo · Prompt	3D Colosseum History Explorer PRO Explore an ancient amphitheater through arches, cutaways and changing construction states. GPT-6.1 Sol · Live demo · Prompt
3D Cathedral Light Tour Walk through a procedural Gothic nave and reshape its colored daylight, one architectural stop at a time. Kimi K3.1 Pro · DeepSeek V4.1 Flash · Live demo · Prompt	Carbon Cycle Scroll Explainer Illustrated scroll story of the carbon cycle with live particle flows and an emissions scenario slider. Claude Opus 5.5 · Gemini 4 Carbon · Live demo · Prompt

_{↑ Back to top}

Portfolios, Studios & Blogs

_{33 templates · Personal sites, creative portfolios, agencies and publications.}

Interactive 3D Globe Travel Journal PRO A travel writer's journal where routes arc across a dotted 3D globe as readers scroll from stop to stop. Claude Opus 5.5 · Claude Sonnet 5.5 · DeepSeek V4.1 Flash · Live demo · Prompt	Fashion Lookbook Website PRO A monochrome fashion lookbook with vertical-scroll horizontal chapters and spec-card look overlays. GLM-5.3 · DeepSeek V4.1 Flash · Live demo · Prompt
Kinetic Typography Portfolio PRO A motion designer portfolio where giant variable type splits, stretches and re-forms as you scroll. Claude Opus 5.5 · Claude Sonnet 5.5 · DeepSeek V4.1 Flash · Live demo · Prompt	3D Photo Gallery An endless 3D corridor of framed photographs you walk through, with rooms, a lightbox and full credits. Claude Opus 5.5 · Claude Sonnet 5.5 · Gemini 4 Carbon · Live demo · Prompt

_{↑ Back to top}

E-commerce & Product Pages

_{30 templates · Storefronts, single-product pages and limited drops.}

Cinematic Scroll Product Story PRO A film-style scroll story for a hardware launch: pinned scenes, typed captions, counting specs and preorder. Claude Opus 5.5 · Claude Sonnet 5.5 · DeepSeek V4.1 Flash · Live demo · Prompt	Y2K Chrome Fashion Drop Page A limited clothing drop page with a liquid-metal 3D wordmark, live countdown and sticker-slapped products. Claude Opus 5.5 · Claude Sonnet 5.5 · Gemini 4 Carbon · Live demo · Prompt
Liquid Glass Product Page PRO A liquid-glass preorder page for premium hardware: refractive panels over product photos, specs and editions. Claude Opus 5.5 · Claude Sonnet 5.5 · Gemini 4 Carbon · Live demo · Prompt	Bridal Boutique Website PRO An editorial blush-and-wine bridal boutique with a style quiz, filterable gown collection and party-size appointments. GLM-5.3 · Kimi K3.1 Pro · Live demo · Prompt

_{↑ Back to top}

Local Business & Services

_{65 templates · Clinics, studios, trades, finance and other businesses that win customers online.}

Aquarium Exhibits and Tickets Website A deep-blue aquarium site with drifting caustic light, zone exhibits, a feeding schedule and timed tickets. GLM-5.3 · DeepSeek V4.1 Flash · Live demo · Prompt	Hot Air Balloon Rides Website A dawn-soft balloon ride site with a flight timeline, packages, gift vouchers, and a saved booking request. GLM-5.3 · DeepSeek V4.1 Flash · Live demo · Prompt
Boxing and Strength Gym Website Gritty two-page gym site with a filterable class timetable, pricing toggle and free-trial booking form. Claude Opus 5.5 · Claude Sonnet 5.5 · Live demo · Prompt	Private K-12 School Website A bright red-and-navy school site with day-in-the-life timelines per division and a tuition-and-aid estimator that shows its math. GLM-5.3 · Kimi K3.1 Pro · Live demo · Prompt

_{↑ Back to top}

Restaurants, Hotels & Travel

_{12 templates · Restaurants, cafes, hotels, tours and places people book.}

Sushi Omakase Restaurant Website A dark, quiet-luxury omakase counter site with scroll-served courses and a seat-picker diagram. GLM-5.3 · DeepSeek V4.1 Flash · Live demo · Prompt	Boutique Hotel Website PRO A three-page boutique hotel site with real coastal photos, a rooms catalogue and a working booking widget. Claude Opus 5.5 · Claude Sonnet 5.5 · Gemini 4 Carbon · Live demo · Prompt
Craft Brewery Taproom Website A screen-print label-art brewery site with a filterable tap list and a flight builder that pours in code. GLM-5.3 · Kimi K3.1 Pro · Live demo · Prompt	Personal Chef Service Website Moody personal-chef site with tasting-menu cards and a per-guest pricing calculator built in. GLM-5.3 · DeepSeek V4.1 Flash · Live demo · Prompt

_{↑ Back to top}

Events & Communities

_{10 templates · Festivals, conferences, clubs and community pages.}

Music Festival Website PRO A three-page festival site with a sound-reactive hero, filterable line-up, illustrated map and ticket table. Claude Opus 5.5 · Claude Sonnet 5.5 · Gemini 4 Carbon · Live demo · Prompt	Techno Club Night Event Page An acid club poster with real audio reaction, set times, a venue diagram, and local ticket planning. GPT-6.1 Sol · GLM-5.3 · Live demo · Prompt
Night Market Food Festival Neon night-market page with a filterable vendor map, two-stage schedule, and token ticket tiers. GLM-5.3 · DeepSeek V4.1 Flash · Live demo · Prompt	Rocket Launch Countdown Page PRO Night-pad countdown with a drag-to-orbit rocket and a replayable ascent. Grok 4.7 · Live demo · Prompt

_{↑ Back to top}

More Landing Pages

_{4 templates · Single-page sites for brands, causes and ideas.}

Pet Food Subscription Page Friendly pet food page with a plan-building quiz, live portions and prices, all client-side. GLM-5.3 · DeepSeek V4.1 Flash · Live demo · Prompt	City Tourism Guide Website A sun-bright city guide with color-block categories, day itineraries, and a browser-saved trip shortlist. GLM-5.3 · DeepSeek V4.1 Flash · Live demo · Prompt
Theme Park Website A candy-colored theme park site with a filterable illustrated map and a plan-your-day checklist. GLM-5.3 · DeepSeek V4.1 Flash · Live demo · Prompt	Online Course Sales Page PRO Long-form course sales page with the instructor's portrait, curriculum accordion, sample results, payment plans and a plain guarantee. GLM-5.3 · Live demo · Prompt

_{↑ Back to top}

Browse more

By site type: Landing Page ₁₂₇ · E-commerce ₃₂ · Interactive Explainer ₂₃ · Interactive Toy ₂₀ · Browser Game ₁₈ · Portfolio ₁₆ · Personal Site ₁₅ · SaaS ₁₃ · App ₁₁ · Agency ₉ · Blog ₉ · Dashboard ₉ · Event ₉ · Restaurant ₉ · App Landing ₇ · Docs ₅ · Real Estate ₄ · Hotel ₃ · Slide Deck ₃ · Directory ₂

By style: Minimal ₁₃₆ · Editorial ₁₃₁ · Dark ₈₆ · Playful ₇₆ · Swiss ₂₆ · Luxury ₂₁ · Retro ₁₆ · Brutalist ₁₃ · Glass ₁₃ · Hand-drawn ₁₂ · Aurora ₈ · Bold ₇ · Terminal ₇ · Bento Grid ₆ · Pixel Art ₃ · Warm ₃ · Industrial ₂

By AI model: Gemini 4 Carbon ₁₅ · Kimi K3.1 Pro ₉₀ · GPT-6.1 Sol ₂₀ · Claude Opus 5.5 ₆₇ · Grok 4.7 ₂₀ · Claude Sonnet 5.5 ₃₆ · DeepSeek V4.1 Flash ₁₇₉ · GLM-5.3 ₁₂₉

Model vs model: Claude Opus 5.5 vs Gemini 4 Carbon ₁₅ · Claude Sonnet 5.5 vs Gemini 4 Carbon ₈ · DeepSeek V4.1 Flash vs Kimi K3.1 Pro ₇₀ · GLM-5.3 vs Kimi K3.1 Pro ₂₀ · GLM-5.3 vs GPT-6.1 Sol ₁₀ · Claude Opus 5.5 vs Claude Sonnet 5.5 ₃₅ · Claude Opus 5.5 vs DeepSeek V4.1 Flash ₁₃ · Claude Sonnet 5.5 vs DeepSeek V4.1 Flash ₁₄ · DeepSeek V4.1 Flash vs GLM-5.3 ₉₄

Use it with your AI coding agent

1. Copy a prompt. Open any template folder, copy prompt.md, replace the [VARIABLES] with your own brand, copy and colors, and paste it into Claude Code, Codex, Cursor, Windsurf, Gemini CLI or another coding agent.
2. Or pull it from your terminal:

   npx vibefather add <slug>        # writes prompt.md and DESIGN.md into ./vibefather/<slug>/
   

3. Or give your agent the Skill, so it can search and build templates by itself:

   npx skills add liyupi/awesome-vibe-coding-websites
   

4. Or connect the MCP server https://mcp.vibefather.ai (tools: search_templates, get_prompt, get_design_md).

Every prompt.md has the same shape — Brief → Stack → Variables → Design → Pages & sections → Assets → Don'ts — so your agent knows exactly what to change and what to keep.

FAQ

What is vibe coding?

Vibe coding means describing the software you want in plain language and letting an AI coding agent write the code. The prompts here are written for exactly that: each one fixes the stack, pages, sections, copy, colors, fonts and motion, so the agent builds a complete, polished website instead of a generic first draft.

Which AI models built these websites?

Gemini 4 Carbon (15 sites), Kimi K3.1 Pro (90 sites), GPT-6.1 Sol (20 sites), Claude Opus 5.5 (67 sites), Grok 4.7 (20 sites), Claude Sonnet 5.5 (36 sites), DeepSeek V4.1 Flash (179 sites) and GLM-5.3 (129 sites). Every live demo is labeled with the model and the coding tool that built it, and 9 comparison pages show two models side by side on the same prompt.

Are the prompts free?

204 of the 269 prompts are free to read and use for personal, non-commercial projects (CC BY-NC 4.0), and every DESIGN.md is free. 65 Pro templates publish their brief, stack and variables here; the full prompt, the source code of each live demo and a commercial license come with VibeFather Pro.

Will my site look like the demo?

Each demo was built from exactly the prompt in its folder, with nothing added by hand. Run the same prompt with a capable model and you get a very close result; change the variables and the agent rewrites copy, imagery and details around your own content.

How these sites are made

• Every site is original: written and generated for VibeFather with AI coding agents, then checked on desktop and mobile before it goes live.
• Inspiration is credited inside each template. We never copy another site's code, copy, images or logos, and no template is named after a brand.
• Each demo was built from the exact prompt you see here — nothing added.
• This repository is regenerated from vibefather.ai every day, so new templates and new models show up here automatically. Watch → Custom → Releases to hear about new models.

Contributing

Spotted a broken demo or want a site type we don't have yet? Open an issue. The files are generated from the VibeFather catalog, so pull requests to them can't be merged.

License

Prompts, DESIGN.md files and text: CC BY-NC 4.0 — free for personal and non-commercial use. Commercial use, client work and the full source code of every demo come with VibeFather Pro. Demo previews are for viewing.

▶ See all 556 live demos on VibeFather