How to restyle an existing app with Claude Code

The usual way to restyle with AI is to open a screen and say "make this look better". It works for that screen. By the fifth one you have five slightly different ideas of better, and the app looks less consistent than when you started.

Decide the target first

Before any code changes, Claude needs to know what the app should look like: colours with jobs, type, sizes, radius, and a list of what it should not be. This can be your own design system or a ready one. Without it, there is nothing to be consistent with.

Then work in layers

1. Tokens. Add the new token file and map old values onto it. Nothing should look different yet if you map carefully, which proves the plumbing works.
2. Base styles. Body text, headings, links, focus rings. One commit.
3. Shared components. Buttons, inputs, cards, navigation. These change every screen at once, which is the point.
4. Screens. Only now go screen by screen, fixing layouts that the component changes did not cover.
5. Clean-up. Search for raw colour values and one-off styles left behind, and replace them with tokens.

Prompts that work for each layer

• "Add these tokens to the global CSS and replace hard-coded colours with them. Do not change how anything looks."
• "Restyle the Button component to the primary and secondary recipes. Keep its props and behaviour."
• "This settings page looks like a web page. Make it follow the design rules, without changing what it does."

Check before moving on

After each layer: run the app, look at three screens at a narrow and a wide width, in both themes, and commit. A restyle that goes wrong in layer three is easy to back out when layers one and two are committed.

Make the new look stick

The final step is the one that stops the next feature arriving in the old style: keep the design rules where Claude reads them on every UI task. That is what a design skill is for, as covered in give Claude Code your design system.

A desktop example

A common restyle is a Tauri or Electron app that looks like a web page. The target there is the native Mac look: smaller controls, the arrow cursor, an overlay titlebar, system colours. A native macOS look in Tauri and Electron lists the changes.

macOS Native Dark UI is written for exactly that prompt: ask Claude to make a panel feel like a Mac app, and it shrinks buttons to desktop size, drops hand cursors and turns solid red buttons into tinted destructive ones, following one token file.