Summary
Haroon Choudery presented a comprehensive demo of Claude Design, an AI-powered design partner tool that helps accelerate the creative design process. He demonstrated how he built two complete websites in under a day using the tool, including redesigning his AI Ready newsletter landing page in less than three hours.
Haroon outlined the complete AI design workflow spanning three categories:
Claude Design sits in the middle as a design partner, bridging the gap between ideation and production.
What is a design system? A systematized way of storing all brand and design details, including color palettes, styling of components, and other design elements. Building design systems traditionally takes designers a long time, but Claude Design accelerates this process significantly.
Why start with a design system: Creating a design system first provides uniformity across multiple assets - slides, landing pages, and other materials won't require re-instructing the tool about brand design each time.
How to create a design system in Claude Design:
AI Ready Newsletter Redesign: Haroon showed his old landing page and the new site he built in under three hours using Claude Design. The new site features hero animations, multiple sections, and clean design that would have taken much longer to develop previously.
Seeko Website: Demonstrated another site built with Claude Design - described as very simple and straightforward.
OpenAI Design System Demo: During the session, Haroon demonstrated creating a design system by using "Save As..." to download the OpenAI About page HTML and uploading it to Claude Design. The tool asks questions about design preferences before generating the system.
Creation Modes:
Feedback and Collaboration Mechanisms:
How collaboration might work: While the tool isn't fully collaborative yet, users can use comments and Zoom to conduct live prototyping sessions and send all feedback to Claude at once.
Haroon demonstrated using ChatGPT's new image generation model to create brand kits. He showed how you can generate a complete visual identity (9 slides describing brand system) in ChatGPT, then export it and upload to Claude Design to create a design system. This workflow enables going from idea to visual identity to working design template within half an hour.
Multiple export options:
Claude Code Integration: The tool generates a command to paste into Claude Code that fetches the design file, reads its readme, and implements the design. The handoff includes:
Important: The design files are not complete working applications hooked into a backend - they're design files that Claude Code uses to either integrate into existing sites or create deployable website code from scratch.
Users can upload existing slide decks and have Claude Design upgrade them using a design system or mood board. The process involves importing the slides and instructing the tool to recreate them in the new design system.
Figma's role: Figma will not be replaced by Claude Design. Users won't ask Claude Design to move components five pixels - Figma will remain the precision instrument for low-level design control. However, Claude Design can replace the bulk of the beginning stages of the design process.
Brand guidelines evolution: Traditional brand guideline PDFs will die. Instead, designers will deliver design systems in tools like Claude Design that provide much more control and flexibility. Clients will be able to make changes without constantly going back to designers.
Democratization of design: The tool helps non-designer founders overcome design constraints. While not yet perfect for application UI components, Haroon predicts it will be very good at that within 3-6 months.
Increased collaboration: The tool will likely become more collaborative with multi-user support in files. Anthropic is already setting up for this with brand design kit sharing permissions.
Set up a design system first in Claude Design, and everything will compound from there.
Notes
Haroon Choudery
Tools for:
His companies
Design system
Save As…
How might people collaborate on a live prototpying session?
You wont ask Claude to move 5 pixels for you, Figma will be used for low level control of designs. Can replace the bulk of the beginning of design process. More of a precision tool.
Brand guidelines - will die as a PDF. Get a design system in a tool like Claude Design - can take you a lot further. Not just a mockup, but a design system so you can make changes.
Transcript
Similar to Figma and some other tools that you might be used to, but it's not Figma, right? Figma is what happens when, if Figma is a much more precision instrument for design, this is much more of a design partner. AI design partner is how you can think about it. So if you think about the overall stack, and I think it actually generated a slide about this You can think of the tools used for ideation as just basic chat tools like Claude or ChatGPT, Notebook LM. And then you have on the opposite side, you have Claude Code, Cursor. This is what people use to actually build the designs into websites and such.
And somewhere in the middle, you have these AI tools like Claude Design, as you'll see, which help you actually embark on the creative process to refine the designs until you're happy with it. And then you can hand it off to the production side to get it spun up into a website. And I'll show you some workflows for how you can do that as well. This is a research preview tool, by the way. It's only available on Claude Pro, Max, Team, and Enterprise plans.
So if you have a Claude subscription, you should have this. Now, one thing I'll say is that the usage limits are quite low, just given... that is a research preview. And so I actually hit my limits just about half an hour ago and I had to pay Anthropix some more money to reset them. So just a word of caution, the limits can actually be hit pretty quickly. All right, so I'm going to show you a little bit of what I built in one day using cloud design. So just to give you a real example of something that I built in one day.
So I run a newsletter. I've ran it since like 2017 or so called AI Ready. We have 50,000 plus subscribers. It's all about AI. And this was our old landing page. Not too bad. A lot of green. I like green a lot, if you can tell. And this is our new site. This took me less than three hours to build. So if I scroll through, you have this hero, you see the animations going on in the background. A bunch of different sections here.
I think it looks pretty clean. You know, I think this would have a few years ago taken a very long time and a lot of taste to develop, but, uh, Cloud Design helped me make up for those things, right? It made this process extremely fast. And another example, I don't have a before version, unfortunately, but Seco, which is the company I operate, This is a new site that Claude design helped me actually implement as well. Very, very simple, very, very straightforward. And I'll walk you through how exactly I did that as well.
Okay. So Let's pop in a Cloud Design. Let's just jump right in. So this is called design. You visit cloud.ai slash design. If you are on cloud.ai, there's also a panel, I believe, on the left-hand side. It's not available as a desktop application right now. My prediction is that that is coming very soon because there's going to be a lot of workflows that will be enabled, especially between the hands. And off between Claude design.
And Claude code once it's available in the desktop version of But right now it's not available in the desktop version. What you'll see here is when you start out, you'll see a few different tabs on the left-hand side. You have the option of creating a prototype, wireframe or high fidelity.
Lee. A slide deck. I just showed you an example of a slide deck I created. These slide decks are, by the way, written in code. I believe you can export them as a PowerPoint, but they are JavaScript under the hood. You're also able to create animation. I won't go through an animation in too much detail, but I'll show you a little bit of what that looks like. So this was a very quick animation I created that describes compound interest. And this took about five minutes to render, and it's not perfect, and the curves are moving around a little bit. But it's not bad, right?
I mean, you think about motion design and how much this would cost to hire a motion designer to do or how much time it would take for a motion designer to do. This is like five minutes, right? And with another 15 minutes, I could get this to a place where it's looking very, very nice and neat. So it's pretty impressive, I have to say. AndYeah, I mean, you can also just kind of freestyle with it, right?
If you want to build like components for a website instead of like a whole prototype, you have this sort of like freeform mode. Now, my suggestion when you're starting out is to create a design system. What is a design system? A design system is basically a systematized way of storing all of the details associated with your brand and your design, such as color palettes, just styling of components, and such.
So you set up, but let's create a new one. So... I have a couple of design systems that I've already set up, but let's create a new one. So First thing you're going to do is you're going to set up the design system. And the reason I suggest starting with a design system is it'll give you a little bit more uniformity as you're creating multiple types Types of assets. So if you're running a business or if you're working at a company and you are interested in using Claude design for things like designing slides and such or like different landing pages, then you don't want to have to instruct it every single time on what the design for that brand is. Right.
So you, you can just set that up in a design system and then you can build projects from those design systems. And so in this case what I'll do just as an example is, is, well, I'll walk you through here first. So there's a few ways you could get started with design system. Building design system is not an easy task, by the way. Like this takes designers a long time to do, right? It's been time consuming every time I've worked with designers to do this.
But you can get started by just uploading some code. So you can link your GitHub repository to here. It'll read through files, the styling, it'll get an understanding. You can link to locally hosted, code on your computer. You can upload a Figma file, .FIG file. You can upload just like fonts, logos, or assets. And so there's a few things that you could do here. What I actually did earlier was I went on the OpenAI site.
I went on the About page here. And I just saved as. And by the way, is everyone able to hear me fine? And yes. and see my screen. It's 10 minutes in, but just to double check. Just a thumbs up emoji or if you can give me a thumbs up, that'd be great. Okay, I'm going to assume, okay, I see a thumbs up there. And let me also, I think the chat disappeared for me. So just apologies, one second.
So what I did was I saved us and I saved basically the code for this page in my downloads folder. And what I'll do is I'll actually just upload that here.
So, okay, so this is going to take a few minutes or so. And in the meantime, let me show you a couple of design systems that I had set up. So I set up a design system by linking our Seco website. And I mean, it's very impressive. If you take a look, it has this review page where it's taken different components from the site. And one thing about cloud design that's quite different is the user experience compared to other tools like Cloud Code or just regular Cloud is its review interface is quite interesting. So in this case, you know, they have these swipeable cards where I can say, okay, this looks good. This needs some work. And I'll say the outline for the transparent background buttons is too light.
I'll submit that. And then I'll go through, looks good, looks good, looks good. And then I'll go through and kind of just like finalize design files, right? And so this design system would then be available for me to use. It's already separated everything into like different colors. So the different, you know, font types, spacing components. I mean, this would have taken quite some time to build, but it's a very neat interface for doing something like this.
So I'm just going to paste in this prompt. including hero. All right. And then I'm just going to let this run and we'll revisit this in just a bit. One tip that I want to share with you that I think is very cool is so OpenAI, which is a parent company of ChatGPT, they launched ChatGPT images image to model yesterday. It's an incredible image generation model. And one of the things that. I think is very cool that you can do in that model is, you know, I gave this, this prompt, I said, basically, I want a brand kit for a company called Seco, AI native agency that helps me in market startups with AI transformations.
And I asked it to come up with a, you know, nine different slides for describing the brand system. And it did a pretty good job. But with a little bit of iteration, I think we could get to a really good place where transformations generation model. that I want to share with you. including hero. All right. And then I'm just going to let this run and we'll revisit this in just a bit. One tip that I want to share with you that I think is very cool is so OpenAI, which is a parent company of ChatGPT, they launched ChatGPT images, image to model yesterday. It's an incredible image generation model.
And one of the things that they're I think is very cool that you can do in that model is, you know, I gave this, if this prompt, I said, basically I want a brand kit for a company called Seco, AI native agency that helps me in market startups with AI transformations. And I asked it to come up with a, you know, nine different slides for describing the brand system. And it did a pretty good job, but with a little bit of iteration, I think we could get to a really good place where this is almost a deliverable you would get from a, Brand designer is working with you on visual identity.
But with a little bit of iteration, I think we could get to a really good place where this is almost a deliverable you would get from a a brand designer is working with you on visual identity, and then you could take this and you can copy that image and then you can export it. And then you can create a design system in cloud design to work with based on those details. So within half an hour, you can go from a just an idea in your head to an excellent visual identity template to a working working design template directly in Cloud Design. And then from there, you can build different websites, you can build different slides and everything will have that cohesive design and structure.
In this case, one of the things that I really like about cloud design is that it can give you options, right? So in this case, I was interested in figuring out where can we place the banner for different blog posts for blog hero images. And it gave me a few different options. And the way that I can interact with this page is not just going in here and saying, oh, I like the full bleed. I could very much do that, but I can actually get much more granular with this.
you a few of those ways. One is I can add some comments. So I can say, These buttons.
see that there's a comments tab here where these are populating. I'll say Let's add the nav to see how this looks. with the navs. A lot of the comments. So that's one way is you could just drop comments. You can also draw. So I can just say, Let's add dark mode here. So I want to make this a bit darker. So as you could see, the Note is down below here. but I'll queue that up. And again, this is a research preview. There's a lot of small bugs here and there, but nothing too crazy.
And then it creates a tweaks slider for you. So what you can say is, I want to experiment with this. with different shades of beige as the background color. Okay. So I'm going to send that. So it sent this feedback and it's going to create a tweaks panel for me. And what the tweaks panel does that's interesting is not only do you just go back and forth by prompting in the chat, the changes that you want to make, you know, I want to make it darker. I want to make it lighter because you're wasting a lot of tokens doing that. And it's a very slow process.
What it will do is it actually hook into the specific configuration that determines the sort of color of the token. background. And then it will give you a slider most likely where you can just adjust it, right? So you're able to provide feedback in much more granular ways rather than having to provide prompts for it to change it incrementally. Yeah, this is one of the bottlenecks for us here is it just takes some time for these things to generate. But in the meantime, why don't we go back and see how the...
OpenAI design system is coming along. Okay. Looks like it got hung up because of usage limits. So let's let that spin in the meantime. All right, so you can see the Tweaks panel down below here. And it didn't give me a slider, but it gave me a bunch of different colors. So I can click here, and you can see it's changing all of the designs accordingly. And if I wanted it to actually give me a slider, I could actually just tell it to do that.
So I could actually provide some feedback on the tweaks. And I can say, for... The Tweaks panel, can you give me a slider to adjust the color instead? as well. And I'll send that. Now, if you can recall, we also added some comments earlier and we queued those comments up. Those comments didn't actually execute. But what you can do is you can actually just select those comments and then you can send them to Cloud at once.
The benefit of this is instead of sending a message for every small change that you want to make or having to just construct a really long prompt with all the changes, which is a bit hacky, you can just go through, on everything that you see. And then you can just select all the things that you want to send all at once. It'll take care of that for you. Any questions in the meantime? Okay, so Alicia asks, can you upload an existing slide deck and have it upgraded? Yeah, absolutely.
you can absolutely upload a slide deck. The way that you would do that is basically If we go Okay, so I'll go back into the OpenAI thing, but just to show you how to do the slide deck thing, what you could do here is... Upgraded. slide deck, Let's use Seco's design system here. And then you can just import the slides, right? So I don't know if I have a... have a slide deck here, maybe not. But if I did, then what I could do is I could basically paste it in and I could say, hey, recreate the slide deck in this design system. If you have a mood board with different images and such, and you don't really have a design system in place, but you just have a kind of an idea of like, all right, these are images I like or different types of designs that I like, then you can have it do that too, right?
So I'll remove the design system from that. And then I'll actually go into this mood board where I just put together a few different graphics that I like. I'll upload those here. And... then I'll have it basically to more closely match the aesthetic of these images. But I would also need to attach a slide deck, which I can't find right now. But you get the gist. Going back into the OpenAI slide. So as you recall, we basically just uploaded the OpenAI OpenAI about page into that.
And what it does is before it gets started, it'll ask you some questions. So if you're familiar with Cloud Cowork or Cloud, sometimes it'll just ask you like multi... Choice questions. This is a bit different where, you know, ask you a bunch of these questions at once. If you're lazy like me, you can just hit decide for me for all of these different things. And then sometimes it'll actually show you like mini images that show you like different variations of component layouts as well. So it feels a lot more like a design partner.
That's the whole point of cloud design is it feels a lot more like a design partner as opposed to like a traditional just chat tool. So I could just have it decide for me or I could just add some more feedback. So I could say here, I want to create a design system, HiFi Pixel. But actually, let's make it a little bit more original. Let's get two or three variations. And let's keep it light. And let's use placeholders.
So you have a few options up here. One is that you can present if you're just showcasing this to the rest of your team to collect some more feedback. One cool thing that you could do is you could have group feedback sessions where you can just jump in and have a powwow where you go through and provide feedback all at once. And then you can just have Clog design rip. It's not super collaborative right now. That's one of my predictions is it will become more collaborative where you can have multiple users in a file, right?
They're already kind of setting up for this because you can, They have permissions where you can share brand design kits with others in your organization, but One thing that I've noticed is that they don't actually have the ability to add other people to your organization, which is kind of interesting because I do have other people in my organization, but there's no way for me to actually pull them in here.
And as far as I know, they haven't been able to check it out.
So you can imagine it'll become a lot more collaborative. You add the feedback and you can use a presentation mode to just share it on a screen while you're having a meeting.
So what you can do is you can copy this. Actually, look, they just added the access tab here. So you can copy the link and share it with folks.
You can download the project as a zip file. So if you're creating a presentation, this might be a good workflow, or you might just export as a PowerPoint slides or PDF. You can send to Canva. They have a native integration with Canva. Export as a standalone HTML, or you can hand off to Cloud Code. And how many folks here use Cloud Code or any of these coding agents? Well, assuming there's a handful of folks here that use Cloud Code, I think this is a really interesting design choice and a pretty cool one if you ask me. What you can do is if you land on a website design that you like, and then you actually just want to create a website from that design, then it'll give you a command that you paste into Cloud Code.
pod code, fetch the design file, read its readme, and then implement parts of the design. What it sends it is...
is whatever the open file is. So right now it's post templates, but I can go to the landing page and it'll send it to the landing page. So it'll send it basically like what is open right now.
That's something to keep in mind. It's not going to send it everything. So if you're working on a specific component, you can send it a specific component as well, as long as it's open in a separate tab. This file, it's important to note, is not the code for the entire working application, right?
Like this isn't hooked into your backend.
It's not going to deploy a website for you. What it's going to do is it's going to create a directory.
Okay, so it sends it this directory and in the directory you have the chats. So it has context on like the back and forth that you've had. And then it sends a readme. And so the readme will just provide a little bit more context on like the project itself.
Okay, so it sends it this directory and in the directory you have the chats. So it has context on like the back and forth that you've had. And then it sends a readme. And so the readme will just provide a little bit more context on like the project itself. And that you really creating a presentation. This might be a good workflow. So it looks like this isn't hooked. So it has context on like the back and forth that you've had. And then it sends a readme.
Okay, so it sends it this directory and in the directory you have the chats. So it has context on like the back and forth that you've had. And then it sends a readme. And so the readme will just provide a little bit more context on like the project itself.
But it did package up everything in the folder. And this is just a lot of this is it's basically all you need for the design the application and then Claude code will figure out if you have an existing site where to pull in specific components and styling and then add it to your existing site. If you're starting from scratch and you have no website at all, website code at all, then it'll create a version of this code that Takes into account all of the styling, but is actually set up to...
be deployed as a real website. So it's not going to, you can't deploy this just by itself. This is just plain, just design files, but it's a very good handoff.
One is there's been a lot of comparisons on Twitter about Figma versus Cloud Design and people are like, Figma is dead, right? I actually don't think that's the case at all, right? Figma is not getting replaced. You're not going to ask Cloud Design to move a component five pixels for you. You're not going to have to prompt it to do things like that. Figma is going to be used for much more low-level control of these designs.
It doesn't replace it, but it definitely can replacebulk of the beginning stages of the design process. Does it replace Gamma?
Second thing is brand guidelines are going to die as PDFs. Like you're not going to work with a designer in a year to create like brand guidelines in a PDF. Instead, what you'll do is you'll get a design system in a tool like Cloud Design or in competitors that will pop up because it can take you a lot further, right? Like you won't just get handed a landing page mock-up. You'll get handed a design system.
that you can use with these tools so that if you want to make changes to the site, everything adheres to that design system. So you'll have a lot more control over the future after the handoff of those designs.
You won't have to keep going back and forth with those designers typically.
And then the third thing is the non-designer founder stops being a constraint. So I don't have the best design taste, admittedly, but tools like this really help us level up the designs of our landing pages, isn't perfect for application design just yet.
So Seco, we have an application called Clutch. It hasn't been working too great for that just yet, but again, this is just early innings and the progress in the space is pretty fast.
So I would bet it's maybe another three to six months until it gets very good at that. Okay.
So that's about it. I know we're at time. And if there's one thing to take away from this presentation, it's going to cloud design, set up a design system first, and everything will compound from there. I write about this stuff on AI Ready. So please make sure that you subscribe. We're going to try to do these lightning lessons every single week. As you can tell, it's a little bit more informal, right?
Like I'm not going to spend a ton of time like necessarily They...
putting together very robust slides. Like we'll just jump into the tools and we'll start using them. And we share all of the workshops that are upcoming on AI Ready. If you have any suggestions for what you want to learn about next, please do let me know. My email is harun.seiko.ai.
So you can see that here, harun.seiko.so.