Agentic Design Systems - Part 2

So in this video, we're gonna talk about the agent design system part 2. In the part 1, we covered what agent design systems are. And in the part 2 is where I'm gonna dive deeper into share my experience building the agent-ready design system. And there's a conclusion also I kinda came up with that focusing on agent-ready design system is more better than agent design systems right now. And then I started building this design system called Florence Design System, which is agent-ready. And I'm gonna share some of the findings and research from it that I've been doing at Human AI Studio. So these are the questions that I started with, like where does this design system live? What actually makes the design system agent-ready? Why do people still stuck with the design systems that they're currently having? Because there's increased problems in like adaptation and there's a problem in just maintenance and operational overload for the design systems and the visual consistency is always breaking, increasing the QA time and everything. End shipping products that are very inconsistent, right? And so much time spent trying to fix those gaps. And here's another quick announcement. So we are also launching a 4-week cohort on Maven, uh, where we're gonna help designers become AI native. So it has like 4 modules and live classes and workshops, um, workshops and everything. You go from understanding the foundation to AI systems to building agents and designing products that are AI native. If you or your team is interested, you can enroll from that as well. You can enroll in that as well if that's something that you are trying to do in your career and level up your skills. So that being said, let's come back to the agent-ready design system, Agentic Design System Part 2. One thing that I started with the current challenge is the scattered context. The design systems are not agent-ready, are not agent-ready because they don't have components and documentation. They already do. Do and have that, right? They're failing because the context itself is like scattered. Some live in Figma, some live in code, some live in Storybook, some in Notion, some in Slack, and the context gets scattered. When the context and that intent gets split across different medium, that's where agents will start also drift. Some people who are building just like zero-to-one products by themselves, this is not a big problem, right? The problem exists when the product starts to scale, when you're working in a larger team, in a larger organization, or an enterprise, or like a growth-stage startup, this is where the problem starts to come. Problem here is the scattered context around the tools. So that's when I've started building Florenz design system, which is Agent 30. I started from code, and you might be wondering, like, John, I'm a designer, why code-first approach? The thing is, like, the technical, the technical, the technical aspect is not the problem. I think that conceptual thinking and the system thinking is the biggest problem right now. So agents are good in handling your technical part, right? You are, even if you say you're coding, the agents are actually doing it and you are just directing and orchestrating those agents, right? So that's not the hardest part. The hardest part is that conceptual layer in AI systems, knowing how to build the AI system. And another big one is the adaptation, right? That's gonna be their biggest problem. The current, design system to struggle with that. And now the adaptation is not just happening on the human layer, but also agent layer. And that's also creating, making it harder to build agent-ready design system. So one of the things that TJ mentioned was, I think our job is to make the design system more readable. And I think the race to build the agentic design system feels like a level 2 for me. So the level 1 is still building machine-readable design systems. And that is the core aspect, one of the core findings of my research. That being said, when I went to the Conflic 2026 and then Jake, you know, the talk was very fascinating. And Christine, Christine kind of, you know, wrote this beautiful article which, you know, broke down that and helped me understand better. So Jake introduced something called hyper tokens. So in hyper tokens, the intent and the contracts are kind of like baked into those tokens and design systems, right? I think this is becoming more feasible and realistic right now to make like design system more agent-ready by using proper structured metadata and then using, you know, hyper tokens and rethinking our naming convention that agents can understand. So I think it's getting more and more clear that the focus is more towards building agent readiness rather than the agent tech. And I think agent tech, it's where, you know, you are bringing proactive agents and everything, but it's definitely a bit of a level 2 problem to solve. And so the level 1 needs to be solved. Someone who's building AI agents in my studio all the time, I've realized that the agents are only good at Good has the data you have. So if you garbage in, garbage out. So your data needs to be very clear and structured for agents to operate better. And that's what most companies right now are struggling or trying to figure out. And how do you do that, right? So it's similarly things applied for building agentic design system. You need to fix the data structure problem. And here in our context of design systems, it's your token primitives, schematics, components, how they are structured, the metadata and all that stuff, right? So indeed, so indeed our design system team also did a very good job. There's a good article they shared speaking about the different ways of like structuring this data to JSON or Markdown or MCPs and things like that. So I feel like, so yeah, I think it's definitely getting very clear for me to make it like readable first. So that your agents, so that agents and humans both can, to make it readable first so that agent can query your design system and also humans don't have to do the repetitive work and can ship better products. And that's what like my core thesis of my Human AI Studio as well is to create that AI systems or like the products that helps people augment their abilities and able to deliver better outcomes. And then it's just not a cool name. It's something that came out from my observation, the need to make like human and AI collaboration more efficient or in order to get better outputs and eventually drive better outcomes. So I started building this design system called Florence and I started with code. I started using the React components and semantic and using the CSS and Tailwind and everything to build out the foundations and eventually building the components in Figma, components in the code itself. And then in order to preview this better, I also created like a web app, which I can preview for humans to understand where agents understand, agents and engineers can understand the code, but designers just want to preview and stuff. So that's the approach that I took for building the agent-ready design system. So you might be wondering, like, John, that's not how we currently work, right? That we use like Figma or Storybook as a layer. I think my argument is not like replace that. It's more of like the core, the core design system remains in the code, but Figma or like Storybook becomes a way to like kind of preview it. And I think like right now, I think that's, that's kind of like bringing a lot of questions in my head. So my question here, what does Figma need to become to assist this agent-ready workflows, right? And it's not, I feel like people are kind of making all this argument of like replacing tools and stuff, but it's more of like, they do have this value, right? Like code is not always the most easy to understand medium for most people, but Figma is much easier and easier to collaborate and stuff like that. They do have their value. But the question is like, again, the question comes back to like, what need— what does Figma need to become to become AI ready as well? So it's the two— the question is also not just about— the question is not just about making the design system agent ready, but also making the tools agent ready is a question that is worth exploring. That is something that I always think about. And I think right now It feels like, right now it feels like a bit of uphill battle because the tools talking to each other is very important to the design system also to be agent-ready. So I do recommend right now a code-first approach because agents do understand the language much better and then using our other tools as a way to like preview the components and stuff. And if there is a both way, if there is a two-way street, if there's a two-way street, I think that would be better. And yet maintaining the context consistency, I think it can be done with like, this is where the agentic element comes into picture, proactive agents. You can, you know, set it, we can, I'm gonna explore that in my studio, how that's gonna work out. So one more thing is like agent readiness needs to be measured. It's not just about the vibes, right? Setting up this evals and evaluation benchmarks to measure. Next part of the research is to how do you measure the readiness and evaluate it? And that's what I'm exploring with the Florence Design System. So my goal is to eventually launch this design system as an agent-ready design system and eventually agents., as well. Uh, but yeah, this is what I wanted to share about the part 2 of the Agentique design system. Uh, if you want to work with me, you can book a discovery call and, uh, make sure you subscribe to this YouTube channel. Look at the Substack if you want to continue follow along these findings and stuff. So thank you for watching. I'll see you in another video.