DEV Community

Cover image for We Need to Talk About How Gross Modern Web Design Has Become (And How We Built an AI to Catch It)
Dhruv Jani
Dhruv Jani Subscriber

Posted on

We Need to Talk About How Gross Modern Web Design Has Become (And How We Built an AI to Catch It)

Tech stack details inside

Let me paint a picture I know you’ve experienced recently.

You’re trying to book a flight, buy concert tickets, or just download a simple PDF converter. Suddenly, the website turns into an absolute warzone:

🚨 "ONLY 2 SEATS LEFT AT THIS PRICE!"
⏳ A blood-red countdown timer ticks down from 05:00.
🟢 Three massive, glowing "DOWNLOAD NOW" buttons appear, and you know two of them will install malware.
🥺 And when you try to close the popup? The only button says, "No thanks, I'd rather pay full price and be miserable."

We call this "marketing." But let’s be honest: it’s just deceptive engineering.

These are Dark Patterns—UI/UX choices intentionally designed to trick, guilt, or force you into doing things you didn't want to do. And honestly? It’s getting gross. As developers, we build the web. We shouldn't be okay with the web actively manipulating its users.

So, my team at Tarkash Labs decided to fight back. We built a cognitive visual shield to catch these patterns in real-time.

Meet OmniGuard AI.


(Watch the 1-minute demo above to see it catch fake timers and hidden fees live!)


🛡️ How OmniGuard Works (The Tech Stack)

The problem with most ad-blockers or privacy extensions is that they rely on static blocklists or CSS selectors. But modern dark patterns are dynamic. They are disguised as regular DOM elements.

To catch them, we needed a tool that could see the web exactly how a human sees it.

We built OmniGuard as a Manifest V3 Chrome Extension powered by a FastAPI backend and Gemini 3.7 Flash.

Here is the exact flow:

1. The "Eyes" (React 18 + Vite Extension):
When you click "Scan" (or enable auto-scan on scroll), the extension captures an ephemeral, highly compressed screenshot of your active viewport.

2. The "Brain" (FastAPI + Gemini 3.7 Flash):
The image is sent to our stateless FastAPI backend. We use Gemini 3.7 Flash’s multimodal capabilities to analyze the visual context of the page. It doesn't just read the code; it understands how the UI looks.

3. The "Shield" (Shadow DOM Injection):
If Gemini detects a dark pattern, the backend streams the exact coordinates back to the extension. We then inject a Shadow DOM layer over the page, drawing glowing red bounding boxes precisely over the deceptive elements—completely isolating our CSS from the host page's styles.


🕵️‍♂️ The 6 Villains We Hunt

OmniGuard is currently configured to detect six specific categories of visual deception. Here is how it catches them in the wild:

1. Disguised Clicks
Buttons masquerading as something else (like fake downloads that lead to ads or malware).
OmniGuard catching disguised clicks

2. Confirmshaming
Guilt-loaded opt-out language designed to make you feel bad for not subscribing.
OmniGuard catching Confirmshaming

3. Urgency Traps
Fake countdowns and artificial scarcity messages.
OmniGuard catching urgency traps

4. Hidden Costs (Drip Pricing)
Fees and excluded taxes that magically appear at the very end of a checkout journey.
OmniGuard catching hidden costs

5. Sneak into Basket
Unwanted software bundles or insurances silently pre-checked during a download or checkout.
OmniGuard catching sneak into basket

6. Forced Continuity
"Free trials" that hide their aggressive auto-renewal terms in the fine print.
OmniGuard catching forced continuity


🔒 Zero-DB Privacy Architecture

One of the biggest challenges of building an AI extension that takes screenshots of your browser is privacy. We knew from day one that if we were building a tool to protect users, we couldn't compromise their data to do it.

That’s why the OmniGuard backend is 100% stateless. It uses a zero-DB architecture. The viewport screenshot exists only in memory for the milliseconds it takes Gemini to process it, and is then immediately destroyed. Nothing is ever saved, logged, or stored.


💻 Try It Yourself (Open Source)

We’ve open-sourced the entire project. If you want to see how we handled Manifest V3 tab capturing, or how we prompted Gemini Flash for UI coordinate mapping, you can check out the repo here:

GitHub logo Tarkash-Labs / OmniGuard

OmniGuard is a real-time, multimodal browser extension acting as a cognitive visual shield against deceptive UI/UX. Powered by Gemini , it instantly detects "Dark Patterns"—like fake timers or hidden costs—and injects HTML5 Canvas bounding boxes to protect users before they click. Built on a secure, zero-DB privacy architecture.

🛡️ OmniGuard AI

Real-Time Multimodal Dark Pattern & Visual Deception Radar

OmniGuard AI is a Chrome browser extension that acts as a cognitive visual shield against deceptive UI/UX. Powered by Gemini 3.7 Flash, it captures what users actually see on a webpage, detects dark patterns in real-time, and overlays live bounding boxes directly on the deceptive elements — before users can click.

Built by Tarkash Labs


✨ Features

OmniGuard detects 6 categories of dark patterns in real-time:

Category Description Example
⏰ Urgency Traps Fake countdowns & artificial scarcity "Only 2 left! Order in 03:22!"
🎭 Disguised Clicks Buttons masquerading as something else Fake download buttons, hidden ads
🛒 Sneak into Basket Unwanted items silently added Pre-checked insurance add-ons
🔄 Forced Continuity Subscription traps & hidden renewals Free trial → auto-charge
😢 Confirmshaming Guilt-loaded opt-out language "No thanks, I hate saving money"
💰 Hidden Costs Fees revealed late in the
…

Massive shoutout to my teammates Yug Vasava (Lead Dev) and Avadh Vaishnani (Lead QA) for helping bring this to life.

👇 Now, I need to know...

We are constantly trying to improve the AI's detection capabilities.

What is the most unethical, infuriating, or downright gross dark pattern you’ve seen a company use recently?

Drop it in the comments below so we can train OmniGuard to catch it! 🚀

Top comments (11)

Collapse
 
francistrdev profile image
FrancisTRᴅᴇᴠ •

The one thing I learned is that you can actually get Malware without having to click the ad. It got to the point where even the FBI themselves recommend users to use an ad-blocker because of this. Although it's not widespread and only targets high profile users, it's scary to think about that it's even possible to begin with and crazy how it's not patched.

Here is a video that explains it.

Otherwise, good stuff :)

Picked as gem
Collapse
 
dj29 profile image
Dhruv Jani •

Its True!
Today my dad told me that if you get any msg from X guy, don't open it!

Apparently his whatsapp profile got hacked and sent malicious .apk files to a lot of contacts.
Its pretty common in my part of the world.

I actually haven't tried any ad blockers, I just use brave for streaming or spotify, so as to avoid pop ups and ads.

But I'll definitely try one!

Collapse
 
dj29 profile image
Dhruv Jani •

One thing that stood out while building OmniGuard was how easily deceptive elements can blend into an otherwise normal-looking webpage.

A countdown timer, a misleading button, or a tiny pre-selected checkbox might not look like much on its own, but these little design decisions can completely change what a user ends up doing.

We built OmniGuard to make these tricks easier to spot, but I'm sure there are plenty of dark patterns we haven't thought of yet.

What's one website or app experience that made you feel genuinely tricked? I'd love to hear some real examples! 👀

Collapse
 
unitbuilds profile image
UnitBuilds •

Another tip for anyone dealing with ads, use AdGuard (the green shield), honestly the best blocker imo.

Collapse
 
dj29 profile image
Dhruv Jani •

For me the best thing is "Brave" browser, never disappoints!😂

Collapse
 
unitbuilds profile image
UnitBuilds •

On android, firefox, with ublock origin, works really well too.

Thread Thread
 
dj29 profile image
Dhruv Jani •

I'll try them!

Have A Great Day!

Thread Thread
 
unitbuilds profile image
UnitBuilds •

Likewise!

Collapse
 
yug_vasava profile image
Yug Vasava •

Bro, very early for this post. This project was made just yesterday!

Collapse
 
dj29 profile image
Dhruv Jani •

Yeah, my bad I had this draft since weeks but I don't know I forgot to publish it!😅

Some comments may only be visible to logged-in visitors. Sign in to view all comments.