Transcript
A (0:00)
Foreign welcome back to How I AI. I'm Claire Vo, product leader and AI Obsessive, here on a mission to help
B (0:09)
you build better with these new tools.
A (0:11)
This week there has been so much released in the AI for design space. Whether you're looking at claw design, trying to decide if it's really going to replace Figma, or want to know if the new GPT Image 2 model is actually that good, I've got you covered with a mini app where I'm going to show you what I really think about these new design tools and how they'll work for your business and a couple fun use cases. Let's get to it.
B (0:35)
This episode is brought to you by Work os. AI has already changed how we work tools are helping teams write better code, analyze customer data, and even handle support tickets automatically. But there's a catch. These tools only work well when they have deep access to company systems. Your copilot needs to see your entire code base. Your chatbot needs to search across internal docks. And for enterprise buyers, that raises serious security concerns. That's why these apps face intense IT scrutiny from day one to pass. They need secure authentication, access controls, audit logs, the whole suite of enterprise features. Building all that from scratch, it's a massive lift. That's where work OS comes in. WorkOS gives you drop in APIs for enterprise features so your app can become enterprise ready and scale upmarket faster. Think of it like Stripe for enterprise features. OpenAI perplexity and cursor are already using work OS to move faster and meet enterprise demands. Join them and hundreds of other industry
A (1:40)
leaders@workos.com start building today. I have to start today's mini episode with a little bit on Claude Design. In case you missed it, last week Anthropic released Claude Design and it's their web based design tool. Really focused on a couple areas, prototypes including wireframes and high fidelity prototypes. People are asking is this going to replace Figma in the design flow? Spoiler alert. I think it might actually replace some of these prototyping tools that everybody's using before they go to engineering. It also is taking a swing at slides and videos which I think is kind of interesting and also has templates for animations and videos which we can also show a little bit of on this episode. But what I think makes Claude Design really interesting is they're making the design system a first class citizen of this design tool. So the first thing I did was actually go in and just import my design system. And I think this is really smart because the Number one complaint I know people have about using prototyping in the product development life cycle is it never matches my brand, it never matches our design system. And these prototyping tools, while I think great, you know, the lovables, the v zeros, the bolts, etc. Also have this concept of design system import. I really haven't found they get perfect at replicating my existing design in my code base. And so I really wanted to test this use case for Claude design and see if it actually works. So the first thing I did was really import my design system. Importing a design system is pretty easy and I'm actually going to show you how to do it by importing Lenny's newsletter design system. So if you see here, this is what I filled out to import Lenny's design system. Sorry pal, we'll see how this looks. I really just went to his homepage, I clicked save on the HTML, I saved the logo, I saved our little campfire here. I saved this nice little graphic and I just put it in here in the cloud code. Create your design system form. So I said it's Lenny's newsletter, I don't have access to his GitHub. If you want to give me access friend, I can, I can make this even better. I uploaded just a saved HTML and some images and then added those fonts, logos and assets. I didn't even put in additional notes here, I just left it blank. And then as you can see, Claw Design goes ahead and starts exploring the provided materials and wants to understand the newsletter and then build out your design system in the format that they need. And what's really interesting here is they warn you. So they say this is going to take about five minutes. And it did, it took about five minutes. And you look along the side on the reasoning, it's pretty interesting to see how it extracts the design system. It's looking at the HTML and key images, it has a visual picture now, it has a sense of what core colors and other things it's going to work. And then it's going to build out this structure of a design system sort of in a skills and documentation mode that then cloud design is going to use. And looking here, I think it looks pretty good. If you look at this, it looks pretty comparable to this. I would say the only difference is Lenny uses sans serif fonts for his headers. So what I might say is, you know, we typically use an serif fonts for the main headers other then top level switch that. But otherwise it looks good. The other Thing that is pretty cool here is there's, you know, the newsletter kit, the typography colors, so you can actually see how it breaks down the idea of a design system. Even if you're not going to use Claude design, the idea of breaking your design system for any AI tool into these components, UI kits, typography, color components and brand marks is really interesting. In fact, just today Google Labs released the design MD standard which they're trying to make sort of a standard agents MD or skills MD standard across how you would describe a design system for use in Google's design tools but also other AI design tools. And so you're really seeing a lot of these solutions move to the concept of a structured design system that then can be used by AI to render consistent high quality UI against your experience. So this design system is really interesting. I also created one from Chat prd. The one that I did here, I used the actual GitHub so I hooked up the very specific GitHub directly to this app. So it pulled in some pretty specific components and UI across our app and our marketing site. So you can put as much or as little as you want into these design systems. But I think it's a really interesting flow. And then going back to the core capabilities of Claude Design, I just want to show you a couple things that I thought was really interesting. One is I think its ability to adhere to a design system for marketing specific landing pages and websites is really good. So if you were on the marketing side and you have been sitting out doing prototyping because it's so hard to get your brand assets into a really nice workflow, I think cloud design is a really great one for you because it's particularly good at that. Okay, so I'm going to use Lenny's design system and really show you what this looks like in practice. So let's say Lenny's going to come into competition with Chat Purity and we're going to create the Lenny PRD builder using the Lenny design system. We're going to have a head to head compete. Lenny or Claire who writes better PRDs. Well, I'm going to use Claude Design, the Lenny's newsletter design system and I'm going to say PRD Maker and I'm going to click Create on this high fidelity prototype. I'm going to start with the design system. You can see it's already selected down here. It's an interactive prototype and we want to do hi fi design and I'm just going to use my monologue to right in here What I want, please help me make a landing page for a PRD generator and AI PM Coach, powered by all the data in Lenny's newsletter, adhering to the Lenny newsletter design system. Make It Awesome. Make it awesome is the design version of Please Claude, make no Mistakes. So I'm going to go ahead and send that in and if you're looking for a little bit of fun, we have a couple new loading messages here over in the Claude AI design loader. It's not flibber jittering or whatever it used to be in Claude code. It does things like saute onions. Very funny. Okay, so it's going to ask me about the purity generator landing page again. I really love this Q and A functionality that's in quad code and they've made it very nice in Claude design. The product is called Lenny Doc and it's going to help you. An AIPM in your pocket is trained on Lenny's archive plenty. Please don't compete with me. I'm tired. All right, who's your audience? New and aspiring PMs. It's going to be pure Lenny. Decide for me on what sections I should include. How interactive should it be? I'm going to do small live interactions, but not the full thing. Again, this is for a prototype. We'll let it decide pricing. I love this. If you haven't seen this in quad design, they give you little wireframe hero style directions and I even got one of these that said, tell me what appeals to you. I love that so much. And for me, I'm just going to go with this. This appeals to me. I don't know, I just like it. And then I'm going to just let it decide. And then here's another really cool function of claw design. It gives you variations, which as somebody who has spent so much time in a B testing in her career, I think is so fun. You can decide how many options you want. You can get one option, you get three options, you can get five options, it defaults to three. And I think this is really smart from a design tool perspective because often those cycles of no make it better or, or make it different can be very slow. And most people coming to cloud design probably don't have the ability to articulate exactly the changes they make. So it's really smart to put three separate ideas in front of the consumers of cloud design and let you pick what you like and figure out just from looking at it versus having to iterate with a prompt. Anything else you should know? No, we're going to continue here and ugh. And we ran out of credits. Okay, brb, the number one problem we all have with anthropic products is there's too many limits. I immediately hit my limit. I've only done about two or three things in Claude design and I am blocked until Saturday and it is Tuesday so I went and paid my clod chits to the anthropic gods. Let's see if it'll let me try again. Yes. 200 later, we are back. All right, so it's going to go ahead and create this landing page for this Lenny tool builder. Now another piece of feedback that we're going to have to deal with during this podcast is it is slow and I think one of the places where Sigma is going to continue to win. And we saw this in our How IA episode with the Figma team about how they use MCPs with design systems and design tools. In particular, you want really short feedback loops. If you don't like how something looks, you want to be able to change and modify it pretty immediately. And I have to say this is where Figma really wins. Just your ability to drag things, change things, change the font without having to wait for an LLM call, without having to top up your credits immediately. There does not need to be a model in the loop. I think we underestimate how nice that is from a speed of iteration perspective when you're building and designing things. And I think that is one reason why Figma will continue to be a nice iteration and design canvas for any kind of design work. Because honestly, the cycles are so slow here with quad design. This is probably going to have to take about five to 10 minutes. I should step away from this, but we're going to pause, come back to it when it's done sauteing and shelling as it says in the waiting.
