Kaelig Deloumeau-Prigent on Making Design Systems Useful to AI

[00:00:00]

[00:00:00]

[00:00:14] Brad: Hey, Kaelig.

[00:00:15] Kaelig: Hey Brad

[00:00:16] Job hunting as a design engineer

[00:00:16] Brad: Let's get into it. , What has you waking up excited these days?

[00:00:20] Kaelig: Looking for a new job. , It's an really interesting time to be a design engineer. , The market is hot. , Now a lot of companies are still figuring out, how do we hire those people? They're not really full-time engineers, not really full-time designers. They're in between. you know, master of none kind of thing. And so where are the strengths of those people? How do we interview them? , And , I'm going through this right now, and , , it's fun times

[00:00:43] Brad: I have a feeling that in so many respects, you as the candidate would have to be in the kind of educator seat. 'Cause, like, in my experience at least, and I'm sure that you've experienced this , , as well, it's such a misunderstood role. It's a gap that exists nearly everywhere that everyone needs, but not everyone has the language for it, and they're just like, "Ah, yeah, we're good.

[00:01:08] We're good. We've got designers, we got developers." And then there's a bunch of quality issues that go out the door, and everybody hates the products, and it's like, , you're missing a really crucial ingredient to your team setup. I don't know.

[00:01:25] Kaelig: What's the problem? Designers be designing, developers be developing. Like, what's the problem here, you know?

[00:01:33] Brad: Mm-hmm. So how's that bit going? Like what's been interesting, surprising, rewarding? , , But, , also is there some nervous making stuff happening right now as well, like in this moment?

[00:01:47] Kaelig: Yeah, my first, , interesting finding, I had just quit my last job and, , I got a few phone calls, one of them was from a frontier AI lab, and they don't allow AI usage during their interview. That was so interesting. , The role was definitely not for me, but I appreciated the call and the introduction to the fact that, I've been using AI for the past 18 months.

[00:02:11] I've been leading AI enablement initiatives. The brain damage that I got out of it, , the kind of, , codectomy. I don't know how to code anymore. So I had to go back to the basics of TypeScript, of React, to do some, , code katas. And, , I don't get into leetCode kind of stuff, but I had to go back to how do these things work?

[00:02:33] Because that comes up in interviews, even though that's a very small percentage of my job. I have to show that I can explain those concepts.

[00:02:42] Brad: Yeah

[00:02:43] Kaelig: and I can, , have a good grasp of, , how things render in the UI and how the developer experience impact of poor typing versus really good typing and, , the kind of roles I'm looking for, that's how they test for it.

[00:02:56] That's how the companies know how to test for it. And so, gotta comply with , the folks who that's their expectations for those roles.

[00:03:04] Brad: Well, , , you're touching on something that's very fascinating in this moment, which is, like I said, codectomy or, you know. But yeah, some form of, like, atrophying or some distance that's happening between, like, we're not necessarily writing the code directly, , ourselves anymore or as much anymore.

[00:03:24] But the understanding, the need to understand what's actually going on, how code actually works, how things actually come together continues to exist. And for you, with a storied, long and storied career of doing that, that is very much... you're able to go back to that place and just brush up and get back in there.

[00:03:45] But I think that for, like, a lot of folks, it's like they don't have that long experience with how to do this stuff without AI in the scene, , that are now getting to this place where it's like, great, all this output is happening. But what constitutes good? What's actually going on?

[00:04:07] How is this actually functioning? How is this actually structured? And that feels like it's, like, slipping away or getting away from us, and that's where bad things could happen. So in certain respects, I'm glad that you had this, like, interview experience where it's just like, yeah, you gotta demonstrate that you know what's really going on.

[00:04:25] Kaelig: I know, yeah. And , the interesting part is, , I have barely coded any components in my career. , At least for the past 10 years. I've been really looking at how do we set guardrails and, , how do we accelerate the work of people going from design to development and iterating on that development, , loop. And so the product development life cycle is what I've been looking at. How do we optimize that rather than actually coding the components or, , getting into Figma to understand prop structure, best practices, those kind of things. And so I care a lot about the surface and how we work. but a lot of design system roles those days, they want a brand new design system, and they're looking for somebody who can do everything. And, , with AI it's possible, but you need to have massive range. , And so yep, I have to show that I meet the bar and pass the mustard on a couple of things.

[00:05:24] Brad: Yeah

[00:05:25] Kaelig: enough that I can get in

[00:05:26] Brad: But I think you're speaking to something that is really cool. I love how you described it. You're describing you're operating at a couple layers deeper, and that's not even getting into any of your W3C, , community work, , and all of that stuff. It's like you've been drilling down into deeper layers that get at how can people be more coordinated, orchestrated, working better together, versus, yeah, "Hey, Caleb, make me a secondary button component."

[00:05:57] That's maybe not the best use of your time right now.

[00:06:00] Kaelig: No, I mean, my way of solving this problem would be, okay, what are the feedback loops that are needed for an agent to do this for me so that we can repeat that, so I can do other things after? So it's all about giving away my Lego, and before that, I would do that with people. , I would try to find, okay, what are the linting rules?

[00:06:21] What are the, , automations that can catch accessibility issues? , What is the training that we need so that folks at least get to that level where, , they even know to check for accessibility? What is a screen reader? Those kind of things.

[00:06:34] Brad: Yeah

[00:06:35] Kaelig: when we onboard people, what does that look like? What kind of information do we wanna distill and put in on their onboarding schedule so that there's a few things that are non-negotiable, and it's not gonna be a discussion later because they know from the get-go.

[00:06:49] But even going further back, when we hire, what do we signal in our job descriptions? we looking for people who are, , TypeScript database experts and full stack devs touch the front end? are we looking for front end experts who are gonna be at the tip of the spear when it comes to delivering amazing user experience? And so that starts like way back, , into

[00:07:15] Brad: Yep.

[00:07:16] Kaelig: acquisition process. So yeah

[00:07:17] Brad: Yeah, yeah. And now here you are on the other end of it a little bit, but it's everything you're describing, it's like it's technology, it's architecture, it's guardrails, it's systems, it's processes, it's people, it's all of that stuff orchestrated together to ultimately arrive at you have this stuff and this infrastructure in place that allows you to go from, "I've got an idea in my head," to that thing exists out in the world and it's good.

[00:07:47] It's good on all of the definitions of what the word good is. And it's, there are weak links in all of these different categories and all of those things that you just described that gunk up the plumbing, that end up, like, going, "We have an idea," or, "We have a need for a thing," and then it sometimes never goes out the door, or it goes out the door and it is a rickety pile of crap.

[00:08:15] Kaelig: Yeah

[00:08:16] Brad: so hooray systems.

[00:08:18] Kaelig: Yeah, exactly. I'm talking to the recruiters who are hiring their first design engineer sometimes. , And they're not sure what they're doing, but they're really proud that it took , a lot of effort for them to even create that position

[00:08:29] Brad: Yeah.

[00:08:30] Kaelig: for a

[00:08:30] Brad: Yeah.

[00:08:31] Kaelig: they needed,

[00:08:32] Brad: Yes.

[00:08:32] Kaelig: becoming a reality.

[00:08:33] So

[00:08:34] Brad: Yeah

[00:08:34] Kaelig: interesting market. I like it. I think it was way worse, , about a year and a half ago when I was interviewing in early 2025.

[00:08:43] Brad: Okay

[00:08:44] Kaelig: there was just, , not a whole lot going on. Design engineering was not as hot, and so, yeah

[00:08:50] Brad: This is great. Yeah, and a lot of AI's , just total just dominating of everything, I guess, is leading to this position where a lot of these worlds are coming together where you have designers, , who are able to get a little closer. You have engineers that are able to get a little closer, and so that role of someone who's able to sort of navigate that seam really well is really important, like increasingly important.

[00:09:22] , So yeah.

[00:09:22] The State of AI in Design Systems report

[00:09:22] Brad: So you just published this thing, and I think that we should get into it because just what you were describing with, like, well, if I were to say, "Make a secondary button component now," you said, "I would first get at what feedback loops need to be in place in order to do that." So let's dig into all of that.

[00:09:43] So you just published the State of... What is it? State of AI and Design Systems?

[00:09:50] Kaelig: systems beyond the hype. What are design systems out there doing? Obviously, I only have access to publicly, , available design

[00:09:57] Brad: Yeah

[00:09:58] Kaelig: I wish I had access to, ... I could probably get Fable , to hack into the

[00:10:03] Brad: Probably. Probably.

[00:10:05] Kaelig: Of those companies that don't publish their design system publicly.

[00:10:08] No, but, , joke aside, yeah, I was just very curious, , like a lot of people right now. I'm seeing a lot of hype on LinkedIn, on X, and Bluesky of folks who are like, "Hey, I just coded my design system in, a weekend." Or, , things like, , "AI just built a whole website compliant with my brand, and all I needed was a design.md file."

[00:10:31] And

[00:10:31] Brad: Yeah.

[00:10:32] Kaelig: I'm like, "I wanna believe you," but the whole, like, I one-shotted this, , story is nice for LinkedIn, but in reality, what actually happened? Because, like, even this morning, I was, , curious about when does the sun rise two peaks. There's a U-shaped, V-shaped, , part of the mountains that I've seen the sun rise exactly in the middle once, and I was wondering, what if I could have a tool that tells me exactly what days of the year to wake up early so I can catch this?

[00:11:01] Because it's so amazing. And just the brainstorming and the phase of, like, what problems are we trying to solve here took me about an hour of the AI loops to work together, sub-agents doing that. So even for s-solving simple problems, I'm taking a lot more time. So I'm like, "How do people do this in 30 minutes?"

[00:11:21] Like, that doesn't seem,

[00:11:23] Brad: Yeah.

[00:11:24] Kaelig: doesn't seem

[00:11:25] Brad: C- yeah.

[00:11:25] Kaelig: using it wrong. I don't know.

[00:11:26] Brad: Yeah, yeah. But you're touching on something that's very important here, which is you get what you put into it, and a lot of times people are not doing the work. People have this very flat view of, "Oh yeah, I used AI to generate my design system," or whatever, and you technically can do that, and you technically can, set effort to low and get something that you could technically call a design system in, a minute or two.

[00:11:57] But, like, is that good, right? Like, that's the central premise of our, , course that we're putting together is, is it good, and, how can you answer that confidently, right? So yeah. So you went down this rabbit hole. You're looking at what these public-facing design systems are doing, , and what'd you find?

[00:12:16] Share it?

[00:12:18] Kaelig: Yeah, let me share. So, , like I said, I was really curious about how publicly available design systems are doing AI enablement, not only for, , users of the design system, because that's definitely a big problem, like having our customers of the design system, , , build using the components that we build and the tokens, and in the right way too.

[00:12:37] , And when they diverge, what to do about it.

[00:12:39] Brad: Yeah

[00:12:40] Kaelig: , And also can they catch themselves in the process of hallucinating versus

[00:12:46] Brad: Yeah

[00:12:47] Kaelig: it, and sometimes using a design com-

[00:12:49] Brad: Yeah

[00:12:50] Kaelig: component, sometimes not. Yeah, I think what I was wondering is, all these design systems in the past six months, there's been so much change. , Last year was the year of the MCP. Now there's a lot more stuff going on. There are skills, plugins , advanced CLIs, LLMs.txt, lots of standards are coming up. , the agents now request markdown. If the markdown is available, , a URL could return that markdown instead of returning the normal website, which is much more agent-friendly. So all that combined, like what are people actually doing in the wild? So I asked Fable, , And for those who are not familiar, it's the latest, , model from Anthropic at this date. , So Fable 5, super powerful. , And I asked it, "Do some broad research the top 20 design systems out there that are open source, , whether they have Figma equivalents or not."

[00:13:46] Like, , and it spun up something like 100 agents to do a shit ton of research.

[00:13:53] Brad: Mm-hmm.

[00:13:53] Kaelig: ... It was interesting to I mean, I could drink quite a few coffees while that was happening. I'll tell you that. But , let me share what this looks like. Okay.

[00:14:03] So when you arrive on the State of AI in Design Systems, , page, you arrive on this matrix that shows, , a list of systems here on the left, and, , then the techniques that each system is using. So, , the most popular is gonna be MCP Server, then what I talked about, LLMs.txt. I can talk a bit about what that does later. , An agent skill, editor rules, repo agent files, et cetera, et cetera. - Code Connect, I don't know if this is, , AI specific, but it does help agents understand the link between a Figma file and how to use the components in code. Storybook, I put it in there as well because, , especially with Storybook MCP and all the agenting stuff they've been working on, , I think it's interesting to note that there's a lot of systems out there that are using it. , And then there's some other techniques that are, like, hard to put into a specific bucket.

[00:14:57] Brad: Mm-hmm

[00:14:58] Kaelig: , So , for each design system, you can see there's , a here at the top. So there's a blue plain dot, that means there's official support for that technique. there's a bunch of, , dots around it, that means there is a community effort to provide that. , It could be both. Sometimes I found that something just wasn't at all in there, and then blank, , not found. So for example, Atlassian, I couldn't tell if they had Code Connect somewhere. It's possible,

[00:15:31] Brad: Right.

[00:15:31] Kaelig: just couldn't find.

[00:15:32] Brad: Yeah, some of the stuff might be behind a firewall somewhere or whatever,

[00:15:37] Kaelig: Yeah.

[00:15:38] Brad: yeah

[00:15:39] Kaelig: Exactly. And so I wanted to see, to do a catalog, not just of is it a yes or no support, it's not supported. I wanted to dive, like, really deep into how are they implementing that technique? Because one MCP server is not equivalent to another MCP server. could be totally different. So it could be served at a certain URL that all the consumers of the design system can consume, or it could be, , started locally.

[00:16:06] So in this particular instance, Ant Design, I can click it and it takes me to, , the Ant Design MCP server page, And so here it says the MCP server starts from their CLI, so That means as a person using their stuff, you have to not only point to a URL, which you typically, , do with a lot of, , MCPs, but this time you have to install something locally.

[00:16:29] Letting your assistant read the report

[00:16:29] Kaelig: But if you were to audit your own design system, and if you were to ask your assistant, "Hey, compare it to the rest of the, the... What is the state-of-the-art for implementing MCP servers in design systems today?" You would have to do a lot of work. Like building this report took about $2,500 in, , API, , equivalent tokens. You probably don't want to spend all that time. It took me about a week to compile the data,

[00:16:57] Brad: Yeah

[00:16:58] Kaelig: review it, to do a lot of, , iterations on it, , and then to build the user interface on top. But, what if you had all of these things detailed directly, , in here? So if I out Ant Design, I can click and drill into, , the techniques here. MCP server described exactly how , it's implemented Again, points to the code, the docs, an agent skill, what it looks like. Again, code is there. Now, again, if you're human and you're asking yourself what does the, state-of-the-art looks like, it's great. Like, you can go on the site, but still a lot of information. So the next step from here is, , what if you could ask your assistant to do this for you? And so we're gonna copy this text here and Let me go into a new Claude, , tab and share And actually, I think I might even have a Yeah, for each page, if you're curious, if you want your, , assistant to check out... Like, for example, there's a page about how all the platforms are supporting AI enablement in any way. in there at the top right, there's a dropdown where you can either copy the page, which is gonna copy the markdown of the page.

[00:18:20] Some people like that, so they can paste it into their agent. , You literally do open in Claude, and it's

[00:18:27] Brad: Boom.

[00:18:27] Kaelig: you,

[00:18:28] Brad: Yeah. Nice, son

[00:18:31] Kaelig: It's telling you to be careful just in case there's any malicious stuff going on. But,

[00:18:37] Brad: That's weird.

[00:18:38] Kaelig: Yeah, trust me, bro. In this case, we wanted to ask questions about the state of the art.

[00:18:43] And so, , for example, in this case is, , what are the different used to supply an MCP server? And so we're just gonna ask it to do that. What it's gonna do is it's gonna parse llms.txt that's supplied at the root of the report, which itself, points to various findings. So, , the index that contains, , the matrix. , the whole schema, just in case the is interested in, like, w-what exactly is the shape of the data that we're getting? , The methodology to understand the limits also of this research because , it's a research that was done at a point in time. It has, , the limitation that it's only open source, , design systems. , A bunch of resources here, and the type of questions that this report , might answer so that the LLM knows, okay, , , the kind of stuff I can ask. And also, if there's any, , deeper drilling to do, it's gonna have to work for it. ,

[00:19:47] Brad: Yeah,

[00:19:47] Kaelig: of predefined stuff

[00:19:49] Brad: this is fascinating just even in and of itself. So it's like you have this... what you're looking at here is this kind of markdown corollary to the World Wide Web in just a website that is stripping out a lot of the presentational elements of it. Markdown retains its semantic structure a little bit, but you're looking at this thing that is similar to but different than and is serving a different audience, , an artificial audience versus just here's the human-facing website.

[00:20:22] And so that in and of itself is, I think, really fascinating, , to see

[00:20:27] Kaelig: And assistants know to go to llms.txt, and then that can be an index to other TXT files or JSON files.

[00:20:35] Brad: Mm-hmm.

[00:20:35] Kaelig: if your agent is like, "Hey, I just want all the data. Like I've got some more research to do," it can go in there and load that JSON file, and that JSON file contains every single piece of data that's displayed in the site, , with the pieces of code and markdown techniques that are being used.

[00:20:55] So it's a lot more efficient than actually doing a deep web search, , and cloning all these repos and trying to

[00:21:02] Brad: Yep.

[00:21:03] Kaelig: are... Or using the GitHub CLI to find the pieces of code. So , let's go back to Claude here. And so I asked it, what are the different techniques used to supply an MCP server? It's telling me six delivery shapes bundled in the CLI, an NPM, , standard, , input/output binary, hosted remote, completely anonymous, , no auth. one is with auth. , Owned by the platform org, not the design system team. That's interesting. So the Lightning Design System does that apparently. , the Shopify Dev MCP. Okay. , So that is something that initially in my first search, , that was missed. , The research pertained to mostly design system repos and documentations, and it turns out for some companies, they have a larger platform initiative where that requires even more research, and so that was added later. , Serving a different platform than the flagship library. Yeah. Okay. Fluent. Interesting. All right. So, , I didn't even know there was so many ways of serving an MCP server. , I was just curious, and I was like, probably in my next six months I'm gonna have to build a roadmap for the agentification of a design system.

[00:22:14] Brad: Yeah

[00:22:15] Kaelig: How do I do that effectively? ,

[00:22:17] Brad: That touches on something that I think it's a central theme in the course that we have, is like there's all these different ways to do it, and historically there's so much like we're all looking over each other's shoulders and going, "Are we doing this right?"

[00:22:32] And everybody is just, I think, I have seen it so often, people just terrified, "Am I doing this right? Am I doing this right? Is this best practice? Is this what the industry best practice is? What are, like, the big players doing?" And I think, like, what we're seeing with like, oh, here's these different ways of approaching this, is that, one, the stuff is still being born, so it's still nascent, so these best practices and methodologies and techniques are being born right now.

[00:22:59] But then two, the big thing is like, well what matters? What's the right way? The right way is the way that works for you and your team, and like everybody that... and that's the same as it's always been, is like, oh, I don't know. Should we abandon everything and go all in on React, or should we abandon everything and go all in on, like, this other thing?

[00:23:19] And it's like, what works for your specific setup of human beings, technologies, products? What are you trying to get done? What makes the most sense? In this world, there's even less hard truths, I think, than there were even before. So it's, in a lot of ways the story is new, and in a lot of ways the story is very old and familiar.

[00:23:42] Kaelig: Absolutely. And this gets us to how would you audit your design system against those best practices or those ways of doing things? Because I don't know if there's best practices per se yet, , that have emerged. But, , if you go to the insights page, you'll find that there are a few things that are definitely table stakes nowadays, like MCP server.

[00:24:03] , It seems like everybody's doing it. , How they measure the effectiveness of, the MCP server differs, and in fact, you can ask, , your assistant, , to define for you how, , various systems are measuring those findings. you'll find that, , Asterix from Meta is the best at doing that. They have nightly evals that check that their skills and their system affordances are actually producing good, , outcomes. It's a costly but effective way to do it. , Okay, now, if you wanted to run this against your code base, you probably wanna go a little bit behind this technique. That will work. , You can ask your local Claude to read this, and then, , go and audit your code base. Or you can connect the MCP server.

[00:24:52] So I wanted to publish this report in a way that uses a lot of the techniques that are being used in, , by other documentation and design system teams. So for example, , I'm automatically serving the markdown file of any URL that, , agent would hit.

[00:25:09] Brad: It's very cool

[00:25:11] Kaelig: /AI is actually gonna serve , this page, the markdown file.

[00:25:14] Brad: Yeah

[00:25:14] Kaelig: the same content but for our friends, the robots.

[00:25:17] Brad: A full mirror of a website that is specifically meant to serve an agentic audi- it's, , like, , that in and of itself is, I think, like, very... it's fascinating 'cause we're like, "Oh, yes, this thing ate the internet." It's capable of tunneling in and processing and parsing an existing webpage.

[00:25:39] But now there is this new era where we have this mirror version of that same website or web that is agent-friendly, , that's gonna be more efficient at processing it and parsing it. It's just, that's wild. Like, that's just like a new paradigm, a new thing

[00:25:58] What an MCP server is

[00:25:58] Kaelig: Yeah, absolutely. And because this is new, I wanted to demystify some of it. , So for those who don't know what an MCP server is, , How would you explain it to a designer, actually? I'm curious. , what would be your take on it? 'Cause, , I have some developer lingo that just

[00:26:13] Brad: Yeah.

[00:26:14] Kaelig: on automatically

[00:26:15] Brad: I liked the description of it as a USB-C cable for hitching these different agentic systems together. So it's like, cool, I got my phone right here. I've got, , some other stuff here, got some music stuff here, a little iRig. I got this camera here, and all of those peripheral things need to connect to my computer, and how do I do that?

[00:26:41] Well, I bust out a USB-C cable, and that MCP server is the... Here's this thing that allows us to connect these two worlds together and do useful things and, I don't know.

[00:26:56] Kaelig: It

[00:26:56] Brad: that's the thing that stuck with me and, , I don't know if that's the right or best way to describe it, but that's how I've internalized it.

[00:27:05] Kaelig: Oh, no, that works. That's perfect. Okay, so yeah, if you're, , unaware of what an MCP server is, in this particular instance, it is the cable, the USB-C cable that will connect your assistant to all of this data. only it will do that, it will do that in a more effective way, , for the agent, because we're gonna have some, , tools at our disposal through the MCP server. , And the first one we're gonna start with is start here. That's gonna explain to our agent what to do , with this MCP server. And then the cool part is that you can ask it to build your roadmap for getting to maximum AI agentification, , for your design system. And I know already two people who basically have their six-month roadmap ready thanks to that. , But yeah, the first step is gonna be to install the MCP server, then start here, get an audit of your design system, and then from there, it's gonna ask you, "Hey, do you want a roadmap? Like, is that something you'd like to do?" then there's another tool you wanna adopt a specific affordance or a technique that is being used by another, , design system, and you're like, "Huh, we're missing this.

[00:28:09] Like, what is the best way for my design system, not just, a way?" , So it can cycle through all of the ways that certain things has been done and match it to be like, "Huh, you're using Angular, and this way has been used in these design systems. , Here's my recommendation." So

[00:28:28] Brad: Yes

[00:28:28] Kaelig: Can get you there. , And I know you also have, , some auditing skills and have used your auditing skills plus this together, because with that corpus of data, there's even more, , confidence in what can be done, what are the easy picks and, , the ways to go about it without needing to be an architect yourself necessarily. , So about you are my guinea pig today, and we're gonna get you, , you can pick either Claude Desktop or Claude Code, , whichever works for you, and share your screen and maybe try to audit a design system somewhere.

[00:29:08] Auditing the Eddie design system live

[00:29:08] Brad: Let's do it. Can I selfishly do it against, , my own?

[00:29:12] Kaelig: For sure. I mean, yeah, obviously

[00:29:15] Brad: Yeah. I feel like that feels right. So, all right, I'm gonna share my screen here. , All right, so I'm at your website here, and I'm going to ask this study, and I'm going to come into Claude Code, and...

[00:29:31] Kaelig: wanna zoom in for the folks who are,

[00:29:33] Brad: there we go. Boom. Okay. So all right. So state of AI and design systems. , And this is gonna be really fascinating just because I think it gets at a bunch of things. So Claude Code, I'm gonna come into a new Claude Code session here, , through the CLI, , or through the actual Claude desktop application.

[00:29:53] Kaelig: Okay, so you are in, , right now you're in the desktop app, and so there's other instructions specific to the desktop app

[00:29:59] Brad: Oh, okay. All right, great. Well, let me do that then. Thank you. Oh, add custom connector. , , I'll open up another way here. All right. I'm gonna open up Warp Good old Warp. TJ got me onto Warp. I don't know if it's...

[00:30:14] Kaelig: I'm using it too

[00:30:15] Brad: I don't use it for anything, like, I think that it actually does. I'm just , effectively using it as just a regular old terminal, but what, that's fine.

[00:30:24] Kaelig: Yeah, me too.

[00:30:26] Brad: that's fine. , It's funny how all this stuff goes. It's like there's all this stuff swirling around and I'm just like, "I don't know." I trust what my friends are doing, which may or may not... That's as good of a system as any, I suppose. All right, so if I come in here and I'm in a new Claude Code session inside of Warp, I'm going to paste this in, Claude MCP add...

[00:30:48] Kaelig: yeah,

[00:30:49] Brad: sorry.

[00:30:49] Kaelig: into the console directly, not

[00:30:51] Brad: Oh, okay. Oh, wait. Whoops. All right, so, all right. Claude MCP add

[00:30:56] Dooby doo. All right. Great. That did that. So now if I type MCP, I should see... Hey, DS

[00:31:05] State of AI. All right. There we go. That's fantastic. Good

[00:31:10] Kaelig: And so it comes with nine tools, and so we're gonna start with /start-here Yep,

[00:31:13] Brad: Okay, so that one

[00:31:15] Kaelig: should do the trick. Yep, perfect I'm

[00:31:18] Brad: Eddie

[00:31:18] Kaelig: use, , bypass permissions because the classifier for 5 and even from 4.8 in auto mode is really good while being safe. So, , you're living dangerously, my friend

[00:31:31] Brad: That's how we do it when we're screen sharing in front of the world.

[00:31:34] All right. , Okay. All right, so let's see here. It says loaded. I'm just gonna expand this jumbo size. All right. 20 systems, six platforms. So it's giving the whole shebang. A lot of what you're talking about already here is good

[00:31:54] Kaelig: so this is nothing new. , But what's interesting here is that you can ask it to audit your design system. So do /audit

[00:32:01] Brad: Okay, /audit. And that this one made actually because I have my own auditing stuff. So just, yeah, for context here, , a lot of, like, what we've been doing for our courses, a lot of, similar stuff, and it's our sort of audit stuff is sort of serving as a little bit of, a live ride-along with all of, the course videos as we're guiding through a lot of, the lessons and concepts and, here's what, a good AI-ready design system looks like.

[00:32:32] We have these 10 different stations with specific names and all of that stuff. And so it's been really cool rather than just, like, "Here's the accompanying PDF." Instead it's like, "Here's the accompanying set of, , , tools, , and, , all of the stuff that's, like, hooked up that you could then , run your own stuff and follow along, , with the actual course."

[00:32:51] And so it's cool. It's, like, taking the stuff that has historically felt you're just waving your hands and saying, "You should do this," and now you're able to provide tooling for people to enable that for themselves and empower them to do it. So just throwing that out there before we actually get into, this one.

[00:33:09] It's like, it's been really cool as somebody who enjoys helping other people with their stuff and guiding, , this is, like, a new flavor of helping people. So it's, like, really cool to see you putting this stuff together. It's amazing. Okay.

[00:33:26] Kaelig: And before you hit Return, , I don't know if you see, but if you have multiple design systems, which is possible in a very large organization, you can target a specific... Or you can even, if you're in a monorepo, you can target a specific subdirectory to say, "Hey, this is where the design system is." Or, , the other, , option there is Compare to. So if there's a specific design system, like you wanna compare yours to Astrix, you can set that up to do

[00:33:50] Brad: Very cool. Very cool

[00:33:52] Kaelig: have your design system is the whole repo, right? So it should be

[00:33:55] Brad: Yeah. Yeah, yeah. So here's the current state of affairs for our design system, which is called Eddie, which eventually I will be, , open sourcing that whenever that gets to that point.

[00:34:09] I'm very excited about that. But yeah, so we have, , a whole bunch of repos or packages inside of our monorepo here. , So I'm excited to see what this yields because there's probably a whole bunch of stuff that's even from the time that I started putting a lot of the agentic stuff in place here.

[00:34:31] I would not be surprised whatsoever if a bunch more stuff has has emerged you know? Like, you're showing those , different ways. There's six different flavors even for, , serving an MCP server, for instance, right? So it's like, okay, that's what-- Let's see what this returns. I'm very excited.

[00:34:50] Nord is the near exact peer. Yes. Yes

[00:34:53] Kaelig: and in the background, there's an agent that's also, , independently, without knowing anything about Eddie from this discussion, , is trying to build a screen together, searching components, trying to see if I were to use as an agent, if I were to use this design system, what would it look like?

[00:35:10] What are , the pain points and the friction points? And then it's gonna issue a report , to your main window, and it's gonna tell you, , some empiric data about how using the design system feels at this moment

[00:35:23] Brad: Yeah. Oh, amazing. I could tell it's already flagged. Once upon a time, I spun up one of the packages in here is the website, the reference website for Eddie that is old and stale and crusty, and I recently was like, "We should probably get that out of there until it's ready." So I wouldn't be, , surprised at all if it already caught that as a thing.

[00:35:47] I'll show you. I do, actually. This has been ignored. This is ancient at this stage in the game. Look, 0, , version 0.19.1. The current state of my design system is

[00:36:03] Kaelig: There you

[00:36:04] Brad: 50. So yep,

[00:36:05] Kaelig: caught Brad

[00:36:06] Brad: amazing. Amazing.

[00:36:08] Kaelig: the great Brad Frost doesn't

[00:36:10] Brad: Yep.

[00:36:11] Kaelig: his own design system

[00:36:12] Brad: well, it's true. But this does get into quite of stuff here, because what's going on here, right, like what I have is quite a healthy, , Storybook instance and a lot of, you know... It's , well, who's the audience for this design system?

[00:36:28] The answer is me and Ian, and a handful of collaborators, right? So a lot of times when we get into, well, what is a design system reference site for? Who is it for? And so on and so forth, you get into, well, who's the audience for it? Like, what needs to happen here? So, , our Storybook instance feels quite mature and good and pretty sturdy.

[00:36:54] , The actual reference website itself, though, , not so much. Not so much. So not surprising at all if that's like what it comes back with, which I think is fantastic. So this is great it was like, "Oh, this is in the spirit of, , the Nord design system."

[00:37:11] It almost felt like it benchmarks picked. So this is cool. So you created it, it's almost like find the similar shape design systems out in the wild and roll with that. That's beautiful. Yeah

[00:37:29] Kaelig: And it's probably gonna return the same type of stuff that you have , in your skill or in your plugin. , And the best seen is when you combine both essentially.

[00:37:39] Brad: Mm-hmm.

[00:37:39] Kaelig: , When you combine your heuristics plus data supporting that on

[00:37:44] Brad: Yeah. Yeah. Yeah, that's like a, that's a

[00:37:47] Kaelig: it flagged that the version was

[00:37:49] Brad: Yeah.

[00:37:50] Kaelig: the AI

[00:37:50] Brad: There we go. There we go. You caught me. You got it. , Yeah, that's one of those, like, after it's all said and done, whenever I'm done recording a course and all of that stuff, and, , probably whenever we, like, open this up to be viewed by everyone.

[00:38:06] So this is great. So we got a number of things here that are, like, fully absent. The LLM's, , text is an interesting one Copilot instructions I don't feel as bad about. Cursor rules I don't feel as bad about. , I haven't really been using those things, although I'm sure that there's good utility there.

[00:38:28] Prompt library. Ooh, that's fascinating. Codemod , or Codemod AI

[00:38:35] Kaelig: Right. So, , some design systems provide some codemods , and some codemods that can be executed through, , the codemod CLI, is codemod.com powered. , Yeah.

[00:38:50] Brad: That's cool. Look at this

[00:38:51] Kaelig: for a solo engineer working on this, there's no reason why you should have all of these things, so

[00:38:58] Brad: Yeah.

[00:38:59] Kaelig: surprised.

[00:39:00] Brad: Right.

[00:39:01] Kaelig: yeah

[00:39:02] Brad: But it's, like what's so great about this stuff is that it kicks up a bunch of stuff, so then you can go, "Okay, absent. What of these things that are flagged as absent actually matter versus not?" This gets at how we've been evolving things and even in putting this course together and helping other people.

[00:39:25] You're iterating into better understanding to go, "What actually needs to be there? What's actually mission critical? What is real infrastructure level?" If you don't have this in place, you're in bad shape versus, "Oh, here's these other things that are nice to have, are important if you're in a certain place or in a certain organizational context."

[00:39:48] So you get the stratification of, what are, the real best practices? What are the real things that need to be in place versus Here's this, layer that's sitting on top of it that it's like, oh yeah, if your engineering team is all in on Cursor, for instance, it might be a good idea to, have that stuff present.

[00:40:05] But if you're not, then that's okay. We both done consulting over the years, and this is a different flavor of that, that , supercharges that, able to take a look at things. It surfaces some things, and then you're able to sort of go, "Okay, well, what do we do with that?"

[00:40:23] So maybe that's, , the next thing we get at once it, , finishes the job here. This is great. It kicks up a bunch of dust. I think the wall that everyone is hitting with this stuff is they're going, "Well, like, this stuff is not fixing all of my problems," or, "It's just supposed to automatically sturdy and improve all of this stuff."

[00:40:44] And a lot of what it is really doing is surfacing things that you all need to collectively address, and that requires human beings. That requires judgment. That requires, sure, using more of this stuff to help facilitate that, but you need to steer and make decisions and exercise your good judgment. Ooh, look at this.

[00:41:10] Ah.

[00:41:11] Kaelig: Good old Artifact.

[00:41:13] Brad: Yeah

[00:41:14] Kaelig: but before you read that, for those who haven't tried your skills for auditing a design system, it asks you what kind of team you're on, the kind of customers you have as a design system, because the type of recommendations it's gonna give you varies massively depending on if you're a solo dev or a solo designer versus an enterprise-funded team for hundreds and hundreds of developers or if not thousands.

[00:41:39] Brad: Yep.

[00:41:40] Kaelig: and, There's a big spectrum there, and there's no reason why you should invest in certain things when you're a solo dev. Like,

[00:41:46] Brad: Yeah

[00:41:47] Kaelig: you know your way around the system already.

[00:41:49] Brad: Yeah Yeah, yeah. Yeah, the spirit of a lot of the tooling and the skills that we're providing with the course as well as just the shape of the course in general is that it's like everyone's shaped differently. Your specific goals and outcomes and what you're trying to get done, what products you're supporting, what, where people live and, time zones and tech stacks and the rest of them, all of that is wholly unique, right?

[00:42:13] , There are some shared best practices, and there's some guidance and some concepts and principles and techniques, and yes, maybe even some tooling that is a good idea to adopt across the board. But by and large, this stuff has to do with, like, well, what works for you? What are you specifically trying to get done?

[00:42:34] And That's the beauty of, I think, design systems, it's probing at that question again and again. Like, how do we do things here? What are our brand standards? What are our color standards, our typography standards, our layout? Like, what makes for a good product at our organization?

[00:42:52] And that's gonna be a different answer than the next organization or the direct competitor, right? Like, there should be some space in between that stuff. , Otherwise, we'd all just have these carbon copy sites.

[00:43:06] I think that's been one of the most exciting things how we've been , evolving. We've been able to all of a sudden help people at scale by putting this stuff together, and that's exactly what you're doing here as well, which is, I think, really exciting.

[00:43:19] It evolves almost like open source software a bit. It evolves all sorts of things in really helpful ways. Let's take a look at these results if that's the next move. Okay. So it says the mirror image of Nord. Also lit web components, custom property, multi-brand themes, consumption strong, builder invisible, source repos private.

[00:43:46] Okay, -- anywhere can install its skill with one command. Eddie is the exact inverse. Builder side coercion is among the strongest anything in the survey does. That's right. Mandatory tool gating preamble for CI gates, a static validation and correction flywheel, and this has been a long time Like, I've been working on getting AI to follow the design system's guidance since very shortly after, this stuff became available, and we started, building code using AI.

[00:44:24] We've been working at this problem. But it's really been, within the last, year that we've been able to , get to a place where it's like I can confidently say that I could come into a new Claude instance and say, "Make a website," and I know that it's going to be made exclusively using our design system, which is really-- It took a lot of work to get to that point, but it's pretty cool.

[00:44:48] , All right. Eddie already built the hard parts? Yes. What it has not done is publish them, and that's okay. Okay. Look at this. Oh, this is beautiful. This is quite nice. MCP server, Agents MD, Claude MD, Storybook integration. Great, great, great. Claude Skills- This is... Yeah, that's I think not true, but it's not published, right?

[00:45:14] Yeah Yep. Yep. Reachable only through a MCP tool calls. So this stuff is interesting. You're talking about creating or exposing different entry points here. This is funny.

[00:45:27] Yeah. Look at that

[00:45:28] Kaelig: lot of these things with, , the roadmap generator plus, , a few days of just you start the thing in the morning to say, "Hey, like create a pull request to address this thing." , But by the way, the roadmap, what it does is it tells you in what order you should tackle these by order of, , bang for your buck and what are the easy pickings that you might be able

[00:45:51] Brad: Yeah

[00:45:52] Kaelig: To do it very quickly. which is quite useful if you don't know where to start and, , for example, code mods might not even be relevant here. , See here,

[00:46:03] Brad: It's flagging a couple things. One of the things that I did, I like changed inverted, which is some language we used, , i- in prior years, but over the years we've switched to using this term knockout. And so I made the official call to deprecate the old way, but it's still in there.

[00:46:22] And so it's saying "Yeah, we've touched a few things," and I've said, "We should be doing it this way and not this way," and a few of the products are using the old way. So it's it's actually surfacing genuinely helpful things to go, "Maybe you should have some of these code mods in there," right?

[00:46:40] So this again, it's not necessarily this tool's job to build the code mods for me, but it does go, "Hmm. Ah, that's maybe something to think about. That's like a good call. Maybe I can make a quick thing, a little script that knocks this out for me."

[00:46:54] That's fantastic

[00:46:56] Kaelig: So the use case here is for bigger teams. , Let's say you have 50 teams using your design system, and you've released a new version. You give them a small prompt they can self-serve, or ideally you have a whole code change management platform. But let's say you don't. You give them a self-serve prompt to run that points to a TXT file somewhere or a Markdown file somewhere, whatever, they put that into the agent.

[00:47:23] The agent goes and reads what this new, , version brings, and then knows what tools to run bit by bit, and all they have to do is literally run it into a cloud instance or into the local machine, open a PR, and the code mods will run for them. Like there's, they,

[00:47:42] Brad: Yep.

[00:47:43] Kaelig: to do for them.

[00:47:44] Brad: Yeah, yeah, and that's always been the beauty of these code mods, even, before AI hit the scene, it was just like, "Yeah, here's some stuff. I know we're forcing you to make some changes here, but here's some stuff that will make this go easier." So this is fantastic.

[00:48:00] All right. So it says, "The three gaps that, , cost the most. Every affordance assumes that the agent is already inside the checkout." Okay. Yep, yep, yep. Yep, yep, yep, yep. Yeah, A lot of this just reflects the state of, our ecosystem, this is very closed to and relegated to a couple people who all have access to this thing, right?

[00:48:27] And are using it, and that's great. But you said it well, for a team that has, a bigger surface area or multiple consumers or whatever, that's where holding this stuff up and, giving it, a lot more of, a public entry point or a single entry point would help more people access it and work with it, so.

[00:48:47] Kaelig: Yeah. And let me, , point out something. Just go back a little bit. See, it's telling you something about llms.txt. So it's all nice to tell you that, hey, you would benefit from an llms.txt, but how do you make sure that doesn't get stale? Thanks to that report, the agent can also look at teams the creation of llms.txt, .md files, , so that it's always up to date with the latest documentation and doesn't have stale links, 404s, 403s, , that it's giving the right amount of guidance to , those agents. 'Cause gets into DevOps territory. , You shouldn't have to tell the agent every time to update that llms.txt. It should

[00:49:33] Brad: Yeah

[00:49:33] Kaelig: script that runs automatically , when there's a change to any content.

[00:49:38] Brad: Yep.

[00:49:38] Kaelig: so yeah

[00:49:39] Brad: Yeah, and this is the real plumbing work that is, AI can help facilitate a lot of the introduction of a lot of the stuff and to go up, like here, where we're talking about here, where it's just like, here's all of this tool gating, where you cannot merge this stuff in, without these checks happening.

[00:49:59] All of that stuff is like really hard stuff to arrive at, and is very much the land of DevOps. And historically, I've always hated that kind of work, just because I'm just not wired that way. I have the utmost appreciation for a lot of that rigor and testing and validation and processes and synchronization and all of that stuff, but I want to be the beneficiary of all of that work, not the person who's authoring it, right?

[00:50:30] So because I appreciate it, I understand generally what it does, this is where, these agents could come in and help me arrive at these healthier pieces of infrastructure and checks to make sure that the quality that's going out the door , abides by my definition of quality.

[00:50:49] Kaelig: It's been so liberating for people who are front of the front end developers and know enough about DevOps but want to

[00:50:59] Brad: Yes.

[00:50:59] Kaelig: It's so time-consuming.

[00:51:01] Brad: Yes

[00:51:01] Kaelig: is so good for this because it's internal tooling. It's nothing your end user is gonna ever see, and you can iterate on it.

[00:51:08] You can break some shit, it's fine.

[00:51:10] Brad: Yep

[00:51:10] Kaelig: not gonna create a whole incident at your company.

[00:51:13] Brad: Yes

[00:51:15] Kaelig: and, , so it's been so great to have AI to just tell it like, "Make sure that every time somebody uses the wrong component, we catch it in, the pull request."

[00:51:25] Brad: Mm-hmm. Mm-hmm.

[00:51:27] Kaelig: And it's

[00:51:27] Brad: Yeah.

[00:51:28] Kaelig: whole script for you

[00:51:29] Brad: Yeah. So this is great. So we already talked about how my reference website was a work in progress, stale thing, but then it's also saying like, oh, there's actually some... One of those things, like you were just saying about the llms.txt, where it's like, how do you make sure that that thing is always up to date with things?

[00:51:50] It looks like it flagged, , for some of the things that I'm shipping. , This is a little bit because I barely do any sort of ingesting the design system directly from some of the published, modules, , from, a CDN or whatever. But as a result, that means that this stuff is stale and is drifted as well.

[00:52:13] So yeah, these are pointing out real bugs here. That's fantastic

[00:52:16] Kaelig: It's also showing you various ways other systems have solved it.

[00:52:20] Brad: Yeah. Yeah, yeah, yeah. It's, it's

[00:52:22] Kaelig: contribution,

[00:52:24] Brad: them. Yeah, yeah, yeah. Yeah. That's great. Oh yeah, here we go. Okay

[00:52:31] Kaelig: That gets pretty technical. Look at that. Like Claude MD, Agent MD, Skill MD.

[00:52:36] Brad: Yeah Yeah. So this is getting into, yeah, does my stuff work? Well, it's a little crowded and you can make this a lot more efficient. So

[00:52:47] Kaelig: Yeah.

[00:52:48] Brad: fantastic

[00:52:49] Kaelig: if that's a big problem, but, , it's interesting how others have solved it as well

[00:52:54] Brad: Yeah

[00:52:55] Kaelig: not repeat themselves

[00:52:57] Brad: Beautiful. Well, great. So here we go. So it's just like, all right, we'll go quickly through this stuff Here we go. Where Eddie is ahead. Okay. More explicit than anything in the surveys instruction file corpus. Eddie reporter loop, , beaconing. So this is really exciting

[00:53:16] If you'll allow me to indulge.

[00:53:19] Kaelig: Please do, yes

[00:53:20] The Eddie Reporter feedback loop

[00:53:20] Brad: I created this thing called the Eddie Reporter. So it's one of the biggest things that we talk about in all of our courses and ever since Atomic Design came on the scene, was here's this connection between, the system and the products that it serves, right?

[00:53:39] That's the whole point of this stuff. It's not a one directional thing, atoms to pages, whatever, Nor is it , "Here's the design system, and it's a one-way street to, , consume it in the product, and that's the end of the story." No, a successful design system is the arrival at this virtuous circle between the system informing and influencing what the product is and what it can do, and then the product informs and influences the system, right? And that feedback loop, , pre-AI, was effectively some teams that we worked with had some form of maybe, a script or, using some tooling to go out there and crawl and get some intel on, how many components are being used or whatever, but not very sophisticated.

[00:54:25] , And it's all comes in the form of the human relationships, which is critical and continues to be critical, but also just things like bug reports and gaps in the system and, those are, the only signals, right? So whenever you get into usage guidelines for "Here's the floating action button," and where is that used?

[00:54:45] Or what products are actually using that? And That stuff has been so hard to come by and create that real connection between, well, this little sticky thing is cool, where could I see it live? And we've worked with so many teams that are like, "Show me, the real examples of the products that are already, using this stuff," and then that gives them confidence to adopt it, right?

[00:55:08] So historically, that's been really hard. And so I wanted to create that feedback loop, , so that any product that is hooked up to the Eddie design system reports back just based on its Git activity It runs on some cadences and stuff as well, where you get into , here's where specifically these components are being used, and now I'm using that to trickle that back into the core design system component Documentation, token documentation, all of that stuff to say, "Here's where it lives, here's where it's live," and to give some real world examples, , for where the system is actually being deployed in the product.

[00:55:54] So very cool

[00:55:55] Kaelig: So you're removing the fog of war of design systems

[00:55:58] Brad: Yeah. Yeah, and once you have that loop established it's almost like , the old, neurology phrase, neurons that fire together, wire together, right? And so you have this idea of a strengthening, that connection exists now, but in my head it still feels thin.

[00:56:17] And I think that over time what's going to happen is a real sort of strengthening of that connection as it gets used more, as it's reporting more, as the system grows and matures. That connection between these lines between the system and the products is going to get stronger.

[00:56:34] And so this thing that we've been saying, this ideal of as the system improves, so do the products, like actually becomes a real reality rather than , a kumbaya nice thing that's off in the distance. It's like no, we're actually creating like multiple levels of connection here.

[00:56:54] It's not just that the assets are being consumed. There's all of this just soft tissue connecting them all and getting them closer together, , that doesn't feel like just these different worlds, which is what we've both experienced for so long. So anyways

[00:57:10] Kaelig: Yeah. I mean, you're pointing out at how you discover how the components are used or the tokens are used. What's also interesting is to know what is not used, because it's possible a prop or a token is never,

[00:57:24] Brad: Yep.

[00:57:24] Kaelig: used,

[00:57:25] Brad: Yep.

[00:57:25] Kaelig: and then that's something you can safely clean up, , down the road. It's, , if you wanna keep the surface area of the design system maintainable and manageable for the resources you put into, , it's

[00:57:34] Brad: Yep.

[00:57:35] Kaelig: Very useful

[00:57:36] Brad: Yeah, yeah. No, this is pretty cool. , Holy moly. Yeah, I mean, so okay, so what happens? So if we were to do, a roadmap from here, right? That would be, the next steps

[00:57:52] Kaelig: , 'Cause in theory it should have created a file. And so, , from there you should be able to create the roadmap. , If you do a git status, can you show me what it... If

[00:58:04] Brad: Need to do this for

[00:58:05] Kaelig: Oh, interesting.

[00:58:06] Brad: Oh, okay

[00:58:07] Kaelig: it was gonna put the markdown report in the repo, but maybe not. That said, maybe it's gonna find older session and the artifact. Let's just do, yeah, start the roadmap and see if it finds what it reported on earlier.

[00:58:21] Brad: Okay. All right, so if I did

[00:58:23] Kaelig: a good thing for me to fix

[00:58:25] Brad: Yeah, that was great. , /Roadmap. Or wait, what did I do? Did I oh God. Clear.

[00:58:33] Clear. Okay. Road map. There we go. Okay. And then findings and constraints

[00:58:43] Kaelig: Findings, hopefully it finds the ones that were from the previous session. I'm

[00:58:48] Brad: Yeah.

[00:58:48] Kaelig: so

[00:58:49] Brad: Let's see.

[00:58:50] Kaelig: gonna

[00:58:50] Brad: Let's see.

[00:58:51] Kaelig: Nope.

[00:58:52] Brad: Okay

[00:58:53] Kaelig: Can you point it to the artifact URL that you had?

[00:58:55] Brad: Yeah, let's see

[00:58:57] Kaelig: I don't think that's the best way, but that's

[00:59:00] Brad: Here.

[00:59:00] Kaelig: got

[00:59:00] Brad: Use this

[00:59:02] Yeah, so it usually, kicks up some dust and creates a markdown file that's like the equivalent version of this or whatever, so

[00:59:11] Kaelig: I need to, yeah, refine that a bit. Yeah, I'm thankful for you to be my

[00:59:15] Open source and AI contributions

[00:59:15] Brad: Come on, Kaelig, no, just kidding. I mean, this is the thing. and that's what we're doing with the community and stuff as well, with a lot of the skills and stuff that we're putting together. I'm like, "I'm doing this through the lens of my own stuff," and it, I want it to be stronger, and that requires people using it and reporting back, right?

[00:59:38] And you've been in and around open source software and the standards efforts and other things. I think that this is a new way of collaborating. I don't know if you feel the same way, but it's a very interesting thing, and it gets at the heart of, when we think about things like JavaScript frameworks or other just popular, open source projects, the WordPresses of the world.

[01:00:02] It's people ultimately scratching the same itch and rather than creating competing things, they're creating tooling and contributing to the same thing, or at least creating stuff that's compatible with one another. And this feels like a new generation of that same concept. It's a little weirder, and there's more things in the mix, but it gets at this.

[01:00:28] I could publish some tools. I could publish some thoughts, some notions, some inspections, some ways for you to improve your stuff, and put that out there, and anybody can pull it down and use it and hopefully report back on how it went for you. But it's, , I don't know.

[01:00:52] How do you think about that, the current state of open source software and what all of these just skills and agent-specific things add, remove, hinder. what gets easier? What gets harder? What gets more complicated? What's exciting? What's scary about just this brand-new crop of tools that we're running right now?

[01:01:17] Kaelig: Yeah. Well, for open source maintainers, what gets harder is there's a barrage of, crap that comes their way from very well-intentioned people who open their first pull request, don't look at the output, , and instead of accelerating the contribution, it's just too much for open source developers to, and

[01:01:39] Brad: Yeah

[01:01:40] Kaelig: to review all these PRs.

[01:01:42] Brad: Mm-hmm.

[01:01:43] Kaelig: yeah, that's a bit tragic because There's some people who are just leaving open source right now because... Or putting anti-AI statements on their open source project to say, "If your PR is AI-generated, we will refuse it. We will automatically close it." , And so it punishes people who are using AI to accelerate and do better.

[01:02:04] Brad: Yeah.

[01:02:05] Kaelig: I'm seeing people, for example, who English is not their first language, and for them to be able to produce a really well-articulated reasoning behind why this pull request exists, , rather than, the fear of misspeaking and poorly explaining something, it's a massive unlock. , But it could punish you in that process because your code might be good, but what about the rest?

[01:02:28] And if it's detected as AI, gonna be getting

[01:02:31] Brad: Yeah

[01:02:31] Kaelig: closed? And for design systems, design systems were already the target of a lot of document, , contributions. A lot of contributions, a lot of bug reports, and so we were assaulted by, ,

[01:02:46] Brad: Yeah. Yeah

[01:02:48] Yeah

[01:02:49] Kaelig: contributing little things back.

[01:02:50] And it took you out of your flow to get in there, understand the problem, reproduce it in production, et cetera. So if you didn't have your DevOps, , operational SDLC, software development lifecycle, welloiled already, now you're gonna feel the pain even more because all of a sudden it's like times three the number agents who are bringing their

[01:03:11] Brad: Yeah

[01:03:12] Kaelig: And so reproducing steps, , verifying in production or pre-production, that your thing actually worked. If you don't have a really environment set up for this, you're gonna feel the pain of AI even more.

[01:03:26] Brad: Yeah, But, what you're getting at is, whenever you look at, yeah, a pull request template or whatever, we're so used to it. I love the way you said it yeah, design systems people are just, a freaking target, so you learn to have a pretty thick skin. But Ian and I's joke has always been like, "This is broke.

[01:03:41] Please fix." it's just caveman grunts of a GitHub issue or, something, coming at these people who are, downstream trying to get something done, and they're at least raising their hand and saying like, "Hey, something isn't working." But it's required a lot of, coercion and it's like pulling teeth to say, "Can you please tell me something more than just this is broken, please fix?"

[01:04:10] Give me something more to work with. And that means, oh, I have to do all of, this legwork as somebody who's just like, "I'm busy doing these other things." And that ends up, surprise, surprise, in the department of like, "Hey, The design system just isn't working." "It isn't working. I filed an issue.

[01:04:29] They came back and yelled at me, and it's too much stuff, and so we're just going to abandon the design system." And so for me, , before we get into what just got published here. For me, the ability to, and I love how, to dual file an issue and create, again, that's the soft tissue, this connective tissue between here's what's happening on the product, here's the upstream bug in the Eddy design system.

[01:04:56] Addressing this, releasing it, pings the downstream issue. It creates this connective tissue between these different worlds that used to have to rely on very busy humans to orchestrate, right? So that is such a win, and I love how you talked about the accessibility, especially for, English as a second language people.

[01:05:18] We experienced that, firsthand with, , some of our collaborators, where they're learning the ropes. They're getting into things, in both English as well as programming and front-end code. And so for them to be able to actually, participate and for us to better understand what they're doing in order to help them and mentor them and stuff.

[01:05:41] , This feels really empowering and, again, creating this connective tissue.

[01:05:46] ,

[01:05:46] Kaelig: Yeah.

[01:05:46] Brad: I hope to see more of it

[01:05:49] Kaelig: The, way I've seen companies do it, not always well is, , to, , solve this problem with AI bots. And so you end up with a support bot that when, , there's an unqualified, support request, like thing is broken. Okay, what are the repro steps? tell me

[01:06:08] Brad: Yep.

[01:06:09] Kaelig: What

[01:06:09] Brad: Yep

[01:06:09] Kaelig: you on?

[01:06:10] What are the impact on the customer? Et cetera, et cetera. So that you understand, is this a super urgent fire? do we need to escalate or is this like a latent thing? We'll fix it in the next release or maybe three months down the line or something like that.

[01:06:25] Brad: Yeah.

[01:06:26] Kaelig: that if you're gonna have to drop everything, you know it's for a good reason. , But that said, if your support bot is treating every single request the same way, people feel like they're being taken through a weird process that is totally not appropriate for

[01:06:42] Brad: Yeah

[01:06:43] Kaelig: , Maybe they were asking for some design crit, maybe something is broken. And if their answer is always the same thing, that's really poor.

[01:06:50] And so I've been on a team that had this and it was not good.

[01:06:54] Brad: Yeah. Yeah. Yeah

[01:06:55] Kaelig: it at some point. We were like, "Man, it is not a good experience."

[01:06:58] Brad: Yeah. Yeah.

[01:06:59] -

[01:06:59] Brad: These, are all design problems, right? you could just create a bot that just, auto-closes things or just, says, "No, we're not gonna do that," or is just this dehumanizing thing and that sucks. Or you could use it and design it in such a way that, enriches things and brings actually the teams closer together to have a more constructive conversation to help solve their problem as well as the system's problem.

[01:07:24] And All of this is just design, right? you can't, write something off wholesale because, yeah, we've all had really shitty chatbot experiences, but that's not to say that, "Yep, well that's the only game in town." no, we just have to design better systems.

[01:07:39] Kaelig: Oh

[01:07:39] Brad: all right.

[01:07:40] Kaelig: bot is you're asking, just let me give an example because that kept happening. It's like, , somebody comes and says, "Hey, , when I click the button, the modal is appearing under the button for some reason." And then the bot is like, "Here's the documentation for the button. It seems like you really want to know about button docs right now." And we're like... , and the person was like, "Representative," in

[01:08:02] Brad: Yeah. Yeah.

[01:08:03] Kaelig: response,

[01:08:04] Brad: Yeah.

[01:08:04] Kaelig: a human." And we're

[01:08:05] Brad: Oh my God.

[01:08:07] Kaelig: about that

[01:08:07] Brad: Yeah, yeah, yeah. We care deeply about, , your call. Your call is very important to us. We'll... In the meantime,

[01:08:14] Did you know that you could download our mobile app and get the same answers? Anyways, all right, so here we go. So the publish order. Just to recap here, so we ran this command.

[01:08:26] , It said, "Build my roadmap," and this is what it came up with, so let's take a look

[01:08:31] 14 items. Eddie's knowledge graph is already right. Amazing. Everything published from it is wrong. That's fantastic So okay, so here.

[01:08:42] Kaelig: but at least it picked it like

[01:08:43] Brad: Yeah, that's great. That's great.

[01:08:45] Kaelig: Then

[01:08:45] Brad: this is beautiful

[01:08:47] Kaelig: everything after this, the main stuff is essentially fix your foundation because it's garbage in, garbage out. Like way-- there's no reason to, , it agent-friendly if it's wrong. And so not pointing at your specific setup, it's for any design system out

[01:09:05] Brad: Yeah.

[01:09:06] Kaelig: if your docs are poor and there's a lot of contradictions, the agents are not gonna benefit from it.

[01:09:12] So fix that first. I

[01:09:13] Brad: Yep.

[01:09:14] Kaelig: , Starting there.

[01:09:15] Brad: Yep, yep, yep. Derive the version and asset counts, stop typing them. Yep. Yeah, this is, again, there's, a few things that have just been , along for the ride that just haven't been as connected as the rest of the stuff. a lot of the stuff is out of our, how many packages do we have in our...

[01:09:38] One, two, three, four, five, six, seven, eight, nine, 10. 10 packages generally orchestrated pretty well, but these, this is, doing a good job at saying not everything is as connected as it needs to be

[01:09:52] Fix your foundations first

[01:09:52] Kaelig: Yeah. It's all about telling the people out there, "Don't just slap some AI on top of your design system. First, your design system

[01:10:02] Brad: Yeah. Yeah. That's like the inner course we describe it. TJ had this line, and I don't know if it was like a throwaway line or it's something he's been saying a lot, but he described it as addressing your check engine light. And he's like, "If you're driving down the road and your check engine light has been on for a long time, and you might...

[01:10:21] Every time you get behind the wheel, something bad could happen. And now that we're putting, turbo boosters, hitching them onto our cars, you gotta address the check engine light because, you're about to go a lot faster. And if your check engine light's on for a reason, for valid reasons, and all of a sudden you're going a lot faster, well, guess what?

[01:10:45] You're going to scale a big old mess, right?" So I love that, and that became one of the main themes of the entire course, and that's why, our chapter three is all about, here's how you address the check engine light. Here's how you sturdy up these foundations so that everything is actually functioning properly, so then you can use design systems and AI together to actually have successful results.

[01:11:10] So this is great. Yeah. I mean, it feels like all of these things, there's really one headline, I think, for all of this, and that's what it says, nothing downstream is safe first. And you need to reconcile and sorta sturdy up some of these, connections that have drifted, and that's what these ones all detail.

[01:11:30] So that's great. I could go ahead and do that. That's fantastic. , we could go through the rest of this, but I do wanna just show something off here. 'Cause, what would your next step be as we, get in here? We're like, "Okay, this is great. The roadmap looks good. All of these things that you flagged and the basic, sorta plan of attack all sounds good.

[01:11:50] What next? What closes the loop here?"

[01:11:53] Kaelig: It really depends on who owns which part of the design system. am I in a situation where there's an engineering team that owns this stuff and it's gonna be, , on them to prioritize and to figure out how to go about it? or if I'm the design system lead, I'm just gonna start opening PRs, man, and just ask Fable, "Okay, give me a, two-week plan on how we're gonna

[01:12:19] Brad: Yeah

[01:12:19] Kaelig: delivered and reviewed, and then how are we gonna test the efficiency of that long term?" And then it might come back with, "This is how those design systems are testing for, , the efficiency of their skills, of their MCP." I know Astrix is doing a lot of stuff in that department, so maybe it has some ideas that, , we could implement.

[01:12:39] Brad: Yep. Yeah, it's great

[01:12:41] Kaelig: depends on the position I'm in, but

[01:12:43] Brad: Yeah

[01:12:43] Kaelig: biased towards action, so, , I like opening PRs and see what happens.

[01:12:47] Brad: I'll show you what I would do in this department, which is, I think, very similar to what you're describing , so I'm going to say, " I'm talking to Kaelig right now, who created the state of AI and design systems, and, , we had a great conversation and ran through, , this evaluation and created a roadmap.

[01:13:07] , All of it checks out and looks really good. , Please file these as issues in accordance to our standard operating procedure for filing new issues, , in the Eddie design system and, , yeah, put them all under the same epic." I think that that sounds right. So we'll go ahead and do that, right? So, one of the biggest things that it's taken me a lot of time to do that gets a little trickier when you're working with, bigger groups of people, is that you want things to get out of memory and out of, this specific conversation or this specific artifact.

[01:13:48] I don't know if this resonates with you, but, I've generated so many things that look like this over, the months, and it's getting them then into a place where these can be acted on that's outside of a single person's computer or a single Claude session or a single just Figma file or a single, , ...

[01:14:09] You know, you get the idea, right? where does this stuff live? Right. Right. Exactly

[01:14:16] Kaelig: or whatever, yeah

[01:14:17] Brad: Right. So yeah, so , , it's gonna go through and it's gonna create, all of these issues and fingers crossed that all, , I basically...

[01:14:24] Kaelig: right

[01:14:26] Brad: Almost.

[01:14:27] Kaelig: Yeah,

[01:14:28] Brad: it--

[01:14:28] Kaelig: proud

[01:14:29] Brad: right, yeah.

[01:14:30] It's the, the E is after the A, right?

[01:14:33] Kaelig: Yeah,

[01:14:34] Brad: Yeah, there we go. That's fantastic. So yeah, so that's the spirit of what we would do is like we ran this report. That's great. It gives us all this cool stuff. You could circulate this artifact out with different people, but again, if you're working in a team environment, that's helpful food for thought for a meeting or something.

[01:14:54] But ultimately, in order to actually act on it, this is where yep, this stuff gets added to the backlog. This gets thrown on the pile, even if I'm not going to address the stuff straight away because, well, I've got a bunch of other things that I'm working on right now, so am I going to address this right away?

[01:15:13] I probably will actually after this one, at least cleaning this stuff up so that the sources aren't bleeding out or conflicting with one another, just to strengthen that up. That feels sensible. But if I'm not in that position, at least it's logged, and then we have routines and things that are going through to triage work and what feels the most important, what feels like the most logical sequencing.

[01:15:43] Historically, if I were to look at my backlog and see 400 open issues, I'd be like, "Oh my God. Oh, no." And now I'm like, "Nope, it's all data." It's all sitting there, and it's actually all useful signal that whenever I triage the board, I could say, "Out of these 400 issues, what are some sensible things to cluster together?"

[01:16:06] And then bang a bunch of them out, and then I could knock out a bunch of things in one go that are all related or saying the same thing. All of that turns into a shape of work that feels sensible. Well, hopefully I can report back...

[01:16:20] Kaelig: clothes

[01:16:21] Brad: hopefully I can report back and, all of that stuff. but thank you so much for putting this together. , How was the response, just last, question? was everybody, jazzed about this? did it, , get the response that you were hoping for with everybody?

[01:16:35] Kaelig: I don't know, man. I was doing it for myself, and then I looked at my stats yesterday and there was more than 6,000 different people who hit it.

[01:16:43] Brad: Yeah, amazing

[01:16:44] Kaelig: 10% went beyond the first page.

[01:16:46] Brad: Yep. Yep

[01:16:47] Kaelig: so at least people know it exists now. design system community is not that big, so 6,000 people is quite nice.

[01:16:53] Brad: Yeah

[01:16:54] Kaelig: and then, yeah, I'm hoping to get some, , traffic from agents really, , and I have, , analytics in place to be able to track that, so I'll keep an eye on that.

[01:17:04] Brad: Oh, that's fun

[01:17:06] Kaelig: that people like yourself who are writing, who are multiplying their impact through courses and also through skills and plugins, that you can potentially hint at that report in later iterations of your audit, ,

[01:17:20] Brad: Yeah

[01:17:21] Kaelig: tool, because yours is so much more granular and understanding. I'm just giving folks a very small,

[01:17:28] Brad: No,

[01:17:29] Kaelig: pared down version

[01:17:30] Brad: This is what we're talking about. not everybody, has, the full puzzle together. it sounds like you spent some coin to, put this resource together. I spent some coin putting some, adjacent related things together. This is, it's getting into this, weird, fuzzy new area where everybody collectively is able to yeah, put their little USB-C connectors out there, and then, in aggregate, the rising tide can lift more people's boats and stuff.

[01:17:57] it's really exciting. We understand, the benefit of, working together, of open source software, of, sharing things, and this does feel like this very exciting new era of, being able to , impact things, steer things in the right direction and help more people, , even if you're not, in a conference room with them or something

[01:18:16] I think that's really exciting. So thank you so much for putting this together and absolutely, yeah, , I will weave this into the course, , 100%. So, , that, the last...

[01:18:24] Kaelig: you

[01:18:25] Music pick and where to find Kaelig

[01:18:25] Brad: Yeah, yeah, of course. , The last and only other structured, , question on the show is, , what music would you like more people to know about, -

[01:18:34] Kaelig: , Kinga Glick. , She's an amazing bass guitarist. , Just, I discovered her through, , Jazz in Marciac, , which is a jazz festival in France. And, , yeah, I recommend it. , Kinga Glick

[01:18:50] Brad: How do you spell that?

[01:18:51] Kaelig: I'll put it in the chat. It's K-I-N-G-A, and then Glyk is G-L-Y-K

[01:19:00] Brad: Oh, okay.

[01:19:01] Kaelig: If

[01:19:02] Brad: Oh, yeah.

[01:19:03] Kaelig: bass

[01:19:03] Brad: yes. Yes, I know her. I know her. Oh, amazing. I love sick basslines. What are you talking about?

[01:19:11] Oh, did

[01:19:12] Kaelig: , Yeah, touch the strings.

[01:19:14] Brad: Oh my God. Yeah, that's fantastic. Well, yeah, ... Is there, a particular song that you like, or just check out her whole body of work?

[01:19:23] Kaelig: I'm still discovering, , so I'm not gonna recommend one in particular. I was listening to her album Fast Life and, , try to expand and listen to more stuff, but

[01:19:33] Brad: Beautiful. Beautiful. Awesome. Well, Kaelig, thank you so much, once again, Kaelig's out there on the market right now, and, I have such just a deep respect for you, and thank you for all that you've done for the community to date.

[01:19:48] But just you are sitting at the edge of all of this, so boy, oh boy, if there was ever , a company that could really do with your kind of thinking, , you're out there. So where could people follow along with you and see what you're all about?

[01:20:01] Kaelig: Yeah, kaelig.fr, K-A-E-L-I-G.fr. , There's my resume links, , even links to the State of AI report and a few other things that I've written about. And, , I'll also be, at the product, , summit in Denver, Colorado,

[01:20:17] Brad: cool.

[01:20:18] Kaelig: so that should be fun.

[01:20:19] Brad: Ah, amazing

[01:20:20] Kaelig: of AI, UX, product engineering folks who are gonna be there and, , , we'll talk about AI and design systems with the folks at Knapsack

[01:20:29] Brad: Oh, beautiful. Beautiful. All right. Well, that's amazing. Good luck with the job hunt , and thanks so much for showing off all your toys and talking shop, so appreciate it.

[01:20:38] Kaelig: Thank you so much.

[01:20:39] Brad: All right.

[01:20:39] Kaelig: Cheers,

[01:20:40] Brad: right, take care. Bye

[01:20:42]