Restyling a Legacy Website Without Touching Its HTML (or Breaking Its JS)

You know the request: "Can you make our website look modern?" The site in question is years old. It has jQuery plugins bound to class names, a checkout nobody wants to touch, inline styles toggled by scripts written by someone who left long ago, and a CMS or backend that generates the markup.

WordPress sites are an especially common case. Many run a theme plus a long list of plugins for forms, shops, bookings, memberships, SEO and page building. Each plugin brings its own markup, styles and scripts. Together, they often represent years of work and a large investment in setup, content and customization. Their owners want a fresh look, but above all they need every one of those plugins to keep working.

A rebuild means migrating all of that and retesting everything. This post describes a different approach, the one behind AI Style Upgrade, a Chrome extension I built: leave the existing site exactly as it is, and ship the whole redesign as a layer on top.

Why restyles of legacy sites break things

Most breakage during a redesign doesn't come from the new look itself. It comes from the changes made to get there:

• Changing the markup. Old scripts find elements by class names, ids and structure. Add a wrapper <div> or rename a class, and a dropdown stops opening, a slider stops sliding, or an analytics tag stops firing.
• Overriding what scripts control. If a script shows a menu by setting style.display, a stylesheet that also sets display on that menu breaks it, even though the markup never changed.
• Switching the WordPress theme. Plugins and page builders output their content into the theme's templates. A new theme can break shop pages, forms and carefully built layouts, and often means redoing customizations.
• Touching the server. New templates, a theme migration or a new CMS put your integrations, database and URLs at risk, and changed URLs can cost search rankings.

The approach: a layer on top

AI Style Upgrade avoids all of these:

• The HTML is never changed: no new tags or wrappers, and all class names and ids are kept.
• Properties the site's own JavaScript or inline styles control are detected and left alone, so the features built on them keep working.
• Nothing changes on the server: templates, CMS, database and URLs stay as they are.

On top of that, existing background images are preserved, text stays visible, and the design is built for both desktop and mobile, with no overlapping elements.

Deployment is two lines

The output is two static files: a stylesheet and a small script. Both go at the very beginning of <body>:

<body>
  <link rel="stylesheet" href="/ai314-cool-style.css">
  <script src="/ai314-cool-script.js"></script>
  <!-- your existing page content -->

The script is intentionally not deferred. It runs before the content below it renders, so the new design is active from the first paint, with no flash of the old style.

Rollback is just as simple: delete the two lines and the site is exactly as it was.

The workflow

The extension works with any AI chat assistant over the clipboard: it prepares a prompt, you paste it into the assistant, then you paste the answer back. For privacy, the AI never sees your real page. It gets a cleaned-up snapshot with styles and scripts stripped out and the text masked.

There are two paths:

• New look: the AI suggests 30 design themes ranked by fit for your site. You pick one, then pick 1 of 5 color palettes for it. You preview the result on your own live site, in your browser only, and keep refining it with the AI.
• Effects only: keep the current theme and just add effects and styling changes, without writing code.

What you can add goes beyond colors: a fixed menu that shrinks on scroll, fade-in on scroll, parallax layering, 3D tilt, flowing gradients, and layout changes such as three columns to two. You can also add static or animated effects to images you select on the page, for example steam rising from the schnitzels in a food photo, or a door in a picture that opens and closes.

The AI assistant is a separate service and isn't part of the extension. I get good results with Claude (claude.ai) on a Pro plan using Sonnet 5.5, but any assistant works.

A checklist before you ship any restyle

Whatever tool you use, or if you do it by hand, test these on the legacy site before going live:

1. Menus and dropdowns: open and close each one, by mouse, touch and keyboard.
2. Forms: submit with valid and invalid input, and check that validation messages still show and are readable.
3. Checkout or sign-in: go through the whole flow, including error states.
4. Third-party widgets: cookie banners, chat, maps, embedded video.
5. Mobile: check the real breakpoints the site uses, not just one phone width.
6. Accessibility: text contrast, visible focus outlines, and animations that respect prefers-reduced-motion.
7. Images: background images and logos still visible, with nothing cropped or covered.

Where this approach stops

A style layer changes presentation, nothing else. It won't add features, restructure content, or fix a broken backend. If the project needs any of those, it's a real rebuild. But for the common case, a site that works fine and just looks old, leaving the site untouched removes most of the risk.

See it moving

Screenshots don't show scroll effects, menu animations or image effects. The before/after clips do:

Watch the before & after videos →

There's also a short video walkthrough of the extension.

Designing and testing are free. A one-time license per website is needed only when you deploy the stylesheet (details).

Cover image: before/after of a page from The University of Edinburgh. Modified for demonstration purposes. Licensed under CC BY 4.0.

I'd like to hear from anyone who has had to restyle a legacy site: what broke for you, and what would you want a tool like this to guard against?