Turning A Design System Into A Claude Skill

Hello, it’s Ryan. It’s 12:35 Monday, March 23rd, Eastern time. I hope you’re doing well. Um, this is a little bit of a different video, a little bit of a different topic from me if you have paid any attention to me, which you shouldn’t. Uh, you’ve probably heard me talk a lot about the last seven or eight years about business and strategy and communications, leading teams, all that kind of stuff. Um, but I used to be a pretty decent uh designer and developer. Yes, I could code. And a topic that I keep seeing on my feeds and uh a particular question that has been around for a while asked by Hang uh I haven’t really seen a good answer for. And uh when Hang asked about it again three weeks ago, I went off and did some side work. uh creatively. I like to make and build and design uh products and tools for myself and uh test out theories and and whatnot. Sorry for that. Um and so there’s this question that Hang has been asking for a long time for clarity that uh when talking about vibe coding or design systems in particular, is there evidence of teams? Do they have an approach? Can they show real stuff of uh taking an existing design system, one that had already exists and being able to create that or turn that into something that then people other people on the team are able to vibe code consistently leveraging it. It’s basically like how do we take the existing thing that’s already there and make it AI ready in this new environment. And so that’s a um something that I was playing around with a couple weeks ago and then when Google released Stitch uh or the update to Stitch last week um and they shared that design markdown file I want to say h I should probably share this with you. So, um, hang, this is probably for you, but it’s for TJ. It’s for others. Uh, is how I think about it is MCPs are great. They’re wonderful. They’re wonderful to dig in and find the data, uh, the roots, all that kind of stuff, and sort of bring out what is the source of truth. But on a day-to-day basis um when we think about things like design systems uh inside of companies they are tools of scale and the majority of use of a design system is not to create and update the system itself but it’s for people to be able to leverage what’s already there to put uh uh these components this guidance into place uh that doesn’t really change a lot. Design system shouldn’t be changing every day. Um, so there’s that. And one approach that I’ve been thinking about for a while, uh, since Claude or Anthropic released Claude Skills is like I think I think there’s an approach here that actually leverages that same type of structure uh, but in more depth. I think also a lot of the conversation around uh design systems is actually UI frameworks uh not actually a design system. So uh here’s uh an existing design system uh that uh my team made 11 years ago. Uh it’s all based in SAS. It’s tokens. It’s early on. It’s all based on Gina Bolton’s work. Um but this is a UI framework. Um a UI framework sort of defines uh the structure of say a box or a base. It defines how it should show up in the different sizes. But a design system for a design system you need to include things like principles uh governing standards around motion. It defines you know it extends that UI framer and doesn’t just say this is um how to make it or what it is. It really talks about um when it should be used, what are the right conditions to use a button versus a radio? Uh when using a button, what are the right conditions to use this type of button versus another type of button? And I think that’s the thing within design systems that has always been difficult to get adopted to be applied uh say beyond a UI framework. And so a couple weeks ago, I took this question that Hang has and I wanted to see if I could take uh a UI framework that I already had built in SAS. So kind of like what Hang was mentioning like this thing already exists uh to borrow some of this uh uh fluent uh principles and color principles uh uh all this stuff that is defined in the fluent design system from Microsoft. So to take the UI framework that I had in SAS to incorporate all this guidance that comes with a fully developed design system and see if I can make a local version of that to take what already exists make a local version of that as a claude skill itself. Um so the first thing that I did hang maybe I’m talking to you is I worked with Claude to uh take this whole system that was already there to review it to understand it uh and create initially just some components with markdown. I told Claude I want to turn this into a skill. Uh so we started from there building that out and eventually turned it into a full skill. I also asked Claude to review what was on the fluent website and take into consideration these broader uh sort of things. And uh the result is after you know a couple hours of turning or transforming what is generally a UI framework and code and whatnot into a series of mostly markdown files that define how an AI model uh should follow this governance and instruction. And so we have here a claude uh instruction a skill. We have yes some tokens that were created but we also have things like this governance that might come with a design system. This is here how an app shell should work. This is how uh empty states should work. This when talking about color usage this is what we should be considering and thinking about when talking about color. um but also down to you know this is what uh the alerts component looks like uh uh in SAS and now this is what the alerts component looks like in markdown for the cloud skill. So that was test number one. Uh hang if you will of me taking an existing system seeing if I could not make it AI ready because what I want to be able to do my hypothesis is that companies want people to use AI. They still want uh designers and others to be experimenting and testing and playing uh in new ways but generally speaking uh we are struggling to get to a place where uh as you mentioned hang and you’ve mentioned this many times uh can we get to a place where the models aren’t hallucinating aren’t making something up aren’t making it hard to get to production and so my general hypothesis I think there is a path to uh vibe coding and still allowing people to use something like Figma be in the canvas that they want where the model is not going to screw it up. And my little attempt here is through a very extended uh larger clawed skill, a set of directions that defines the blueprints, but it’s essentially a routing skill that defines and tells the model when to go where and what not. Uh, and so I, uh, ran an experiment a couple weeks ago and every once in a while kind of updated. Uh, what I wanted to see first was could I build this same document file or site that is defined entirely based on the claude skill? Could I vibe code the same document site that is instead, you know, going the old way that is instead routed and defined by the cloud skill. And guess what? Yes, I was able to do that. Uh I should mention this UI framework is not the most elegant. It’s not the the cleverest out there, but it is what it is. Uh and I just wanted to see that uh Claude would be able to uh render and adhere uh the same thing. uh but also that if creating the same thing in Figma that we could think about creating some type of Figma connection and I know we have MCP. I prototyped a Figma plugin, creating a Figma plugin so that essentially Claude would be rendering or creating a JSON file that both Figma could understand and also when vibe coding Claude could understand to make the HTML version and uh made really good progress. So uh uh prompted I want to create an admin dashboard. We got this uh here’s the HTML uh version. It is responsive. It is all leveraging what is in that clawed skill. Uh you see we have active states. It’s all hoverable. And if we go into Figma, uh guess what? Created the same thing. Shows those responsive layouts. It’s all uh rendering it the same way. Uh so I was like, okay, that’s making some progress. And I worked with Claude here and there to sort of tweak some things. I said, oh, you know, let’s create a um Shopify clone. You can see again not elegant as a design system but this is how it is defined right now and so it is uh uh defining things and creating things to the rules of what are already there. So if we were just going to make a better design system we would uh update what is in the rules itself. And you can see over in Figma we have that too. So, what I wanted to show you and and maybe experiment with is uh I’m just going to go to co-work and uh I know I’m not in code, but let’s uh just use co-work for this sake and I’m going to see if we can vibe code uh something in real life so you can kind of see how it might work. Um let’s go ahead. Hey, I would like to make a internal uh communications application. Uh this is an app that internal teams would use to talk to each other about projects, maybe share files. Uh they’d probably have some channels in which they discuss things more openly. Uh but can also create some private channels or maybe some groups that are specific to project work. Uh I think it would be great if this app has a feed and maybe also great if uh people internally can RSVP to you know inside events or you know knowledge discussions. Great. Let’s go. So behind the scenes hang and for others uh what should be happening is because I’ve given access to this folder um again I’d probably use code in this case but I’ve given access to this folder with co-work uh and there’s a clawed skill in there that should be telling the model uh go make this prototype uh go create a version in HTML and then give me a JSON file for right now to use in Figma as the plugin. Uh I didn’t want to create a plugin that was fully hooked up to APIs and all that kind of stuff. Uh so interesting. Uh it’s asking me just a couple clarifying questions. What should be the default view? Sure, the activity feed. What kind of company? I’m a software uh startup. Um how prominent should be events? Um, let’s create a yeah, dedicated uh section for it. So, it’s just asking for a little clarity on uh what we want with this application and this product. It’s it’s maybe getting me to be a better at prompting. Um, of course, it’s telling me great choices. And now it should be behind the scenes as you could see on the right hand side going through uh all these files in here. So I’m going to pull this up and sort of show you is that here is the um that’s the design system as it’s rendered as a claw skill. Uh uh right here it should be going through that. Uh it should also be looking at how it should be rendering this with HTML. Uh and it should also be looking at these files to sort of say this is what’s needed to create uh a JSON file that goes into Figma that then generates the different uh renderings. Should be creating a projects folder as well because that was the instructions that I gave Claude to do. So you can see it’s created that internal coms folder. No files in there yet. It’s working through it. So first it’s going to design or create the design JSON file. So, let me just kind of show you what we’re going to do here is I’ve created a prototype plugin where rather than pulling from the API, rather than doing all that backend setup, I just want to grab the um JSON um markup that is essentially the source of truth that both Figma will use and uh the H, you know, that Claude will use to build out the app itself. So JSON uh is is just a a structure uh that is uh quite familiar and used inside of lots of applications and um Figma if you create a plug-in can also read it too and uh it it basically tells the rules of what should be done. And so this plugin uh is my sort of way of skipping having to go and build out full APIs kind of stuff. I just want to do this locally. It’s a local test to see how it will go. So uh still uh building this out. So it says now it has the JSON file. That’s great. Uh it should be all here. Yeah. So I’m just going to copy all this. I’m going to skip ahead. I’m going to put this into Figma. Let’s see what happens. It’s going to render this on a canvas. And you could see you’re probably like, “This is ugly.” Yeah. Well, the ugliness is because our UI component library is super basic and uh it in itself is not elegant as I mentioned. But you can see uh it rendered it at the 1440, it rendered at 768, it rendered at 375. So it’s showing you how this design system defined by uh inside of a clawed skill as markout files should be laid out. It’s giving all of the variables uh uh rendering all that kind of stuff. And so what we have here is kind of looks like Slack. There’s an activity feed and then on the sidebar it’s showing us oh look those events. What should be happening behind the scenes? Let’s check in on Claude. is uh is it going to produce the same result in HTML? Uh probably should I’ve tested this a couple times, but we’ll see. Uh in the meantime, this is me talking to you and others and maybe hang is like this is how I would approach it is the source of truth is what’s in production right now. You can use these models to look at the current stacks and determine what uh essentially is the UI framework right now that’s in production. You can uh work with one of these models. In this case, I’m using claude to convert that into a format and structure that these models are better at understanding. And then if you want to begin to make changes to that, you now have a markup language that is both easily read by humans and by these models. Uh from there you can then get to a point where if somebody is working in Figma, they can pull the components that are defined here that are rendered here. You can even, you know, render specific sort of things. You can do all the Figma things that you want to do. So, what they’re building it out. They have these uh uh resources available to them directly in the Figma file. And it will also then ensure that they’re vibe coding that they use this same reference. And now it’s going to spit out an HTML version of that. Let’s see what happens. Let’s allow this. And lookucky there. It’s the same thing. You’ll also notice like, you know, not everything has the hovers and whatnot. That’s okay. That’s probably hasn’t been defined in the design system in the markdown itself. But is it responsive? Yeah. Does it break down and do the same things? And so hang and others. Uh, I’m not internal and I know I’m maybe not the domain expert here, but that’s how I would go about thinking about it and I haven’t seen it thought about in that way and roast me in the comments if others have uh done it this way. I just haven’t been paying attention. But that’s my little experiment. That’s how I’d go about thinking about it. Uh, so I’m curious what you think.