claude-directory — AI-generated UI experiments built with Claude
An open-source gallery of web UI experiments generated with Claude (Fable 5) — landing pages, hero sections, GLSL shaders, design systems, animations, portfolios, and 3D/WebGL scenes. Every project is self-contained, ships its prompt, and includes a recorded demo. Browse the live directory at pulkitxm.com/claude-directory.
Built mostly with React, TypeScript, Vite, Tailwind CSS, Three.js, Framer Motion, and GSAP (plus plenty of framework-free HTML/CSS/JS) — a reference collection of copy-pasteable, AI-generated front-end components and templates for anyone exploring what Claude can build on the web.
Categories: Hero sections · Landing pages · Shaders · UI design systems · Components & UI · Portfolios · Animations & loaders · 3D & games · Templates
Each project folder includes the originating prompt as prompt.md, preserved alongside the generated code. Some prompts were inspired by or adapted from public prompt/design references, including cnemri's gist, motionsites.ai, lafys.com, designprompts.dev, 21st.dev, superdesign.dev, and landinghero.ai.
Heads up: every project here was generated with Claude Fable 5 — this whole repo is vibe coded. Use it with care: review the code, check dependencies, verify accessibility/responsiveness, and run the local project checks before shipping anything to production.
Contributing
Got a cool experiment? Toss it in. No issues, no templates, no ceremony — just shoot a PR.
Only two things are non-negotiable:
prompt.md — the prompt you used to generate the project, dropped in the project folder.demo.mp4 — a short screen recording of the thing actually working.
Beyond that, do whatever: any stack, any vibe, as long as your project lives in its own self-contained folder. Bonus points if you add a row to the table below, but no stress if you forget.
Once your demo.mp4 is in, generate its poster so the directory can show a sharp placeholder while the video loads (node scripts/generate-posters/generate-posters.mjs). This writes a poster.jpg next to the video and updates the root posters.json manifest — see scripts/generate-posters.
All PRs get reviewed and merged by Claude Opus, so don't be shy — if the prompt and demo are there, you're golden. 🤙
Projects are grouped by what they are. Each lives in its category folder (e.g. ./hero-sections/<project>/).