pulkitxm/claude-directory

Open-source AI interfaces built with Claude (Fable 5) including hero sections, GLSL shaders, design systems, animations, 3D components and and landing pages, in React, Tailwind, and Three.js. Plug them into your AI agent and ship faster.

What it solves

It provides a curated, open-source gallery of high-fidelity web UI experiments and front-end components that were generated using Claude (specifically Fable 5). It serves as a reference for developers and designers to see what AI is capable of building in terms of modern web interfaces, animations, and 3D scenes.

How it works

The repository contains a collection of self-contained project folders. Each project includes the generated code (using stacks like React, TypeScript, Vite, Tailwind CSS, Three.js, and GSAP) and the specific prompt used to create it (prompt.md). This allows users to copy-paste components or study the prompting techniques used to achieve specific visual results.

Who it’s for

  • Front-end developers looking for AI-generated UI inspiration or copy-pasteable templates.
  • Prompt engineers interested in seeing how to prompt LLMs for complex web design and layout.
  • AI enthusiasts exploring the capabilities of Claude for "vibe coding" and rapid prototyping.

Highlights

  • Diverse Categories: Includes hero sections, landing pages, GLSL shaders, design systems, 3D/WebGL scenes, and animations.
  • Prompt Transparency: Every project ships with its originating prompt, making the generation process reproducible.
  • Modern Tech Stack: Utilizes industry-standard tools like Framer Motion, Three.js, and Tailwind CSS.
  • Live Directory: A hosted gallery allows users to browse the experiments visually before diving into the code.

Related

  • Project
    Piebald-AI/claude-code-system-prompts

    A comprehensive collection of extracted system prompts from Claude Code, providing transparency into the instructions used by its various agents and tools.

  • Project
    vibe-motion/skills

    A collection of specialized animation and motion graphics skills for AI agents to generate professional visual assets, ranging from 3D renders to brand promotional videos.

  • Project
    plugin87/ux-ui-agent-skills

    UX/UI Agent Skills is a Claude‑agent knowledge kit that provides design tokens, component specs, accessibility audits, and 17 slash‑command‑style “skills” to let the AI act as a senior UI/UX architect. It can generate token‑driven code for any framework (React, Vue, SwiftUI, Flutter, etc.), enforce WCAG 2.2 compliance via 37 CI gates, and includes a library of 138 design systems for aesthetic direction. Install via `npx ux-ui-agent-skills init`; the agent reads a `CLAUDE.md` brief and runs the skills or natural‑language prompts to produce design assets, code, and audits.

  • Project
    anthropics/claude-quickstarts

    A collection of reference implementations and starter projects for building applications with the Claude API, covering agentic workflows, computer use, and browser automation.

  • Project
    s0xDk/refactoring-ui-skill

    A Claude Code skill that teaches the AI concrete, mechanical design rules from the book Refactoring UI to create professional-looking user interfaces.