Mastering Design Systems With Jeremy Butler  🔗 **Source:** [Mastering Design Systems With Jeremy Butler](https://share.snipd.com/episode/54614923-d984-4b23-bf95-89286f7ebd51) ## Highlights - **Laravel Book Rescued A Failing Project** - A Laravel book literally saved Jeremy Butler's project by enabling a complete rewrite from WordPress to Laravel. - Philip Harton read Laravel: Up & Running, rewrote the app in two weeks, and rescued a national application that had performance and auth failures. Transcript: Jeremy Butler Okay. Because that's really where the story begins. So I've worked with Philip Harton, who's our senior PM here at Laravel, almost for 10 years. And the first project that we were working on together was distressed media. So selling adverts to pretty big companies for print, for outdoor advertisement. And we decided to build it in the system that we knew, which was WordPress. And WordPress came out in 4.7 with an API. And we thought, okay, this is going to to be it. This is how we build our first application together, but immediately started hitting problems. We had performance problems, authentication problems, just all sorts of issues all the way down, full downstream effect. And Phil went away and he bought a book called Laravel Up and Running, which of course is your book. So all of this comes back to you. It's all my fault. It is your fault. He read it in a weekend and he came back and rewrote the full, this was a national application. He rewrote it in two weeks in Laravel. Must have been five point something back then. And that's really what we got into Laravel as a framework, as like an ethos of how to build software, how to build clean software, predictable software. ([Time 0:01:17](https://share.snipd.com/snip/f0d21787-d555-49e2-9cbe-7a0f09bcaf30)) - **Design Thinking Guides Product Decisions** - Jeremy uses design thinking lenses (viability, desirability, feasibility) to align product, business, and engineering decisions. - He evaluates viability (cost/revenue), desirability (user value), and feasibility (engineering constraints) before committing to designs. Transcript: Jeremy Butler Yep there's really a few different methodologies that i kind of like to approach and this is only after like years and years of maturing what is product and what is design um so there's There's design thinking itself so we kind of look at macro micro uh lenses over the product is like overall what's the user experience what's the user journey versus what's a button Next to yeah an input like that's kind of super super granular but yeah with design thinking you go through the like the viability of it and this is what we do as the product team. So can we make money off it? Is it cheap to run? Are we able to make the books balance by creating this product or creating this feature? There's the desirability, which is what we in design probably work the most in. It's just like, can we make this compelling? Can we make this valuable to a user that they're happy to spend X amount of dollars on it? And then like feasibility. And that's where we work with engineering. It's like, okay, we've got this big grand scheme of ideas and kind of direction to take. Can you do it? What do we need to change on our side? ([Time 0:11:07](https://share.snipd.com/snip/03e933da-08a2-4f80-a9a8-3a88fc0f00e4)) - **Systems Thinking Beats Pixel Fixes** - Jeremy favors systems thinking to solve design problems at scale rather than fixing single screens. - He steps back to view the whole product so components and journeys interrelate, which provides guardrails to iterate faster and recover from mistakes. Transcript: Jeremy Butler A lot of values and a lot of mistakes along the way until the point of just like i think so i approach like systems thinking as a way for me to fix a lot of my kind of flaws in design it's like How do i fix something bigger than just the screen that i'm looking at and how do i think about the user when i'm sitting here trying to create a solution so I kind of I was drawn to systems Thinking and like okay how do I take 10 steps back and think about the whole picture and instead of thinking of things in parts I think about it as a whole product how does everything work Together yeah I kind of dove deep into that and deep into a few different approaches of just how to think about problems themselves. And they're not magic and they're not perfect. Like these tools are there just to guide you. ([Time 0:13:24](https://share.snipd.com/snip/648e1e6c-b3af-467d-ba62-7488b01d4735)) - **Medical Project Trained Me To Lead Design** - Leadership and product thinking matured for Jeremy during a medical/NHS project where he had to pitch to big organizations. - As head of design he learned to sell underlying solutions and vision, not just visuals, when meeting the NHS and large medical clients. Transcript: Jeremy Butler I think it kind of happened at the medical company. So I was head of design there and Phil was like head of engineering. And we had to pretty much pitch, we were pitching to fairly large medical companies as well as like the NHS. And you can't pitch a product based on how it looks and, you know, how you interact with it. You have to pitch it on the underlying currents of what you're trying to solve. So we were kind of drawn to all of that and trained as well in how to think about the bigger problem and the bigger solution. So we could actually have those conversations with fairly large bodies. So that kind of came naturally then to the agency when we're talking to clients who are either being burnt by another software company or burnt by the industry itself and would come in And try and say, hey, let's change the lens on this. Let's think about it from a different angle. The solution is good, but the execution might be wrong or the execution is good, but the timing was wrong. And we try and piece it all back together. And again, you can't do just with pixels on a screen. They've seen that. They can appreciate good design. But what they're looking for is vision and direction. And those kind of conversations have far deeper kind of contextual meaning when you want to chat with people. ([Time 0:15:18](https://share.snipd.com/snip/b42b24cd-2069-4d43-aa79-700f76851d44)) - **Split Design Direction From People Management** - Invest in a scalable design system and separate responsibilities: design direction, people management, and UX quality. - At Laravel Jeremy and Jason split roles so one focuses on people/UX execution while the other drives system-wide design direction. Transcript: Jeremy Butler My kind of scope is really within the design direction and so i'm working like deeply in the the design systems just like how do we make sure it's something that can scale and by that i mean Like it's quick to make designs it's quick to make evolutionary changes to our systems. The people management side, so I kind of share this role with Jason Beggs as well. So he takes care of people management and takes care of a lot of the UX quality of, like, the execution that users get to see. And kind of between the two of us, we share a vision of like, how do we move forward as Laravel with design attached to everything that we do? Yeah. So that's, that's really interesting. And I guess we've got now a dedicated product team, which is led by Joe Dixon. And that's the first time I think within Laravel, product's always been there, design's always been there, but it's never been like a pillar and a discipline that stands outside of Engineering. So now that we've got that, like it's an extremely strong voice and it's kind of a product-led evolution and solution company, which is really, really great, especially for the design Team to kind of have this, this place to explore and have our freedom of our own processes, our own disciplines. ([Time 0:20:50](https://share.snipd.com/snip/44f8bb73-9e2d-43cf-95cf-3fd988ba59d7)) - **AI Agents Will Shape Laravel's Future** - Jeremy expects AI and agent workflows to become first-class in Laravel's ecosystem and product surface. - He sees Taylor's SDK moves as a sign that AI engineering will be a core reason newcomers choose Laravel. Transcript: Jeremy Butler Something that's, you know, got my energy and my attention right now? I think i was deeply captivated around ai and kind of agents in the system and how we represent them so that's evolving i guess even like what taylor did with just the laravel sdk it's like That is now a first class citizen of the framework yeah so it's how do we support that and how do we encourage and grow that to the point where newcomers choose Laravel because it is the Most viable solution for AI engineering effectively. So yeah, over the next few months, I'm sure that's going to keep evolving and growing, both in Laravel and in AI, the marketplace itself. ([Time 0:25:20](https://share.snipd.com/snip/3ca55753-b9fa-48a2-91fe-a9bf0f942124)) - **UseClassy Solved My Long Class Lines** - Jeremy built UseClassy after getting tired of long class attribute lines and horizontal scrolling in his IDE. - He created a Vite plugin so Blade/Vue/React templates can write multi-line grouped utility classes that compile to a single class string. Transcript: Jeremy Butler Use classy allows you to write multiple class lines and it will collapse them all and make it a so when the kind of compiles it'll make it a single class so you can kind of separate your your Media utilities so you can have a separate line for all your, I guess, your smalls and your larges and your dark themes all on separate lines. So you can classify it and sort it separately to each other. And yeah, it kind of came about just because in my IDE, it was one big long line and I had to horizontally scroll so far just to make sense of anything. And then we got into the hacky pattern of like in React, you can separate that within an object. Right. You can separate it. And that felt a bit funny to me because I couldn't do the same in my blade template and I couldn't do the same in my view template um so yeah I just sat there when I should have been on holidays I think a few nights and just went okay I'm gonna learn a little bit about V because I hadn't played like deeply within it and yeah I came out with after a weekend with a little plugin a little V plugin that does it all for you. ([Time 0:29:27](https://share.snipd.com/snip/1fb4c764-c8da-487e-b8c2-7e0453b74239)) - **Keep Design Systems Primitive And Focused** - Keep design systems primitive and avoid embedding business logic into components. - Treat the design system as the baseline primitives so components remain maintainable and business rules live in the product, not the system. Transcript: Jeremy Butler So governance is a big thing around design systems. And it's like, how do you manage and maintain it long-term? Because the natural thing for any defined system is to bend and break and bubble out. So how do you bring it back in? And how do you accept that things do progress faster than what the rules and the tokens can accomplish? So that's what this system kind of does. It gives you that holistic score and understanding of what's happening. I haven't kind of fully completed it yet, but it can replace parts of storybook. If you've written it in TypeScript, I can pull out the types and I can say, I know what a button is and I know all the props for a button. Here's a preview of the button. It does get more complex, the more depth, I guess, those components go into. And then the basic rule for me, for design systems is how to keep it as primitive as possible. As soon as it becomes business logic, you move it into the actual design itself. It doesn't belong in the design system. The design system is there to establish like the baseline. What is this product? What is the experience of this product? And yeah, trying to keep it as maintainable and as small as possible. ([Time 0:33:11](https://share.snipd.com/snip/4f2bcc28-08ce-47e1-beaa-26112fb4b8d9)) - **Lint Your Design System To Prevent Drift** - Use tooling to govern and lint your design system to prevent drift and broken tokens. - Jeremy's DSLinter lints codebases for token misuse, accessibility, and maintainability and can extract TypeScript types to preview components. Transcript: Jeremy Butler I haven't kind of fully completed it yet, but it can replace parts of storybook. If you've written it in TypeScript, I can pull out the types and I can say, I know what a button is and I know all the props for a button. Here's a preview of the button. It does get more complex, the more depth, I guess, those components go into. ([Time 0:33:39](https://share.snipd.com/snip/4aeef1c0-4096-4369-b61a-c91cc29c8ad0)) - **Learn Design Fundamentals Before Relying On AI** - Learn design fundamentals and cognitive laws before relying on generative tools. - Jeremy recommends Laws of UX and checklists to build a foundation so AI-assisted design produces usable interfaces, not just prettier pixels. Transcript: Matt Stauffer So there's a lot of good design systems to work from. Jeremy Butler You've got Radix and you've got Shad cn you've got all these kind of component libraries the design system itself is what's lying underneath so the first place i'd probably send people To is let me find the website so i get it right is lawsofux.com okay because you can create great components but you need to understand like fundamentals and the principles behind, I Guess, good design and good usability before you get into pure just pixels and presentation. And I think this is the same lesson for people designing with AI as well. It's just like you can absolutely design great systems and great UIs with AI, but in the same way that you need to know the fundamentals of development and engineering, you need to know The fundamentals of good design as well. And that'll help you further than I guess any great prompt or skill that you can import is just like establishing a good sense of taste and a good sense of what's right and wrong. And there's great checklists out there for design systems as well. Go find them. ([Time 0:35:16](https://share.snipd.com/snip/767b0aed-3434-44e7-b6d6-859faf961d30))