Summary  
This chapter explains how to supply a UI design reference image and a precise prompt to an AI code assistant so it can automatically restyle an app’s interface—preserving its structure and features while updating its look.

General domain of usage  
Web application UI design

Unless you have a design file ready to go, the fastest way to restyle your app is to find something you like and show it to Claude Code. This chapter walks you through exactly how to do that.

### How to pass it to Claude Code

Once you have found a design you like:
1. Copy or screenshot the image
2. Paste it directly into the Claude Code chat
3. Add a specific prompt alongside it

A prompt that works well:

`
"Take the styling and colours of this UI design and implement it into my app. Keep the structure and functionalities exactly the same. Only change the design style."
`

Being specific about what to keep the same is just as important as describing what you want changed. If you do not say keep the structure the same, Claude Code may rebuild more than you intended.

### Which model to use for design

When working on design changes, switch the model to Opus using the dropdown in Claude Code. Opus does a better job of interpreting visual inspiration and translating it into code. For most other tasks Sonnet is the right choice, but for design, Opus is worth using.

### Expect to iterate

The first pass will get you most of the way there. It will not always be perfect. That is fine. Look at what came back, identify the one thing you want to adjust, and send a follow-up prompt that is specific about that one thing.

Say: "Change the heading colour to deep blue. Do not change anything else."

Say: "Make the background a solid dark grey instead of the gradient."

Say: "Make the submit button more rounded and increase its size slightly."

What is the recommended way to change your app’s design using Claude Code?

Build and launch a real app in just one weekend using modern AI tools and a simple, practical workflow, using Claude Code to plan, generate, and refine your code, managing your project with GitHub, and deploying your finished app online with Vercel. You’ll start with an idea and quickly turn it into a clear project plan, then move step by step into building a working application, focusing on core features, simple architecture, and fast iteration instead of unnecessary complexity, while learning how to work effectively with AI by writing better prompts, fixing errors, and improving features, ending with a live app, a clean GitHub project, and a repeatable system for turning future ideas into real products faster.

Understand the basics of AI-assisted development, set up your environment, and get familiar with Claude Code before starting your first app.

Turn your idea into a clear, simple plan and define the smallest version of your app that delivers real value.

Go from zero to a running app by generating code with AI, setting up the project, and understanding what was created.

Improve your app by adding features, refining the design, and learning how to fix issues effectively.

Publish your project, make it accessible online, and ensure everything works using GitHub and Vercel.

Improving the App Design

How to pass it to Claude Code

Which model to use for design

Expect to iterate