Media
1 item
Description
Analyze web UI/UX design, scan design systems, and generate high-quality AI prompts for code generation. DizaynAI is an advanced AI-powered web design analyzer and prompt generation Chrome extension. Instantly scan any website's UI/UX design system, extract design tokens, colors, typography, layout metrics, and real image assets to generate 1:1 pixel-perfect code prompts for modern AI code generators. Designed for Frontend Developers, UI/UX Designers, and Product Engineers working with v0.dev, Lovable.dev, Cursor AI, ChatGPT, and Claude. ========================================= ✨ KEY FEATURES ========================================= 🎯 1:1 Pixel-Perfect DOM & Design System Scanner • Scans complete page metrics: container widths, hero sections, card components, buttons, and navigation hierarchy. • Extracts exact HEX color palettes (backgrounds, text, borders) with an interactive on-page highlight tracker. • Analyzes typography scales (font families, font sizes, line heights, letter spacings, heading hierarchy). 🖼️ Real Image Asset & Icon Extraction Protocol • Automatically extracts real website image URLs (logos, hero banners, card thumbnails, user avatars). • Enforces real asset integration in generated code prompts—no dummy placeholders or broken images. • Detects SVG icons and popular icon libraries (FontAwesome, Material Icons, Lucide, Remix, Phosphor). 💻 Multi-Device Responsive & Tech Stack Detection • Generates Tailwind CSS responsive breakpoints for Mobile (375px), Tablet (768px), and Desktop (1440px+). • Identifies web technologies used on the target site (React, Next.js, Vue, Tailwind CSS, Webflow). ⚡ Instant Dual-Engine Prompt Generation • Powered by Google Gemini 2.0 Flash for lightning-fast AI prompt creation. • Built-in Instant Local Fallback Engine ensures prompt generation never fails, even during API rate limits. 📥 Export & Integration Tools • One-click export to clean Markdown (.md) prompt files. • Export design system tokens to JSON format. • One-click copy & launch integration for v0.dev and Lovable.dev. ========================================= 🛠️ HOW TO USE ========================================= 1. Open any website you want to analyze. 2. Click the DizaynAI extension icon or the floating side orb. 3. Click "Full Page Scan" or use the Inspector tool to select a single component/card. 4. Click "Generate Prompt" to get your pixel-perfect prompt for v0.dev, Lovable, or Cursor AI! ========================================= 🔒 PRIVACY & SECURITY ========================================= • 100% Private: All API keys and settings are stored locally in your browser (chrome.storage.local). • Zero Data Collection: DizaynAI does not track user data, browsing history, or personal information. • Secure Manifest V3 compliant with strict Content Security Policy.