Ghost Ui
Capture any website's UI and generate production-ready React/Vue/Svelte components using AI vision
|
🚀 Quick Start · ✨ Features · 🎬 How It Works · ⚙️ Configuration · 🖥️ CLI · 📖 API
🎯 The Problem vs The Solution
❌ The Problem |
✅ The Solution |
🚀 Quick Start
Browser Extension (Recommended)
- Install from Chrome Web Store or Firefox Add-ons
- Navigate to any website
- Click the Ghost-UI icon
- Select an element or record an interaction
- 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"> │
│ <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
| Framework | Status | Animation Library |
|---|---|---|
| React + Tailwind | ✅ Full | Framer Motion |
| React + CSS Modules | ✅ Full | CSS Animations |
| Vue 3 + Tailwind | ✅ Full | Vue Transitions |
| Svelte | ✅ Full | Svelte Transitions |
| Vanilla HTML/CSS | ✅ Full | CSS Animations |
| React Native | 🚧 Beta | Reanimated |
🔍 Smart Animation Detection
Ghost-UI doesn't just screenshot—it understands motion:
┌─────────────────────────────────────────────────────────────────┐
│ ANIMATION DETECTION │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ✅ 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) │ │
│ └──────────────┘ └──────────────┘ └─────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
| Step | Action |
|---|---|
| 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
🤖 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
},
});
| Provider | Link |
|---|---|
| Ollama with LLaVA | ollama.ai |
| LocalAI | localai.io |
| OpenAI-compatible | Any endpoint |
⚖️ Ethical Usage
┌─────────────────────────────────────────────────────────────────┐
│ GHOST-UI ETHICS │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ✅ 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
| Feature | Ghost-UI | Screenshot-to-Code | Figma-to-Code |
|---|---|---|---|
| Live website capture | ✅ | ❌ | ❌ |
| Animation capture | ✅ | ❌ | ❌ |
| Interaction recording | ✅ | ❌ | ❌ |
| Multiple frameworks | ✅ | React only | Varies |
| Local AI support | ✅ | ❌ | ❌ |
| Browser extension | ✅ | ❌ | ❌ |
| CLI tool | ✅ | ❌ | ❌ |
🗺️ 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 License © Ghost-UI Contributors
👻 Ghost-UI — Stop reverse-engineering. Start shipping.
"Good artists copy. Great artists ship before lunch."
