Here's the thing nobody talks about: no website is perfect for everyone. The developer built it for their idea of a user, and buddy, that user is not you.
- You open a news site and there are more ads and popups than actual words in the article.
- Your university portal looks like it was designed in 2003 by someone who genuinely hated students.
- A web app you use daily has a sidebar or panel you've never once clicked on purpose, but you've definitely misclicked it 300 times and it's been quietly ruining your day for months.
And what are your options? Send the developer a passive-aggressive feature request that'll sit in their backlog for years.
Note
Yeah, no. There had to be a better way.
Reframe is a Chrome extension that lets you redesign any website on the internet, YESSS ANYYY, by just describing what you want in plain English.
That's it. That's the whole pitch.
You type something like "make the background dark and move the sidebar to the bottom" and Reframe's AI figures out the DOM structure, generates perfectly scoped CSS/JS, bypasses Content Security Policies, and permanently saves your changes even across SPA navigations where the site tries to fight back by re-rendering everything.
Tip
Think of it as a universal remote control for the internet's UI, except instead of pressing buttons, you just complain about the layout in natural language and it fixes itself.
So I use WhatsApp a lot on desktop, but the web version has always bugged me. On mobile, it's this clean, narrow, focused chat window. On desktop? They stretch it across your entire 27-inch monitor like it's trying to fill a movie theater screen. Why does a single text message need to be 1400 pixels wide? Who decided this was okay?
And don't even get me started on typing long messages. The native input bar is this tiny little strip at the bottom. Try editing the 10th line of a 50-line message in that thing. It's a nightmare. You're scrolling a 2-line viewport trying to find a typo. Genuinely rage-inducing.
So I used Reframe to fix it:
- Shrunk the main chat window down to a mobile-width view (because that's how WhatsApp is meant to feel).
- Took all that newly empty space on the right and told the AI to build a massive floating notepad widget where I can actually draft, edit, and send long messages like a civilized person.
Before: the unnecessarily wide default:
After: mobile-width chat + floating draft panel:
compress.github.video.mov
A friend of mine built a website. Great site. One problem: no dark mode. I could've opened a GitHub issue and waited 3-6 business months for them to maybe add it. Or I could just... do it myself. In 30 seconds. Without touching their codebase.
I opened their site, typed "add a dark mode toggle button in the top right corner" into Reframe, and watched it inject a fully functional toggle that smoothly transitions between light and dark themes. It even persists across page reloads.
Did I tell my friend? Eventually. Was it hilarious watching their confusion when I sent them a screenshot of their own website with a feature they never built? Absolutely.
Live Site: Link
Demo Video:
restaurant.mp4
Reframe isn't just wrapping an LLM call and slapping innerHTML on the page. It's genuinely engineered to handle the chaos of modern web apps:
- DOM Skeleton Extraction: When you open the popup, Reframe extracts a compressed structural skeleton of the page (not the full DOM, that would murder your token budget) and feeds it to the LLM as context.
- Multi-Turn AI Pipeline: The LLM doesn't just yolo one response. It goes through 4 structured turns: analyze the page → plan a design strategy → generate the code → self-review for visibility issues. Each turn has strict JSON schemas so the AI can't wander off and start philosophizing instead of writing CSS (yes, this actually happened during development).
- CSP Bypass via Service Worker: Modern websites use Content Security Policies to block inline scripts. Reframe sidesteps this entirely by routing all JavaScript execution through Chrome's
chrome.scripting.executeScriptAPI in the background service worker, injecting directly into the page's MAIN world. - SPA Persistence: Single Page Apps (React, Next.js, etc.) love to tear down and rebuild the DOM on every navigation. Reframe fights back with a multi-listener hydration system (
popstate,pushState,replaceState,MutationObserver) that instantly re-injects your saved CSS/JS the millisecond the site tries to wipe it. - Idempotent JS Guards: Every generated JavaScript block is wrapped in a unique execution guard (
window.__reframeExt_CHANGEID__) so re-running the same code on SPA navigation doesn't duplicate elements or stack event listeners.
This project is fully open-source and there's a ridiculous amount of cool stuff that could be built on top of it. If any of these excite you, please open a PR, I will mass-produce gratitude:
| Feature | Description | Difficulty |
|---|---|---|
| Improve the Design System Prompt | The AI prompt that generates CSS/JS is the heart of Reframe. Better prompts = better results. If you're good at prompt engineering or have ideas for making the AI output more reliable, this is the easiest and highest-impact way to contribute | Easy |
| Prompt Templates | Pre-built prompt libraries for common tasks ("add dark mode", "hide sidebar", "increase font size") so users don't have to write prompts from scratch | Easy |
| Community Themes | Export your customizations as shareable JSON configs (imagine a "Perfect Twitter Dark Mode" that anyone can one-click install) | Medium |
| Cloud Sync | Sync your customizations across all your Chrome instances via an external backend | Medium |
| Visual Element Picker | Point-and-click mode where you click an element on screen, and Reframe feeds that specific node to the LLM for surgical edits | Hard |
| Auto-Healing Selectors | When a website updates its class names and breaks your saved override, the AI automatically detects the breakage and repairs the selectors | Hard |
| Wayback Time Machine Mode | Fetch a website's historical layout from the Wayback Machine API and prompt the AI to rewrite the current CSS to perfectly mimic its retro design | Hard |
Important
We are currently working on deploying and publishing Reframe to the Chrome Web Store for a seamless 1-click install! In the meantime, you can easily install it locally as a developer extension below.
Prerequisites: You'll need a free API key from any one of these providers:
Installation:
git clone https://github.com/Hrithwin123/Reframe.git- Open
chrome://extensionsin your browser - Enable Developer Mode (toggle in the top right)
- Click Load Unpacked → Select the
reframefolder inside the cloned repo - Pin the Reframe extension to your toolbar for easy access
- Click the Reframe icon → Hit the gear icon → Paste your API key
- Navigate to literally any website and start telling it what to do
Built with sleep deprivation and a mass amount of spite towards websites that refuse to have a decent layout.