This browser extension allows users to instantly clone any web UI component with a single click, exporting the result as HTML with either Tailwind CSS or pure CSS. It's designed for developers and designers looking to quickly replicate or adapt existing web interfaces for their own projects.

How It Works

The extension leverages a vision Large Language Model (LLM) like GPT-4o or Claude 3.5, with the user's API key stored locally. Upon selecting a UI element on a webpage, the extension sends the element's visual information to the LLM, which then generates the corresponding HTML and CSS code. This approach aims to provide a fast and accurate way to extract and recreate UI designs without manual coding.

Quick Start & Requirements

• Install: Chrome Web Store.
• Prerequisites: Vision LLM API key (GPT-4o or Claude 3.5 recommended). API key is saved locally.
• Demo: Facebook login form cloning is available.
• Development: pnpm install, pnpm run dev (development), pnpm build (production).

Highlighted Details

• AI-powered UI cloning with a single click.
• Supports HTML + Tailwind CSS and HTML + pure CSS output formats.
• Features live preview of cloned UI and generated code.
• Built using WXT, React 18, Tailwind CSS, Shadcn UI, Langchain, and TypeScript.

Maintenance & Community

Contributions are welcome via Pull Requests and Issues.

Licensing & Compatibility

MIT License. Compatible with commercial and closed-source projects.

Limitations & Caveats

Requires a paid API key for a supported vision LLM. The quality of the generated code is dependent on the chosen LLM and the complexity of the UI component.