I Used Claude Design to Redesign a Real SaaS Product

cyrus grey — Sat, 01 Aug 2026 17:38:27 +0000

When the site first went live, I cared more about whether the product worked than whether the UI looked polished.

As the site started attracting real users, though, I began to notice that the old interface felt inconsistent. It also had that familiar pale-blue “AI tool” look.

The pages, navigation, tool area, and feature sections all felt as if they had been built at different times. The pale blue background and template-like components also made the site feel like something generated by AI and shipped without much review.

I worried that this would make users think the product had not been carefully designed or reviewed by a person. So I decided to give the live SaaS product a broader visual overhaul.

I picked a more established product in the same space as a reference, hoping to make the site feel more mature and visually consistent.

This is not a story about typing one prompt and getting a production-ready design back. It is about how I used Claude Design to find a better visual direction, then gradually turned it into the current version through several rounds of adjustment, removal, and implementation.

My first attempt: asking Codex to follow a reference site

At first, I tried asking Codex in chat to use the reference site and modify my existing project directly.

The result was not good.

Codex could understand the code and make changes to React and Tailwind quickly, but the page it produced was almost unusable.

The whole result was so far off that I did not even want to keep iterating on it.

That attempt made me realize that simply telling an AI:

Use this site as a reference and make my page look similar.

is usually not enough.

The AI may imitate a few surface-level details, but the final page may still miss the overall feel of the reference site.

Switching to Claude Design

Later, I heard that Claude Design was good at visual design, so I decided to try Claude instead.

This time, I first asked Claude Design to extract the reference site's metadata, then rebuild the homepage based on that information.

The process was roughly this simple:

Extract the metadata from this website.

Then:

Redesign the homepage based on this metadata.

Compared with simply asking Codex to imitate the reference site, the result was noticeably better.

Claude Design gave me a much clearer visual direction. For the first time, I felt I had something worth iterating on.

Claude Design still could not get it right in one pass

Claude Design's first pass was better than my earlier attempt with GPT-5.6 in Codex, but it still was not a finished design.

One obvious issue was its tendency to add unnecessary microcopy.

None of those lines looked particularly wrong on their own, but together they made the page feel fragmented and noticeably AI-generated.

The first version also still had a very typical “AI UI” look. The pale blue background and soft gradients made it feel cheap, like something someone had generated with AI and shipped immediately.

That kind of visual style can make users wonder whether anyone actually spent time designing or reviewing the product.

Later, I pushed Claude toward the darker visual direction of the reference site, and much of that generic pale-blue AI-tool feel disappeared. The darker direction made the page feel much more deliberate, as if someone had actually reviewed the design instead of shipping the first AI output.

Once the overall direction was set, I spent most of my time asking Claude to remove things.

I removed unnecessary microcopy, repeated information, and elements that did not help users complete the core action—basically anything I could get away with removing.

I kept asking myself: does this element need to be here for the user to complete the main task? If not, remove it.

AI tends to keep adding copy, labels, and sections to make a page look more “complete.” For a real product, however, it is often more important to reduce what users need to process and keep their attention on the main action.

The Claude Design prototype I saved is therefore not its untouched first output.

It was the first version I felt comfortable moving forward with after several rounds of removal and adjustment in the same session.

Expanding from a homepage prototype to the rest of the site

At first, I only asked Claude Design to generate a homepage prototype.

Once the homepage was ready, I kept working in the same session, adjusting the colors and removing unnecessary elements until I was happy with the result.

After the visual direction of the homepage was set, I asked Claude Design to use that version as the basis for the remaining subpages. This kept the pages aligned with the same established style instead of redesigning each one from scratch.

After I had approved both the homepage and subpage prototypes, I let Claude Code take over from Claude Design and implement them in the existing project.

Once the visual direction was set, a regular coding agent was enough

Claude Design mainly helped me establish the initial visual direction.

Once the overall layout and style were stable, a regular coding agent was enough for smaller follow-up changes.

That mostly meant removing some copy, adjusting local spacing, and tweaking the sidebar and a few component styles.

I found that when the visual direction was still unclear, different models could produce very different results.

Once the page had a fairly stable design system, however, coding agents such as Codex worked fine for simple iterations.

Coding agents work much better once the visual direction has already been established.

Before the redesign

The old site worked, but its visual style was inconsistent.

The first Claude Design prototype I kept

By the time I saved this version, I had already removed several unnecessary elements and moved the design toward the darker look of the reference site.

Current version

I continued refining a few details on top of the Claude Design prototype, and handed some of the later changes to a coding agent.

You can see the live version at Foca Upscaler.

Final thoughts

After using it, I do think Claude Design gave me a better result than asking Codex to redesign the page directly. But it still was not good enough to use on the first pass.

What worked for me was adjusting the homepage prototype in Claude Design until I was happy with it, using that homepage as the basis for the other pages, and then handing the implementation to Claude Code.

Since Claude Design still required several rounds of adjustment, I later came across an open-source alternative called OpenDesign, which can also be paired with models such as Kimi K3. I would like to try it when I get the chance. If the results are worth sharing, I will write a separate post about it.

DEV Community: cyrus grey