ProjectX

About

ProjectX turns any website into a source of reusable UI components. Click on any element, get its HTML, CSS, screenshots, and a detailed AI-ready prompt — ready to paste into Cursor, Claude, ChatGPT, or any AI coding tool.

HOW IT WORKS

1. Click the ProjectX icon to open the side panel
2. Click "Start Capturing" and hover over any element on the page
3. Click to capture — ProjectX automatically extracts HTML, CSS, screenshots, images, fonts, and colors
4. Copy the generated AI prompt and paste it into your favorite AI tool
5. Get a pixel-perfect recreation of the component

FEATURES

Element Capture
• Click any element on any webpage to capture it
• Visual hover indicator shows exactly what you're selecting
• Navigate parent/child elements with arrow keys or the element tree panel
• Quick capture mode for faster workflow (no screenshot)

Code Extraction
• Clean, formatted HTML extraction
• CSS extraction with browser defaults removed
• Color palette detection
• Typography and font stack extraction
• Layout analysis (Flexbox, Grid, positioning)
• Interactive element state detection (disabled buttons, form states)
• Visual effects extraction (shadows, gradients, glow effects)

Screenshot & Asset Handling
• Automatic cropped screenshot of the captured element
• Uploads screenshots to shareable URLs for AI tools to access
• Extracts all images, SVGs, and background images
• Automatic asset upload for AI-accessible URLs

AI Prompt Generation
• Generates detailed, structured prompts optimized for AI code generation
• Screenshot is always embedded in the prompt as a visual reference
• Choose output framework: React, Vue, Tailwind, or HTML/CSS
• Toggle accessibility guidelines, responsive design requirements, and extracted styles
• Prompt size indicator with automatic splitting for large components

Full Site Copy
• Analyze an entire page and break it into logical sections (header, hero, footer, etc.)
• Get step-by-step prompts to recreate a full page layout
• Screenshots captured for each section

Component Detection
• Automatically detects distinct UI components within a captured element
• Generates individual prompts for each component
• Detects React components via fiber tree introspection
• Recognizes popular design system components (MUI, Ant Design, Chakra, Shadcn, and more)

Modern CSS Support
• Detects CSS custom properties (design tokens)
• Recognizes modern features: backdrop-filter, scroll-snap, aspect-ratio, sticky positioning, clip-path, container queries

KEYBOARD SHORTCUTS
• Ctrl+Shift+E (Cmd+Shift+E on Mac): Toggle element selector
• Enter: Capture with screenshot
• Shift+Enter: Quick capture (no screenshot)
• Arrow Up/Down: Navigate element hierarchy
• Escape: Cancel selection

PRIVACY
• No data is collected or sent to any server
• Screenshots and assets are optionally uploaded to a public image host only when you choose to
• All processing happens locally in your browser
• No account required