How to use claude design

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.