AI Design Systems - Part 3 | Scattered Context Is Breaking Systems

Welcome to another video. In this video, I'm going to talk about the agent-ready design systems part 3, and we're going to specifically dive into how design systems are the core infrastructure for agents, especially while generating UI and products and things like that. And then how the scattered context is one of the growing problems. And we're going to dive into how, why the agents drift and why is it incredible. It's getting so challenging for design systems to be AI ready and where it's breaking in this age of AI and some of of the solutions that I've been, uh, you know, working on at— with the Florence design system at Human AI Studio, um, and stuff. So, and by the way, I'm doing a workshop on Maven, a 1-day workshop on how to help you, uh, make your design system AI ready. And also we're gonna dive deeper into how to work with an existing design system with your Figma, some of the workflows that we have explored, and also learning how to do audits and able to eventually build up your design systems to be AI ready. And we'll give you the checklist and everything. So if you're interested, the link to join the workshop is in the description. That being said, let's dive into this third part of the agent-ready design system. So these are the questions that I started with. Why do agents drift from the design system? What that means is, let's say you are prompting in Cloud Code or Cursor or any coding agent that you use, it generates UI off-brand. And you are like, prompting and prompting and prompting to like kind of fix it. And in a growth stage startup and enterprises and all this stuff, you can't really ship a product that's not connected to your design systems. So it's a very crucial part of building a product. But right now the agents don't completely understand the design system and they keep drifting. This is getting— this is bringing a lot of challenges to ship products fast, right? Right now with the AI market, the products are moving a lot faster, but the design systems needs to be so accurate that you can generate UI faster and you can ship faster as well. But right now it's breaking, but I think we're gonna get there. And some of the solutions that industry leaders and people like us who are experimenting and like building is solving this problem. But these are the questions I dive deeper into. And our design system, one of the biggest problem, let's start with that core problem, the foundational layer, right? One is the design system lives in the multiple layers today. Some lives in Figma, Some live in code, some live in Storybook, and some even like Notion. And some of the decisions are in Slack and Teams and things like that. But nothing is connected to one thing to another. And with this agent, how they work is like they need like a bit of structured data or they start— the way agents work is like the LLMs underneath that makes a prediction based on the data they have, right? So if your data is scattered, it cannot predict. So design system is almost like a data layer and a context to this agent. So if they are scattered, the agents cannot to generate the user interfaces. And we are heading into the space where generative UI, agent-generated UI, and all that stuff is going into becoming a thing. But that's why the core infrastructure is broken. And then it's scattered. The scattered problem is one of the biggest problems. And what happens is when the things are scattered, it breaks the contract. So if your design system even has a contract, some design systems don't have, but that's something worth looking into. So I started researching this and then specifically I'm starting my design system in code. With React components and things like that, built completely with React and we're using Cursor and things. But designers usually work in Figma and things. But I'm gonna— I think we are definitely seeing the transition of design and design engineering for sure in the industry. But I think we still operate with the different layers, canvas and code. So canvases are not there yet, right? I think most of the companies are trying to do this, Paper, Wonder, and all those tools. Along with Figma. So I started researching what Figma is doing about it. So I found like Figma's fix that they've been working on this Code Connect, which they launched in the Config 2026 as well, which maps out the component to the real code component. I think that's where probably the place where we'll be maintaining the contracts and things. And in the dev mode, you'll be able to go and see that currently this feature is available for enterprises only. So that's kind of like worth trade-off to look into. So at this point, we almost have to bank the tools right now to make it. But right now, that Figma is— that's one of the solutions to it. So, um, and this, uh, the scattered— the scattered context is the one thing, right? The— once if your design system is like scattered everywhere, that's one of the big problems. But the second problem is like maintenance of this context, right? Once even if you sync all this. Uh, the syncing is one of the biggest problems. Uh, so right now if you change something in Figma, uh, it does not reflect in code. And if you change something in code, it does not, uh, reflect in Figma. And that creates that syncing problem. And then maintenance of that context becomes harder. I usually tell people it's okay to kind of have that manually right now because like you— I think that's going to be a big part of like, uh, the work we do is to like maintaining that context. for the agents and things like that. But I think right now that syncing problem is real. I did an experiment where the Florence AI-ready design system, I was able to pull that in like the Wonders Canvas and things like that, and it's able to pull. So I think there's some two-way sync problem is being solved in the industry. What happens with this is like it increases the QA time, accessibility audit becomes a bit of a challenge on the operations and the governance. And this costs like millions of dollars for the companies with the engineering time and the design time. And then also this leads to a lot of discrepancies in the user interfaces. So when you are shipping not good quality products and stuff, right? I think in a small team, it's possible to go back and forth and stuff and do it like ship faster. I think that's the luxury of working for startups and stuff. And some of the clients' project I did for the startup, it was much more streamlined process. But as the team expands and you start to scale, That way it gets more and more challenging. Anyways, coming— the thing is like right now all this is kind of like fixed by humans manually going back and forth. But he will tell you something in Slack, something with design system, something in like Figma, someone will tell you this. Right now humans are like good in like, you know, navigating ambiguity, but agents don't really work that way. They need a bit more of like a structured approach, a structured knowledge basis and or like context to kind of work, operate, and properly. So that's why they start hallucinating, they start like causing a lot of drifts, and it starts to generate its own component, right? And each component is very complex than it looks in the surface. It looks very simple in the surface, but there's a lot of layers underneath a component architecture. So even if it generates, it does not become production ready or like useful to be used in the product, right? And there's like a lot of accessibility and things that goes into it. So it almost becomes you're just wasting tokens and burning tokens and you're not like producing anything that is useful. A lot of hype in the industry on latest model. This model came, that model came. No matter even if you have like the best model you can use, but without proper data or your own data or your design systems not being understood by the agent, no model investment is like even worth it. So that's the infrastructure needs to be done. Fixing infrastructure needs to be fixed in order for the agents to operate and give better output. And even the best, smartest model is, you know, they wouldn't produce output if your context layer and a data layer is not, you know, structured properly. So these are like, even if the best, like, you know, some of the best models have better reasoning, but based how would they even reason on what data would they reason? So that's why that fixing the infrastructure at the, You know, infrastructure for these agents, which design systems are, is going to be more and more important as we go. But the problem is real. That's why the agents— that's why, like, one of the core reasons why design systems are breaking for agents. Oh yeah, I just— I don't want to just, like, complain. I just don't want to complain through it and do something about it, right? So I started, like, building this Florence agent-ready design system. And then for the One of my thesis was like, let it be like one source of truth. And then I started using that as a foundation and started generating UI based on that. When I told it to the agent to generate the UI, it produced like the dashboard which I wanted. And it was like 70%, 73% overall. It had a 73% overall accuracy. And then I started seeing all the numbers. Agent even gave me the report and stuff. But I started to realize like why why is it not 100% right and I started getting like frustrated like and I was like why not 100% right then I had this thought in mind maybe I'm looking at it like differently like what if what if I build a dashboard or a UI or a product without the design system the amount of prompting I need to do to get to that 70 percent 73 percent would have been so much longer right so then it like hit me like it does save and by having that design system that agents can retrieve, even if the 73%, that is able to save me so much time of prompting and prompting to generate this dashboard. It just did it so quickly aligned to the design system. And then adjust the 25%, I could manually do the adjustments and fix it and things like that. And that saves a lot of token cost and the times for iteration and prompting and things like that. So once And I'm good. I'm also at this point, I'm ready to launch the Florence Agent Radio Design System, the beta version. Right now it's a React library, but eventually I'm going to build out like the Figma and it's part of the roadmap and everything. And I'm going to share it and you can see some of the components that I have shipped. Yeah, just to summarize. And so just to summarize, I feel the scattered context is one of the growing problems in the design system space. Even if you streamline the design system, maintenance of that context needs to be figured out. I'm curious to see how design system tooling, and then like tools are evolving and things. But I think right now there are some ways that we can make your design systems agent-ready through like, you know, metadata structuring the architecture of the design system in such a way that agents can understand and things like that. And then the challenging part of this, every company is like unique, and every companies have different ways of working, toolings and workflows. So it So it depends a lot of like on the ways the design system teams and product teams are operating and stuff. So it kind of gets a little bit harder to kind of put one framework that works for all or like creating like a productized thing. But I think it's definitely possible. I think so. That's what I wanted to share in this workshop. But along the way, we figured out a lot of like workflows and techniques and methods and experiments that I've been doing building Florens agent-ready design system. And Figma's agent also is evolving right now, which is awesome. So we're going to do everything. I'm going to share that in your workshop, helping you to understand how to work with an existing design system and then also taking the existing design system and make it agent-ready so that their teams can ship faster. So that's about it. Thank you for watching. And if you are reading this in Substack, make sure you subscribe to get these weekly articles. And then if you are watching it on YouTube, make sure you subscribe to the YouTube channel too. So thank you for watching. I'll see you in another video.