Ghost-UI

Steal like an artist. Turn any website's UI into your component library in 5 seconds.

Ghost-UI captures interactions from any live website and generates clean, production-ready React/Vue/Svelte components using AI vision. See a beautiful animation on Apple's site? Record it. Get working code.

The Problem

You: *sees amazing navbar animation on Stripe*
You: *opens DevTools*
You: *sees 47 minified CSS classes and obfuscated JS*
You: *cries*
You: *spends 3 hours recreating from scratch*

The Solution

You: *clicks Ghost-UI extension*
You: *hovers over the navbar*
You: *clicks "Stop"*
Ghost-UI: "Here's your Navbar.tsx with Framer Motion animations"
You: *ships feature before lunch*

Quick Start

Browser Extension (Recommended)

1. Install from Chrome Web Store or Firefox Add-ons
2. Navigate to any website
3. Click the Ghost-UI icon
4. Select an element or record an interaction
5. Get your code!

CLI (For automation)

# Install globally
npm install -g ghost-ui

# Capture a static element
ghost-ui capture https://stripe.com --selector ".navbar" --output Navbar.tsx

# Record an interaction
ghost-ui record https://apple.com --duration 5s --output HeroAnimation.tsx

Features

Visual Element Capture

Point and click to capture any element. Ghost-UI analyzes the visual appearance and generates semantic code.

# What you see
┌─────────────────────────────────┐
│  ████  Stripe                   │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━   │
│  Products ▼  Solutions ▼  ...   │
└─────────────────────────────────┘

# What you get
export function Navbar() {
  return (
    <nav className="flex items-center justify-between px-6 py-4">
      <Logo />
      <NavLinks />
      <CTAButton />
    </nav>
  );
}

Interaction Recording

Record hover states, click animations, scroll effects, and more.

// Captured from: apple.com hero section
export function HeroSection() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, ease: "easeOut" }}
    >
      <h1 className="text-6xl font-semibold tracking-tight">
        iPhone 15 Pro
      </h1>
      <motion.p
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.3 }}
      >
        Titanium. So strong. So light. So Pro.
      </motion.p>
    </motion.div>
  );
}

Multiple Output Formats

Smart Animation Detection

Ghost-UI doesn't just screenshot—it understands motion:

• CSS Transitions: Captures timing, easing, properties
• CSS Animations: Extracts keyframes
• JS Animations: Records WAAPI, GSAP patterns
• Scroll Effects: Detects parallax, reveal animations
• Hover States: Captures interaction feedback

How It Works

┌─────────────────────────────────────────────────────────────────┐
│                         GHOST-UI                                │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌──────────────┐    ┌──────────────┐    ┌─────────────────┐   │
│  │   Browser    │───▶│   Recorder   │───▶│   Screenshot    │   │
│  │  Extension   │    │  (Playwright)│    │   + DOM Snap    │   │
│  └──────────────┘    └──────────────┘    └────────┬────────┘   │
│                                                    │            │
│                                                    ▼            │
│  ┌──────────────┐    ┌──────────────┐    ┌─────────────────┐   │
│  │   Output     │◀───│   Code Gen   │◀───│  Vision Model   │   │
│  │  Component   │    │   Engine     │    │  (GPT-4o/etc)   │   │
│  └──────────────┘    └──────────────┘    └─────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

1. Capture: Browser extension or Playwright captures screenshot + computed styles + DOM structure
2. Analyze: Vision-Language Model analyzes the visual design and interaction patterns
3. Generate: Code generation engine outputs clean, semantic code in your chosen framework
4. Refine: Optional iteration loop to adjust styling or behavior

Configuration

Create ghost-ui.config.ts in your project:

import { defineConfig } from 'ghost-ui';

export default defineConfig({
  // Output settings
  output: {
    framework: 'react',        // 'react' | 'vue' | 'svelte' | 'vanilla'
    styling: 'tailwind',       // 'tailwind' | 'css-modules' | 'styled-components'
    animation: 'framer-motion', // 'framer-motion' | 'css' | 'gsap'
    typescript: true,
  },

  // AI settings
  ai: {
    provider: 'openai',        // 'openai' | 'anthropic' | 'local'
    model: 'gpt-4o',
    creativity: 0.3,           // 0-1, lower = more faithful to original
  },

  // Component settings
  component: {
    extractColors: true,       // Extract to CSS variables
    useSemanticHTML: true,     // Use proper HTML elements
    addA11y: true,             // Add ARIA attributes
    responsive: true,          // Generate responsive variants
  },

  // Recording settings
  recorder: {
    captureHover: true,
    captureClick: true,
    captureScroll: true,
    maxDuration: 10000,        // ms
  },
});

CLI Commands

# Capture a single element
ghost-ui capture <url> --selector <css-selector>

# Record an interaction
ghost-ui record <url> --duration <time>

# Interactive mode (opens browser)
ghost-ui interactive <url>

# Convert existing screenshot to component
ghost-ui from-image ./screenshot.png

# Batch process multiple elements
ghost-ui batch --config ./captures.json

Examples

# Capture Stripe's pricing table
ghost-ui capture https://stripe.com/pricing \
  --selector ".pricing-table" \
  --framework react \
  --output PricingTable.tsx

# Record Apple's scroll animation
ghost-ui record https://apple.com/iphone \
  --duration 5s \
  --scroll \
  --output ScrollReveal.tsx

# Capture with custom AI prompt
ghost-ui capture https://linear.app \
  --selector ".issue-card" \
  --prompt "Make it dark mode with purple accents"

API Usage

import { GhostUI } from 'ghost-ui';

const ghost = new GhostUI({
  ai: { provider: 'openai', model: 'gpt-4o' },
  output: { framework: 'react', styling: 'tailwind' },
});

// Capture from URL
const component = await ghost.capture({
  url: 'https://stripe.com',
  selector: '.hero-section',
});

console.log(component.code);
// → React component code

console.log(component.styles);
// → Extracted styles

console.log(component.assets);
// → Referenced images/icons

VS Code Extension

Install the Ghost-UI VS Code Extension for inline component generation:

1. Open Command Palette (Cmd+Shift+P)
2. Run "Ghost-UI: Capture Component"
3. Enter URL and selector
4. Component appears in your editor

Local AI Support

Run completely offline with local models:

// ghost-ui.config.ts
export default defineConfig({
  ai: {
    provider: 'local',
    endpoint: 'http://localhost:11434',  // Ollama
    model: 'llava:34b',                   // Vision model
  },
});

Supported local providers:

• Ollama with LLaVA
• LocalAI
• Any OpenAI-compatible endpoint

Ethical Usage

Ghost-UI is designed for learning and inspiration, not theft:

• ✅ Learn from great designs
• ✅ Understand animation techniques
• ✅ Speed up prototyping
• ✅ Study accessibility patterns
• ❌ Don't copy proprietary designs verbatim
• ❌ Don't violate copyright
• ❌ Don't pass off others' work as your own

Always credit inspiration and create original work.

Comparison

Roadmap

• Chrome extension
• Firefox extension
• React + Tailwind output
• Vue 3 support
• Svelte support
• Animation capture
• Safari extension
• React Native output
• Figma plugin (export TO Figma)
• Design system extraction
• Component library generation

Contributing

We welcome contributions! See CONTRIBUTING.md for guidelines.

git clone https://github.com/your-org/ghost-ui.git
cd ghost-ui
pnpm install
pnpm dev

License

MIT © Ghost-UI Contributors

Stop reverse-engineering. Start shipping.