713: AI + Design Systems With Brad and Ian Frost  🔗 **Source:** [713: AI + Design Systems With Brad and Ian Frost](https://share.snipd.com/episode/c6a85788-7ccb-4f61-8674-98c09b016c6d) ## Highlights - **Design Systems Become The Source Of Truth For AI Workflows** - AI can connect the entire product lifecycle by using design system decisions as persistent constraints. - Brad explains a virtuous cycle: research informs design, design informs build, launches feed back into the design system and then into future products. Transcript: Brad Frost Make websites? Chris Coyier So what we're talking about is AI and making websites. But you're if you're carving out a little piece of that, it's AI plus websites plus design systems, because you're already the design systems duo or trio or whatever it is these days. And, and, and so, and so that that's all related to this. And as part of that is like, if you just told an AI, make me a website, which I don't think anybody's doing that, that's a little too vague. And people tend to rein it in a little bit, at least ask what kind of website and what it's for and what it should look like. Maybe, maybe, sure. And, but another way you could do it is like by giving it really rigid pieces to rigid, meaning here's a, we already have a design system, like don't go invent a new one or whatever, use This already. Um, and then, and then build more out and then use that to build the actual thing that people use. That seems cool and weird and maybe hard and foot guns and I don't know. I've literally never done it. I've used plenty of AI to build website, but I've never tried to say, here's my design system. I want you to put that like as a top tier constraint for it. So can we talk about that? Like, is that what this is? Is that what and and by the way, everybody listen up, there's a course, it's coming. It's from these guys, called AI and design systems. It's a course and the community. I'm sure you're going to get into all that. So you know, don't spoil the good stuff, but also, you know, spoil the good stuff. Yeah, yeah. Brad Frost And the courses with our pal and collaborator, TJ Petrie, who just scheduling like we were going to get all of us on to talk about it together. But TJ's got his own ecosystem and universe around all of this stuff. And that's kind of why we partnered with him, because we've been collaborating for years on client projects, kind of figuring exactly what you just described out, Chris, which is like, Shouldn't he have sent the hologram or something? He should have. He should have. But like, but yeah, he calls it like context based design systems, which I really like. But it's basically with all of this stuff, you have the entire process, whether you call it like the double diamond or whatever kind of lens you want to put on. You think of an idea and then you plan that idea and then you design that idea and then you build that idea then you ship that idea and then you analyze, you know, the results and all of that Stuff. Right now, we are in a time where you can, this context of what you learn at the beginning part of the conversation and through all of your research and what's going on can inform and influence How that gets designed, which then informs and influences how that gets built, which then informs and influences how that gets launched. And then once it's out in the world, that informs and influences it. And then you could feed that all back into the system. So you end up with this like kind of virtuous cycle where it's like as you design things, build things, plan things, talk about things, do all of that. It just kind of reinforces these systems so that like each new rep, you get better and more sturdy results. And it's like this really wild thing to see in real time. But basically like, yeah, rather than these things, just being these like one shot isolated things here, make me a website or make me a website that looks like this or whatever. And that's fine. And that now exists. What you're able to do is like connect all these systems together so that like, by way of you actually using your design system, which is like that, the story of how your organization Designs and builds products, you're explicitly plugging that into these AI-powered systems, and then it all kind of feedback loops into one another so that as you roll out the next Product that uses that thing, it's like, oh, this date picker doesn't have this feature on it. We need a range picker on it. Okay, like let's add that in here. The GitHub issue gets created that says through this specific project over here, not connected, not in the same repo, not in the same universe. We need a range picker. And here's the context of it. Here's the meeting notes that led to that decision that gets added to the backlog. You then update that date picker to include the range thing that gets kicked out. And then the downstream product consumes it. ([Time 0:05:48](https://share.snipd.com/snip/693586f4-889f-404e-8593-b2bf9c34aa33)) - **AI Defaults Reflect What It Ate From The Web** - AI tends to mimic the prevailing web ecosystem it was trained on, producing React/Tailwind patterns unless steered otherwise. - Brad calls this AI's 'original sin' of hoovering the web and explains why design system steering is vital. Transcript: Ian Frost I think one thing too, is we've, you know, seen the, or we've seen design systems kind of like drift kind of away from the actual product over the years because it's been this manual process And the design system has kind of become its own product. And a lot of teams have just been building these buttons and things away from the actual products. And now there's a big incentive to get your stuff together and stabilize it. Because a lot of times when you have humans involved, there are errors, there are gaps in between things. And I think what we want to do with this course is kind of help people transition from kind of the old, I'll call it the old way of doing things, to this new way that allows teams to move faster, To be more connected to products, and to essentially ship stuff faster and more efficiently. So it is incredibly crazy just how quickly this is moving, but I think we want to kind of remove a lot of the noise because there's a lot of noise around AI right now and try to make sense of All of this and give kind of a clearer path to improving your design system and allowing AI to kind of take that and improve your organization's products. Chris Coyier Yeah, I feel like I've heard you say that before, that like the worst thing a design system can do is like be disconnected from the people that are actually using it, right? Like you're having all these conversations just about the design system, not about how it's implemented and used and solving problems and all this stuff. It's a little too insular and there's risk of that. And does it, so it seems like AI is like helping stamp that out somehow or? Yes. Yeah. Yeah Cool. Yeah. So what do you disagree about? That's fun. Dave Rupert You know, let's do that one. Well, it's kind of like, it's always a side note, right? Like, it's just this like little, oh yeah. Like they're off working on the design system and then we're just going to not use it. Cause like, I don't know. Yeah. Or it's almost like a like a academic like ivory tower sort of situation too like this is like the theoretically pure system that is great and you know the people who are building are like I can't use that that's you know or or what for whatever reason i mean uh millions of reasons both true and false. But yeah, it is interesting just how it can, I think I've, the cope or whatever I've subscribed to, and I'd be curious what you guys, you know, just very mixed feelings about AI and its Effect on labor, right? Yes. Design systems are very much a tool to amplify labor, right? Like it's like at the core, it was like, hey, stop making your own buttons. Let just all use the same button. You know, let's agree, uh, to do that. And like through that, you know, it was always like, we'll speed up, you know, and, and, uh, you know, I think I have mixed feelings about that. The velocity thing too. It's like, we'll just do more work for free, dude. You know, it's like, ah, I don't love that. But, but it, it doesn't surprise me that anyone would want to hook up a design system to an LLM. You know, it's like, if that's the tool you're using to do work, this is actually a great tool to plug into because it has all the codified decisions. We ship updates, so accessibility will get better over time or whatever. And then your product will get upgrades over time as you consume it. I think the question I have, I probably have a million questions, because I'm deep in it right now, literally before this call. But, you know, I think the two areas I sort of am concerned about is like quality, like maintaining quality, right? Like, because I'll be like, Claude, use the design system. And it's like, gotcha, buddy. I did it totally. And like made up variables, right? And you're like, that's the thing, isn't it? Chris Coyier Like, it's, it's happy to do one-offs. It prefers doing one-, they're easier to test, they're just more predictable, there's more training based on just do whatever you want, rather than use this really isolated system Kind of thing. It does seem like there could be pushback in the terms of like, that AI is devaluing design systems, because I don't know, it's easier to just say, I don't know, do my bidding and do it without Guardrails. But maybe that's not true. But you can also go like, hey, go copy Adobe Spectrum. Dave Rupert Just make us a Spectrum, you know. Yeah. Brad Frost It gets into all the, yeah, it's like, well, what these things are trained on. It's like, it's going to try really, really hard to bend it into a React and Tailwind powered experience, barring anything else. And that's just because that's what it's trained on in this specific moment in time in the web landscape. That's what it hoovered up without permission and all of that. That's really like AI's like kind of original sin is, yep, it just ate the internet at a specific moment in time. And that is the thing that it is perpetuating without you sort of steering it in a different direction. And that's what the design system powered kind of workflow is, is you steering it in the direction of what you and your organization defines as good, right? ([Time 0:10:58](https://share.snipd.com/snip/5fd49d42-a072-4931-a0e6-e32f3c23bcb8)) - **Force AI To Assemble Approved Components** - Lock AI to assemble blessed components instead of inventing new UI by forcing it to use your design system ingredients and Storybook compositions. - Brad shows a workflow: spec → markdown plan → assembly → review → file an issue and update the system if AI deviates. Transcript: Brad Frost Like things like Storybook have been around for like 10 plus or around 10 years. And like, I just recently interviewed Dom on, on, on YouTube. And we were going through sort of some of the storybook MCP stuff, where it's just like with stories, you're basically saying, here are all these different edge cases. Here are all these different things. Here are all these different compositions of like a login form and even a whole page or a whole flow. And then like the AI, you're, you're basically saying, we got this stuff already. This is, we have sweated the details of this stuff. And we want you to assemble things and build things using these compositions rather than trying to go ahead and invent this stuff from scratch so it's like you're kind of like narrowing Its focus rather than saying hey make me a website which involves i'm going to go out and do all these different tasks instead what you're doing is you're saying i want you to assemble These well-considered pieces that have been blessed and built and handcrafted by human beings that really care about all of these gory details. And I just want you to be using this stuff from now on to assemble existing stuff. Dave Rupert What's your hit, right? It's like you have to beg. Yeah. Does the model understand this theology you're giving it? Brad Frost It takes a lot of work. And the workflow looks like a little something like this, right? So this is where we've landed with it. And I'm sure you've seen there's just so many damn flow chart things in general. Like we spoke at the Into Design Systems conference, which is fantastic. And like, everybody like busted out their flow charts. And like, this is like what everyone's trying to figure out right now is like, what's the flow chart for like getting this stuff to stay on the rails. And the spirit, the broad strokes of it is this like, you basically say, I want to do this right i'm making a new shop talk show website but we're going to use eddie design system which is Our our design system that we build our stuff out of like van halen sick cool go on there's a lot of a lot of uh pop culture eddies that have uh gone into eddie design. Whoopi Goldberg. Anyway, yeah. All right. So anyways, the spirit is you basically are like, here's what I want to do. Here's what I'm trying to create. And then that's like kind of step one is just kind of defining that thing. And then that kind of turns into a spec that is like a little markdown file that basically says, here's what it is. And then you're able to, that's one of those moments where you're able to sort of say, okay, here's, we're building it using the Eddy design system ecosystem, which includes like our Core components, our design tokens, our recipes, which we kind of call patterns or compositions, as well as these pages. And even we now have like boilerplates for like Nuxt or Eleventy or just like a static website kind of thing. And we have guardrails and definitions for when to reach for Eleventy versus just a static like HTML site versus a Nuxt site. Then so you're able to just like right out of the gate say i'm making a new website build it using this and then it will go out and just kind of create a markdown file that says okay here's What it's supposed to do here's what we're building it with does this all look good and then you could kind of iterate over that and then you say yep that looks good then it goes ahead and Plans that work. And then you look at it again. And it's like, how does this plan of attack sound? And then you're like, yeah, that sounds good. Go for it. I'm going to go back to building my gazebo, but you get to work building the actual website. And then it will spin it up. And then you look at it and then you review it and sometimes sure enough you get the the cosplay stuff in there the pollution in there and you're like hey even though i told you to only use These eddy components to build this looks like you're still being a jerk and in inventing some stuff but like what's cool about that is like you're able to go make sure that that never Happens again. And, and it will do it. ([Time 0:18:37](https://share.snipd.com/snip/bbe4dda1-15b3-4bbc-a0f4-94af133ef184)) - **Codify Standards In Layered Markdown For Agents** - Codify layered standards as reusable markdown (org → tech → app) and inject them into your AI agent configuration. - Brad uses a BFW process repo and markdown 'dev dependency' pattern to make standards inheritable and machine-consumable. Transcript: Brad Frost And this is what everybody's trying to figure out. But like, I think the recent success has been, we have our design system ingredients, right? Which are the actual assets that were like, these things are blessed, these things are built by us, we care a lot about them. And we don't want you to just go off and just invent random buttons anymore, because we know this, this is our standard. And then there, I have like a new repo called BFW process, which is just like here's how brad frost web makes websites and that's a handful of markdown files that then gets kind of like Used and injected into the agents.md file at any product level so it's basically like think of it as like a package.json. It's like that becomes your dev dependency. Although it's like a weird non deterministic version of that. It's basically you're like, here's a markdown file linking to another markdown file that's saying inherit these standards from this other place. And so it becomes this kind of like layer cake where you kind of have your like organizational standard. Then you're like kind of technology specific standard, which is like your next specific stuff that the other things don't care about. And then you have like, here's like the specific application that I'm making using these standards. And then within that, you could even get into like feature level kind of standards and stuff. So it's like these like you found that to be effective that. ([Time 0:25:41](https://share.snipd.com/snip/bd566c4b-7299-428b-9b4d-4f75d8b684d5)) - **Use Connectors To Keep Figma And Code Aligned** - Keep Figma and code in sync using connectors and tooling that link Figma, the design system repo, and downstream apps. - Ian cites TJ's tools (Figma Console, MCP) as game changers for normalizing assets across design and code. Transcript: Ian Frost And I think a lot of teams are there. Whether you have a good design system or not, there's going to be gaps from all of the manual work that has gone into them in the past. So I think a lot of teams now are trying to sturdy up those foundations, things like testing, things like documentation. Those have always been the things that are like, all right, put it in the back of the fridge until it spoils and we need to actually pay attention to it. So those are the things that are super important to translate this stuff to make sure that the right props are being used on a component, things like that. And then a lot of the tools TJ has created, like Figma Console MCP and things like that, allowed for Figma to connect into something like Claude and into the code base of your design system And into the code base of your downstream application. So all of these things can kind of be fed from the same place. And you're able to ask these things, oh, is my code aligned with what's in Figma? And if it says no, then change your stuff. You still have to go through the entire process of, oh, we got to make sure it's not a breaking change and we're releasing this. And then downstream teams are dealing with a bunch of broken stuff. And you still have to go through that process. But these things, I feel like MCPs specifically has made all of this stuff a lot more connected. They're even called connectors within Claude. ([Time 0:34:24](https://share.snipd.com/snip/0d2a09a6-6195-4414-ad3f-ed3535772b05)) - **Removing Chore Work Restores Human Craft In Design** - The chore of keeping design artifacts synchronized is costly and dehumanizing, and automation reduces that repetitive labor. - Brad frames synchronization as 'chore work' that tooling can remove so people focus on higher-value craft. Transcript: Brad Frost And that's like, literally everybody is just like head down, like doing that in perpetuity. And that's like the gig. And that's not a respectful use of anybody's time. Like we talked about labor and like, I always talk about this, like through the lens of respect. It's like that just that, that stuff is chore work. Like that's not fun for anybody. We've turned it into a job because it's been required. We see the value in having these things connected so that people who are used to working in an infinite canvas, you know, vector-based design tool could work with things and that aligns With what's in code and vice versa. And there's value to that. But just the chore, the pain in the ass that it's been to keep these things in sync with one another has been awful. And so these new tools that help keep these things in sync with one another in a way less painful way, man, sign me up. ([Time 0:38:12](https://share.snipd.com/snip/0b7ff722-f94c-441e-82d3-692b8564dc42)) - **AI Enables Participatory Design With Subject Experts** - AI-enabled workflows let non-technical subject matter experts co-create products in real time with designers and developers. - Brad recounts mouth-coding a counseling site with a therapist who supplied safety needs that AI translated into UX changes. Transcript: Brad Frost There's like, there's a fluidity to it. And I think that you're right. It's like, there's these like human needs, but then there's also these like human tendencies we have like to talk, to get together and to talk it's like that ain't going away anytime Soon and i think what's been really really fun for me this has been the thing that i've been like dialed into with each passing day is like again we have a loose conversation and you're Able to sort of take that loose conversation and do structured things to it and have all of this stuff fall out the other end of it. So it's like, we're able to just like spend more time being humans and jamming on things and collaborating on things and riffing on things and playing jazz together. And like what falls out the other end is actually like high quality, well-structured, well-considered stuff. That's like all built on the standards that we have collected do agreed to. Like it's really badass. Like it feels so much more like human versus the like, I can't wait to get off of this call so that I can actually go and do my like head down real work. It's like, I really love the fact that we're now able to take a bunch of non-technical people, a bunch of non-designers and get them in a room because they all have like really important Perspectives on how things ought to be. These are like the, we call them like subject matter experts in like the corporate whatever world. But it's like, these are people who like are deep stores of knowledge on like how the business runs or how this ought to be. Or you're the QA engineer that's just been on the receiving end of all the software decisions or whatever. You could get all those people in a room now and just bang it out together and do it do it live and then like bake that stuff into the the finished product so it's like it doesn't feel like This separate thing where where the the developers of the gatekeepers and the naysayers or the designers are the only tastemakers. It's like, we all get to participate in this. And I think that that's really cool. ([Time 0:45:01](https://share.snipd.com/snip/1d0d9905-a6d3-41ce-906b-55e76444051d)) - **Two Hour Counseling Site With Safety-Focused UX** - Brad rebuilt a counselor's Wix site in two hours using AI, surfacing safety-focused contact UX from the therapist's offhand comments. - Claude suggested safer contact labels and options for survivors, demonstrating AI surfacing missed domain details. Transcript: Brad Frost My guinea pig for this has been Melissa's a counselor and an arts therapist at a small private practice doing a bunch of really, really great work in the Pittsburgh community to get people Access to mental health care and their website. Wix powered piece of shit, you know, and in two hours, we ended up with this thing that is like head and shoulders better than what they had before. And again, the owner of the practice is this subject matter expert that knows deeply like the counseling practice and all sorts of stuff. And we had a live session where we are like mouth coding the new website together. And she made this stray comment about the contact form because we were talking about making it easier. It's like a softer, gentler way to get people to reach out to get some therapy help and stuff like that. Their current website is just like has all sorts of scary like language on it. It's just like, you know, there's a risk and all this stuff. And so we're like, OK, like, let's soften that up. But she just made this this offhand comment about she's like, oh, yeah. And like, we need to be careful about like getting their phone numbers and how we contact them back, because some people are in like domestic violence situations or abusive households. So that if we were to like call them, that like puts their their health and their safety at risk and so we plug that in to clod and it was like oh this changes everything and it went ahead and Like suggested all of these different things that like kind of reinforce the language and the messaging of the contact form the labels themselves surfaced a box of like, is how do you Want to be contacted and so on and so forth. And it just, so it took this thing, it took this thing that we were like, okay, yeah, we're just like designing a better contact form. And it, and she was just like, this is like, this is that we manually have to tiptoe around, but by just encoding it into the contact form itself, we're making this a way better and safer User experience for everybody. ([Time 0:56:03](https://share.snipd.com/snip/e34f8340-e726-4b63-b6f9-9182210ce45f)) - **Use AI As A Linter To Surface Missing Edge Cases** - Treat AI like a linter: add automated checks to catch gaps and ask 'what haven't we considered' before humans review. - Brad recommends using AI to surface missing schemas, accessibility, or edge cases, then human-validate final decisions. Transcript: Brad Frost Thinking of it like linting, which like we, I think, could agree that that's probably like a good thing. It's like, okay, you got some like processes in there that are like kind of doing some things, doing some sanity checks, but ultimately, like you're the one that is like ultimately making Chris Coyier The final call on things. I think that that's important. I'm still a little timid about it. But I've started on a PR that looks like a little bit complicated. Like I'm definitely going to still do my thing. But I'm a little bit more unabashed at clicking the little button that makes copilot a reviewer to you might as well that's i don't i don't mind that i think that's good thinking brad like Brad Frost Have the get a little computer opinion too i think that one of the i think that one of the biggest things that i've seen across the board and i was like i i just had the privilege of talking To Don Norman, who, and that was just an amazing conversation. But one of the things that he said kind of validated what I've seen to be like this really helpful thing, which is, it was like the, what haven't I considered? And I think that that has been the thing back to the contact form situation that I was just describing earlier. That is a thing that I didn't even know about. I've been making websites for 20 years. And whenever we were like talking about making a counseling website and they have to contend with insurance companies because, hey, U.S. Healthcare system. And we're like, well, that's not necessarily like a core user of their website. But we were like, let's at least like add that in there as a dynamic because it's a giant pain in the ass for the practice to have to deal with insurance companies. What it came back with is something that I had never considered before. I'd never heard of this thing. I'm curious if you guys have. There's like a schema.org JSON scheme for specifically for medical and like healthcare websites that like gets added to it that helps Google understand this is a medical practice And here's what services it provides. It like contextualizes the website to this specific category of website that is actually helpful for insurance companies and just for discoverability. And so I'm like, I had no idea, no idea that that was even a thing. And so that, whether we're talking QA or whether we're talking about just kind of like generation or anything, it's the what haven't we, what's outside of our peripheral vision? What haven't we considered that we should be? And it's very good at that. Ian Frost Or what has fallen between the cracks, you know, from having conversations. Chris Coyier You shouldn't even have to ask. That should be baked into all this crap. It should be constantly questioning us. Assume humans are dummies. Brad Frost Or that we're fallible and, you know, and imperfect and all of that stuff. And, like, in that, I do think, like, in the grand scheme of things, like, we can point these at any number of things, but I do think that there are absolutely ways to point it at amplifying Our humanity and having us think more critically, be more considered, be more inclusive. Chris Coyier That's what I should have said. Humans are actually smarter than it, but it has more broad knowledge. So it's not actually smarter than a human, but it has more broad knowledge. And it should, if it knows one of those things, it shouldn't just be like, well, they didn't ask. Brad Frost Yeah. It should be like, no, ask me. Dave Rupert Well, I had the experience the other day. It was like, you know, write some tests or something. And I was just like, this seems like a lot, you know? And I was like, could this be simpler? And it's like, oh yeah, totally. It's like, why didn't we start there? I got my guy, know? Brad Frost Yeah, but but and that all brings it all back to like that, like AI and design systems kind of workflows. It's like you're able to sort of capture that stuff and say from now on, like here is like the definition of what whenever I say right tests, here's what I mean. It's this, you know, Goldilocks, like somewhere in between. It's like supposed to be this, but not this. This is what we're talking about. This is in scope. This is out of scope. When I say I want this, it doesn't mean that I want to like reinvent this whole thing. I'm just really talking about it. ([Time 1:05:43](https://share.snipd.com/snip/eed1c911-a38c-4641-b354-3d1e052c486c))