Making Design More Accessible with Claude Design

I'm Andy Hickman. I work in technology advisory. I work with small companies, small organisations, mainly in the Bristol area.

And last few months I've been doing bits and pieces with Claude Design, having a lot of fun. And I thought I'd tell you a bit about it tonight.

And it's a little bit ironic that a talk with design in the title has such a crap looking first slide, right? And there's a reason for that. It's a dull corporate design, and I'm going to explain why in a minute.

The Case for AI-Assisted Design

So, what am I going to try and persuade you of tonight? Hopefully, that you no longer need really specialist design skills.

If you want to make your branding assets look better, you want to change your logo, you want a better interaction design on your website, side, a smoother look and feel to your mobile app, Claude Design is super awesome at it.

You don't need to be specialist. You don't need to be super techie. You just need an opinion.

And in a minute, I'm going to get all of your opinions and we're going to help try and make a better design.

A Live Redesign Experiment

So in order to do that, I thought I'm going to fake up an imaginary company. company. It's got a NAF name, Meridian Synergy Partners, and it's got an old -school website. Here is its website. This is all imaginary.

It's got a few pages, and we're going to redesign it. It's got a rubbish strap line. You've seen it before. It's a kind of corporate -looking

Creating a Baseline Design System

website right okay so the way I built this was by first of all coming up with a design system and this window here is claw design and I don't know how to build design systems never built a design system in my life so how did this design system come into being I prompted it I said give me a slightly dull corporate design system for a large organization circa 2010 all right and I'll tell you a bit more about the design system and what's in it in a

Choosing a New Visual Direction

second but before we do that I want us interactively to change it right so we're gonna make this more modern we're gonna make it more we're gonna make it more vibrant and we're gonna do a vote so where I want I want hands up in a moment. Three choices.

We can make this look neon cyberpunk, we can make this look Scandi minimal, or we can make this look retro arcade, okay? So hands up for neon cyberpunk, okay? Hands up for Scandi minimal, that's the boring one, no. Hands hands up for Retro Arcade? Okay, I think Retro Arcade has it. Okay, cool.

Right, and we're going to change the colours. We want a couple of colours that are kind of Retro Arcade, right, that we're going to put the brand around. So, shout out some suitable colours for Retro Arcade. What kind of green? Avocado green, cool. Magenta. I can't spell that, Glen, but but all right, we're going to try, right, okay.

So here's the prompt, okay. So in a retro arcade, does that look right? And we're going magenta and avocado green. Awesome, right, no, not green, green. And I'm going to fire that off.

Okay, so that would take a while to cook and the reason by the way there's a couple of bits above and below the prompt you don't really need it the only reason it's there is to make it faster this could take five to eight minutes but by doing that it's just a bit quicker and we only have 15 minutes okay so as I say this is a

How Claude Design Works

design system and this is actually quite a simple one it's got things like logos and fonts and interaction patterns and what buttons should look like and all that kind of jazz it can have all all sorts of other things.

It can have slide styles, it can have tone of voice for your branding and communication style.

As I said, this website was built using it. You could

come in here and Claude Design, it's super easy to use. The bottom left, you could just prompt it and you could say, I want to change it in this way. There's lots of other ways of interacting with it.

For example, I could go, I don't like this element, I'm going to to change this and you can give it a particular prompt to change that bit. I can go in here and you can get it to suggest tweaks. You can describe tweaks yourself. All kinds of ways of interacting with it, which I'm not going to do right now because we're going

to apply our new design system, which is cooking in the other window, and use that to update this website in one go.

And how do I get rid of that window? Go away. Oh well, we'll come back to that.

Applying the System Across Assets

And what I'm also going to do is I'm going to update the slides I'm presenting right now with the new design system as we go along through the talk. Bit of jeopardy in that. What could possibly go wrong? We're trying to update the slides on the fly but we're going to give it a go.

Again, the slides are in the old corporate style and we're going We're going to try and make it go to the new style. Have we got an updated design system yet? Yes, we have. I'm just going to refresh that page. We asked for retro arcade and hopefully, oh my lordy, we've got a pink and avocado green design system. Awesome. Awesome.

So, we're going to go in here and this is the website again and this prompt, I'm just going to read it out to you. The design system has just been updated. Update the website to match the new design system and the last sentence is just to make it a bit quicker. Okay, that one's fired off and we're going to do exactly the same prompt to the slides. All right, and we're going to update the slides on the fly.

Practical Tips for Better Results

So whilst those two things are cooking, I'm just going to go back to the deck and tell you a few little tips about using Claude Design, how to get the most out of it. Honestly, for the most part, it's super intuitive.

Just open it up and have a play. It's really easy. Obviously, you talk to it in plain English. It's like prompting ChatGPT or anything else.

The reason I reiterate that point is it's really good at sort of responding to just sort of vague ideas of a style and 1970s travel poster and it also responds well to oh just change the header bar or change that thing in the top right is good at that so you don't need specialist design vocabulary another tip is you don't start

with a blank canvas take some pictures of screenshots of your website take some assets it's logos you've got, feed it into core design and then make things that derive from that and it will give you creative variations, build you something new that you haven't already got based upon your styling.

The third one which is often true for interacting with the AI in general is don't say do this for me, say I want this kind of vague goal but give me a few options, give me four options, five options for this kind of design and then you choose the one you like the most.

Next one, it's so powerful and so quick that it's easy to kind of see something quite good early on and go, great, I've got it, but keep iterating, try refinements, chuck things away, try combining them in different ways, and that's the real unlock to sort of get it really, really slick.

Back in those windows a minute ago, we had the project for the website and we had the project for the slides. We could directly manipulate them in there and you don't even need to use a design system at all in Cloud Design. The reason you might want to do that is it allows you to keep all your styles in one place and apply them to all your assets. That's also a big time saving.

Alrighty, let us jump back.

Results of the Retro Arcade Redesign

Okay, I'm going to start with the website. Oh, that doesn't seem to have done very much. I'm just going to do an update on that. There we go.

Right, we have a new, what have we got? Retro Arcade Magenta and Avocado. Not much, oh there we go, there's a bit of avocado website. website, and it's applied it across all the pages. You can see, and it looks stylistically different.

Now, if you did this for real, what you'd find is it'll actually do quite a lot richer stuff than I've just done. I've deliberately kept it slick so it fits in the time present, time available, but if you give it a, without some of the shortcuts I told told it to do, it will rearrange layouts, make more significant changes than I've just made here.

I'm just going to fire off one last prompt. If I can find it. Sorry, here are all my prompts. I am going to have to type this one out. Please update the visual elements to be more dynamic. dynamic. Give me three options. Provide a way of changing the strength of each effect. All right, cool.

Let's see where we got to with the slides. I'm going to fire up the slides again.

Updating the Presentation Live

Just a quick side note. When I said I'm happy to do this talk on claw Claude Design, there was actually not that much native slide presentation capability within Claude, so I was just going to be generating HTML slides or Google slides. In the event, it's actually now built into Claude. You can get speaker notes, presentation mode, all sorts of things, and you can see you can export to PowerPoint, Google Slides, etc., etc. So I just thought, well, I'll use that tonight and present directly out of Claude Design. So I'm going to do that right now and we will now move to the new slides.

Cool.

What the Live Demo Shows

So let's take a moment to think about what was that five minutes? Let's take a moment to think about what's just happened. You all came up with an opinion, an idea, which was retro arcade. We gave it two colors, one prompt on the slides and a couple of minutes. and all the slides have been given a new style, which is pretty cool.

And because I've got a bit of time, I'm going to jump back in to where I just was looking at the website. No, that's not the right place. Sorry. And we're going to wait for it to do this particular prompt about visual elements.

One of the really good things that Claude Design can do is allow you to tweak different things as you go along, use sliders, change the strength of the effects, and as I said earlier, that allows you to refine really well.

This one's taking a little while, so I might need Adrian to play his song again, so just as a bit of a time filler whilst it comes up with the visual effects.

Cool.

Great question.

Using Claude Design with Existing Applications

You can take all your code for your app, and it doesn't have to be just raw static HTML and JavaScript, which this website is. It can be React, it can be all sorts of things, quite complicated. You dump it into Cloud Design as a folder. It it will render the app, and you can then make design changes.

Now, depending on how complex the app is, if it's relatively straightforward static HTML, it will just write the files back for you. If you've got it under Git source control, you can see what it's done. You check it back into your app.

If it's more complex and you're using something like Claude Code, what you can do is it says, give me a package of all these changes, and it gives you a package. and basically that's a markdown file with all its changed assets, as well as a description to Claude Code of what to do, you give that back to Claude Code project with your app and say, can you change my app now to this new design? I've done that a few times. It works super well.

Sure. It's specific, you know, it's a bit of an interjection. I've never managed to get Claude Design on the cloud. Do you have the source code or are you looking at a public website? It's not a source code, but it's a full single -page application. Right. So it's not like you can just dump the source into a directory and it's mean?

Yeah, so, funnily enough, my experience is React and static and not behind... Actually, no, one of them was behind login, so that was okay, so I haven't come across that case where it's a problem.

So one of the things you can do there is just screenshot it, log it in and it'll give you different design ideas and it'll give you the way... Yeah. It's not quite as slick, though, is it?

Refining Visual Effects

Okay, so I'll just quickly show you what I've done. So we asked for four options, and down the right, down the bottom right, you can see what those options are.

So we'll try neon, which is glow and scan lines. I can't actually see the effect of that. Can anyone see what it's doing there? Oh, there you go. So it's got scan lines and glow effects as you move up and down.

you can do kinetic, who knows what that is, entrances and wipes as you go up and down, there you go. Arcade is, oh look at that, there you go, there's an arcade effect. And you can play with those, you can tweak the strength of them and all sorts.

Final Takeaway

So that is pretty much me done, oh that's the wrong set of slides now, so the last thing I was going to say is try it tomorrow, get an asset, ask for options on that graphical asset, whatever it is, and then tell it what you like, and I think you'll really enjoy playing with it. Thank you.