gitwtfhub

wtf is xuanxuan-prompts?

xuanxuan321/xuanxuan-prompts — explained in plain English

Analysis updated 2026-05-18

148ShellAudience · vibe coderComplexity · 2/5Setup · easy

TL;DR

A collection of detailed prompts for AI coding assistants that recreate polished, animated landing pages, each paired with a preview clip.

Mindmap

mindmap
  root((xuanxuan-prompts))
    What it does
      Prompt library
      Recreates web pages
      Preview clips included
    Tech stack
      React and Vite
      Tailwind
      Three.js
    Use cases
      Generate landing pages
      Preview before building
      Clone real websites
    Audience
      Vibe coders
      Web designers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Copy a prompt file and hand it to Claude Code or Codex to generate a polished landing page.

REASON 2

Preview a page's finished look before generating it, using the included animated clip.

REASON 3

Recreate a real existing website offline using a website-archiving skill and a matching prompt.

REASON 4

Use the mp4-to-gif script to turn your own recordings into preview clips for a new prompt.

What's in the stack?

ShellReactViteTailwindThree.js

How it stacks up

xuanxuan321/xuanxuan-promptsdockur/proxmoxk-dense-ai/science-superpowers
Stars148149140
LanguageShellShellShell
Setup difficultyeasyeasy
Complexity2/52/5
Audiencevibe coderops devopsresearcher

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 5min

Requires access to an AI coding assistant like Claude Code or Codex to run the prompts against.

No license is stated in the README, so reuse and redistribution terms are unclear.

Wtf does this do

xuanxuan-prompts is a collection of detailed prompts you can hand to an AI coding assistant to recreate polished, visually elaborate web pages. Each subfolder in the repository represents one example website and contains a prompt file spelling out every detail needed to rebuild it: fonts, colors, animations, asset links, and how the page's pieces fit together. Alongside each prompt sits a short preview video, shown first as a lightweight cover image so the page does not load every animation at once, that you can click to see what the finished site actually looks like. Using it is simple. You pick a folder whose style you like, copy the entire contents of its prompt file, and paste it into a coding assistant such as Claude Code or Codex, asking it to build the project from that prompt. The assistant then generates the full project, sometimes a React and Vite application and sometimes a single self-contained HTML file, and running it produces a site matching the preview. The collection currently includes examples like a dark, glass-styled landing page for an AI design studio, a scroll-triggered hero section for a geology brand, a minimalist AI product page with a scrolling video background, and a three dimensional basketball storefront built with Three.js. A few entries take a different approach: rather than describing a page from scratch, they instruct the assistant to install a website-archiving skill first and use it to recreate an existing real website offline, such as a Formula One driver's site or a WebGL-heavy creative studio homepage. All videos, images, and animated previews referenced in the prompts are hosted on public CDN links that generated code can pull directly, and a small script in the repository can convert any local video into the animated preview format used throughout. The author says the collection will keep growing and welcomes contributions of new prompts and preview clips. This is useful for developers and designers who want ready-made, detailed prompts to quickly produce impressive-looking landing pages with an AI assistant rather than writing one from a blank page.

Yoink these prompts

Prompt 1
Take the prompt.md from the liquidGlassAgency folder and generate that project for me.
Prompt 2
Help me adapt one of these prompts to use my own brand colors and copy.
Prompt 3
Explain how the basketball folder's prompt builds its 3D scene with Three.js.
Prompt 4
Walk me through using the website-offline-archive skill to clone a real site like these examples.

Frequently asked questions

wtf is xuanxuan-prompts?

A collection of detailed prompts for AI coding assistants that recreate polished, animated landing pages, each paired with a preview clip.

What language is xuanxuan-prompts written in?

Mainly Shell. The stack also includes Shell, React, Vite.

What license does xuanxuan-prompts use?

No license is stated in the README, so reuse and redistribution terms are unclear.

How hard is xuanxuan-prompts to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is xuanxuan-prompts for?

Mainly vibe coder.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.