Services
Platform
Technology
Industries
Insights
Resources
Pricing Careers Talk to us

Full transcript

Claude Design: Build Your First AI-Powered Design System

Recorded
Duration
1 hour
Speakers
Charlie Cowan

Claude Design launched weeks ago at claude.ai/design — most teams haven't tried it yet. Watch Charlie Cowan build a complete design system live, then implement it in a real product. No design experience required.

Watch the recording Webinar details

What this session covers

  • What Claude Design is and where to find it
  • Build a design system from scratch in Claude Design
  • Implement your design system in a real application
  • When to use Claude Design vs traditional design tools
  • Getting started: your first session in Claude Design

Transcript

Lightly edited for readability from the session recording. Also available as markdown.

Charlie Cowan: Well, good afternoon, good morning, depending on where you're dialing in from. Lovely to have you join us on this week's Kowalah Wednesday webinar. If this is the first Wednesday webinar that you have joined, welcome. We get together every Wednesday, 3 o'clock UK time, 10 o'clock Eastern Time, and just get to talk through something that is top of mind in the world of AI, and specifically in the world of business use of AI. It might be things that we're using internally, it might be new product launches, it might be things that we are seeing in our customers. It is such a fast-moving space that we're all in, that this gives us a sort of time to think and go through what is happening and how we can apply it into our business. This week, as always, we are going to go through three things.

Charlie Cowan: The first is our main topic of the day, and I'm going to introduce you to that in a minute. Then, we'll talk about AI in the news. Like I say, there is so much stuff that is being released and launched, it can be hard to keep up. And it's our job to keep up on your behalf, and so we will touch on some of the newest releases from people like Anthropic and OpenAI, so that you can understand how to implement them in your own business and what's important. And then we'll have a time for Q&A. You don't have to ask questions just about what we've covered — it could be about anything, and I will do my utmost to answer live while we're in the call, or alternatively I'll take a note and make sure we come back to you with an answer.

Charlie Cowan: But I would say, don't worry about waiting until the end to ask any questions. If you've got a question or a comment about something I'm covering, feel free to ask. We're in a Zoom webinar, so depending on what device you're on, maybe it's at the top of your screen or the bottom, you're going to see a chat panel, where you can chat, and either I can see that, or others on the call can see it. And there's a Q&A panel, if you've got a question you want to ask. My human colleague, Caitlin, who's on the call, is going to keep an eye on that — I'm in a lovely little WeWork booth here on one screen, so if I miss your question, Caitlin will keep on top of things.

Charlie Cowan: So do ask your questions, and we'll keep it as interactive as we can. So, to today's topic, and I'm really excited about this one, because it's something that was maybe on the fringes of what I was doing — not a deep experience that I've got around design. It's called Claude Design, a new product platform that was launched by Anthropic just a couple of weeks ago, and even in just those few weeks it has transformed how we're designing and building our platform, and we're using it in so many of our client meetings. If you are not a Claude user, you definitely won't have come across Claude Design.

Charlie Cowan: But even we're hearing from a lot of our Claude clients that they're not familiar with Claude Design, or they're not quite sure how to use it, or what to use it for, and so that's what I'm going to walk you through — a bit of our experience, and how things are working. So with that, let me switch out of this slide and show you a few things. Let me go over to Claude Design — let me see if I can make that a bit bigger. There we go, that's kind of full screen. So, here I am, claude.ai/design. And if I go to my normal Claude, let me go to Claude New here, you're gonna see in the sidebar you've got Design.

Charlie Cowan: If you don't see it there, you're gonna see there's a Customize sidebar in your Claude, and here's where you choose things — maybe Claude Design isn't there, and you want to turn it on. You click on that, and it takes you to this URL, claude.ai/design. Now, what do we mean by design? We can think about prototypes or screens in an application, maybe a mobile app, maybe a website — the kinds of things you might have designers today working on in tools like Figma, to build out mock-ups or high-fidelity designs of what a product might look like. It might also be that you want to create artifacts for an event — maybe you need posters, or signs, or handouts.

Charlie Cowan: Maybe you need some very stylistic slides. So it's anything where you might have either an in-house design team, or go externally to an agency to design things. This is what we're talking about — it's design, not the actual product engineering and writing of code to build the product, it's the design side of things. Now, there are really two parts to Claude Design. The first is building a design system, and I'll introduce you to that in a moment. The second is using that design system. Let me talk about what a design system is: a set of components, a set of tokens, a set of colors, of typography, that you might go to a branding agency and ask them to build as your brand guidelines.

Charlie Cowan: So that when our marketing team is building PowerPoint decks, or our product team is building the product, they're following this consistent design system. It's a very typical thing for a design team to build a design system — so how might you go about doing that? Well, here's one I made earlier: it's the Kowalah design system. Let me show you what that looks like, and how you go about it — I'll start a new chat over here. I'll show you the design system in a minute, but let me explain the process I went through when starting this. Firstly, to build your design system, you want some kind of context. Now, it's likely you're not starting from scratch.

Charlie Cowan: When I was building our design system, we weren't starting from scratch. We already had the Kowalah platform, we already had a logo, we already had some colors we wanted to use. In fact, one of the best places for finding what those colors, typography and styles looked like was in the Kowalah platform itself, where we had code. So what I did was configure our GitHub repos — we've got a number of GitHub repositories containing the Kowalah platform, and we're able to connect Claude Design to that. I don't need to tell Claude Design what things look like, I don't need to give it screenshots, I can just give it access to the actual code. So my first step was, literally, hey Claude Design, I want to start building out a design system for the Kowalah platform.

Charlie Cowan: We've already got two or three repositories with varying versions of design — can you go and look at those, and come back to me with how we might build a consistent design system? Now, importantly, some of those repositories were the Kowalah platform, and some were the Kowalah website, so we were able to build one consistent design system off both surfaces. That's one source, but you might have others — you might have worked with a branding agency that gave you a style guide, a PowerPoint deck with all your icons, colors and hex codes, or a PDF, or just the website, and you point at that.

Charlie Cowan: You may have a code folder if you're not using GitHub. You may have a range of different places where this exists, and if you really don't have anything at all, there are a number of repositories out there, like styles.referro.design, where you can browse other businesses and go, oh, I like that style. You might say, I've been using Cursor and I really like their website, and they've codified their style so you can use that as a basis of your own. So don't feel, if you're not a designer, that you're starting from scratch. And to be clear, as you're thinking about whether to borrow this or that, this is not going to put brand agencies and designers out of a job.

Charlie Cowan: I really don't think so, because the creativity that a great designer brings, helping you think about things from a different angle, different industries, different products they've worked on, will prevent you from coming up with the same style and design as every other company. So whilst this is a great tool, it doesn't get rid of the creative exercise — the post-it notes, the workshops — of helping you think about what your brand stands for. But having done that, and fed everything into Claude, I went through a series of conversations with Claude to build out this design system. Part of that conversation was Claude asking me: are there specific brands or platforms that inspire you? What does Kowalah stand for?

Charlie Cowan: What is it that you want your clients to feel when they come to the Kowalah platform and website? For me, one of the things was: yes, we're a consulting business providing services, but we also have a platform. We wanted to be counter-positioned against Accenture, Deloitte, PwC — their websites are very black, dark and formal, not very engaging and approachable, and that's one thing we really wanted through the Kowalah brand. So this is me chatting with Claude to help with this — the output, literally a weekend of chatting with Claude, is this design system. Let me open it in a new tab so you can see what it looks like. Claude has built this lovely HTML that I can go through — here's the architecture.

Charlie Cowan: We've got these tokens I mentioned — I'll show you them, they're the base of our system. Then we've got a marketing UI for our website, all the different icons and things we'd use there, and then we've got the app UI, for how we use it in the application itself. Here are some examples of the tokens — all the colors and gradients we use, and all the different styles. Now, you and your organization may have worked with a branding agency and passed over $10,000 or more to get this kind of work done. Claude did this for me in a weekend. Let me go back to the tokens — all the typography we want across the website and marketing.

Charlie Cowan: This came from a lot of the conversation I had with Claude about wanting to be approachable and not too formal. We've got different components, the different brand logos and how we use them across the website — this is super helpful. What I'm going to show you now is the UI kits — specifically the application UI kit, for the Kowalah platform and application. In here we've got an overview of all the styles, icons, fonts and components we'd use in the Kowalah platform. Here's what the dashboard looks like, here's what the Kanban boards look like.

Charlie Cowan: And down here we've got all the individual components we're going to use — when we use a list view, it looks like this. And when we use things like our AI sidebar, how you're going to chat with AI in the Kowalah platform, all the different ways we've got the fonts and the details and what this looks like. What I found really useful is that in this process, I didn't need to worry about code, or how it's going to work, or the actual text we need — it's just about the style and the design and what I think.

Charlie Cowan: So if we come back to the design system — this thing was created, and as I'm working with the platform, I can carry on building it out. Let me go back to Claude Design. So now I've got this design system, which is useful. How do I use it? Up here we've got a share button, and I can do a number of things with it — download it as a zip file, which packages up all the components, tokens and everything; export it as a PDF, which I can share, or as a PowerPoint with my team. If you're using Canva for design and decks, you can send this as a brand guide straight into Canva. But what I'm using it for, extensively, is handoff to Claude Code.

Charlie Cowan: It provides you with a prompt: fetch this design file, read its README, and implement the relevant aspects of the design, with a link to the design file. I literally copy that, go to Claude Code, where we're building out the Kowalah platform, paste it in, and Claude goes and gets this design file, then rebuilds it all in Claude Code, in a directory for the design system — pixel by pixel, with instructions on how to use it. Now, when I'm in Claude building things out for the Kowalah platform, I can just say, using the design system, can you build out this, can you build out that?

Charlie Cowan: So if I go to the Kowalah platform right now, you can see all our pages are now very consistent with the design system we've designed. It means every page is consistent — I don't have to worry about the Kowalah client application or our internal admin applications following different formats, they're all consistent. Just this weekend, we were rolling out our new agent in the Kowalah platform, and I didn't need to design it, because it was already designed in the design system. We just need to focus on functionality and what the thing needs to do, and we don't need to worry so much about the design. Now, I'm not a designer.

Charlie Cowan: So I very much imagine we'll bring in professional designers who'll make our design system look even better. But it gives me strong hope that we don't need to go out to an external agency to design individual widgets and components, because now Claude becomes that design partner. Let me help bring this to life a bit — I've talked about building the design system, but let's see how it might work in practice. I want to show you something we're doing in a lot of client projects at the moment: using Claude as part of a workshop to bring something to life in a slide deck. I'm going to click on slide deck up here, and go, Claude, design today's webinar. You'll see we're choosing to use the Kowalah design system.

Charlie Cowan: If we had multiple design systems, we could use any of them, but we're using this one, and I'm going to say I want to create a deck. Start with context, describe what you want to create, making a deck down the bottom here, and Kowalah Design System is what we're using. Every week, Caitlin asks me, have you done the deck yet? And today I said, no, because I'm going to build the deck while we're in the webinar — how do you like them apples? So I've got a prompt there saying I want to build this webinar deck while we're on the webinar. All I've done is paste in that prompt, and click go. The prompt is: we're on the Wednesday webinar, doing something about Claude Design, can you go and have a look?

Charlie Cowan: It already went to Sanity to pull all the details of what we're covering in this webinar, and build out a set of slides. Bearing in mind it's using the design system we've already created, what I'm expecting to get is a nice Kowalah-branded deck that walks us through this — don't worry, I'm not going to present it, since we're already in it, but you'll get to see how these designs work. We're using this in workshops with clients, where we're uncovering, mapping and prioritizing use cases, copying those use cases in as the prompt, and Claude Design builds out the deck interactively for us to work through with the client in the session.

Charlie Cowan: Now, while that's working, let me show you something else, about licenses. Claude Design uses a different set of usage limits from your normal chat. If I go to my Claude here — you may not have known where to find this — go to the bottom left of Claude, click Settings, and you'll see Usage. This is your normal Claude usage: a 5-hour window (I'm 16% through my current session), and a weekly limit (I'm about halfway through for the week). But down here you get another usage limit, which is Claude Design.

Charlie Cowan: So be aware that everything you do in Claude Design doesn't impact your normal chat usage, but it is separate, and it runs out a lot quicker. So if you're a full-time designer using this all the time, it's going to run out a bit quicker. But I have good news — because they knew we were doing this webinar, maybe two days ago they announced they've just doubled the token limits for Claude Design. So if you were hitting limits, I'm hoping you won't see that moving forward. That's a little bit on the tokens. Right, that's carrying on writing.

Charlie Cowan: I'm going to leave that for the moment rather than us waiting to see if it's writing. Let's give it a minute and see if it builds this for us. Otherwise I'll come back to it. I can see a question here from Imran — what do you mean by the reference to Sanity? Sanity is our content management system, the CMS — it's where all the information for our website lives, the webinars we've got coming up, the people on our team, the blogs we write. And we have a connector to Sanity in Claude — if I go to Customize.

Charlie Cowan: and Connectors, you'll see we've got a load of connectors, and Sanity is one of those. I'm able to get information from Sanity about what webinars we've got coming up and what we've done, find all the information about it, and these connectors are absolute gold dust — they're Claude's eyes and ears, and it means I don't need to go into other systems. While I'm here, quick plug — if you're a Kowalah client, there's a Kowalah connector you can enable, so all your employees can get help from Kowalah, find out what accelerators we've got, log requests with us via Claude, and we're getting great feedback from clients on that too. But yes, that's what Sanity is, and one of the connectors.

Charlie Cowan: Thank you for your question, Imran, because that's given Claude time to finish building. Let's have a quick look — present in a new tab. Bearing in mind this is one shot, and we haven't touched anything yet. So here is: Build Your First AI-Powered Claude Design System. We're going to cover new AI tools that launch every week — most teams hear about them, bookmark them, and never open them. Anthropic's new tool for everyone: Claude.ai/design lets everyone build. You don't need a designer to have a design system. Excellent — we built our entire design system with it. Patchwork and backlog, before Claude Design, after Claude Design, System Live. What I love about this is — I'm a big believer, as everyone should be, that fewer words on slides is the best thing. We don't want lots of bullet points.

Charlie Cowan: We want visual items, breaking up and changing how things look, so we're not always just looking at bullet points. I think Claude Design really nails this, giving some different styles to look through. So that's our first takeaway on building that. What I want to show you next — you might say, right, actually, I don't like that one, for example. I don't want to have a chat with it and get into a long conversation — I want to edit something specifically.

Charlie Cowan: So I can say, it lets anyone, even you, with zero design experience, build a professional design system. You can see this isn't just an image you can't do anything with — I could say, actually, it's not "design," change it to "designer." So you can get into this being quite interactive with the changes you want — little tweaks, I want this to be a bit more this, a bit more that. The best way is to experiment and get a feel for what you want to change. Huge power for people who aren't designers to get a feel for it. Robin asked a good question — I had the same design for a presentation of mine, maybe this is Claude's one design for everyone.

Charlie Cowan: You're spot on, Robin, and we've had this conversation internally — we've got to be careful here, because everything could start to coalesce around what "Claude's design" is. I think this goes back to my point about human designers and brand agencies still being at the heart of it, at the start of your process. For me, starting with our design system, I didn't really have that, other than what was in our platform, so we really let Claude take the lead, because it was much better than what we had before. But I'd love to bring in an actual designer, either on our team or externally, to say, right, how do we get a Kowalah voice, a Kowalah vision of what our style is.

Charlie Cowan: And that's where I think some of these other platforms would come in — maybe what I'd do next is look at some of these and think about how to incorporate something that's a little bit less "Claude-y" in our look and feel. Great stuff, keep the questions coming. Right, next up — that's Claude Design. Go and have a play with it, experiment, see what you can come up with. It's good for high-fidelity designs, but you can also create low-fidelity wireframes if you're mapping out new products and designs. With that, let's move on to AI in the news, and there's a ton to talk about this week.

Charlie Cowan: A couple of days ago, Anthropic announced they were doubling the token limits on Claude Design, which is great to see. We didn't talk about this a couple of weeks ago, but why is Anthropic now literally doubling the capacity and token limits across all their platforms? The reason is they were very limited on compute. Dario, the CEO, said a couple of weeks ago that they'd predicted, over the last 12 months, they'd need 10 times more compute than the previous 12 months — and they got it wrong, by a factor of 8. They actually needed 80 times more compute than the previous year, because of the demand as people jump onto the Anthropic platform.

Charlie Cowan: So they've limited usage through things like the 5-hour and weekly limits I showed you, and you'll see this on X or LinkedIn — people saying, I can't use Claude, I've hit my limits. Well, Dario did a deal with Elon Musk two weeks ago, where Elon said, you can rent my first Colossus data center — Colossus One — entirely, to get more compute. So they plugged Anthropic straight into that, because SpaceX and Grok are now using Colossus 2, and I think there's a Colossus III they're using too. So it was, right, we've got this data center full of GPUs, you can use it.

Charlie Cowan: And that's meant, in the last two weeks, Anthropic have been able to double all their capacity, and we're definitely feeling the benefit on Claude Code, and now on Claude Design. Next up in the news is the announcement of the OpenAI deployment company — this comes hot on the heels of Anthropic launching their own deployment company. Both companies recognize that if they're going to win in the long term, they need enterprises using their platforms, and they need people to help figure out how to do that. I think of AI — ChatGPT, Anthropic, Gemini, all of these — as a ball of clay. The ball of clay itself is absolutely useless.

Charlie Cowan: It's only useful when you mold it into a jug, or a plate, something functional. So you can go and sell API tokens or AI credits into these companies, but unless someone is there to mold them into something usable, they're not going to get the full usage and adoption out of it. This is the business Kowalah is in — we absolutely recognize that, and that's why we're scaling up and investing so much in it too. It's interesting to see Anthropic and OpenAI recognize exactly the same thing, and they're in competition with each other. The Anthropic joint venture was set up with a number of private equity and management consulting companies.

Charlie Cowan: It launched with $1.5 billion of investment. The OpenAI one, announced just this week, was set up with $4 billion of investment, again with a number of investment firms, banks, private equity and management consulting companies involved. They've also acquired a Scottish company called Tomorrow, with 150 engineers, to give them a foundation of forward-deployed engineers who can go in and run these projects. This is useful for us to know, because it validates the market we're in, but it's also interesting from your perspective as a client of these platforms — they recognize that if you don't have the people to figure out how to use these tools, you're not going to get the full value from them. Next up, OpenAI launched a new personal finance integration this week.

Charlie Cowan: This means, particularly in the US, where most of their bank partners are, you're now able to plug OpenAI into your bank and get advice and guidance around budgeting, spending, investments, scenario planning and pensions. This builds on OpenAI launching Personal Health a few months back, where you can plug in your Apple Watch and connect your medical records from your electronic health records in the US. I mention this not because it's business-related — it's personal finance — but because it reinforces to me that OpenAI is playing a game against Google, not just Anthropic.

Charlie Cowan: They're playing a game to win the consumer, the student, the family, the individual, as well as trying to win business. I'm not saying one is better than the other, but there's a significant amount of people and investment at OpenAI not focused on business use cases, whereas Anthropic is very much just focused on the business side. I'm not saying one is right and one is wrong, but it's interesting that one is focusing there and the other isn't. Another question here from Robin — how far do you think we'd go in connecting these to very personal info?

Charlie Cowan: I was talking about this with someone at lunch today, more in the business context. We looked at those connectors earlier in Claude — do you think companies are going to connect up SharePoint, Google Drive, NetSuite and their finance systems, CRM and their sales systems? On the business side, people absolutely are, because once you connect Claude or ChatGPT to every other system, it becomes the hub, and you're able to have really rich conversations. I've got a dashboard managing all our client projects, plugged into Granola for call transcriptions, Gmail for emails, and Xero for our accounts — an amazing view onto our business I'd never have otherwise.

Charlie Cowan: So businesses are doing that, and I think individuals will too, because the upside of connecting is so good. I'm reminded of when Google and Chrome first came out, and people said, oh, you need to log in, give it permissions, it's going to track what you've been looking at, put cookies on everything. And if you were very keen, you could go incognito, refuse every permission — and after a few days you'd think, this is rubbish, it doesn't know anything about me, it's giving me the wrong stuff.

Charlie Cowan: Most people are happy to trade a bit of privacy for a more personalized, bespoke experience, and I think we'll see the same with ChatGPT, Gemini, Claude — happy to trade that in order for it to act like a real partner, rather than someone with amnesia who doesn't know anything about me. So, back to business. This week Anthropic launched a new Claude for SMB plugin — which leans on what I was saying about them being really focused on business use cases. The big businesses of tomorrow are the small businesses of today, and helping get those businesses up and running quickly on Claude is going to be super helpful. So what is Claude for Small Business? Let me go over to my Claude here.

Charlie Cowan: Let me go to Customize, and then Plugins. Plugins are in Claude Desktop, Claude Co-Work, or Claude for Windows if you're on a Windows machine, and they give you extra superpowers. You can see I've got tons I've created or installed. Go to Personal Plugins, Browse Plugins — here you'll find plugins your organization has created, or someone like Kowalah has created for your organization, or you can click the Anthropic and Partners section for role-specific plugins. You might have seen in the news that Anthropic launches a plugin for legal, and instantly companies in the legal sector's shares collapse.

Charlie Cowan: Anthropic launches plugins for data, and shares in data companies collapse, because people can suddenly get all that functionality from within a plugin. Let's scroll down — there's loads here. Depending on your role and industry, you'll find a plugin useful to you. Right down at the bottom, you'll find Small Business — a collection of 31 skills and 12 connectors. The skills are things you'd expect a small business to want: a cash flow snapshot, preparing for month end, planning payroll. Let me click on Plan Payroll — here we go, oh, skills, I need to bring that in.

Charlie Cowan: Let me install Small Business, click Manage, and go to the skills. Here they all are — Month End Close, for example, closes the month, reconciles against this, and here's the skill and how it works. If you're a small business, an accountancy firm, a manufacturer, a small retailer, you're never going to create all of these yourself — you don't have the expertise or the time. And in one click, having installed Small Business, I now have all these pre-built skills to help run my business. Unbelievable. The guideline is to think of these as about 60% there.

Charlie Cowan: 60% because your business is slightly different — you might not be using QuickBooks, you might be using Xero, or something else; you might not work on a monthly process, maybe a quarterly one. But you can edit this directly by chatting with Claude, and make it your own. It inspires you with what's possible, and then you chat with Claude to make it your own. It also comes with a number of pre-built connectors you can plug in — we use Xero, but you might use QuickBooks, so you could plug that in. We've already got HubSpot, Canva, DocuSign and Slack connected. As a business owner who doesn't know too much about Claude or tech, you can see how it's just add, add, add.

Charlie Cowan: And suddenly Claude is able to help you with all of these skills, because it's got the eyes and ears to do this work. So that's Claude for Small Business, and that's the end of this week's AI in the News — lots going on there. That brings us to the end of today's Wednesday webinar. If you've got any other questions, feel free to ask. What I'd encourage you to do after today is get into Claude Design — think first about what sources you'd use. Is there an existing brand guideline? An existing deck? An existing application or bit of code that would start you in the right direction? Build out your design system, and then start having a play.

Charlie Cowan: If you get stuck, we'll give you the link in the follow-up email — Claude has a lovely "Set Up Your Design System" guide that explains how to do that, and goes on to how to use Claude Design to bring it to life. Honestly, you won't learn much more from it than what we've covered here, apart from having it written down. The best way to learn Claude Design is to use Claude Design and see what works. With that, thank you very much for joining live — and if you're watching on YouTube, hello as well, you should have joined live, it was great.

Charlie Cowan: We'll see you next week, same time, 3pm, where we'll cover another hot topic — we'll likely be talking about Managed Agents, another Claude feature that's had a big upgrade this week, so we're going to be promoting that. You can register for that, this time next week. Thank you very much, enjoy the rest of your Wednesday.

Every Wednesday

Join the next one live.

We get together every Wednesday for an hour on enterprise AI adoption. Or read the other transcripts.

View all webinars