explaingit

pulkitxm/claude-directory

Analysis updated 2026-05-18

172TypeScriptAudience · vibe coderComplexity · 1/5Setup · easy

TLDR

A public showcase of experimental web pages and interactive prototypes generated with Claude Fable 5, each paired with the exact prompt used to create it.

Mindmap

mindmap
  root((claude-directory))
    What it does
      Showcase AI pages
      Prompt included per project
      Around forty entries
    Tech stack
      TypeScript
      React
      Tailwind CSS
    Use cases
      Browse AI generated pages
      Study effective prompts
      Start a prototype from code
    Audience
      Vibe coders
      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

What do people build with it?

USE CASE 1

Browse examples of landing pages, hero sections, and portfolio layouts generated entirely by AI.

USE CASE 2

Read the exact prompt that produced a specific web page to learn effective prompting patterns.

USE CASE 3

Copy a prototype's code as a starting point after reviewing it for production readiness.

What is it built with?

TypeScriptReactTailwind CSSHTML

How does it compare?

pulkitxm/claude-directorymattpocock/sextanttauri-apps/meilisearch-docsearch
Stars172173171
LanguageTypeScriptTypeScriptTypeScript
Last pushed2020-11-252026-07-04
MaintenanceDormantActive
Setup difficultyeasyeasymoderate
Complexity1/52/5
Audiencevibe coderpm founderdeveloper

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

How do you get it running?

Difficulty · easy Time to first run · 5min

Each project is self-contained, review the code and test accessibility before using anything in production.

In plain English

claude-directory is a collection of experimental web pages, hero sections, and interactive prototypes, all generated with Claude Fable 5 (an AI model from Anthropic). The author used the AI to produce the code for each project and gathered them here as a public showcase. The repository description calls the work "vibe coded," meaning the projects were created quickly through AI generation rather than careful manual development, and the README advises reviewing the code, checking dependencies, and testing accessibility before using anything in production. Each project lives in its own self-contained folder. The types of projects included are landing pages for fictional products, hero sections with full-screen video backgrounds, portfolio layouts, sign-up forms, and visual experiments with effects like liquid glass styling, scroll-scrubbed video, shader-based backgrounds, and animated text reveals. Most use React with TypeScript and Tailwind CSS, though a few are single HTML files with no framework. Alongside each project's code, the folder includes a prompt.md file containing the exact text that was given to the AI to produce the output. This makes the collection useful for people curious about what kinds of prompts generate what kinds of results. The project table in the README lists around forty entries with a brief description and the technology stack for each. The repository accepts contributions. Adding a project requires including the prompt file and a short screen recording of the page working. Pull requests are reviewed and merged by Claude Opus (the AI model) rather than a human maintainer. There are no issue templates or contribution guidelines beyond those two requirements.

Copy-paste prompts

Prompt 1
Show me the prompt.md file behind one of the liquid glass style projects in claude-directory.
Prompt 2
Find a hero section example in claude-directory that uses full-screen video backgrounds.
Prompt 3
Explain what contributing a new project to claude-directory requires.

Frequently asked questions

What is claude-directory?

A public showcase of experimental web pages and interactive prototypes generated with Claude Fable 5, each paired with the exact prompt used to create it.

What language is claude-directory written in?

Mainly TypeScript. The stack also includes TypeScript, React, Tailwind CSS.

How hard is claude-directory to set up?

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

Who is claude-directory for?

Mainly vibe coder.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.