Clonekit Website Cloning

🧬 CloneKit - Website Cloning Tool

Extract the design DNA of any website and clone it with AI in seconds!

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔧 FRAMEWORK SELECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Tailwind CSS → React + tailwind.config.js
- Bootstrap 5 → HTML + CSS variables

Select your framework before analysis, and the prompt is automatically generated for your chosen framework.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📊 EXTRACTED DATA
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎨 Color Palette - All used colors (HEX codes)
🔤 Fonts - Font families and usage counts
📦 Assets - Image, SVG, and icon counts
🧩 Components - Button, form, card, link counts
📑 Sections - Hero, Features, Footer, CTA detection
📐 Layout - Header/Footer/Sidebar structure
📏 Spacing - Padding, margin, border-radius values
📸 Full Page Screenshot - Visual reference with scroll+stitch

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✨ KEY FEATURES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Component-First - Page split into sections, each with its own prompt
- Layout Detection - Flex/Grid structure auto-detected
- Arbitrary Values - Exact pixels for Tailwind: p-[32px], rounded-[16px]
- Full Page Screenshot - Capture entire page (up to 8 viewports)
- Prompt Generator - Ready-to-paste prompts for ChatGPT, Claude, Gemini
- Multi-Framework - Tailwind CSS or Bootstrap 5 output

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📋 EXPORT OPTIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📋 JSON - Copy all extracted data
🤖 Prompt - AI-ready full page prompt
📸 Screenshot - Scroll+stitch entire page (JPEG)
📑 Section Prompt - Individual prompt for each section

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎯 WHO IS IT FOR?
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Frontend Developers - Rapid prototyping
- Web Agencies - Client reference site analysis
- Designers - Site inspection for inspiration
- Students - Learning from real websites

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📋 HOW TO USE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. Navigate to the website you want to clone
2. Click the CloneKit icon
3. Select framework (Tailwind/Bootstrap)
4. Click "Analyze Page" button
5. Copy 🤖 Prompt + 📸 Screenshot
6. Paste into AI → Pixel-perfect code!

🔒 Privacy: All processing happens locally. No data is sent to external servers.

Made with ❤️ by Extify.co