This post is my submission for DEV Education Track: Build Apps with Google AI Studio.
Have you ever stumbled across a promising startup’s website, only to find it filled with generic stock photos and placeholder logos? Or maybe you’re a developer who’s brilliant at backend code but struggles with visual design?
What if there was a way to instantly transform any website’s visuals with AI-generated images that actually belong there?
That’s how WebImgs was born – a Chrome extension that scans any website, understands its design DNA, and regenerates every visual asset to match perfectly. No more mismatched stock photos or bland placeholders. Just click, scan, and watch a website come to life.
The Magic Behind the Curtain
WebImgs isn’t just another AI image generator – it’s a design detective. Here’s what makes it special:
- 🔍 Universal Scanning – Detects logos, hero images, banners, icons, and background elements on any website
- 🎨 Style Aware Generation – Analyzes the website’s color scheme, typography, and design patterns
- ⚡ Real Time Preview – Toggle between original and AI generated images instantly
- 🎯 Selective Generation – Choose exactly which assets to regenerate
- 📦 Batch Export – Download all generated assets as a ZIP file
- ⌨️ Keyboard Shortcuts – Quick generation with Ctrl+Shift+G
Google AI Studio
Here’s the core prompt that started it all:
“You are building a Chrome extension that automatically detects and generates ALL visual assets for any website using AI image generation. The extension transforms text-only or placeholder-filled websites into fully designed, visually cohesive sites.
Core functionality: Scan any webpage → Detect all image zones → Categorize assets needed → Generate consistent visuals → Replace/export images.
We’ll build this step by step. After each major step, I’ll verify completion before proceeding.”
Through countless iterations in AI Studio, this evolved into a sophisticated four step process:
- Website DNA Analysis – Extract colors, typography, spacing patterns, and overall aesthetic mood
- Smart Categorization – Identify whether each image is a logo, hero banner, product shot, or decorative element
- Contextual Prompt Generation – Create highly specific prompts for Google’s Imagen API
- Consistency Enforcement – Ensure all generated assets feel like they belong to the same brand family
The difference between “generate a logo” and “generate a minimalist tech startup logo with navy blue and white color scheme, clean sans-serif typography influence, and modern geometric styling” became the difference between random images and perfect images.
Demo
Here’s how WebImgs works in practice:
Step 1: Scan Any Website
Click the extension icon and hit “Scan Page” – WebImgs instantly identifies every image zone on the page, from logos in the header to product shots in the footer.
Step 2: Visual Asset Detection
The extension overlays colored zones showing exactly what it detected:
- 🟡 Logos and branding elements
- 🔵 Hero images and banners
- 🟢 Product and gallery images
- 🟣 Icons and decorative elements
Step 3: AI Magic Happens
Here’s where Google AI Studio’s prompt engineering shines. Instead of generic requests, WebImgs generates contextual prompts like:
- “Professional fintech logo with navy blue gradient, modern sans-serif influence, clean geometric design, startup aesthetic”
- “Hero banner for financial dashboard app, contemporary UI design language, subtle shadows, 1200×400 format”
Step 4: Instant Transformation
The results? Images that look like they were designed by the original team. Toggle between versions to see the dramatic difference – same layout, but now it feels like a real brand.
Step 5: Ready for Production
Export everything as an organized ZIP file. Each asset is properly named and sized, ready to drop into your codebase.
If this gets enough interest, I will release the extension in the Chrome webstore and give out some free credits. I have already secured the domain, just haven’t launched the extension yet
Try it yourself: WebImgs Chrome Extension
Under the Hood
Core Technology:
- JavaScript & Webpack for the Chrome extension architecture
- Google AI Studio for rapid prompt development and testing
- Google Vertex AI Imagen API for high-quality image generation
- Firebase backend handling authentication and usage credits
The Secret Sauce: WebImgs doesn’t just generate random images. It’s essentially a design detective that analyzes websites like a human designer would by extracting color palettes, understanding typography choices, recognizing layout patterns, and even inferring business context. This analysis becomes the foundation for creating prompts that generate visually cohesive assets that actually belong.
What I Learned Building This
Three months ago, I was frustrated. Every side project I built looked like it was designed by a developer (because it was). Stock photos felt fake, placeholder logos screamed “temporary,” and I couldn’t afford a designer for every idea.
That frustration led me down a rabbit hole that changed how I think about AI.
Building WebImgs taught me that the real challenge isn’t generating images – it’s generating the right images. Here’s the tech stack that makes it work:
Try it yourself soon: WebImgs Chrome Extension
Want to see more? Check out the Imagen API pricing to understand the cost structure behind AI-powered design.