Matthew: Welcome to the Restock Podcast by No Code Supply Co, where we highlight the people, the things they build, useful tools, visual inspiration, and conversations to refill our shelves and ourselves. I'm Matthew. Hey, everybody, welcome. So, yeah, I think we've got quite a bit we can talk about today. Corey Moen: I'm Corey. What's up, y'all? Matthew: I wanted to show off this. This is the Apple Sports app. And they have this custom bracket built for the World Cup. And I've never actually seen a bracket UI done so well and so responsive. Corey Moen: Yeah. Mm mm. Matthew: so you'll notice here at the top we've got kind of this range slider, which is for the different rounds. And then you have the bracket below. And so we can just kind of move through the bracket here. And you'll notice as I move through the bracket, like the gaps actually compresses, right? So you get you can actually see that range as best as possible, right? Which is pretty cool. And you can actually extend the range. Right. Corey Moen: Yeah. Dang. So cool. I was just gonna ask. Matthew: So you can, well, there's a little bracket, you know, which is not very useful. but yeah, and then you can just shift the range back and forth. It's very smooth. I don't know how it's going to come across in the recording, but if you actually check out the app, it's very smooth, very responsive. and it's all, you know, touch based. and then if you go down and you just look at one kind of step in the range, it actually expands, it gives you more detail, right? So you'll notice like the detail within each card. Corey Moen: Yeah. That's super cool. Matthew: changes w as the density changes. Corey Moen: It is wild how smooth the transitions are. And especially when it's going out and you see that much data and it's just like there. Cool. Matthew: So right. Mm. Yeah, and then of course you can scroll side to side as well with touch or I'm doing it remotely, but yeah. Corey Moen: This is bringing back all the feels of back at Webflow for Webflow Conf, I think two different years. what was the remember the competition that we did? Yeah. Yes. Matthew: the speed build challenge. Yes. Yeah, we did have to do some little brackets for that. Which, you know, and I knew how tough that was. You know, we went through those different design iterations and responsive work and Corey Moen: dude, yes, we built yes, we built the this bracket in Webflow and it was it was a tricky, tricky beast, especially because it was all bound to the CMS. And so we had to, you know, like very yeah, strategically wrap. I think it was, I want to say it was like two collection lists, and we kind of split the whole thing in half or something so that yeah, and then a bunch of custom CSS to get things positioned correctly and be like. Matthew: Mm-hmm, mm-hmm. Mm-hmm. Corey Moen: Robust, I think, is the hard part because like you we knew that the bracket would change or you know, at one point I think they add one of the years they wanted to add a whole nother tier or something. I don't know. Yeah, this is not simple. Matthew: Yeah, it's not not an easy design challenge when you actually try to make it. Corey Moen: Yes, to then go to this extent is like pretty wild. Matthew: Yeah, because it it's a lot of information. It's very dense. and yeah, and making it responsive is just a beast. So yeah. So anyway, check it out. Yeah, the Apple Sports app. Corey Moen: Mm-hmm. Love it. Love it. Matthew: All right. I got some other design inspiration. let's see. See your reaction to it. this was a nice find. So I'm not on Twitter anymore, but there's actually the site that curates good design from there. So I've actually been checking this out. It's a nice way to to see the best things going on there without actually having to go to the feed. Corey Moen: No. Yeah, so Interesting. So that one maybe that that you could pull up similar as recent.design This is Daryl He used to do godly. And so this is his like Matthew: yeah. Corey Moen: latest thing. no, redirects. Interesting. So he actually took down Godly. but man, I don't I don't know how he's if if this is all manual curate curation or not, but like really highly highly curated it seems. yeah, I don't know. Always fascinating to see the latest directories and such. Matthew: Nice. It even has sound effects and with your animations and clicks. Yeah, it's like little bloop bloop. Corey Moen: nice. I didn't notice that. yeah. So good. Matthew: Nice. Yeah. So if be some some new places where y'all can go get some design inspiration. Which I always like I go through spells where I'm like, I need I need to make it like almost like a daily habit to just go and get some inspiration. I'm not good at it. I like this. Corey Moen: Mm-hmm. Hundred percent, hundred percent this. It the irony is like it's less design inspiration, but like no good supply co in the we in the funniest way has always essentially just been this for me, at least early on, was like it was just where I was capturing, you know, tools and utilities and also some inspiration and such way back and then just like still is that in some ways, but now I'm like, man, to your point, maybe it should be a little more open ended. Matthew: Mm-hmm. Corey Moen: Design inspo all that. Cause I I started to see people also posting about like, you know, for the design dev workflow, you know, this is still fairly time consuming when you're starting from scratch. And so, like, how do we have AI go help, you know, curate stuff like this? But that's the part that I'm like, I don't know. You would have to have AI pulling from something that is a already really high taste, high curation directory, and highly tagged, which is the part that I am Matthew: Okay, okay. Yeah. Mm-hmm. Corey Moen: I didn't notice on the the other one that you showed. I don't I I guess yeah, I don't see too many like tags or anything yet, but like on Godly that Daryl did before, that was the part that was super impressive. It I again, I'm sure he was automating it some clever way. There was just very, very rich tagging down to like fonts and tech stack and all of that. and it looks like in here he has like category, style, and color. Matthew: I'll also point out that Rob Hope has done that with One Page Love and I've kind of seen behind the scenes how he's done it. And yeah, it is very extensive tagging that he's done for nearly 20 years, right? And yeah, so he's able to really highly tune it and say, like, you know, I want these combine these two tags and find everything that's at the intersection of that. And it and it basically builds like an inspiration page for you. That's pretty cool. Corey Moen: Yeah. Mm-hmm. mental. Yes. See, I wonder at what point is somebody like that, you know, could I mean you could almost even sell that data or again, maybe recycle it into a site a different site that's like just meant to be, you know, easy access. Yeah. Don't reveal. Matthew: He's he's been work I don't know if I should say he's been he's shown me like a w working MCP he's working on that allows you to do that. So yeah, exactly that where it's like it it's a lot of rich, extensive data. and so just being able to to mine and tap into that. Corey Moen: Okay, sick, sick, sick, sick. Yes. Dude, it makes me think of, did you see Stack Overflow got a rebl rebrand recently? Yeah, so like here you can see a little bit of it in this realm of like the type and all that. The point is, I thought it was really fascinating when I saw this agency post. Yeah, that this agency posted about the work. And like what made me think of it is, you know, I I've also saw a few months ago a Stack Overflow, you know, their traffic and all that just plummeted in the last year because of AI and all that. But but I think the ironic key is that like Matthew: Took the color out of the logo. yeah. Corey Moen: Let's be real, a lot of these AI models probably, you know, over the years have used data from Stack Overflow and the Internet and all that. and so I wonder if, you know, the thing that I saw, I thought was like, Matthew: yeah. A hundred percent. So so they need to pivot to like licensing that data. But the how do they get people to keep interacting with the plot? Because that's what made it valuable, right? Is everybody like, you know, here's my problem. And then like, okay, you know, here's my solution for it, and here's my solution for it. And then everybody kind of coming together and figuring out, you know, through upvoting and commenting, like what is actually the best solution for this this problem. And that's something that, you know, as we're all just going to our Corey Moen: Yes, or like totally. Right, right. Data less. Matthew: to our AI chat to to get solutions. You know, we're we're missing that kind of debate or seeing multiple solutions. you know, and we're not we're not generating that content to be to be mined anymore. So Corey Moen: Mm-hmm, mm-hmm. Right, right, right. And it can get it wrong, an interpretation of which is the right. Yeah. So I don't know. It's interesting to this point. Like I we'll see if that's what they're kind of going after. Also, just I thought some of the brand stuff was interesting. Like this is just like gorgeous illustration. But then there's there's parts like this. These are like these are like, you know, box shadows, which was like all the rage design wise like 15 years ago. But look, everything is cyclical. And I think the agency that that did all this, like it still feels it feels pretty solid. So, anyways, I thought that was interesting. Matthew: Hmm. You you kind of touched on something which I w thought we might get into as a topic. And so maybe we we just kind of do it. So I've written down some thoughts here. So there's this question of when do you hand off design work to an agent? And one of the things that as I was kind of thinking through this, just talking to myself, it Corey Moen: Whole stack of Mm-hmm. Matthew: So when we're when we're handing off design to an agent, we're really optimizing for time, right? And I've I don't know, I'm I'm really thinking that the kind of intersection of where creativity lives is when you're actually doing the fiddling, you know, when you're getting that inspiration and you're throwing things on a board and putting them next to each other and trying to think like how can you can combine visual ideas and concepts, you know. Corey Moen: totally. Matthew: So turning knobs, dragging things, you know, watching these kind of creative things happen in real time. And if we hand off design too early to like an agent, kind of outsource that, like we're missing that chance for like emergent design and creativity to happen, right? you feel about that? Corey Moen: Totally. Mm-hmm. Mm-hmm. I think it's it's a really tricky balance because I think like there are also decisions that are made early on in the design process that are this combination of like pattern recognition. Like for me, for example, it's like I you know, especially man, it feels like I I'll I'll start by saying take it with a grain of salt, 'cause I ha I don't know the last time I've been in Figma, like designing a site from scratch. It's it's been Matthew: But did that's is and how do you feel about that? Corey Moen: I, you know, I I personally am okay with it because I just love code. I've I've said this for the last three or four years before a lot of even the AI stuff that like on any given day I'd rather be in Webflow or building something than I would be designing something. But but even even if I was to go back and start doing it today, like my workflow is always, you know, gather a bunch of inspo, like you're saying, and then like Finding little details across those that I kind of am like, I like this piece, I like this piece, and now how do like the trick is like how do you, you know, lego those together in a way that feels like a net new concept. and so on one side, AI is very good at pattern recognition. But I think the thing it's not good at and the thing that we are still so it's still so vital to have an opinion on is like you still have to have some like preference and some like, well, I like this type or this font because you know, certain details of it match this requirement or this part of the strategy of the brand or the website or whatever. And like those are the nuancy things that are like, I think so human or the best designs. pull the details out that are subliminally human, if that makes sense. A simple example is soft rounded corners on cards and fonts is generally more, you know, warm and and fuzzy and yes. Yes. Yes. Like so so it's so many things like that that I do think are very nuanced and the and and top tier design. Matthew: Mm, mm-hmm. Or even c like emotion color theory, you know, and all those kinds of things. Corey Moen: still has to have a lot of that human opinion and subjective preference and experience that goes into decision making with it. and then, you know, I think the AI part of it is more helpful in production use cases, not like look what I'm gonna post on social media to scale things. You know what I mean? So like it in the same realm of even before we were using AI, it's like I loved the workflow of I wouldn't in Figma, I would just, you know, mid-fidelity wireframe everything out. And only do a high fidelity of like the home page. because I just thought it was a waste of time to do high fidelity on everything. Because in the same realm, it's like as long as they, you know, client or team buys in on the the high fidelity direction of one page, like I'll just scale it when I'm building it. You know what I mean? Like, I don't know. I digress. It's it's interesting. Matthew: Yeah. Yeah. No, I yeah. I agree that. I mean I would I would I prefer to like actually hand sketch wireframes and just and just do it that way and it gives me a real feel for like like the real as I'm drawing it out, like the relationship between kind of objects that will eventually be on a page and how things interact. and it forces you to not go to high fidelity because it takes more effort, you know, just drawing boxes. Corey Moen: Yeah, for sure. Mm-hmm. Mm-hmm. Totally, totally. Matthew: One one thing like about like handing also handing off design is hard because you have to you have to instruct the AI, right? You have to fully know what the end target is, you know, and describe it in detail and give it give it a plan, give it guardrails, you know, you have to do all these things. And in the design, the in the creative process. Corey Moen: Mm. Mm-hmm. Matthew: you need to be able to explore. You need to be able to let things emerge naturally as you kind of play around or you're like let things sit with you. There's there's an element of play, you know, you need to just kind of mess around and and see what kind of comes out or what resonates with you and and the team, right? just just going into a a chat box and saying, you know, do this thing doesn't work for that process. So I I don't know. I I Corey Moen: Yeah. Matthew: Kind of the point here is I've yet to still s to see a design tool that really leans into that process and like aids it instead of trying to skip it. Corey Moen: Yeah, yeah. Yeah. There is I mean one one other thing that comes to mind too in this realm, I was gonna try to Screen, I don't want to make it full screen. I'll just I'll just share that this will work. is is what once you have a general aesthetic, the other place I have seen like maybe a very practical, again, production-aligned approach is iteration. So like I saw somebody tweet this where you know it seems like the context was like, hey, I have this general style, I want to do you know, like somewhat brutalist, somewhat Swiss style grids. Matthew: Yeah. Mm-hmm. Corey Moen: And they used AI to basically just like do a bunch of random, unexpected variants of like positioning and all that kind of stuff, just to react from right. So I I again I think the thing that people can get so twisted is they think this is now the end-to-end design process. Like, no, this is just one other way to move quicker and get a bunch of ideas out in the same way of the classic, like, you know, option drag and Figma or whatever design tool to just like, you know, do change. Matthew: Creating a design branch Corey Moen: Stoop change, stoop change, exactly. Matthew: essentially. Yeah. Corey Moen: which quickly to this, did you see config keynote updates? The the code layers feature, I maybe I misheard this, but it it it I thought I caught a part on, you know, it generally it seems like cool, you can like localhost iframe. Matthew: Yes, I did. Mm-hmm. Mm-hmm. Corey Moen: your actual code base into the canvas, which is really neat, and then like interact with it and then pull up AI to make modifications. But the really critical detail that I thought they said was you can option drag that and it automatically creates a branch if you're like connected to GitHub. And so like I was like, wow, that just that little detail I think is really, really interesting and was easy to breeze over, but maybe like potentially you know, one of those those shifts in the industry of like, well, what if we could have Matthew: Mm. Corey Moen: both worlds where you have this open canvas of iteration and you know, if we're not worried about, you know, unlimited branches or, you know, endless amounts of wasted code and tokens, like, I don't know, that's that's actually pretty compelling. Matthew: You're gonna get pricing tiers where you're limited by how many branches you can have. no, I I've definitely been thinking about that. Like I think the Git based workflows are are solid and I don't see them going away. I see like actually like Figma just did, building abstractions on top of that that actually open up those workflows to to everybody without having to understand how Git works. Corey Moen: Yeah, right. Like Mm-hmm. Yes. Matthew: You know, and having to kind of dance around all the different kind of commands that you have to do. Corey Moen: my gosh. And the proprietary terms is like I use it every single day now, but I'm still just like like why? Why? It's so code first. And it feels like I just wish there was I wish we had like a conversation first style of git, you know? that was that was so much more approachable for others. because I just don't I don't think it is today, but who knows? We'll see. Matthew: It's like another language. Corey Moen: How things evolve there. I think there's this other side too of just like the Framer thing was, you know, if if assumably code, and this is again, sorry, side note is like I I need to be super real that I am still have days where I'm like, no code supply code, still enjoying curating. This has been super fun during the podcast. The name Matthew: Yeah. Corey Moen: There at times though is still irking me that I'm like, is is this giving the wrong message? Because we do talk about so much more than just like what was no code tools. But in the most ironic way, what I was gonna say is like the more we do offload coding to agents, the more you are doing less coding. And so it almost in this weird tie back way is no code again. Matthew: Mm-hmm. No, there there's a straight line you can draw from kind of the automation to the no code movement to now like the event dev development. You know, it's like it's a continuation. Corey Moen: Dude. Yes. And and in the no code movement and in the agenc one, the point is that you code matters less in in in in one sense. Of course, code is still the foundation and so is critical. And like when we had merch, that's why there was a shirt that was like yes code, because it was trying to point at the point of like, no, we love code. It's just that we don't think you need to write it manually all the time. and then now that's coming true again with agents. And the point is that like Should things like GitHub or the way teams interact and collaborate on top of code become naturally more visual, like Framer or Fit sorry, Figma was doing with code layers, right? Like what if engineers are even getting in there and commenting and all that kind of stuff? And like there's some other way that we're like testing these experiences, right? Or or or my brain also went down the path of like, the the more I've worked with. Designers that are getting into code in the last year, especially, but I you know, this has also been going on, especially in the Webflow space for a long time. The more people, the more designers g get into code, whether they're using a tool like Webflow or now AI, the more you can just see how they grow and start to understand all the nuances we must solve for as people that build on the web. Browser sub, you know, cross-browser support, though that's gotten much easier to deal with than it did 10 years ago. responsiveness, accessibility, a lot of stuff that, like, let's be real, still falls through the gaps, but like it humbles designers in a big way. and I think the more that I see things like code layers and Figma, where again, designers won't just have static things that they can make perfect, they will start to get that experience of like, look what happens when I make the frame bigger. Like, there's this weird edge case viewport with where things are all, you know, messed up and not perfect. And it's like, Matthew: Mm-hmm. Mm-hmm. Corey Moen: No, that's part of now the design process and always has been is like you need to build things in a way that is so elegantly flowing and reflowing and dealing with all these edge cases of text length and icon size or you know, CMS content that who knows what somebody's gonna upload. Like it is it's exciting to me in general that I'm like, I think more and more designers need to need to realize all of these because it just makes you a better designer, let alone a builder or whatever, you know. It's yeah. Matthew: There there's a conversation I've been having recently and you know, it's kind of like what is it? There was a video that somebody shared that kind of start park sparked this conversation and we're talking about the future of design is you're basically curating a a set of rules. that decide like how design gets output, you know, and same thing like you're saying with designers realizing like, like we need to handle this edge case. It's like essentially, and that's what CSS is, it's just a rule set, right? That that's what design is going to become. It's like you're curating a set of rules and based on that, you know, agents or humans, you know, were able to output things that have the Corey Moen: To Yes. Yes, yes. Matthew: the kind of desired outcome based on that. You know, and some of those rules are going to be safeguards for accessibility and responsiveness and stuff. But some of it's gonna be more about how typography is expressed, you know, how spacing plays out, you know, whether it's, you know, vertically, horizontally, or responsively, you know. so Corey Moen: Mm-hmm. Mm-hmm. Mm. love this analogy. Mostly 'cause I'm such a CSS fan. That's it. Yeah. Matthew: I but it's not an analogy. I mean that that's I mean, that is the future, which I mean, how can we get there but have it be more tactile and playful and like an enjoyable experience as somebody who's been a design curator of these these rule sets and these guidelines, you know, how can we make that an an Corey Moen: Yes. Yes. Yes. Matthew: enjoyable experience and not just like you're sitting down to write a program a set of rules, right? Corey Moen: Right, right. So what's what's funny is to this point of especially delight or enjoyment in this process that comes to mind is I've always been blown away by how much hate CSS has gotten in general over the years in engineering. There's like huge camps of lovers. I'm a big lover, big fan. I think CSS is my like love language in the way it felt like it was the first, you know, let's let's be real. There's also this debate on is it a programming language or not? If we call it a programming language, it's my Matthew: Yeah. It is now. Corey Moen: Yes, I mean, my gosh, it's gotten so much more robust. it it was the first like code language I ever really felt like I grasped and understood from the old, you know, dev tools and in Chrome or before that. And and it's just like, I think I think there's something to be said about like the people that really love it understand exactly what you were describing and and nerd out about like how can I It's like a strategy game. Like there is almost unlimited way I can define these parameters and rules in an elegant, concise way that that my gosh, it's so good. Yes, like I've always equated it, especially with like mass and some of that stuff. I always made make this analogy of like, I think about like HTML and CSS, especially CSS like golf. Matthew: It's true, yeah. It's it's left brain and right brain at the same time. It it's creative and strategic, yeah. Corey Moen: Like I want to get there and have all the confines in as few strokes and a few lines of code as possible. And what's exciting is that there's just always more ways to do that and do it effectively and efficiently. and it makes me think about like I I I I almost wonder, I've never tried this, but I'm like to the point of agents and all that, like Matthew: Right. Yeah, yeah. Corey Moen: It's so often we just don't even think about that level of it. We're just like, go build me the thing. I don't really care if you use Tailwind or whatever else, how you're gonna build this. But like, has anybody or now I want to go after this and do this? Is like, I want to try to give an agent the the parameter of like, mm go build me, you know, this general design or whatever, maybe that I give it as guardrails, but like do it in as absolutely efficient of a way as possible. Like as few lines of code. Matthew: But see, then you have to define a rule set of what does efficient mean. Corey Moen: Totally, totally. A few lines of code, as much reusability as possible. Like do it to an extent that would be impressive to like top CSS experts. You know what I mean? And like I don't look I would be fascinated Matthew: It's it's efficient, it's clean, it's still human readable and like parsable. yeah. Corey Moen: Totally, totally, totally. Like ev even to this point too, like I I I know that like Tailwind exploded, you know, because of AI understanding it's so well documented and used and all that, but like I just more and more now I'm like, do we even need frameworks like this anymore? Like like I don't know. Matthew: Okay. I was having this exact conversation yesterday in depth and because I was like Corey Moen: Yeah. Nice. Matthew: why why do we need frameworks anymore? Or it's like the frameworks that exist or the methodology like BEM, you know, and then the frameworks like Tailwind. I'm like, they're they're from a bygone era. They're they're from they're from the past now. I'm like, so I still haven't seen like a CSS, like I don't know, guidelines or or a new kind s like set of framework or approach that that works in the future of where we're going. Corey Moen: Hundred percent. Hundred percent. Yeah. Matthew: with agentic development, but yet still being human readable, still being efficient, and then and then leaning into kind of the new tool set that we have in CSS, you know, for for for scoping, you know, for for nesting, and really build build being able to build out Corey Moen: Mm-hmm. Matthew: a system that can generate UI on the fly, you know, based based on these these kind of rule sets or the CSS framework that it has access to. And so yeah, I'm I'm kind of excited about it as well. But I'm like, I I haven't I haven't seen it yet. So if anybody's kind of seen something that goes is going that direction, I would love, love to to dig into it. Corey Moen: Yeah. Huge. Yes. And in fact, like it for me, it's a struggle in coming to mind with even just like as all these other tools are coming out. Like, did you see it kind of went around the the community? There's a there's it looks like it's an agency or a a little team that has built WordPress plugins and tools for years. And they built their they built a new like open source website builder CMS static site generator tool called in static. Matthew: Yes, I haven't s I have seen it static. Yeah. Yes. Corey Moen: do you do you hear about this? like I'll just yeah, for for people watching, just you know, like this was the video. I don't the GitHub doesn't seem to actually have much for like visuals or whatever. But the point is that like I saw this and I was like, wow, this looks compelling. It also looks like look at how like the the UI looks like so similar to Framer and like the roundings and all that. Anyways, here no there. The thing that Matthew: It's like framer plus VS code, kind of. Corey Moen: Yes, yes. And but the thing that actually that actually gave me pause and like I don't think I don't know if I'd wanna do this is like this same team built and maintains dude hundred percent super super cool yeah yeah there's don't even Matthew: I did like the the design system tab that they got there and the way they actually visualize the design system 'cause I actually do that. So I'm like, yes. And I I've done that in like sheets and numbers, you know, and created like my system and then visualized it and yeah. So Corey Moen: Yeah, dude. Don't get me wrong. A lot of really, really interesting things in this. But they this was also the foundation, is they they have had this core framework for WordPress. And this is the foundation of what you build with in static. And like again, I almost saw this. I'm like, no, I don't, I don't really want you to decide the framework that I have to build with. Like I may maybe I'm understanding this wrong to be fair. Matthew: Mm-hmm. Mm-hmm. Corey Moen: Like I want the flexibility to do whatever, you know, like either something from just literal raw HTML, CSS, and JavaScript up through, you know, Astro or whatever else. so I don't know. It's it's just one of those things that like it seems really compelling, especially like the CSS, the CMS is all just like, you know, a raw SQLite or a Postgres database. and so I think there's a lot. yeah, dude, like it I was shocked if, you know. Matthew: And it also has design branches and all that kind of stuff, I think, too, right? Yeah. Corey Moen: If anybody checks out this video, like there it is a in immensely feature rich, considering it's not even V1. Like this is like V001 or something of it. You know, they just got going, it seems. but it is open source and all that. So like it would be interesting if it went quick. But then even like this, like they have like user permissions and like stuff I would never expect this early on in a in a new tool. but here no there, again, I just thought it was interesting because. Matthew: Uh-huh. Corey Moen: Of all the really compelling things they showed, the part of a predefined framework, CSS framework, was the part that I like, Yeah, I don't know, I've I'm out Matthew: Yeah, or it's like, you know, with certain vibe coding apps or whatnot, you know, where it's like you're kind of you're s you're stuck in with Next.js and Tailwind, you know? And it's like those it it's like, well, for those of us that actually care, like and I and I I love the team behind Tailwind. Like and I remember what was it called, Refactoring UI when they first came out with like that PDF about their like Corey Moen: Yes, and tailwind. Yes, yeah, yeah. Mm-hmm. Matthew: design strategy and thesis and like the do's and don'ts and all that, like, I just I ate that up. It was so good. And then and Tailwind, you know, is built off of that. And so it has a lot of good underlying design principles and stuff, but it's just become so ubiquitous that it's like you can you can spot kind of tailwind. And I understand why developers love it. I I don't like designing with all utility classes. I don't think that's the right decision. Corey Moen: High percent. Yeah. Yes. Matthew: utility classes should be basically for kind of overrides and and things like that. but anyway. Corey Moen: But even then, I think what you said earlier, they came out of an era of human written code and and they and all the totally and so much faster and like the little bit I've gotten into Next.js and some of that, I definitely it helped a lot with the empathy of why, like you can just work in one file. You don't have to like jump around a CSS file and this and all that. But again, like that that is so quickly changing. And and I think so much of it always still ladders up to like Matthew: Yeah. And made it easy for devs to write, yeah. Yeah, yeah. It's all in line, yeah. Corey Moen: dependencies and like in the context of something like Tailwind, I get that they have a dedicated team and again, plus one, they're awesome. but like as CSS rules out new features, you know, then technically you're kind of just like waiting on them to support those in utilities. Or again, you can still do custom CSS on top of it to use that. But then as soon as you start mixing things, that's where I'm like, well why not just do it from scratch anyways and like define your own utilities and like I don't know. Matthew: No. Yeah. It's that whole thing we're talking about like ab abstractions. It's like in this new world, it's like fewer abstractions is actually better when we actually work with the core the core technology, you know HTML, CSS and JavaScript, the more we can work directly with that, you know, the I think the better off we are and the easier it is to work with agents and things alongside. can I show you something I built? Corey Moen: Totally. Right. Right. Right. Yeah. People are super interesting. Yeah, a hundred percent. Matthew: Last night. It's an idea that I've had and Corey Moen: Absolutely. Always. Matthew: On Mac, there's this screensaver, which takes like the classic Mac OS icons and UI. And it's kind of it animates, it kind of scrolls across the screen, you know, and the pixels animate and different things. It's it's it's one of my favorite things. Of course, I you know, I I have a lot of nostalgia for this kind of old interface. you know, and I had a website that was built totally in this. Corey Moen: Mm. Ha ha. Matthew: style. and so yeah, so I've wanted to be like have some kind of tool for myself where I could generate this kind of artwork. And not and not just like I want to be able to draw with pixels. you know it could do that. But I wanted to be where I could just pass in an icon or something and and anyway here's the app. so this is just local right now. Corey Moen: Uh-huh. Mm-hmm. Matthew: And I'll explain how I built it in a minute, but let's just see how it works. So I'm gonna grab some images and yeah, let's let's start out with well, we were talking about accessibility. so let's I gotta get used to all the controls here. Let me see, let's see, source scale. Yeah, let's and let's pause this so we can work with it. All right, so we have we can Corey Moen: Mm-hmm. Nice. It it looks like it like makes it into a pattern automatically. Matthew: I can actually talk, yeah, the timeline. I can toggle that on. Let's see. Okay, there's my icon. Okay. So we can extract from whatever image we uploaded, and we have different options here. And we can kind of adjust the threshold of how it's reading the black levels. And so you can kind of fine-tune this until like the image looks right. And we can actually adjust the contrast of the underlying image as well. Can invert it, those kind of things, right? Now we have the pixel grid. So we can say how dense are the pixels. Corey Moen: Nice. Matthew: Okay, and color, I'm not gonna mess with color, and then we can adjust the gap between the pixels and the rounding. Let's go a little bit more classic, more squared off there. And then images, image grid here. So we can see it's actually a grid of image that scrolls past through the animation, so we can actually kind of Here and we can control the start position, camera, motion, all this kind of stuff. So we'll just go. Corey Moen: tilt UI is interesting being like the little cursor or like target thing the tilt grid yeah yeah right there mm-hmm whoa trippy Matthew: Yes. Yeah. So you can adjust kind of the angle. if we go down here, we can have it scroll horizontally, vertically, that tilt as well. Corey Moen: Is it is it rendering everything in a canvas, I'm guessing? Matthew: you know, I actually don't know. Corey Moen: All good. Matthew: And this is kind of the the the beauty of it is I just focused on what I wanted it to build. and yeah, it's probably using 3js or something under the hood. but it also has export options. So we have image and video exports here, right? and yeah, you have canvas controls, undo, redo, like all this, all this stuff, right? And so how did I build this so quickly? Corey Moen: yes. Hundred percent. Hundred percent. Yeah. Like yeah. Matthew: was I saw this post here. and this is from like an agency and they built this toolkit, if you will, for your agent called Toolcraft. And so it packages up everything you need into one, like from unit tests to like here's like the the UI libraries. And so as an agency, they'd built a lot of internal tools like this and we're always like struggling with the same things. Like Corey Moen: Mm-hmm. Like scales and stuff. Yeah. Mm-hmm. Matthew: the UI doesn't work, or it's like it doesn't know how to properly export images and videos for actually use and design work, right? And so you would get errors or different things. and so they use it like here, like this is an interactive like kind of like terminal style thing that they got in the background, like a client side and different things. I have some other examples of tools that they built with this kit. Corey Moen: Mm. Matthew: So this is like drawing drawing kit and see you have all these kind of UI controls and so these are all generated like on the fly by the toolkit. So I just loaded up the toolkit and said this is what I want and I gave it to Fable last night and two hours later they they said generally thirty minutes but I think what I asked for was a little complicated because I mean and and some of their examples actually show Corey Moen: Yeah. Mm. Matthew: like full on like animation timelines in your tools, like you can like all those kind of pieces of UI that you need to create a design tool that aren't in normal kits because normal kits are designed for like app and web interfaces, right? Not for design tools. so it has all of that baked in. so yeah, it made the process very simple. It it wasn't necessarily fast, but like it has like I said, all kinds of built in Corey Moen: good. Matthew: test frameworks and different things so that pretty much you can one shot a design tool. just just to whatever your specific needs are in that moment, whether it's something you repeatedly do with your team, or if it's just something you need one off. so yeah. Corey Moen: Yeah. Interesting. It's this makes sense now why like especially that that toolbar UI is so nice. little like cursor thing, like it's very nicely polished. inspecting the pages, it looks like in all these examples they are HTML canvases too. Which is like, man, it's wild how powerful and you know capable canvases are. And then even to the point of like being able to extract things out of it beyond just static, like getting a video or whatever. Matthew: Uh-huh. Yeah. Okay. Corey Moen: Super, super cool. It makes me it makes me think of too. Did you s I I was very impressed not to go back to Figma config stuff, but with Figma motion that they launched, I was actually quite surprised how many export options they had out of a gate. Like did did you happen to see Timothy Ricks from the Webflow community posted a video already of like you can get CSS timelines out of the motion and and Tim with their little like mini plug-in builder, like local plug in builder. Tim even like had AI create like a one-shot little plugin that will just make the CSS selectors semantic in the timeline it generates. So like do the animation, use the little plugin, and like the output was like semantic, proper CSS animation timeline. And I'm like, damn, super cool. and so like it's really interesting how tools are just like blending and becoming so much more malleable like this. Like, such a good find, especially Matthew: That's that's that's the word of the year right there. Yep. Corey Moen: malleable. you know, last year it was composable. It's yeah, dude. It's it's super, super interesting. I've s I've been seeing many other agencies post this type of stuff too, that like this is almost a requirement now when they do brands. Like, what's the the one dude, Nick Patison, is it, that does like the design sprints model. Anyways, yeah. They he's been posting a lot of that kind of stuff. Matthew: Yeah. So yeah. Go build go build the tools you need. That's kinda the thing. yeah. Corey Moen: Super cool. Dude, this. Yeah. I think what's interesting too is with these tools is is then deciding where they live. Because for an end client, I think this is this is this is this is where my my excitement gets in the realm of like websites, right? Like in CMSs. Like I I want I want to be able to build a site that when the client's managing it, if we have custom tools like that, what if it's all just built into the site? Like can a site in this way become more of a foundational multi-use tool than just the output of web pages? Like, can you manage asset generation and posting to social and like all these other functions that marketing teams obvious or usually carry out? Could a website and really the underlying part being code that is now much more capable and scalable become this foundational centerpiece of marketing operations. So there's less of this like duct taping all these tools together in the future and more of these like one-off custom building solutions, right? And and the real gap is still just like hosting an infra, right? Like even even I have I have never used this but what's there's the React email library. is it resend? No. Something, I don't know. There there's a the point is I'm like Imagine even managing marketing emails in a CMS directly, right? Like there's always been tools to like have these little visual builders and all that. But like what are people really paying for with tools like iterable and and all that, right? Like y I realize there's tons, endless amounts of analytics and metrics and user association and all that kind of stuff. But like my I do wonder will we see even in the next five years? Matthew: Mm-hmm. Corey Moen: some of those tools, you know, at least for up to a certain size of team, you can actually like curate and collect all those different functions into a single place. that is more Matthew: yeah. It it takes me takes me back to I mean and part of was talking earlier about like when you hand design off to an agent stuff. I was going back to like, you know, okay, twenty years ago, it's like, how do we do the design work? It's like you had to get that inspiration. And once you had a direction, it's like, Okay, I need to go, you know, get this piece of software to accomplish it. I need to get this plug in, I need to get this you know, resource kit or this texture library or you know, get this font and you know, and you had to go and you had to curate all these things and then you brought them together and you like shape it until Corey Moen: Right, right, right. Matthew: you get like the output that you're going for. I think that that kind of workflow, that pattern is what we're gonna see just with software like you're describing. It's like you're going out and may maybe you're like Corey Moen: Yeah. yes. Matthew: curating like little indie bits of software and plugins and tools and bringing them together or you're creating bespoke, you know, apps like I just showed, you know, just for a specific use case that you have. It might be for a campaign, it might be for the whole brand. But you could bring all of those together and kind of bundle it and create a package for your for your marketing team. So it's like, okay, yeah, I've got my CMS blog and then you know directly connected to that is this little asset generator Corey Moen: Yeah. Right. Matthew: that can reference the blog post and then it has, you know, can give you some starting points and then you have all these controls where you can say, okay, tweak this, tweak that, this was also something I've been thinking about. It's like the question of is my design good? And it's like, you know, that, you know, that question felt easier in the past because I felt like I had more of a hand in Corey Moen: Yeah. Mm-hmm. Matthew: what was output, right? W nowadays it's like I can Corey Moen: Orly. Matthew: create things all day long. you know, it's so easy to to build new things, whether it's websites or apps or, going and generating an image, you know, as like a little meme or something, just, you know, for just to throw away, right? It's like it's so easy to create things, but do I feel good about it? Do I feel like any of it is mine? Right. I'm like Corey Moen: Mm. it's Right, right. Right. I think Matthew: No, like it's like I don't feel accomplished like I used to, you know, building things. Corey Moen: Totally. Totally. I think there's this like shift between or maybe the spectrum has widened on are you creating things for the sake of on one end sharing ideas, exploring, experimenting, and then on the other end is still that like for the final thing, like for production, for real use case. and on that end Matthew: For me was always about the process. That's what I enjoyed. It was the creative process from start to end. Yeah. Corey Moen: Totally, totally, totally. And I think like but the process I would say when you're on this end of production should still be more thorough and and curated and intentional and strategic. But there's this the this the other end of like sharing ideas and experiments has I think what you can share in the amount of time has opened up so much. Like even just an example I've seen more and more with with tools like, you know, even Claw Design or whatever that like People will build a little product like you're even just showing, like a little app, little something. And now it used to be in the past, you just like do a screen recording or something. But like I've seen people share like little marketing videos that they put together of this showing the features and all that, mostly just because the bar is so low now to just like give AI, you know, the right context and then have it go make a little video that you can. And like, I don't, that's not necessarily a bad thing. In some ways, it's interesting, but I think where again. the the wires get crossed and I don't think it's for the best is like when people then equate, I'll just do the same thing for my production stuff. And it's like, yeah, no, but like I think that nuance that is something people will still be able to tell for quite some time of like, this doesn't feel legit and authentic and handmade, in the same way that we have that today with whatever furniture, stuff like that, all these other industries. Totally, totally. People can still gauge Matthew: Right. Yeah. Quality and curation are important and I I think we have to be careful that designers don't become gatekeepers, but it's like, yeah, internally we we can generate all this stuff and it like easily meets and exceeds like our needs and is great internally. But then what makes it out? You know. Corey Moen: Yes, yes, yes. And why? And then like or when s when an idea starts as the rough prototype end like this, how do we make sure there's the intention of what it takes to get it to be fully polished and production worthy? is really, really interesting to think about. So I don't know, you know, it's Matthew: Yep. Qual quality is even more important than ever. Yeah. Corey Moen: than ever before. Like it's I am constantly in awe of this, like, you know, interesting aspect of how it's so nerdy, and I'll try not to go down this hole since we're coming on time. But like I was just gonna say, like, how sensitive the human eye is. Like we don't we take that for granted, you know, for at least those that can see. Obviously, people experience the world in many other ways beyond just sight. Matthew: You're gonna talk about woodworking? yeah. Corey Moen: But for those that can see and we talk about taste and craft and quality and all these things that have become even bigger, I think I'm just like blown away by this fact that we often don't realize like just how nuanced people can pick up those little details and maybe don't even realize it sometimes. Like the subliminal side of somebody not actually thinking about, wow, why are these two things not centered or aligned? they don't actually have that thought more than likely, but Matthew: I don't Corey Moen: that there is some relationship to be said around like noting those odd inconsistencies that that may ladder up to this feeling of quality versus not when you compare you know some of the biggest brands in the world and really really high b caliber of design especially in the realms of like fashion and stuff I think is where this is most this most prominent right like you can tell the like the like dupe ripoff bag or whatever from the real thing, just from like the tiniest nuanced details of quality of stitching or things like that that are just I think very apparent in web design and all that as well. We just don't always consider it. Matthew: yeah. lots lots lots to think about, but we'll we'll save it for another time. So yep. It was great talk. And thank you everyone for joining us. And we'll see you all next time. Corey Moen: Yes. I love it. Always great to nerd out. Thank you. Have a great day.