Item logo image for ProjectX

ProjectX

ExtensionDeveloper Tools2 users
Item media 1 (screenshot) for ProjectX

Overview

Capture any UI element from the web, extract its code, and generate AI-ready prompts

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

Details

  • Version
    1.4.0
  • Updated
    February 19, 2026
  • Offered by
    SmartyPanz
  • Size
    2.16MiB
  • Languages
    English
  • Developer
    Email
    zoamsm@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization

ProjectX has disclosed the following information regarding the collection and usage of your data. More detailed information can be found in the developer's privacy policy.

ProjectX handles the following:

Website content

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes
Google apps