Episode Categories:
Resources:
Join the discussion on LinkedIn: Got something to say? Let us know on LinkedIn and network with other AI leaders
Upcoming Episodes: Check out the upcoming Everyday AI Livestream lineup
Connect with Jordan Wilson: LinkedIn Profile
Start Here Series in our Inner Circle Community: Join for free access
Claude Design for Business: Practical Insights, Upgrades, and Best Practices
Claude Design has moved well beyond its early reputation as a visual novelty. Recent updates and workflow enhancements now make it a serious tool for organizations looking to bridge the gap between concepts and fully working digital artifacts. The following article breaks down what’s truly changed in Claude Design as of June and July, why these upgrades matter, and how to maximize business value by applying the latest best practices—drawing directly from a detailed, hands-on demonstration.
Claude Design Platform: Key Business Features and Recent Upgrades
Early versions of Claude Design were hindered by slow performance and heavy token requirements, even for premium users, making it challenging to complete basic designs within usage limits. These limitations deterred business adoption, especially for live or rapid prototyping needs. As of late June and July, several core changes have elevated the platform for business use:
Direct Desktop Access: The platform is now available on both web and desktop, removing previous access constraints and enabling greater workflow flexibility 05:08.
Seamless Data Integration: Organizations can now connect GitHub accounts and upload Figma files directly, making integration with existing development and design pipelines straightforward 07:07.
Advanced Brand System: The updated design system allows for granular control, not just over colors and type, but every design element, ensuring compliance with established brand guidelines 07:20.
Enhanced Collaboration and Export Options: Teams can export artifacts as PNG, HTML, ZIP, PowerPoint, and even send projects directly to Canva or Gamma for further editing 18:14.
Public Publishing and Better Workflow Fixes: Updates now allow businesses to publish artifacts publicly, optimize exports, and fix practical workflow bottlenecks that previously slowed adoption 01:40].
This combination of capabilities sharply expands the range of business use cases for Claude Design, moving it from standalone prototyping to a central digital design hub.
Workflow Innovation: From Ideas to Executable Artifacts
Current workflow runs tightly from ideation to fully editable output. Unlike traditional design tools, Claude Design initiates with a prompt box rather than a blank canvas, enabling rapid translation of business objectives into tangible artifacts 00:26.
A standout detail is the dynamic onboarding process: after receiving an initial prompt, the platform interrogates the user with project-specific, contextual queries. This simulates the discovery process with a professional designer—assessing goals, branding preferences, technical requirements, and audience needs before producing mockups 09:19. For business teams, this results in less back-and-forth, and more precise alignment with original project intent.
Furthermore, detailed iteration paths are supported, including:
File, folder, and brand asset uploads to ground outputs in up-to-date business data.
Integration with repositories like GitHub for live code collaboration.
Section-by-section building and direct in-canvas editing or annotation, allowing domain leaders to approve structure and content before presentation-level polish 12:07, 14:12, 29:19.
Hands-On Claude Design Business Use Cases
Recent demonstrations showcased how a marketer, operations lead, or sales manager can rapidly reimagine assets like internal tools or customer presentations without development bottlenecks. Key examples included:
Overhauling episode pages for a digital content platform by prototyping multiple user interface options in under 15 minutes 07:07.
Utilizing Claude Design’s question-based onboarding to uncover usability goals (e.g., sticky video player, collapsible transcript sections) and capture must-keep brand features or eliminate “busy” design elements 09:19.
Exporting production-ready outputs directly to compatible tools like Canva, reducing manual rework and maintaining workflow momentum across platforms 18:14.
Delivering actionable outputs—wireframes, mockups, presentations, or even direct front-end code—with variation types (safe, evolved, wild) to align with review cycles or A/B testing strategies 25:29, 30:16.
The flexibility to iterate by editing directly, submitting natural language prompts, or leaving specific comments streamlines collaboration between business, design, and engineering stakeholders.
Distinguishing Claude Design from Canva, Figma, and Google Stitch
Unlike Canva or Figma, Claude Design is conversation-driven and relies heavily on structured, language-based prompts rather than template-driven drag-and-drop interfaces. For workflow speed, Google Stitch may process faster; however, Claude Design delivers better onboarding and alignment by proactively asking business-critical questions and offering contextual suggestions 15:44.
Notably, Claude Design does not natively generate images, so teams working with image-heavy assets must upload graphics or use external tools. However, for rapid prototyping, brand system enforcement, and cross-platform handoff (especially where text and structure dominate), the platform drives unique business efficiencies 22:37.
Claude Design Business Implementation: Five Best Practices
For teams seeking the highest value from Claude Design, recent workflow analysis surfaces five specific business-ready best practices:
Define Audience and Outcome: Articulate clearly who the project serves and the targeted user actions. This primes the onboarding flow for more accurate, actionable questions and outputs 23:32.
Upload Authentic Source Material: Provide up-to-date brand guidelines, assets, and real data to minimize time lost to rework—everything from color palettes to sample files or direct URLs shapes context for generative outputs 24:14.
Work Section-by-Section: Approve wireframes, flows, and structures piece by piece before finalizing content or visuals. This creates checkpoints to lock in business requirements and prevents costly redesigns 24:39.
Give Targeted Revision Instructions: Utilize annotated comments and specific instructions for what to keep, change, or emphasize—especially critical for teams collaborating asynchronously or bridging technical/nontechnical roles 25:18.
Inspect Exports Thoroughly: Before coding or publicizing, rigorously check typographic details, spacing, and brand adherence by reviewing exported files. Subtle misalignments can propagate downstream if not caught early 25:32.
Adhering closely to these best practices sharply reduces time-to-asset and ensures production-quality outputs with less friction.
Claude Design Business Value: Key Takeaways
Claude Design’s latest updates facilitate a bridge from business idea to working artifact, leveraging guided conversation, granular controls, and export flexibility. While the platform has clear constraints (notably in image generation), its onboarding dialogue and output fidelity make it highly suitable for organizations focused on speed, repeatability, and collaborative iteration.
By tightly connecting project objectives, authentic assets, and actionable feedback loops, Claude Design now stands out as a pragmatic choice for business leaders looking to modernize artifact development without overhauling existing design or engineering stacks.
For further detail on implementation strategies or to see live demonstrations of the discussed workflows, reference the recent Everyday AI podcast episode and consider trialing Claude Design’s new features on a forthcoming digital initiative.
Topics Covered in This Episode:
- Claude Design Overview and Workflow
- Major Claude Design Updates: June & July
- Claude Design System vs. Image Generators
- Hands-On Demo: Claude Design User Flow
- Input Methods: Prompts, Files, GitHub, Figma
- Key Features: Editable Canvas & Iteration
- Claude Design vs. Google Stitch & Canva
- Export, Handoff, and Integration Options
- Best Practices for Using Claude Design
- Review of Generated Designs and Editing Tools
Episode Transcript
Jordan Wilson [00:00:16]:
The blank page used to be where creative work began. Now if you use claw design, it might begin with a blank prompt box. A marketer can prototype an internal tool without waiting for engineering. An operations team can transform a clunky spreadsheet into an interactive decision making experience, or just a sales leader can turn scattered notes into a polished customer presentation. Claude design is becoming less of a visual novelty and more of a bridge between an idea and a working artifact. And if you haven't used Claude design or maybe you haven't been keeping up, then today's AI at work on Wednesday is definitely for you. Today, we're separating the genuinely useful capabilities in claw design from the features that merely look impressive in a demo. So let's get into it.
Jordan Wilson [00:01:13]:
If you're new here, well, here's the big picture. Claude Design is more than image generation. It's a complete design system, an editable canvas, and real handoff from idea to execution. Some big updates also landed that I think have kind of flown under the radar. In June, Anthropic brought in a connected brand, direct editing, and a better connection with Claude Code. And then just in the last couple of hours, Anthropic actually added public publishing, better exports, and practical workflow fixes. And we're gonna show you a little bit of all of those things. So stick with us for the next twenty five or so minutes, and here's what you're gonna learn on today's show.
Jordan Wilson [00:01:58]:
You're gonna know what claw design is and what actually changed in June and July. You're gonna see how the workflow runs from design system to editable output, And I'm gonna give you at the end our very five best practices shown live here for getting the best results. Alright. Let's get into it. Welcome to everyday AI. My name is Jordan Wilson. And if you're new here, well, we do this every single day. Whether I'm in Chicago or traveling like I am today, this is your unedited, unscripted daily livestream podcast and free daily newsletter, helping business leaders like you and me keep up with all of the nonstop AI updates.
Jordan Wilson [00:02:37]:
I tell you what matters, what doesn't. You use that information to grow your company and your career. So if you haven't already, please make sure to go sign up for our free daily newsletter at youreverydayai.com. Alright. So Claude Design. I think when it first was launched, there was rightfully so a lot of talk and a lot of hype around it. Since then, though, I haven't seen hardly anything. And here's the reality.
Jordan Wilson [00:03:04]:
I think when Claude Design came out, it was I I I won't say a novelty because it definitely gave great, outputs and great designs. But where it was when it was first announced and where it is today, that's just two completely separate stories. And it's actually kind of a bad thing that all the updates that Anthropic has made to claw design have largely gone unnoticed because there was the kind of initial hype and the big splash of the initial launch of claw design, which when it came out, it was so slow. It was so token intensive. And now those things are actually much better. I actually wanted to demo claw design when it first came out, but for a live demo and, you know, just so everyone knows, I'm on a $200 max plan. You know? In a lot of my early testing when Claude Design first came out, I couldn't even complete one basic design. I hit my rate limits, in with a $200 above plan, and it was way too slow.
Jordan Wilson [00:04:03]:
So luckily, Anthropic has fixed those things, and we'll actually be able to look at a thing or two, here live. So, yeah. Let's just do it live. So, for our livestream audience, you'll be able to see this. Let me know if you have my screen. For our podcast audience, yeah, on Wednesdays, we do, kind of our AI at work on Wednesdays, which is normally kind of like a hands on demo. Sometimes they go really well, sometimes they don't. But either way, you can always check out the video version of the podcast on our website at youreverydayai.com, or you can just check out the show notes of the podcast, and we will directly link you to that page.
Jordan Wilson [00:04:40]:
Alright. So let's go ahead and, give this a try. And, yes, if you're wondering, claw design did make my normal, livestream, art here. So normally, I do that, but today, it was Claude Design. So alright. Let's make sure I get the correct window here before we get started. And just so you know, you do need to have a paid plan for Claude Design. And it is available now, which is great.
Jordan Wilson [00:05:08]:
It is available via desktop and, on the web. Whereas previously, it was only available, via the web. So now I am in my Claude account on the web, and the design is a dedicated tab usually in the lower left hand corner of your u kind of UX. So that's what I'm gonna do. I'm gonna go and click on that. And let me quickly walk you through what you have here, kind of in the main home screen of Claude Design. Because there's a lot of different things you can design. Right? Starting with the templates, I think is always a good idea.
Jordan Wilson [00:05:46]:
The templates that Claude suggests are mobile app design, slides, documents, wireframes, animation, UI mock ups, resume, three d object, research, HTML email, color and type pairing, diagram, flyer. So I I wouldn't quite think of this like a Canva or something like that. Right? Because it's not really where you're gonna click a template, and then you're gonna have, like, a draggable, you know, wizzy wag, what you see is what you get interface. It's not really like that. Think of all the power of Claude, helping you design things and being able to iterate in, natural language along the process. So, let's go ahead. I have an example here. But first, let me talk about some of the functionality, regardless of which of these slides or which of these templates you may choose.
Jordan Wilson [00:06:42]:
So you can start with different types of inputs. You can attach a file. You can attach a folder on your computer. You can connect your GitHub account. I have my GitHub accounts connected. So, you know, if you are kind of, you know, vibe coding different apps for yourself or for your team. You can actually, connect it directly with Claude Code and, GitHub, which makes the process much easier. You can also upload a Figma file, which is a little newer.
Jordan Wilson [00:07:10]:
You can create an entire design system. I'm not gonna be doing that, but that's how you can you know, similar to if you have used Canva before, you kind of have a brand kit. That's very similar. Setting up a, design system is much more robust than a brand kit, so it's more than just about, you know, colors and and typography. It's really just every single element that makes a good design great. So those are different starting points. And then you can, like I said, create a template, or you can, work with a code base. But in this case, I'm doing none of these.
Jordan Wilson [00:07:44]:
I'm just gonna start with a prompt. So I'm gonna get this going. I am gonna use what am I gonna use? I'm trying to think what we can actually get to in a live demo, already being eight minutes in. I wanted to use okay. Let's use Fable, but we're only gonna go medium. So, hopefully, it should be a little fast, and, hopefully, I won't hit my limits. Alright. So my prompt here is very simple.
Jordan Wilson [00:08:07]:
I said, I want to reimagine the user interface user experience for each episode page on the everyday AI website. Please give me three different examples, and then I left a link to, yesterday's show. Alright. So the great thing here, if you've never used clawed design, is it should feel pretty familiar to anything clawed. So even though it is in kind of its own dedicated interface, right, you're not using this in the the normal, you know, Claude chatbot. Claude design is its own section. It should be very familiar if you've used Claude or any just AI tool from being on us. So right away, we are greeted with questions, and this is actually the big unlock that I think makes clawed design really worth using.
Jordan Wilson [00:08:56]:
Even for me, right, I use, clawed design, not a ton. I do use it sometimes, but I lean a little bit more heavily into the combination of GBT images too inside codex and also Google Stitch. But one thing that Claude, designed does better than both of those is exactly what you're seeing now. And this is kind of like the we'll call it the visual onboarding process. So before I get started, Claude comes back and asked me, about a handful of questions on what it wants me to do. So before it just starts designing anything based on my prompt and based on what it found on the website, it's going out and doing these things. And it says Claude has some questions. So, I'm gonna go through these quickly, but it says quick questions before I design three episode page concepts.
Jordan Wilson [00:09:42]:
So it says primary goal of the episode page. What should a visitor do? And the good thing here is I don't have to type to Claude. I don't. I have the option. There's an other box where I can type something. But for the most part, looking at my request, it went and looked at the episode page as well. I can look at that by looking at kind of the chain of, chain of thought to see what it did. It's asking me very, very specific questions based on my prompt and the work that it did, which this right here, sometimes I'll literally just do this part in claw design and use whatever it takes, and then take it into, you know, into GBT images too, or into Google Stitch.
Jordan Wilson [00:10:22]:
So sometimes, for me, it's just worth going through this process because it's like you're working with a professional designer. You go in there with a brief, and you're like, this is what I want, and they're gonna look at it and be like, well, are you sure? Or did you think about all these things? Whereas, you know, some of the other systems, I think, don't do a good job of this, which is where I think quad design really thrives. Alright. So let's go answer the questions. This is primary goal of the episode page, and I can collect, select multiple of them. So I'm gonna say, the main goals are to listen and watch the episode and to explore more episodes. So, yeah, if you didn't know every single episode, all 800 and I don't know what we're on. 830 some episodes that we have.
Jordan Wilson [00:11:02]:
Each one has a dedicated episode page on our website, and you can go watch the video version or listen to the podcast version, and there's a lot of writing, written content on there as well. Alright. So next, it says visual direction. So I can keep the everyday AI branding, which is interesting because it found yellow and navy, which we don't have yellow and navy. So that was a little error, but not a big deal because I could correct that if I needed to. But I'm just gonna say for this one, evolve the brand fresher but recognizable. Alright. It said, how should audio video be handled? I'm gonna say beast, I actually don't know.
Jordan Wilson [00:11:37]:
It's saying a a big sticky player up top, floating mini player that allows scroll. I'm just gonna say decide for me. Because some of these things that'll give you great options and you can select multiple. A lot of times, I'll ultimately just say decide for me or I'll just type a little note. Alright. Transcript treatment, I'm gonna say collapsible expandable section. What content matters most? So I'm gonna say oh, this is a good one. I'm gonna say the topics which you don't know.
Jordan Wilson [00:12:07]:
So I'm gonna say, I'm gonna type in this one. I'm gonna say watching the video or listening to the podcast itself. Alright. And then it says design for desktop first, mobile first, both equally, decide for me. I'm gonna click decide for me. And then it said, vibe of the three explorations, three safe variations on one direction, one safe, one evolved, one wild, three very different directions or decide for me. I'm clicking the one safe, one evolved, and one wild. And then at this, this part here, which I love, I don't think Quad Design did this when it was first released.
Jordan Wilson [00:12:46]:
At this point, it's asking me for brand assets or screenshots. I'm not gonna go through and do that, but that's nice they have that. And then it says anything you hate about the current page or must keeps. And I'm just gonna say, it it feels too busy. Alright? Alright. I'm gonna click go. So now we have Fable five on medium setting going through and, cooking this up. And I do already have some examples of this done, which, I'm gonna hopefully, over the next, you know, five or ten minutes, it's gonna build it itself.
Jordan Wilson [00:13:20]:
So the cool thing here as our livestream or video audience can see, it's gonna build it live. Alright? So, I can already see it starting on, design one a, which it says is the safe version, the cleaned up refresh with a similar instruction, and current brand tidied up. Alright. So the cool thing is as it goes along, I don't have to wait for it to be done. And luckily, it is much faster than it used to be because when they first launched this, it was super popular. It went viral, and it was painfully slow for the first couple of weeks. So slow, in fact, that even though I wanted to really use it, I literally couldn't between the limits and just how slow it was, but it's much better and faster now. So a couple of other things to keep in mind as we kind of watch, Claude design here live is there is also an annotate button.
Jordan Wilson [00:14:12]:
So there's a comment button up top. I can click that. I can click on any single element that I want to and have it change it. So, yeah, I don't have to wait for it to finish. I can do that kind of as we go along. So like like I said, keep in mind, even though it is faster, it is still not super fast. Right? Especially if you have used a similar product. I'd say the the closest product in terms of features and functionality is probably Google Stitch, which I absolutely love.
Jordan Wilson [00:14:44]:
Google Stitch is much faster, but I think claw design just through that onboarding process. Ultimately, if I was to use the exact same prompt, in the three different versions. Right? If I were to use in claw design, Google Stitch in a combination of just, you know, codex using GPT image, and then codex itself to build everything, I think, ultimately, if I were to zero shot this, give a prompt, nothing else, I think claw design is probably gonna do the best. Not because it's the best at designing something, but actually, it's just the best at building that bridge and actually asking you some of those important questions. Alright. So as Claude keeps going, let's go back to our slides and talk real quick about some of the basics. So Claude Design launched in April. And for the most part, there weren't a lot of at least public updates until this summer.
Jordan Wilson [00:15:37]:
So in June, they announced the design systems and direct editing and the Claude code sync, which is huge. And, this, in July so far, they've announced public artifacts, new export options, and some workflow fixes. So to zoom out, again, don't think of clawed design as an image generator. Don't think of it as a Canva replacement either. I think, like I said earlier, the best way to think and to use claw design is to use natural language or any inputs that you currently have. So uploading, you know, maybe you have a mock up that you designed in, Canva, and you wanna turn it into, a wireframe. You wanna turn it into a mobile app, or maybe you just have some inspiration that you've collected throughout the Internet, and you have some screenshots of those things. Where I think you get the most, even for nontechnical, non designers, where you get the most out of it, is just moving from that idea or a starting point of a screenshot or a design to at least an artifact that works.
Jordan Wilson [00:16:40]:
Right? So it's I think it's really about breaking it into three systems. I say it's your brief. It's the system itself and then the artifact. So going through Claude design, going through the goal, the audience, the content, and the layout, then the system. Right? That's your brand rules, your assets, and your components that you upload. In this case, in my demo case, I didn't do any of that just for speed. And then last is the artifact, what you actually wanted to design. So that can be a prototype, a deck animation, one pager, etcetera.
Jordan Wilson [00:17:09]:
And the great thing is just the amount of control that you have throughout the process. So even though it is time consuming, the combination of being able to not just upload assets before you start, but also when Claude comes back and ask you questions, the ability to, iterate and also upload new files there. And then as you go along, there is just a ton of different control. And then actually when we're done as well, I'll show you some other things that you can do besides annotation. And then the handoff. Right? You're not just left with an HTML file, and you're not just left with, you know, something that you export. There's a lot of different options as well. So, you know, you can publish it as an artifact.
Jordan Wilson [00:17:51]:
You can, you know, as a PNG, as an HTML file, as a ZIP. Right? I've as a PowerPoint. The other cool things is you like I said, you can now send it directly into cloud code, which there's some caveats. Sometimes, in in my experience, it seems like it just sends in an HTML file. Maybe there's something I'm not doing correctly there. But the other thing that I really like is you can send a project straight into Canva, or you can send it straight into gamma as well. So maybe if you do have a lot of your, you know, images or just other, you know, maybe you're just more comfortable like me. I usually work in Canva a ton.
Jordan Wilson [00:18:30]:
You know, being able to start something, and going through that design iteration process with Cloud Code and then being able to finish it in Canva, is a real unlock for me. So then, like I said, being able to publish it, export it as HTML, m p four. Yes. Claude does create videos. Are they, Claude Design? Are they great? No. They're not. You know, you can actually get much better, kind of video out of Claude if you're using, you know, an MCP for, like, Remotion or something like that. So, that was actually the thing I was most shocked by when claw design came out, because I don't even think they mentioned that you could do animations and videos.
Jordan Wilson [00:19:10]:
And then I was like, wait. You can do animations and videos, which is really cool. But, you know, ultimately, cloud design just really helps you work faster, you you know, and then stay consistent with the built in brand systems. So let's go ahead and skip forward here, and talk about the best way to get started. I didn't do this, but you're always gonna have best the best best, results when you do import your own system. Alright. And the the great thing is is you can actually create that in another claud design file. You can say, I don't have a design system, or you might say, like, what the heck is that? But essentially, that's gonna define to a t.
Jordan Wilson [00:19:53]:
Right? Even down to things like rounded corners, spacing, you you know, typography, height, all these different things that you really want control over. Because the thing that people need to understand, generative AI ultimately is generative. Right? So, that means you could go and run the exact same prompt inside claw design even if you have a brand kit, and you're gonna get wildly different things each time. So the tighter that design system is, it actually I won't say it restricts the nature of a generative engine, but it does just give it much stricter, essentially prompt adherence requirements that it's not gonna go and create these very different things. So if you do need something that you reproduce, let's say, every week, you know, like or like me. Right? Like, every single day. Right, I create slides inside of, Canva. Right? For me, it's easier to do it that way.
Jordan Wilson [00:20:46]:
Yes. I could just hand that off to quad design, or to, you know, codex with, GBD image and create PDFs. It's still for me, that's a way I learn. Right? I I like to put things on the page and, you know, rearrange slides, rearrange bullet points that helps me present a little bit better. As an example, maybe my presentation today isn't as good because I handed that off to Claude Design. Alright. Let's go ahead and skip and talk a little bit here that it's much different than Canva or Figma. Alright.
Jordan Wilson [00:21:20]:
So I already talked about some of the differences, but kind of the strengths with claw design and how it's different from a typical non, you you know, chat interface design tool is it's conversation first. Right? And then being able to, ground your design in the design system that you upgrade. And then the huge unlock, right, is then being able to send this straight into Claude code itself. So in the same way, again, I think probably the single closest competitor to Claude design is Google Stitch. So in the same way, you can do a similar thing in Google Stitch. It uses nano banana. So that's a big unlock with, you you know, Google Stitch versus claw design. A big downside of claw design is it's not an image generator.
Jordan Wilson [00:22:05]:
Right? Claw itself does not generate images. It can, you know, kind of create, you know, some nice typography, and it it can give you good designs. But, ultimately, the best design obviously has images. Right? So you're not gonna see that, in, Claude design where you obviously can get that a little bit more easier in Google Stitch or, you know, in Canva and Figma. You you do get more of that, you know, here's all my brand assets. I can easily drag them in, move them around. That's not really what claw design is set up for now. Although, I do assume that anthropic may kind of add some of those more what you see is what you get features in the future, as they continue to add in and actually pick up steam, in, updating claw design.
Jordan Wilson [00:22:52]:
But, yeah, this is just very strong for exploration and repeatable first drafts. Whereas, you know, Canva, Figma, this is more just for manual creation and collaboration, you know, deeply, deeper publishing or product design workflows, and it's just stronger. I think Canva or Figma are stronger when position in multiplayer editing is needed. Alright. So let's just go ahead and get straight into our five best practices, and then we're gonna wrap and look at our final design. And I'm gonna show you some of the things that you can do once you have finished your design. So five best practices for working with claud design. Number one, start with the audience and the outcome.
Jordan Wilson [00:23:32]:
Tell Claude who it's for and what they should do next. Right? So whether you do that just typing, whether you give it an example of your current audience, whatever it is, always giving Claude the example of your audience and the outcome is gonna help, Claude Design come back with those better questions. Those questions that it asks you, right, sometimes they're just very design specific, and that was probably more of the example that I gave here because I didn't go through, and do give the audience in the outcome. Because I wanted to give a very beginner friendly, you know, not having to be a a novice, you you know, at claw design to get, some of the outputs. But it's always best to start with the audience and outcome. Number two, provide real source material. So my example, I give a URL, but it's always gonna be better if you upload. If you currently have a brand guideline, upload that.
Jordan Wilson [00:24:23]:
If you have images, upload those things. Data. Right? If you're creating an app, what like, whatever it is, you should always be providing real source material first. As much information as you can give claw design upfront, it's gonna save you a lot of time going back and forth. Next, build one section at a time. Approve the structure first, then you can refine the visuals and the wording. So, yeah, let's just say that you're you want to design an entire, an entire, workflow for a new app. Right? Work on one section at a time.
Jordan Wilson [00:24:57]:
Don't just give a broad prompt to Claude and say, hey. I want an entire app. Break it down into pieces. In the same way that you, you know, used to think of, you know, think step by step used to be one of those, you know, keywords for, you know, the prompt engineering days of 2023. I think thinking like that and using claw design like that is gonna give you better results. Number four, give specific revision instructions. Say exactly what to keep, remove, emphasize, or visually change. And I think it does make it easier in claw design doing that with the kind of comments or annotate feature.
Jordan Wilson [00:25:32]:
And then last but not least, number five, export and inspect everything. Alright. Especially if you are ultimately pushing this out as code. Right? If you miss, you know, something simple, like, an an example that I did, I use Claude code or or sorry, Claude design for a project that I was building in codex. This was before the g v d five six update where I think, you you know, OpenAI got much better at front end design. But before that, you know, I was using Claude, design a lot to, you know, start before I gave a project to codex to build. And, you know, one thing I noticed is, you know, I went through and I'm like, okay. Yeah.
Jordan Wilson [00:26:13]:
This this looks good from Claude. Let me go ahead and export this over to codex and start building. And then I realized, you know, going back and looking at things like typography, spacing, you you know, looking at, you know, making sure all corners were consistently rounded across different elements. You know, there are some certain details that I should have either better prompted in claw design or before I kick that over to codex, I should have been a little bit more, had had my inspector eye on versus just a vibe. Right? The vibe was, this looks great, and, you know, codex did a great job with it. But if I would have inspected it, I could have saw that there was some minor flaws. Alright. So let's go ahead.
Jordan Wilson [00:26:54]:
Let's see how we did in our five designs. Alright. I did give it a good, what, about fifteen or so minutes. So hopefully hopefully, it's done, but we'll see. Alright. So I am now, back in claw design. I'm gonna zoom out for our livestream audience here, and I do, let me scroll down. It did say it's done.
Jordan Wilson [00:27:20]:
So see exactly how long I don't know how long it worked, but the good thing is is we have three different designs. So as I zoom out here, we can kind of see them. The the canvas, if if if you've ever used something like Figma, it is very, easy to use because you can edit the design directly. Right? So in this first example, it gave me a headline. If I want to change the headline, you know, you do have some elements of kind of like a what you see is what you get editor because you can click on anything and you can, you know, edit it just as you're typing. Right. But it's not a true, you know, being able to move things around. You can, but it's ultimately going to break your design.
Jordan Wilson [00:28:03]:
Right? Like, I can, you know, resize this embed, but it's not the full embed. Right? A lot of times, it's easier to make these edits either just chatting to Claude. So there is an edit mode. Alright? So if you're in edit mode, that's where you kind of have that granular control, and you can click on anything and change it live. Or you can just stay in kind of chat mode, and you can describe the changes that you want Cloud Design to create, and it'll do that. Or, you can go up and go into comment mode. So in there, I can, you know, essentially click on any single element and just then leave a comment and send to Claude. So, essentially, there's, like, three and a half different ways that you can iterate on the design.
Jordan Wilson [00:28:48]:
Some are better than others. And it it does ultimately depend on what you're trying to do with this. Right? Is this just a deck? Right? If it's if it's a deck, maybe it's just best you change it here. Is it something that you're coding in cloud code? If so, maybe you use the comment or the annotation or you just chat to cloud code, especially if you're not a strong coder. You could look at some of the the more technical, iterations, and you might look at it and be like, wait. I don't even understand. Right? Even some of the design stuff. Yeah.
Jordan Wilson [00:29:19]:
I mean, it's super helpful. Right? So let me get out of comment mode here. I'm gonna go into edit mode, and I'm gonna click on this main element. So in the first, iteration that it gave me, this is kind of one a, the safe one. I can click on any element. And if you know the basics of, like, web design, it's gonna give you all of these options as well. So I you know, all your dibs, you you know, your h one tags, all these different things. In the same way, if you are familiar with web design, it's gonna give you those things.
Jordan Wilson [00:29:50]:
So I can go and kind of use some of these tools manually that, you you know, in a web design interface. Right? If you've used, like, WordPress or Squarespace or Wix or something like that, you do also have kind of that option to edit as well. Alright. So those are some of the more, technical aspects, but let's just go ahead and kind of zoom out and ultimately see how did Claude Design do. Alright. So this first, the first episode page was the safe one. It said it's familiar structure, the current brand tidied. Like I said, this didn't really nail my current brand because it didn't properly bring in the colors.
Jordan Wilson [00:30:30]:
It said that it was yellow. That was not correct. But in terms of how this laid it out, I actually really like it. You know, it has the video front and center. It has chapter markers on the right hand side. It has, like, an up next section on the on, right under the chapters, key takeaways, quick buttons to listen on Spotify, Apple, and Amazon. So overall, I mean, this is much better than our current website design. Right? I'll I'll show everyone that for our livestream audience.
Jordan Wilson [00:31:01]:
Right? I mean, we built this originally, like, four years ago. So, you know, our current website design, it's super busy. Right? It's this dark mode with white fonts. You you know, personally, I think when we launched it, I was like, this is good enough. You you know, I didn't really care as much. Now looking back at it, I'm like, this is super busy. So, I mean, just in that example, I remember our team spent a lot of time when we initially put this together. Part of it is, you know, design trends change, and even web design capabilities change.
Jordan Wilson [00:31:33]:
You know, changing certain things on here used to take a long time. I could export this as HTML and get it up on the site, you know, pretty quickly. I'm not actually gonna do that, but it's possible. Alright. Let's look at option b. Option b is evolved. This is, it says the editorial daily briefing feel, a serif recap, synced chair, chapter player. So a little bit different, but it essentially made the video a little bit smaller.
Jordan Wilson [00:32:02]:
It does have definitely more of an editorial feel. Live stream audience as I go along, which one do you like? Do you like one a so far? Do you like one b? So far, I like this one b version a little bit better. It makes the video a little smaller. I don't think the video would need to be super huge. Right? The the value of of this podcast, I don't think, is necessarily the, what I'm showing on video aside from Wednesday episodes, which obviously the video is important, but otherwise, you know, it's just kinda my my notes on the screen. So option b looks pretty good. You you know, similar similar overall style, but let's go to option one c, which is wild. So here it says dark broadcast console, full blade player.
Jordan Wilson [00:32:42]:
There's a ticker in a live feel. So I don't hate this one. Alright. It has a ticker at the top. Yeah. This to me looks like you're, you you know, I don't know if you're watching, you know, ESPN live or something like this. This looks like a live broadcast. You know, 100% of the focus is on this full bleed episode video.
Jordan Wilson [00:33:03]:
You you know, lacks less of an, of an emphasis on the actual written content, summaries, chapter takeaways, those kind of things. This is like if you're just gonna want to digest as much video as possible. Alright. So that's the process. Like I said, everything else up here being able to leave the comments. So let's just say, you know, I can click this bar, and I can say, you know, make the bar, you you know, neon blue so it stands out more. Right? All I have to do, click that, send a send a Claude code, and then you can see down here it's already working on that. So without having to redo the whole design, that's just a very quick way to iterate.
Jordan Wilson [00:33:49]:
And it's already done. Right? So bless up that, you know, claw design is actually faster now, and you can't just iterate on small things because, yeah, when it first came out, doing some simple, iterations like that used to be a lot more time consuming. But now it's it's done. Right? And I, you know, can go through and change things just like that. There is a tweaks section, which is very similar. I don't even fully, you you know, understand this tweaks section up here, but you can just click the ideas, and it's just gonna give you different ideas based on what it created anyways. Alright. Then last, there are some presentation options you can present in, claw design as well.
Jordan Wilson [00:34:28]:
We already went through the editing and then the sharing. So, I can publish this as an artifact, a PNG, an HTML, or a zip file. I can send it to quad code, PowerPoint, Canva, gamma, video, or PDF, and then I can also share this link with my team. Alright. So that is a wrap y'all. A lot to cover. But, overall, I think the thing to, keep in mind, even though Claude Claude design, right, the big downside is there's no image generation. Right? And I think most great designs obviously have images, which at least for me and my purposes is maybe one reason I don't use it a lot.
Jordan Wilson [00:35:15]:
So, yes, you can obviously upload images, but at least when my mind is thinking, you know, I'm going to vibe a design, I don't necessarily always want to, you know, create my own assets or bring in my own assets or, you you know, for me, I love using Google Stitch for this. A big unlock that people don't realize is, you know, inside codex using, GPT image and just, you know, I have a skill that can create an entire deck including images on the inside. But I think where claw design really thrives is getting it from idea to actually a working artifact on screen. And it does a really good job. And, obviously, the more time and care you put in, the better the results are gonna be. So that's a wrap for today's AI working Wednesday. Now you know the basics of clawed design. If you want to see more on Claude design in the future, let me know.
Jordan Wilson [00:36:07]:
And, also, what was your favorite design? I think I kind of liked one b, although that wild version was kind of fun to look at. Alright. So thank you for tuning in. If you haven't already, please go to your everydayai.com. Thanks for tuning in. We'll see you back tomorrow and everyday for more everyday AI. Thanks, y'all.