Skip to content
Work

Glossy UI Generator

Every polished product screen you see on Sage.com has to be recreated by a designer.

When marketing needs a new webpage, designers receive a screenshot of the product and rebuild it from scratch, following Sage's brand guidelines. Each screen takes around 30–60 minutes. Multiply that by several screens and multiple markets, and you're looking at hours, sometimes days, of repetitive work.

Glossy UI Generator with a generated lead estimate detail view: Tower General Contracting's "Estimate: Engineering – Johnson Creek Survey Estimate" (demo data), with a contract-status table, a cost-vs-sell bar chart and a cost-breakdown donut, beside the composition options and the export toolbar

Role

Product & UX designer

Company

Sage, 2026

The idea

I saw an opportunity to make that process faster.

So I built the Glossy UI Generator: a tool that takes a raw product screenshot and turns it into a polished, on-brand marketing asset in about two minutes.

The challenge

The goal sounded simple: take a product screenshot and turn it into a marketing-ready visual.

The challenge was making sure the result actually looked like Sage.

Our glossy UI guidelines are very specific. There are five approved compositions, along with rules for typography, colours, border radii, shadows, and more. The output also needs to represent the original product accurately.

The tool couldn't just generate something that looked good. It had to follow the guidelines, preserve the product details, and produce an asset designers could edit, export, and localise.

The approach

My first idea was to use the existing Sage Carbon React components and design tokens to rebuild the screens.

The logic was straightforward:

  • Recognise: Identify the existing components in the screenshot.
  • Assemble: Rebuild the screen using the component library, filling in the gaps where needed.
  • Review: Compare the result with the original screenshot.

But the first attempts didn't go as planned.

The AI interpreted the word "glossy" as a dark glass effect. What seemed obvious to us wasn't obvious to the model. I had to provide more precise instructions, examples, and rules to help it understand what a Sage glossy UI actually looks like.

The first generated Sage Client Management screen: the header and white tab bar kept, everything below rendered as dark glass — near-black panels with grey placeholder bars for the search field, the filter and a five-row table, each block outlined in dashed green
AI read "glossy" as a dark glass effect

It took seven attempts to get one screen right. The first version lost important details in the rows. By the seventh attempt, the overall structure was much closer.

Then I ran into another limitation: the component library couldn't cover every possible screen. Missing components meant placeholders and gaps, and every new screenshot introduced more exceptions.

The component builder with a Clients page assembled from the library: the navigation bars render, but the page shows only a stray 'Form' header, two empty search fields and a lone 'DIFM - do it for me' tag and 'Issue' badge in a large empty table area, with the component list (navigation, data, charts, cards) on the left
Missing components left gaps and placeholders

I had to rethink the approach.

PIVOT

The pivot

Instead of assembling individual components, I switched to generating the entire screen in HTML.

I gave the model the original screenshot, the glossy UI guidelines, and examples created by designers. This allowed it to recreate unfamiliar layouts without needing a matching component for every element.

A Sage Clients list rebuilt in the earlier tool: name, entity type, folder, year end, products, tax viewers, tags and actions for eight clients, with the clone panel and a 'Refine clone' button on the left
Before: assembling library components
Glossy UI Generator with a generated Sage Intacct 'CFO – Daily View': four KPI cards (assets, revenue, net income, expenses), a revenue-per-retail-hour bar chart and a net-income-by-location donut, beside the upload panel and composition options
After: generating the whole screen in HTML
Glossy UI Generator after a run: on the left, the uploaded source screenshot, the build log ("Turn 1/20… Created file… HTML updated") and composition options; on the canvas, the generated Controller Dashboard with KPI cards, an income-statement table, a revenue-by-entity pie chart and customer-aging and AP bar charts, tagged Original
Source screenshot, build log and generated dashboard

The results improved, but the process still needed human input. I had to compare the generated screen with the original, identify missing or invented details, and refine the output.

I'm a designer, not an engineer. I used Claude to help plan the approach and Claude Code to write the code. I tested every change before shipping it.

And when an approach kept making things worse, I stopped, documented what wasn't working, and tried something else.

The solution

The result is the Glossy UI Generator.

Upload a product screenshot, choose a composition, and generate a polished, on-brand screen in about two minutes.

The workflow includes:

  • Generate: Upload, drag, or paste a screenshot and choose a composition. The Focused composition is the recommended default.
  • Refine: Select an area of the screen and describe the changes you want to make.
  • Stay on-brand: Apply Sage's visual guidelines, including the correct colours, typography, logos, icons, and illustrations.
  • Localise: Adapt the same asset for different markets using approved translation memory.
  • Export: Download the result as an SVG and continue working with it in Figma.
  • Animate: Separate UI layers for use in product tours.
Glossy's Regenerate area dialog over a generated Sage Intacct CFO dashboard: area 1 is drawn over an empty panel with the instruction "add table", beside Add another area, Cancel and Regenerate buttons
Regenerate an area: draw a box, describe the change
Glossy's SVG Export dialog, 22 frames: the generated Sage Intacct CFO dashboard on the left and the animation layers on the right — top app bar, main nav bar and control toolbar set to fade up, the four KPI cards to pop in, each widget to fade up and the operations rows to stagger
Full composition and the layers prepared for motion

EXPORT

Making the output usable

Generating a good-looking screen was only part of the problem. Designers also needed to take the asset out of the tool and use it in their actual workflow.

Early SVG exports sometimes looked blurred or lost important details, like charts that looked wrong, even when the preview looked correct. I built a custom HTML-to-SVG exporter to make the handoff more reliable.

Five SVG export tests of the same generated Sage estimate screen, "Estimate: Engineering – Johnson Creek Survey Estimate" for Tower General Contracting (demo data), side by side: contract-status table, cost-vs-sell bar chart and cost-breakdown donut, with the SVG Export dialog and its layer list under the first
Five SVG export tests of one screen

Localisation introduced another challenge. Longer translations, particularly in French, could affect the layout. Connecting approved translation memory helped keep copy consistent, but visual review was still necessary.

French preview of a generated Sage estimate screen, "Devis : Ingénierie – Étude du ruisseau Johnson Creek" for prospect 240 Résidence Mountain High: the Statut du contrat table in euros, a Coût vs Total vente bar chart and a cost-breakdown donut; the longer row label "Total vente – Total coût" runs into its value
French preview: a longer label hits its value

The goal wasn't just to generate a screen. It was to create something designers could actually use.

RESULT

From an hour to two minutes

Before · by hand · 30–60 min per screen

  1. Screenshot
  2. Rebuild in Figma
  3. Apply brand rules
  4. Repeat for each market
  5. Export

After · Glossy UI Generator · about 2 min

  1. Screenshot
  2. Generate on‑brand
  3. Refine
  4. Localise
  5. Export SVG

The process went from 30–60 minutes per screen to about two minutes.

The outcome

What started as an experiment became a tool used by teams beyond design.

  • Demand: The beta filled all 30 available seats, followed by a waitlist.
  • Adoption: Sage's web team adopted the tool and created its own playbook page.
  • Visibility: I presented the project at Sage's company-wide AI Show and Tell.

The feedback from designers confirmed the value of solving this problem.

"This is genuinely super helpful cause I've got like 4 product UI tasks this sprint. Saving me so much time it's incredible!"

— Minka, Product Designer, Sage

What I learned

The simplest approach isn't always the first one you think of. Moving away from component-by-component assembly made the tool more flexible.

A good preview isn't enough. The output needs to work in the tools and workflows designers already use.

Knowing when to stop is part of the process. Documenting a failed approach helped me understand the limitations and make better decisions about what to try next.

The interesting part wasn't just making the process faster. It was questioning why we were doing it manually in the first place.

I'm a designer, not an engineer. Building this meant figuring things out as I went, testing ideas, and being willing to change direction when something didn't work.

For me, that's where AI becomes useful: not just speeding up the work we already do, but helping us rethink how we do it.