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

What if you could turn your ideas into fully designed applications—without designers, developers, or endless back-and-forth?

That’s exactly what tools like Claude Design are starting to unlock. In this episode, you’ll see how AI is moving beyond code generation into full design systems—giving business leaders the power to create polished, scalable interfaces with minimal effort. 

If you're building internal tools, products, or presentations, this episode shows you a smarter way: create once, systematize your design, and apply it everywhere—from apps to slide decks—with consistency and speed. 

In this session, you’ll discover:

•  What Claude Design is and how it creates reusable, code-based design systems 
•  The biggest mistake people make when trying to replicate their website (and the simple fix) 
•  How to turn any existing product into a polished, on-brand interface 
•  The power of combining design systems with code repositories for instant upgrades 
•  How AI can generate full presentations that match your brand automatically 
•  Why “vibe coding” and design automation are becoming essential for modern leaders 
•  The current limitations of the tool—and how to work around them effectively

About Leveraging AI

• The Ultimate AI Course for Business People: https://multiplai.ai/ai-course/
• YouTube Full Episodes: https://www.youtube.com/@Multiplai_AI/
• Connect with Isar Meitis: https://www.linkedin.com/in/isarmeitis/ 
• Join our Live Sessions, AI Hangouts and newsletter: https://services.multiplai.ai/events

If you’ve enjoyed or benefited from some of the insights of this episode, leave us a five-star review on your favorite podcast platform, and let us know what you learned, found helpful, or liked most about this show!

Transcript

GMT20260505-020623_Recording_as_1512x982 0:00

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 Meitis, your host, and today we're going to dive into Claude Design. Now, those of you who don't know what Claude Design is, it is a tool that Claude 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 and one page to the other. It allows you to build things that were possible to do before with just Claude Code or Claude 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. Now, 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're listening to the show, I promise you to explain everything 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. So 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/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. You can create a slide deck that will use the same design guidelines and systems that you created 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, uh, 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, uh, 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. It will show me a draft of how the website looks like based on the design, and I will show you in a minute, that 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. And 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're 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 Claude Code or any other platform that writes code on how to create the same exact components that will look exactly like your brand. So 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, and 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 kept scrolling and scrolling and scrolling and scrolling. I 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. So 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 Claude 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 wanna save the entire complete website. If you do this, it 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 of the page from the page itself or from multiple pages if you wanna give it multiple pages, and then upload them into the Claude 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 subfiles and folders that hold the actual images and so on. So 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 Claude 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 gonna try to guess, and it's gonna guess it wrong. I 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 giving 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. And 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 Claude 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? Et 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. So 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. There's a teleprompter 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 have 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 all the stuff that actually goes just to the newsletter, which would be all the way on the bottom in red, and 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 wanna 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. I 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 c- 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. Component 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. Uh 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. The 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, uh, 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. I'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 y- it doesn't block something you wanna 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. So 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 websites 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. There 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 y- 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. So just to try it out, uh, 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 it 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 gonna create a plan, and it's going to execute the plan. And then I'm gonna get a new version of the tweaks that will allow me to control with sliders the sizes of the different fonts. So- In addition, you can click on the fonts, and you can choose to g- 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, uh, 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. So 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 op- the opacity, the padding, et cetera, et cetera. 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 wanna highlight a specific thing and tell it what to change in a specific area of the screen or do-- or create arrows to point on specific components, and so on. So 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 nav brand 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 nav tabs, 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 gonna 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 views. 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. So 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 said,"I like this one from that design, this thing from that design, and I want you to find a way to combine it together," and it will be able to do that. So on-- 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 Claude Cowork or Claude Code, or as I did, l- take an existing website and do a facelift to it based on your design guidelines. So this is that aspect. But then, as I mentioned, you can also create presentations. So if you, 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 wanna use. You can choose whether you wanna 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, and all these different things. And once you answer all these questions, it will actually create a presentation for you. So what I ask you 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. And 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. So the bottom line is simple. A, this is still in beta. It still has issues. It 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. Now, the last final step that I wanna 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 s- export it as a PowerPoint presentation. You can send it to Canva if you wanna edit the design over there. You can export as a standalone HTML, which then you can look at the webpage that you created as a standalone HTML. And the final component, which from my perspective is the most important one, hand off to Claude 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. It will send that to Claude 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 Claude Code, and then Claude 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. So 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 Claude Cowork and like OpenAI Codex and things like that make a very big difference in how you actually use the tool. As I mentioned, I can probably do most of what it is doing just using Claude Code or Claude 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? So 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 Groq 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 doubt in my mind that we're going to get something similar from everybody else and definitely from OpenAI. That's it for today. If you enjoyed this episode and if you like this podcast, I would really appreciate it if you are going to share it with other people. It is very easy to do. There's a share button on your player, and you can immediately send it to people that you like. Don't forget to check out our courses. We are now selling cohort number three of the multi-agent orchestration course. That is going to start on June 22nd. The course after that, A, is not going to have the$200 discount, so if you want a discount, you better sign up for this one. And second, will probably be on the second half of July, so that pushes it another month into the future. So if you want to learn sooner, come and join the third cohort because it will sell out just like the first two that were sold out before we even started them. So that's it for today. Have an awesome rest of your week, and we will be back on Saturday with another news episode.