Building a design tool

What we're building right now, and what I think I want to build next.

What is Adam's Morning Walk?

Just me talking about whatever I'm working on or wrestling with, usually by myself, usually while I'm walking the dog.

Adam: 00:00

Alright. It's minus six degrees on this fresh Canadian morning, and I'm out with the dog again and thought I would record another podcast. So I think what I wanna talk about today is sort of some of the specific plans that we have for things that we're gonna try next, and I'd be curious to get people's feedback. It's a little nerve racking, honestly, because I I don't know why, but I never used to feel this way. But these days, I feel a little more uncomfortable talking about things before they're done than I did in the past.

Adam: 00:42

And a little bit of that is, like, you know, getting people excited about things and then having learning something that makes us change direction and not finish it or something like that. But the other thing I think is, like, I think these days, I worry that I I'm not as fast as I used to be. And if I have an idea I'm excited about and I put it out into the world, there's someone out there who's just quicker than me who's gonna jump on it and, build it before I can, even if it's maybe at a different level of quality or something, and just sort of take the wind out of my sails. I don't know. It's the classic sort of like afraid of someone stealing your idea thing, which I know is kind of silly, but I don't know for some reason at where we're at, it kinda it kinda is a little nerve racking sometimes.

Adam: 01:36

But I will will share some details about what we're doing and how I'm thinking about things and curious what people think. So the thing the biggest thing that we're working on immediately is like a big revamp of Tailwind plus and sort of the motivation is, you might remember me talking on the last episode that I think our biggest challenge with Tailwind plus has been that we've always tried to keep the whole thing feeling consistent so that any component felt like it made sense on the same page as any other component. And that means the whole thing has to sort of be in one style. And it also means that there's then a bunch of ideas that we can't include because they just don't fit in that style. And the other thing that's sort of become a big issue for us is that when that style starts to drift out of fashion, we have to we can't just like start designing new stuff that does match the current trends because everything needs to be consistent.

Adam: 02:46

So we feel this insane pressure to go and update 600 plus components to all kind of be, you know, refreshed and match the current trends. And that's just like such a death march of a project that no one can get excited about it. So our dream has always been how can we build Talent Plus in a way where when we have a new idea, we can add that new idea and not worry about whether it works with the old stuff or not. So I think the thing that we're kind of trying to do now is push, is sort of change our stance on that and just see where it takes us. So the vision that I sort of have in my head is, and we've actually like described it this way for years as sort of an idea since like the dawn of tailwind UI honestly, but we just kind of pick pick some different positions that push it sort of a little bit further away from this direction.

Adam: 03:50

But what I really wanna build is like dribble with code. So instead of just like one big UI kit, it's just like a giant directory of sort of design inspiration, except you get the code as well. Right? Not just the designs and everything is in a variety of styles and stuff like that. The challenge with this, however, is if we have some cool idea for a hero on a landing page or something, we design it and build it and throw it into the, the directory, you know, It may look cool on the surface and be a cool component, but if someone goes and grabs that and realizes there's not a single other component anywhere in the entire product that works with it, then it's sort of like a huge tease and not useful to anybody.

Adam: 04:41

Even if that individual thing looks cool. I mean, it's not, not useful. Like there could be some educational benefits in sort of like looking at how a particular thing was done and understanding how it was built and then applying those learnings to something that you're building. You know, I definitely think there's value in that. But that's sort of always been like the point of friction for us in approaching things this way.

Adam: 05:07

So the approach that we're taking right now to try and solve this is building like what we're calling multiple kits. And, you can imagine that Tailwind Plus in its current form is like one kit, but, we're gonna build other kits in different styles. And kits are all almost like their own micro version of Tailwind Plus, particularly the sort of the marketing side of things because that's where we're focused right now. So maybe like we're working on a kit right now that's kind of leaning into this aesthetic that you're seeing a lot with some of these AI companies where the word that's floating around on the internet is like oatmeal, you know, like the cursor website is sort of this light brown. There's a lot of other companies that are doing this sort of look now.

Adam: 05:59

And it looks really good, you know, but it didn't really fit with the original Tailwind UI aesthetic. So we're building a kit that sort of our take on that style. And it might have like four or five different heroes, four or five different feature sections, four or five different pricing sections. And they all work together, but they'll all be in this one style. I think the thing that's cool about the way that we're building this though is we're also building it to be themeable because the other challenge with this whole thing, if you think of Dribbble with code as the concept, and I mentioned this on the last podcast, Dribbble is being contributed to by thousands of people, and this is something we have to build entirely by ourselves.

Adam: 06:49

You know? So how do we match that quantity and that velocity? So what we're doing is we're building these kits in a way that they support sort of like multiple themes or variations on different pieces. So one kit might support multiple color schemes. It might support multiple font combinations.

Adam: 07:11

That's kind of where we're starting right now. But down the road, it might even support other things like changing the overall border radius of things, or the overall size and scale of the typography, or the sort of density of the UI, or maybe like the amount of shadows and stuff like that. And our goal is to build these things where we have like one set of components per kit that are very adaptable and sort of parameterizable in this way. So on like the dribble with code side of things, you know, you can imagine you're browsing and you're looking for hero examples. You might see like five or six heroes that look quite, quite different aesthetically, but very similar structurally.

Adam: 08:02

They'll have like different content, different screenshots, whatever, but they have like the same bones, you know, it's like a headline centered with the sub headline and two calls to action and then a screenshot underneath like that general pattern, but they have different color palettes, different content, different fonts. So they don't look like the same component, the same way that, you know, two differently branded websites don't look the same, even though they might use that same hero pattern. But under the hood, we built those with like a single component by just sort of changing some internal parameters. That's sort of what we're building right now with the hopes that we can sort of have a one to many relationship between the components we build and sort of the output of those components. So we can fill up this directory with interesting ideas in sort of a realistic sustainable way with our team size.

Adam: 09:04

And it's actually been like a really fun fun challenge. Because like we're also trying to build these kits in a way where they're not just copy and pastable static HTML snippets. We're building them as there's gonna be an HTML version that is more static by definition because that's what HTML is, that there's nothing else we can do there. But we're also building like a React version that are true components with APIs where, you know, you can actually compose things together and change details about them and stuff like that, which is sort of like a fun challenge because I don't think people build marketing sites that way that often, at least like we have it, you know, Like we we when we build our own landing pages and stuff for our own projects, we don't make things like hyper reusable and componentized because it just feels a little bit different than an application UI. And because, like, we're just building exactly what we need, throwing it up, and then you're sort of done with it.

Adam: 10:18

But building it as a kit, it's actually fun because when we build like a a pricing section, you know, maybe it supports between two and five plans and you pass the plans and as children, the layout automatically adapts based on the number that you're passing in or you have like a hero that has a headline, but it also has a little eyebrow above the headline, but the eyebrow is, optional. And if it's not there, then the padding around the headline to accommodate the eyebrow goes away. You know, it's it's just like it's it's really cool what we're doing with it in my opinion because the further we get with it, the nicer these APIs feel. And it's almost like you've got this like, I mean, this is what React always feels like when you have a good set of primitives, but it's like you get to build these marketing pages without thinking about tailwind classes. You're just thinking about sort of the elements in the blocks and kind of composing things together the way that you need.

Adam: 11:20

And everything just like automatically looks good, because it's designed to just work. So we're having sort of a lot of fun doing that and figuring out how theming works. I played a little bit with like semantic design tokens for a while and then eventually abandoned that and found a way to do it with literal design tokens without what am I trying to say? Like, lot of people will try to build things with like a a text primary or BG secondary or whatever. And I think that makes sense for things that need to be sort of themeable by the end user.

Adam: 12:02

But if you're just building a site for yourself where it's just gonna have one theme, I find that that like layer of indirection feels like not helpful. And it gets tricky because a lot of time, like, a color just doesn't actually work the way that you want in a certain situation. Now you have to come up with yet another semantic token name. So we had to come up with a system for theming where I want the output to still just say, like, BG gray 200 or whatever, but support different things. So we're building, like, the sort of internal system that can kind of like compile our components and inline the values of theming functions that we're building.

Adam: 12:46

And then we run like prettier on the whole thing and it gets all cleaned up. But yeah, it's been, it's been very fun And looking at sort of like the the code that the user authors at the end of the day to build like a landing page with this stuff, it's very clean, you know? And there's all the sort of, like, quirky details about getting the layout right or stuff like that just just fades away into these sort of internal components. And everything on a high level is just these nice building blocks. So I'm having fun, building that.

Adam: 13:27

And this whole idea of, like, a single component that can produce multiple components. I don't know. It's it's making me think that there's there's more ambitious things that we can do there. So this is where I'm really going to share some, early ideas that I hope no one goes and rips off from us before we get a chance to really dig into it. But, I'll start by saying, for a long time, have suggested to us that we build like a WYSIWYG page builder thing with Jailwind.

Adam: 14:05

And I for I mean, I can explain why, but I've always kind of like it's always not resonated with me because I've always felt like it's fun to build those types of things. But as a developer, I don't think it's the type of thing I wanna use. Like, I'd rather write something in markdown than use a rich text editor. And I think with developers building websites, like they like code, they like to type code, they like to work with the code and refactor the code and rearrange the code. So giving them a WYSIWYG thing is like taking away the thing that they like, you know, which is the code.

Adam: 14:44

So it's always kind of felt to me like a fun solution, without a problem. I I at least if the people you're targeting is developers who like using Tailwind. And I think that's who we should build things for because that's our audience. That's who we have distribution with. Like we could build a WYSIWYG tailwind builder thing for marketers or something.

Adam: 15:06

But the thing is, marketers don't even give a shit if the output is tailwind code because they're not gonna touch the code or look at the code anyways. So it feels like a weird fit. But when we were exploring this whole one to many component generation thing, and these like sort of really flexible parameterizable components. We started prototyping a way to work with them visually. And I was very surprised at how much I enjoyed working with it.

Adam: 15:45

So let me sort of give you an example. Imagine you have like sort of a framer like or experience where you've got your kind of classic like Photoshop, Figma, know, all these tools. They've got like a layer list on their left and a properties panel on the right and like a canvas in the middle. And you're trying to build a website and you know you wanna pick a hero for the top. So you have the ability to browse just like you would in like ten one plus and find a hero that you like and bring it in.

Adam: 16:20

And now that's the start of your page. But, maybe you wanna change the color palette. And you can look through some color palette options that we've sort of curated and change the colors. Look through some font options that we've curated and change the font. And that's cool.

Adam: 16:37

But now, like, you need to be able to change the content. And maybe you also and this is where, like, the most magical moment for me was, and it sounds so simple, but it really felt cool. Maybe there's like a detail, like a subcomponent that you wanna swap out. So for example, say this hero has like two call to action buttons, like a, you know, start free trial or contact sales, like two buttons next to each other after the headline. But you're building a landing page for something that you haven't even released yet, and you actually just wanna collect like email signups.

Adam: 17:12

So instead of having to find a hero example that already has a newsletter signup in it, almost just fell in the snow. You would just pick the hero that you liked and then click that section where the two CTAs are. And now you can actually look through different options of things that you could put there instead. So maybe there is a newsletter sign up form that you can swap it out with, and that's kind of what we prototyped. And then I have to say like the ability to pick this hero and then click that section and swap it out with a different type of CTA, in this case, like a little form, it just felt like it was sort of a eureka moment for me.

Adam: 17:54

Was this magical experience where it just felt like, man, I didn't think I wanted like a WYSIWYG editor, but I actually love this. You know? This feels like so fast to sort of put together what's in my head or explore different ideas. Certainly feels faster than code. And then at the end of the day, you'd be able to sort of export this project and do anything else that you wanted to do with it in code.

Adam: 18:26

So that idea, we've only just barely prototyped some early interactions. And the stuff that we're working on now sort of feels like the precursor to it, which is building up this big directory of sort of primitives and components that we can use to sort of power this experience. But I'm really excited about sort of both these things because I think this first side of it is just gonna make Tailwind Plus a better product or at least make it appeal to people it didn't appeal to before. But the second thing is just this, like, really exciting set of interactions that I didn't I didn't really think I was gonna be excited about. So I think like I had sort of a eureka moment on the weekend that helps me understand why I'm excited about it.

Adam: 19:16

And I think the problem that I've the problem in the past for me has been, I've always framed it in my head is like, this is a tool that you use instead of writing code. Right? It's a WYSIWYG tool that you use to put together a page instead of building it in your editor. And that feels like that rubs me the wrong way as a developer. I like the programming part.

Adam: 19:40

Where it clicked for me is when I reframed it to myself, it's not a WYSIWYG thing for code. It's a design tool for developers. So as a developer, if you are trying to build something in Figma, it's not the most fun experience in my experience because most developers aren't skilled designers and you're starting with this blank canvas and you have to build every single thing from these tiny, you know, rectangles and text. And when you're picking the color, you're picking from like the whole color wheel. You're not just like picking BG red 500 like you are in Tailwind.

Adam: 20:22

Like most developers can decide whether they wanna use blue 500 or blue 600 for their button, but they can't decide if they wanna use zero one one c d e for their button versus zero one two A, you know, E seven or whatever other hex code, you know, that's like a different shade of blue. Like the the level of fine grained tweaking is just like, it's too much, it's overwhelming. Like there's too many bad outcomes for every good outcome. But if you could build a design tool that was a lot more constrained where, yeah. You're picking like, okay, what's the layout that I want for my hero?

Adam: 21:07

I'm not like drawing rectangles and putting everything together from scratch. I'm literally picking from UI patterns and then picking from a set of fonts that has been sort of approved by the Tailwind team because that's another thing. Right? If you go to dafont.com as a developer, you have no fucking idea what fonts are good and what fonts are bad. At least I don't.

Adam: 21:30

I mean, I think I've gotten a lot better than it used to be, but I can still empathize with this feeling of looking through a list of 200,000 fonts and not really having like any internal sense of like which ones are actually high quality or low quality, which ones are gonna work well and which ones aren't. Similar to the colors thing, you know? So if we can provide people with font recommendations and color palettes and this and the fucking ironic thing is refactoring UI, which we released in 2018. Some of like the core value that that provided was in these bonuses where we had like a big color palettes guide that was full of curated color palettes and a font recommendations guide, which was full of fonts. That means that you've picked that we recommend to people so that you don't have to like pick through all these thousands of fonts on the internet.

Adam: 22:24

But imagine like, yeah, you had this, again, framing it in your head is like, this is a design tool. It's not like a code replacement. And you can build the page that you want by swapping out different components and elements. And maybe by default, this hero has like rounded corners on the buttons, but you want them to be like pill style buttons. So you can change the button style, but you don't have to like build the pill style button necessarily.

Adam: 22:52

We've sort of got like the perfect one already built behind the scenes, you know? So that's like kind of like what I'm really excited to explore. Like there's there's a lot more things we can do with that. There's a lot of things we can do with like asset generation, especially with AI now. Like we could generate cool gradient backgrounds or we could build shaders.

Adam: 23:20

There's just just like all sorts of stuff you can do. You could especially with like Nano Banana Pro now because it's so good at text, you could generate cool little like illustrations and diagrams and stuff like that for people's UIs. And we could sort of fine tune the prompts to produce good output and then sort of layer that in with what you're requesting to make sure that you're getting consistent output. So you don't have to figure out how to prompt these things necessarily. So, I mean, that's like an interesting way to incorporate AI into it, but that's not to say that the primary goal of the tool is to generate images.

Adam: 24:00

It's just a piece of designing a website. Like if I just sit back and think like, are the things that developers struggle with when they're trying to make a website look good? Illustrations and graphics and stuff like that is a big part of it because that's just the thing that they don't feel like they can produce. And that's still me to this day, although AI has helped a lot there. But the other cool thing is if you build this whole sort of engine that's using all these components internally that are very tweakable and have all these different options and parameters and stuff like that, then I'm really curious to see like what happens when you ask an LLM to build a website with that set of tools instead of with raw code.

Adam: 24:50

Because now you don't have to worry about the LLM making a shitty button or shitty nav bar because it just like goes to the directory to get the button, it goes to the directory to get the nav bar. And it's just filling in slots and the components. So if it picks a hero, the hero has TypeScript types that explain all the props, what they're for with hints about what type of content to put in there. And then the LLM can fill all that stuff in. And that combined with the LLM's ability to generate content and write copy and stuff for you.

Adam: 25:28

I don't know. I just think it'll be really interesting to just let the LLM run wild with this engine and see what websites it produces. And we're getting close to that point even with our current kits because the kits the kits are actually sort of like the raw materials for sort of the design tool experience. So we're getting close to a point where we're gonna be able to sort of let the LLM run wild with these components see what it builds. But anyways, I'm curious what people think.

Adam: 25:58

This is where my head's at right now and what I'm kind of excited about. I think what I've always wanted to be working on is things that I would use myself, right? That's why I've always loved working on Tailwind. That's why I've always loved working on Headless UI. They're like products that I use that I'm excited about.

Adam: 26:23

And as much as I believe in like Tailwind UI and Tailwind Plus as a quality product, I will admit that like I probably like wouldn't use it and it's not because it's bad, it's because there's a couple of reasons. One, like me and Steve worked together on everything and he's a brilliant designer and he's like my business partner. So I would have him design things just for me that nobody else has because I want my stuff to be unique, know, because I take pride in that. But I think that's true for a lot of people, you know? So no matter how good like a templated thing is, I think there's just like kinda this like bummer feeling of using a template versus having something that's your own.

Adam: 27:13

And it's hard for a product that makes website templates to sort of get around that objection, I think. But then I think the other thing aside from just things looking more unique is I think a lot of people just wanna be able to take pride in feeling like they made this, you know, not I just like took it off the shelf and threw my content in, you know. If someone came up to you and said, man, like your website looks awesome. Like, you wanna be able to feel proud of that and say, thanks, man. Yeah.

Adam: 27:52

This is how I did it. Instead of feel instead of feeling like, oh, if only he knew I just grabbed this template off the shelf. I don't deserve any credit for this. You know, people wanna be able to they wanna feel like they deserve credit for the things, that they sort of make. And I feel like it's hard to build like a template product that achieves that.

Adam: 28:17

There's a lot of other products out there. Like an example I bring up a lot is Screen Studio. It's like a simple Mac app for recording screen recordings, but it handles stuff like zooming in and panning around and zooming into like the camera when you're talking and not moving stuff on the screen. And it gives you like just enough control to feel like you're really crafting these little marketing videos. But if you think about it hard enough, like so many of the hard design details were done for you.

Adam: 28:51

Like you didn't have to sort of understand when to apply motion blur. You didn't need to understand which easing curves to use to make the transitions and stuff look good. You just sort of like used what was built in and it looked awesome. But at the end of the day, they still give you like enough control to feel like you can take pride in what you've created and to feel like you created it. And you didn't just like use some off the shelf asset.

Adam: 29:25

And I think that's the feeling that I wanna give developers who are building things with Tailwind. And I think Tailwind itself actually does a pretty good job at giving people that sort of feeling, but I wanna go further with it with like really nice web design stuff and just see like, can we build, call this the H1, the design tool for developers. That to me is like a super exciting mission and it's ambitious, but I there's a lot of untapped potential there. And I think, I don't know, I think we're positioned to do that well. And I think we have the right audience for it.

Adam: 30:12

And I think it's a natural evolution of everything we've done with Refactoring UI being teaching design to developers, Tailwind being making it easier to build designs for developers. And, hopefully now exploring a tool that helps developers feel like they can call themselves designers. You know, that's really the magic moment is how can we build a tool that makes you feel like you did this thing? And I've been saying this internally to our team for years about all those stuff that we've been doing. And Evergyer really had a good answer for it.

Adam: 30:52

And it sounds so simple now with just that one little headline, but it's such a clarifying thing for me. And I don't know, I'm waking up early excited about it. And I think there's a lot of things that we can do there. And yeah, I'm just excited to get into it and see what we can what we can make. So anyways, that's what we're doing.

Adam: 31:17

That's what we're working on. I'm sure there's a lot of interesting details I forgot to share. But I'll be doing more of these things and we'll be sharing stuff online and demos and screenshots and whatever soon. If you are curious about more inside scoop stuff like this, I do share more of these sorts of things in our sort of tailwind insiders discord, where I can trust people not to spill the beans too much in different places with things. So if you love tailwind and you want more access to some of these previews of things, check out our sort of insiders program.

Adam: 31:52

You can hang out with us in our Discord and share some cool stuff there. But anyways, that's what's on my mind. That's what I'm excited about right now. Just getting home from walking the dogs and I gotta get the kids ready for school, try to survive that chaos, and then sit down at my peaceful desk and shut the door and start programming.