# How to use claude design

Source: https://qvantx.com/insights/how-to-use-claude-design/
Author: Ani Björkström — QvantX Sweden AB, Stockholm
Published: 2026-05-21
Updated: 2026-09-20
Video: https://www.youtube.com/watch?v=hf-H_OhEZ8M (9 min)
Topic: AI Tools

License: free to quote and cite with attribution to https://qvantx.com

---
_AI TOOLS_

## How Does Claude Design Redesign an Existing Website Without Touching Its Code?

#### Key takeaways

- Claude Design read the attached code base of a working job-scraper website and produced a complete redesign of all tabs in about 15 minutes.

- Claude Design proposes a new look without modifying your code: the mockup shows the full functionality with sample data, leaving the live site untouched.

- To ship the design, ask Claude Design to save it as a document in the project folder, then have Claude Code read that file and implement it.

Ani Björkström, a tech consultant based in Stockholm, tested Claude Design on a real tool: a self-built job scraper called change detector that visits a list of URLs, scrapes job and contract opportunities, and emails the results as an Excel file. After a couple of weeks running, its history held 1,406 listings, but the interface was not customer-ready.

### What does the website do before the redesign?

The site is fully functional: you add target URLs manually or upload them in bulk from an Excel or CSV file, click "run all now," and the program scrapes every site one by one. Results land in a history tab, filters such as data engineering narrow them down, each listing links back to its source platform like LinkedIn, and everything exports to Excel.

The site also tracks run counts and keeps logs, mainly so Claude can read them later, find any bug, and fix it.

### How do you start a redesign in Claude Design?

Open Claude, choose the Design tab on the left, create a project, and pick high fidelity for stronger color contrast. Because the website already exists, the key move is "attach code base": drag in the project folder, and Claude Design gains full knowledge of the functionality it must preserve.

The prompt sets four goals: preserve all functionality so every feature, link, form, and interaction keeps working; improve user friendliness with clear navigation, visual hierarchy, readable typography, and mobile responsiveness; make it more dynamic, for example with animations; and make it more colorful. If you cannot articulate "dynamic," send "please make my website better looking" to Claude, let it write the detailed prompt, and paste that in.

| Step | What you do | What Claude Design does |
|---|---|---|
| 1. Create project | Name the project and choose high fidelity for stronger contrast | Opens a design workspace for the website |
| 2. Attach code base | Drag in the project folder | Reads the code and understands the functionality |
| 3. Send the prompt | State the goals: preserve functionality, improve usability, add dynamics and color | Asks clarifying questions, then generates the redesign |
| 4. Hand off to code | Ask Claude Design to save the design as a document in the folder | Writes a design file that Claude Code can implement |

### What happens if you ignore Claude Design's questions?

Claude Design asks clarifying questions, but it does not stall if you stay silent: after a while it picks the default option for you. Roughly 15 minutes later a complete design was ready, covering dashboard, URLs, history with friendlier filtering by company and location, runs, uploads, logs, and settings.

### Why does the redesign show different data than the real site?

Because Claude Design reads the code base and designs for the same functionality, but never updates the code itself; the mockup is a proposal with sample data, not your live site. To apply it, ask Claude Design to save everything into a document in the project folder, then have Claude Code read that file and implement the design.

#### FAQ

**Does Claude Design change my code base?**

No. It reads the code to understand the functionality and shows how the site could look, but the website stays as it was until you implement the design separately.

**How long did the redesign take?**

About 15 minutes from prompt to a complete design covering all tabs, including time waiting on unanswered questions before choosing defaults.


## Full video transcript

Chapters: 0:00 Website Makeover Goal · 0:21 Meet Ani and Project Recap · 0:28 How the Scraper Works · 2:28 Why Redesign Matters · 2:53 Open Claude Design · 3:24 Attach Codebase Setup · 4:06 Prompting for Redesign · 5:40 Design Generation Results · 6:09 Tour the New UI · 7:46 Apply Design to Code · 8:33 Next Tutorial Wrap Up

[0:00] In this tutorial, I will show you how to use an existing website that looks like this to transition to something looking like this. It is the same functionality. However, it has a lot of colors, user experience is better, and it has more options when it comes to filtering. For this tutorial, we will only use Cloud Design. Let's get started. If we haven't met before, my name is Annie. I'm a tech consultant based in Stockholm. Let's get started. So, this is the website that we created together two videos back. And the function with this website is that we give it many different URLs, either by manually creating the URLs or by uploading via an Excel or CSV file. And then, when you go to dashboard and we click on run all now, the program will visit all the websites one by one and will scrape all the job or contract opportunities from those websites.

[0:56] And once the process is done, all the history is saved under history tab, and an email is sent to me with an Excel file including all the job history. And here, if I go to history tab, you can see that we have 1,406 listing, and all of those are different jobs listed on different platforms. For example, you can see here we have social media contract creator or we have freelance social media video editing and so on. And if I click, for example, on one of those links, you can see that it will take me, in this case, to LinkedIn because it was scraped from LinkedIn. And here, we have also some options to create filtering. For example, if I click on data engineering and then I will click on apply button, then all the data engineering jobs will pop up in here.

[1:46] And we can even see more information about this if we scroll right or left. And we even have the opportunity to export to Excel. This is a totally functional website that has this dashboard tab. It has URL tab where we are creating URLs and then we have the upload tab that we use to upload a lot of different URLs from a file. Then we have the history where we saw all the listings and then we have run. It shows how many times you run the program and then we have logs as well that it shows all the logs and the aim with log is mainly because cloud need to go back looking to logs and if there was a bug to find it and fix it. It works fine. I run this program for a couple of weeks. However, if I am at some point planning to introduce this for customers, it doesn't have the best user experience.

[2:35] So what I will do is using cloud design to give the same website basic design. I don't want to change anything in the functionality. The only thing that I want to improve, maybe nine times better, is the design. I want it to be more colorful, more dynamic, and general user experience I think can be improved. So to do this, I will open the new tab and from here I will click on cloud. Then from the left side you can see that there is design tab. If we click on that, here cloud design will open up and I will create the project name and because my website is called change detector, then I will give the same name to this project as well. Okay, and then I will keep high fidelity because I want to have more contrast in the colors and then I will click on create button.

[3:22] Once that is done, we have different options. We can start with design system, add screenshot, attach code base, drag in a Figma file. So in this case, because the program is already created, it means that we already have a code base. So the only thing that we need to do is click on attach code base and from here we can browse or you can just drag and drop. I will just choose this folder from here and then I will click on select. Okay, so here you can see that my website was added into this chart and now it asks describe what you want to do because now it has access to the code however it doesn't know what we want it to do. So here I will use a prompt and the prompt is like this redesign my website with the following goals.

[4:13] First preserve all existing functionality every feature link form and interaction should continue to work exactly as it does now. Do not remove or alter behavior. Next improve user friendliness clear navigation better visual hierarchy readable typography intuitive layout accessible contrast and mobile responsiveness. Next make it more dynamic and then I'm explaining how exactly should it be more dynamic for example add test animations and so on and last make it more colorful and here again I am explaining how colorful it should be. So a tips is if you don't know how to describe dynamic for the website you can just create something like this.

[4:59] Please make my website better looking. You can just send this easy prompt to Cloud IE and ask to improve it and after that you will copy that prompt and you will pass it in here. So once you have the prompt and you have the code base then you will click on send button and after that Cloud design will read the code and will start to ask some questions to understand how you envision your website. So this can take couple of seconds and I will come back to you once it is done. If you are finding this tutorial useful so far please give me thumbs up and click on the subscribe button for not meeting the next videos in this channel. Now back to the tutorial after 15 minutes we have a totally new design and before we dive into design I want to tell you that Cloud try to ask some questions.

[5:47] You can see in here it says Cloud has some questions. However, I didn't answer to those questions and after a while when Cloud noticed that I'm not answering to the questions, it chose the default option which means that it takes a decision for you. And in the end we have this new website design. If I try to go to full screen mode so that you can see it better in here you can see that we have the dashboard, then we have the URLs, history, runs, uploads that was used to upload all the URLs, and then we have even log and settings. And now back to dashboard. In here you can see that all the same information is presented in a better way and we can see the URLs and scheduled jobs. And then if we go to URLs here we have the list of URLs and then if we go to history here we have all the job results that were scraped from all of those URLs and we can use this filtering sections to easily filter different jobs.

[6:45] And this filtering is of course a way more user-friendly than the one that we had before. We can even choose the company, OpenAI for example, Citadel, Spotify and so on. And we have even the locations. And one thing that you might notice in here is that even though it is the same functionality, the data is different. And yes, it is very important to understand that what Cloud design does is reading the code base, understanding the functionality, and creating a design for the same functionality. However, Cloud design is not updating our existing code base. So, it just shows us potentially how our website could look without changing the website.

[7:32] And here for example under runs, we can see when we run this program, at which time and how long it took. It was run by schedule or manually. And then we have logs and settings. So, the conclusion is that this looks amazing. However, the next logical question is how to apply exactly same design on my code? Because this is just a suggestion. So, what is then the next step? The next step is asking Cloud Design to save all this design in one document in the same folder. And once Cloud Design does this, basically it will create a new file and will save information about the design in this file. And once that is done, then we can go and open the file with Cloud Code.

[8:17] And we can ask Cloud Code to read that file and understand the design suggested by Cloud Design and then to implement the new design. That is how you will get the new design applied to your code base. If you want to see how I use Cloud Code to actually apply this design on my code, comment Cloud Code and I will show it in the next tutorial.