290 | Claude Design - the new way to create professional, production ready, applications UI and presentations with no coding experience

0:00Hello and welcome to the Leveraging AI podcast, the podcast that shares practical ethical ways to leverage AI to improve efficiency, grow your business and advance your career. This is Isar Maitis, your host, and today we're going to dive into Cloud Design. Now, those of you who don't know what Cloud Design is, it is a tool that Cloud has released just a few weeks ago that enables you to build and manipulate and edit and create new graphical user interfaces and or presentations based on guidelines and design components that are at a professional grade and can be reused accurately from one component in one page to the other.

0:40It allows you to build things that were possible to do before with just Cloud Code or Cloud Cowork or any other parallel tools from other suppliers, just with a much nicer user interface while getting really cool options to play with with almost no effort. Now, I really wanted to play with it for a while now since it came out, but I was traveling and delivering workshops and speaking at conferences and doing stuff like that and working with clients. And I did not have time to do this. But when I finally had time to do this, I really wanted to share with you my findings so you can enjoy this really cool tool as well.

1:12Now, what I'm going to do, I'm going to share my screen and I'm going to show you how it actually looks like and it works because it is a user interface creation tool and it has to do with design. But for those of you who are driving or walking your dog or doing the dishes or whatever it is that you're doing when you listen to the show, I promise you to explain everything thing that is on the screen but if you do want to watch it you can switch to look at it on Spotify has this as a video as well or you can go and check out our YouTube channel where you can watch this as well but if you're driving you might as well listen and stay with us listen to the full thing as I mentioned I will explain all the best practices and everything I've learned and you can if you want then go and watch specific sections on YouTube but with that being said let's get started and dive into Claude Design.

1:57So Claude Design uses the same login as your regular Claude account, even though it has a separate token count, which I was actually surprised to find out. And the homepage looks like this. When you first sign in with your username and password, it will show you the Claude design on the top left corner. By the way, to get to it, it's just claude.ai forward slash design, and you can log in and then you're into your account and you can start working. So you can pick from several different components. You can create a prototype, which will basically create a user interface for a website or a landing page or something like that.

2:29You can create a slide deck that will use the same design guidelines and systems that you create before. You can create from a template because you can create the templates. I will show you afterwards how to do that. Or there are other options that you can do that you can create and just explain in your prompt what do you want to build. In addition, you can create design, you can look at some of their examples, or you can create a design system. So what is a design system? It's basically your brand guidelines, but down to a very detailed level from a website design perspective. So if we take a look at one of my design systems, and I have more than one company, so I have two of them right now, and I will probably build a third one in the near future, you can see that it goes down to the component level.

3:17It will show me a draft of how the website looks like based on the design and I will show you in a minute that it looks like just like my website but it is not my website. It is based on my website and I will explain exactly how that happened before but you can see how it looks like. But also for each and every one of the components there's the type of every one of the components including the specific code and the specific font and the specific types of different sections and the display types and the heading scale and the brand palettes of colors and the other sets of scales of different materials that it's using and the different shades of the different colors.

3:55And then you can go into different badges and buttons. And if you look at the buttons, you can see the mouse over status of them and how they are actually going to work and different sizes of buttons and how they work on different backgrounds and all these different things appear in here. The cool thing is this is not just user interface from a view perspective. It is actually the right components in code. So everything you're seeing here is a component in code that you can actually click on the tab on top that says design files and it has all of these pieces of code that explains to a software developer or to CloudCode or any other platform that writes code on how to create the same exact components that will look exactly like your brand.

4:40So how do you create one? When you're on the main page, there's a create button under the design system process. And when you do that, it will give you a few different options on how to use it. You can just write a prompt of a description if you just have an idea and you don't know where to start. If you already have a starting point and you have an initial design of something, you can link to your GitHub repo and it will pull the information from there. You can link to a code from your computer. So if you haven't deployed it yet, but you created code, you can do that as well. You can upload a.fig file from Figma, or you can add fonts and logos and assets manually, whatever you have.

5:17And you can add any other notes. And then that becomes your starting point. Now, what I have done is I gave it links to my website. So this is how the Multiply website looks like. It has the same kind of style across the entire site and a very clear kind of typography and feel to it, which I personally really like. But that's the website. So I gave it the link to the website and I gave it my logos as files and my brand guidelines as files. And the results were far from satisfactory. And I spent a very long time and I can show you the chat on the left. You can see I'm scrolling and scrolling and scrolling and scrolling.

5:56I spent a very long time trying to fine-tune the actual look and feel. You can see one of the things you can see here is you can see how the website will look like. It's trying to mimic a simplified version of your website using its design guidelines, and it didn't look even close to the site, and it made a lot of mistakes, and it took a lot of manual processes to actually do it right. And it got to the point that in order to explain to it very detailed things, which are required for it to look like my website, it actually had me open the developer tools on the right, which is something the common user probably is not used to doing.

6:32So on the right side of every website, if you go on any element, you can right-click and click Inspect Element, and then it opens a sidebar where you can see the HTML and CSS and other different components and copy and paste them one by one, element by element, into Cloud Design, which was obviously not user-friendly, and it took me a lot of time and I was really frustrated. And then I asked Claude Design, I said, hey, there has to be an easier way to do this. This doesn't make any sense. I'm doing a lot of manual things. Help me out here. How can we automate the process? And then it said, oh, if you just go to your regular website and click on Command S or Control S or just File, Save, it doesn't matter how you do this, you can choose whether you want to save the entire complete website.

7:15If you do this, you will save the HTML, the CSS, the images, everything that comes with it. Give me that. And then I have everything I need and I can figure it out myself. And I wanted to say something really nasty, but I didn't because that's what it should have told me from just the beginning. So my first tip to you is if you have a website and you don't have it in regular HTML format, you can just save the HTML off the page, from the page itself, or from multiple pages if you want to give it multiple pages, and then upload them into the Cloud Design chat on the bottom. Now, the way to do this, those of you who downloaded HTML, you know that it comes as a main file, and then a lot of sub files and folders that hold the actual images and so on.

7:58So what I did is I took all of that, put it in a folder, and then I created a zip file from the folder that contained all the different files inside of it, uploaded the zip file into Cloud Design, and it was able to pull all the different components. And then within a few small tweaks, I had everything aligned the way I wanted. So number one lessons learned is don't try to explain or give it links to a website because it doesn't really have the way to access it. And even screenshots are not great because it doesn't know exactly what the font is. It's going to try to guess and it's going to guess it wrong.

8:30I tried. And so the way to do this is to save the website, the full HTML and CSS, zip it as a zip file, and then upload that as a reference. And then very quickly, you can iterate from there and get to the outcome that you want. So this is lessons learned number one. But then once you're done, once you're happy after you've just given it, and it works like any other kind of chat, As you can see here on the chat on the left, you can upload images from its design compared to the other design. You can write comments, it will write back, and you go back and forth until you get it to the point that you want.

9:02And once you get that, you can hit publish, and then you have a published website, and you can see the checkboxes up here. Once it's published, it is a design system that now anything else in Cloud Design can actually use. So now you can use it to create new website, to update existing websites, to create PowerPoint presentations or anything else that you want because it understands the exact design language down to the component level. How does a heading look like? How does a secondary heading look like? What does a button look like? What does a button look like when the mouse is over it? How does the header look like?

9:35Et cetera, et cetera, et cetera. How do images appear with a border, without a border? All these kind of things are all defined very clearly and now can be repeated in any design of anything that you can create. So then I wanted to do another interesting exercise. I create a lot of applications. Most of these applications are for internal use. I don't give them to anybody, so I don't really care how they look like because it's just for me, and as long as it's functional and I understand how they work, that's fine. One of those is an application that helps me create the news episode every single week.

10:06So those of you who can see the screen right now who are curious how I'm doing it, you can see here that it has dozens of different news articles all summarized from two different sources. So there's a summary from Claude and a summary from Gemini, and it can help me pick the one that it thinks is better and I can change it myself. And there's a lot of other information here and there's different views. There's a working view and a sorting view and a stories view and a production view. And each and every one of them has a slightly different view that allows me to do different steps in the process.

10:32There's a talent portrait view and there's a newsletter section that allows me to create the newsletter. So all of that happens with a lot of agents in the background that scout for different news articles and I can bring it myself manually and all of this is happening. And again, from a functionality perspective, it's perfect. Those of you who've been listening to the podcast for a while know that there is a deep dive section which you can see here with a green background. And then there's the rapid fire, which is in yellow. And then there's other stuff that actually goes just to the newsletter, which will be all the way on the bottom in red.

11:01And this is how it works. So it worked well for me, but I said, what if I can make this look like my website, like actually fit my brand? So all I had to do is go to the homepage and in the homepage, there is the function to choose a prototype. So you choose a prototype, you give it a name, you choose which design system you want to use. And you can see I have two. I have Multiply, which is my AI education company, and then Databreeze, which is my software company that does, and Databreeze, which is my software company that does accounting and invoice vouching using AI agents at scale. So I can pick each and every one.

11:35I picked the Multiply AI option, and then I gave it access to the GitHub repo of the app, of the news app that I just showed you. So it has access to the design and it has access to the actual code of the application that I already created. And in the prompt, I actually gave it a very short prompt. So the prompt was the Multiply News Hub was created without a Multiply design system. I would like you to show me how can the Multiply News app can look like if we apply the design system to it. That's it. Very short, without any fancy prompting and it created a very decent first version. So those of you who are not watching the screen right now, the screen is now divided into two components.

12:20Component number one on the left is a chat with different steps and it works very similar to Claude Cowork where it will design a process and it will follow it step by step by step. So it's an agentic universe kind of environment where it will create its own plan and then you can see which steps of the plan it is doing and it will think and it will execute and it will review and will do all these different things. And on the right side, which is most of the screen, it's actually showing me the design. And you can see that it looks very, very different than the original non-designed version of the application and that it follows the same guidelines as my website.

12:55The fonts are the same fonts, the colors are the same colors, the menus look like the menus. Now, it's not a fully functional application, but it's functional enough to see how it is going to work. So as an example, when I have the different views on top. I can click on that and see all the different views and see how they're going to behave and so on and so forth. So I can click on them and switch around and see the different views. You can see it's using the same colors. You can see the different icons look like my website. So it looks a lot cleaner and a lot more professional and a lot more like my website, which again, in this particular case is not a big deal because it's an internal software.

13:30I'm doing this as an exercise so I can show you how this thing works. The other really cool thing about Claude Design is you can ask it to create tweaks. Now, it will usually create one or two, but you can ask it to add more, which I did in this particular case. So the original tweaks, the tweaks always appear as a floating panel that you can move around so it doesn't block something you want to look at, and it will give you different options to play with. So in the original one, it just had two small options between comfortable and compact, and I also ask it to add different color swatches that I can pick from in order to see how the website can look like in different variations.

14:08So you can see right now it's showing a specific view of the website that it called signal and then there's one that's called depth and if I click on that you can see that the colors of the website change. So the background is now a different background and the headers are in different colors and the inside sections are in different colors and so on and then the same thing there's paper, there is press and there is cyan. Each and every one of them looks a little differently. All of them are using colors from my brand guidelines, but used in different ways inside the website. And I can pick the one that I like the most based on what feels good for me.

14:44There is no right and wrong in this particular case. The other thing that you can see is if I go to the working view, it created a compact view and a comfortable view. The comfortable view has more space between each news episode and the other, but it also takes more room on the page. So I can choose between these two options. It also gave me the option to show the week summary. So it's the top line that tells me what's going on or not. So I can add that or remove that and highlight unread rows or not. So it can highlight specific rows that I didn't review yet or not. I can ask it to give me more tweaks such as the hue or the brightness or the size of fonts.

15:25So just to try it out let's go to the describe what you want. So basically the prompt. I would like you to add to the tweaks slider that will allow me to pick the font size of the different components. Create a different slider for each different aspect of the application. And that's it. You hit send and you will now think about it and those of you who are watching will see that it's going to think about it. It does exactly what Claude does when you use Claude. It has all these cool funky names like scrambling and fishing and whatever it is it's going to say and it's going to create a plan and it's going to execute the plan and then I'm going to get a new version of the tweaks that will allow me to control with sliders the sizes of the different fonts.

16:07So in addition you can click on the fonts and you can choose to use it in an editing mode where you can select specific sections. So you can see up here, I have comments, I have edit, I have draw, and I have a zoom level. When I click on comments, I can apply comments to specific components. So you can see now I have a picker. I can pick a specific section, a specific text, a specific font, a specific feature of the screen, and I can click on that and then I can add a comment to this. so it knows exactly what I'm referring to. Or I can click on edit and then it opens an editing menu on the side and then when I pick a section, it shows me the colors and the fonts and the sizes and everything about that specific component and I can edit that manually.

16:53So it shows me the font, the size, the weight, the color, the alignment, the line with the tracking, the size, the width and the height of the actual component itself, the layout, the gaps, the field color, the opacity, the padding, etc., etc. Basically, every definition that exists in HTML and CSS, I can now manipulate manually, and it will remember that, and I can make the changes manually instead of using the AI to make them. So it gives you really all the different options. The draw function just allows you to draw on a specific section if you want to highlight a specific thing and tell it what to change in a specific area of the screen or create arrows to point on specific components and so on.

17:38So you can do all of that as well. So while we were talking about all of that, you can see that it has refreshed the tweaks panel. And now I have all these sliders that allow me to change the font sizes of the NavBrand wordmark, the tabs, the count numbers, the strip headings, the section titles, basically every type of font there is. And if I move the sliders, you'll be able to see this. So if you look at the NavTabs, you can see that the top section is now becoming bigger or smaller. the count numbers I can move it around and change that so even in the header components let's look at the section titles so there's no section titles in this view but if you go to the working view then I think we're going to see that so section titles oh interesting that doesn't change anything that I see let's look at the overview section so some of them probably just are available in just specific view so row headings okay so here we can see the row headings are changing and I can really control how big I want each font to be just by moving these sliders.

18:36So the really cool functionality here, yes, I could have done this as I showed you before by going to edit and then clicking at every specific component and changing it. But the fact that you can add either specific things or new functionality like entire color swatches or whatever it is you can imagine, like a complete redesign of the website in three different capabilities, it will allow you to do that. And then you can click between them and then you can mark specific components and say, I like this one from that design, this thing from that design, and I want you to find a way to combine it together.

19:05And it will be able to do that. So from a user interface design perspective, the process so far, just to recap, is to create a design system that is actual code of actual components that it knows how to reuse from buttons to fonts, to colors, to statuses of different things. And then it knows how to apply this to whatever you want. Either create a design from scratch, explain to it what kind of application you want, connect it to a PRD that you created in Cloud Cowork or Cloud Code, or as I did, take an existing website and do a facelift to it based on your design guidelines. So this is that aspect.

19:46But then, as I mentioned, you can also create presentations. So if you're on the homepage, when you pick the different functions, one of them is creating a slide deck. You can give it a name. You can choose the specific design language that you want to use. You can choose whether you want to use speaker notes, which then uses less text on the slide, which is how I like to create slides or not to do that. And then when you create go, it will take you to a place where you can select what kind of presentation you want to create. Who's the target audience? Who's the target audience? What is the goal?

20:17And all these different things. And once you answer all these questions, it will actually create a presentation for you. So what I ask it to create in this case, just to show you how cool this is and how all these things connect, I give it access to the same design system of my website and I give it access to the same code base of the News Hub application. And I ask it with one simple prompt, create a presentation that explains how the News app works and how to use the interface. That's it. And it created a 15 slide presentation that looks and feels very much just like my website, but it explains exactly how it works.

20:54And it does it in 15 slides. And you can see that there's not a lot of text on the slides. It's relatively little text with very clear, crisp slides that show exactly the processes and the different steps and how to use them, all designed exactly like my website with speaker notes on the bottom that can tell me exactly what to say in each slide. And it's showing the different components and how to use them and exactly how to navigate and the different views and so on and so forth. Exactly as I asked, including detailed, beautiful screenshots from the actual website that I didn't have to do myself.

21:30So the bottom line is simple. A, this is still in beta. It still has issues. It's still, you sometimes need to nudge it to do different things that it forgets. It sometimes will not complete exactly the process as you intended, and it will miss small things. And as I mentioned, if you just give it a link to your website, it actually cannot really see it for whatever weird reason. But if you download the content from the website and upload it, it will work really well. And then once you have a design language, design guidelines, design strategy, you can apply it to either creating new websites and new designs, or you can apply it to creating presentations that are really solid and look exactly like your brand guidelines.

22:16Now, the last final step that I want to share with you is there's a share button. When you share it, you can share it with several different components. So you can share it as a duplicate project. You can share it as a zip file. You can export it as a PDF. You can export it as a PowerPoint presentation. You can send it to Canva if you want to edit the design over there. You can export as a standalone HTML, which then you can look at the web page that you created as a standalone HTML. And the final component, which from my perspective is the most important one, handoff to Cloud Code. Meaning, because this creates entire libraries, and again, there's a tab on top that says design files, all of these are actual pieces of code explaining every single component in the design.

23:01It will send that to Cloud Code, including the design that you created. And now you can actually create the functionality for the design that you've created. So reversing the process that I did, right, I can create the design first and then send it to Cloud Code. And then Cloud Code will develop the actual functionality based on me explaining what I want or based on a PRD combined with the existing code components of your designs. So the buttons will be the same across everything that we're doing, the icons, the fonts, everything will be identical across every single page and every single section of every single page that you design.

23:38So what is the bottom line? The bottom line, this is a really cool tool. There are other somewhat similar tools, but not at that level of complexity yet. It is still in beta, but it shows you where the agentic world is going. And I talked about this many times on this podcast, that we are moving from a world in which the biggest difference is the actual model that is running to a world in which the tooling around the model makes a much bigger difference because all the models are pretty freaking good. And so tools like this and like Cloud Cowork and like OpenAI Codex and things like that make a very big difference in how you actually use the tool.

24:18As I mentioned, I can probably do most of what it is doing just using Cloud Code or Cloud Cowork, but it just makes it a lot easier to do. It gives it a easy to use user interface still with a lot of really well thought after functionality. So if you need to go and create new applications, you can do this in a much more efficient way. Now, since most of us are going to be vibe coding a lot sometime in the near future, I'm already doing it. I assume not all of you are doing it. But if you are, this is a very helpful way to create the entire design guidelines and then apply it to whatever coding platform you're using, right?

24:58So I can actually use the output from this to whichever tool that I want, because I can take the actual code components and the design as HTML and load it to Codex or to Grok or to whichever tool that I want in order to continue the implementation of the actual application over there. Bottom line, go test it out if you have a Claude account and if you're building any kind of applications. It's worth experimenting and learning. Even if this is not going to be the final product, it is worth understanding how it works, finding its limitations so you can learn how to use this tool or similar tools because there's zero thought in my mind that we're going to get something similar from everybody else and definitely from OpenAI.