Media
1 item
Description
Extract design DNA from any website and generate AI-ready prompts for code conversion. 🧬 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