Anthropic Reveal How to Make Claude Code a Better Designer

Okay, Anthropic released an article earlier today  called Improving Frontend Design through Skills,   and we'll be going over it and how you can  use it within Claude Code to come up with   better designs for your websites. So firstly,  I'll go through some of the main points of   the article and then we'll start applying  it. So they do acknowledge a problem that   when you ask an LLM to build a landing page  without much guidance, it will almost always   conform to Inter fonts, purple gradients and  white backgrounds, and minimal animations. And that's because of the training data, because  safe design choices usually dominate the training   data that Anthropic have trained their models on,  meaning that if you do not give it much direction,   Claude will sample from these kind of  design choices at work everywhere. Now,   they do say that you can get Claude Code  to avoid some of that behavior by using   Inter and Roboto fonts, for example. And  of course, if you then give a different   constraints and aesthetic preferences, then  it will come up with a different design. Now, of course, telling it to avoid Inter and  Roboto fonts will only remove the font element   of Claude Code generating a new design. The rest  of it may still use purple backgrounds and so   forth. And to have good frontend design,  you need to have typography principles,   color theory, animation patterns, and background  treatment. And you would also need to specify   which defaults to avoid in each of these  areas and which alternatives to choose from. But now of course the problem does become that  if you do add this into your claude. md file,   for example, right at the bottom,  then that will be included in every   single request that goes to Claude Code and  your claude. md file will get pretty long. And then you've used a more context window  as well. And of course we all know that when   you have a smaller context window with  Claude Code, it performs significantly   better than when you have a mostly full context  window. So they say the question then becomes,   how do you provide Claude with domain  specific guidance exactly when needed?    Without the permanent context  overhead for unrelated tasks. Because of course, when you're getting Claude  Code to debug Python or analyze data, then of   course you don't need any information about how  the frontend design should work. And as I talked   about three weeks ago in this video about Claude  Code's new skills feature, any information is   progressively added to a context window instead of  all being added at once. And that basically means   that you can give Claude Code specialized context  on demand without adding any permanent overhead. And because Claude Code is able to autonomously  identify and load relevant skills based on the   task at hand, if you have a frontend design  skill, for example, and you get it to make   changes to a landing page, then it will know  to load that particular skill to help it make   those changes. So essentially the way that they  describe skills is that they are prompts and   contextual resources that activate on demand when  this specific task arises. And the way that you   can imagine this is that before skills, you had  your context window, which was kind of like this. So about 200,000 tokens maximum and you had  any design related guidance that would be in   your claude. md file, like maybe taking 10% for  a pretty big project. And then after skills,   you can then split this up into smaller,  much smaller design related skills. And   then in your skill file, you can have a  file for fonts, colors, animations, logos,   which could tell Claude Code to get logos  from this particular website, for example. And then you would have any themes  that you're using throughout your   project. So they have some examples over  here that we can take inspiration from.    So they have this thing that you can add to  your skill, which is using interesting fonts. And before adding that to their skills,  this is a like very cloud looking design   that I came up with. And then after adding  it, It made it much better by using more   interesting fonts over here. So you can see  that this is probably Inter that it used,   whereas here it used more  code looking fonts instead. So of course the fonts here do look much  nicer, probably not in this like input box,   but yeah. And they did something very  similar when it comes to themes. So   you would add this to your Claude skill file  and it would be like always use an RPG theme. And this is a design that it would come  up with. And of course you can see that   this design is very different. It's  not as AI looking as other designs. And the same principle here does apply  for other dimensions of design because   you can have a very similar like prompt that  can be used for animations in particular.    And they say that when this skill is  activated, Claude's output improves   across several types of frontend designs. So  for example, this is before using the skill. It's a very standard AI generated layout,  nothing special. And then this is after   using the skill. So you can see it uses more  gradients, different colors, different fonts. I probably would not use this font myself,  but it can be good for inspiration. This is   before and then this is after. I think  honestly this looks so much nicer. This is also before and then this is  also after. Now let's go for a small

example here. So I have my website  masterclaudecode. com and this is my   Claude Code masterclass where I go through  every single feature of Claude Code that's   available as well as a lot of bonus content.   There will be a coupon code down below if   you are interested as well. And there is  a Black Friday sale going on right now. Now Claude did release a brand  new skill called Frontend Design   in their Anthropic Skills repository.   So we can copy over the skill if we   go to raw. I can then copy this  over into a brand new project. And in cursor, I have . claude/skills/front-end-design and then   the skill. md. And then in example. 1, I started a  brand new Next JS project. Okay, so now run Claude   Code and then use the add directory command to add  the other master class landing page directory. And   now using my speech to text tool, HyperWhisper,  there will be a coupon code down below. I'm basically going to say, hey, so basically look  at the landing page of the master class website   and extract all the copy from that page and then  using the same copy and the design skill that   you have access to spawn a subagent that makes a  change to the example one. Directory in the new   design directory that you're currently in. Only  pass a copy to Subagent, not the actual design   of the landing page, because it is actually  reading through these files to extract the   copy of the current landing page, but it will  accidentally also pick up the design as well. So by passing that copy into Subagent, which  starts with a completely fresh context,   we can make sure that it's not influenced by  the existing design of the landing page. So   it seems we had to be a bit more specific and  tell it to pass a copy into Subagent and then   tag the general purpose agent so it spawns up  another copy of that. And I spawned up that   sub agent and it passed in all the copy  and not the current design which is good. And now let's actually see what the design looks  like so let's open it up for us. And yeah honestly   I think that some things are slightly better  and some things seem slightly worse. Can you   duplicate that and repeat that two more times  with two more sub agents? Okay so that did not   work the way that I hoped it would work  because it took up too much context since   the sub agent did not manage to do everything  and then the main session had to step in. But yeah these are the three different  designs that I came up with. So we have   the first one that I showed earlier.   I don't actually like this that much. The second one does look slightly nicer  as well. It's much more simple too.    And the third one, I think I actually  prefer the third one the most.

But honestly, I think that I will be sticking to  original design for now and then maybe finding   some design inspiration from Dribbble to use  instead and then giving it to Claude Code.    And then after that's like finalized, I'll  actually formalize the design into a skill   set that I can then use whenever it comes  to making updates to design. So I'd have a   skill. md file and then I'd have the fonts. md  file and the colors. md file and so forth. But yeah, honestly, I think this would  make much more sense as a skill file.    And once that skill file gets too long  because it has too many files inside,   then it would be worth splitting up  that file into many smaller files   because then it can be progressively loaded  in depending on what change has to be made   to what page. And if it's a brand new page,  then basically everything can be loaded in.