Loading summary
Transcript114 lines
- [00:00]
A
If I am primarily designing something like, it makes all the sense in the world to me to own the front end. Of course, if I'm the one designing it, why wouldn't I own it? I want to play the songs that I write.
- [00:11]
B
Welcome to Dive Club. My name is Rid. And this is where designers never stop learning. This week's episode is with Kyle Zantos, who's officially the first person to have three guest appearances on Dive Club. And the reason that I keep inviting him on is it feels like every month or two, AI Totally transforms the design process. Process. So today, Kyle and I are going to play a little bit of ping pong and share some of the new workflows that we've been experimenting and having success with. I think this ended up being one of the most practical episodes on the channel. So hopefully you have a few specific tactics that you can run with and start incorporating into your own practice. So, without further ado, let's dive in.
- [00:55]
A
All right, so the first thing that I have pulled up here is an HTML artifact, which I know you've been working with a lot too, lately, but, yeah, I don't know, maybe six weeks ago, eight weeks ago or something. I think the first thing I saw about it was Tariq from Claude Code from Anthropic, mentioning that he was using HTML artifacts way more than just straight MD for everything. And I was like, oh, that's really interesting. And truthfully, I just. I hadn't dealt with straight standalone HTML docs before. And so I. I was real. As I started investigating more and more like, what can I do with this? My agents started to do stuff that I didn't asked them to do. And I was like, no way you can do that. That's sick. So where that led to is what I've been doing lately is making these HTML artifacts that are conversation artifacts with my agents, kind of. So in this case, with my portfolio, and this is a flow, I've been doing a lot more lately, I chained together a few skills. So in this case, I did a couple different ones of Emil Kowalski's skills. He's been putting out a bunch lately that are really cool and work really well. And then I added, I think, one from Jakob Creel. I'm probably not saying his last name correctly. Sorry, Jakob. What I'm telling the agent is do an audit in this case on my portfolio with these three skills, and I name all of them. You act. And I'm starting in this case with Fable, you act as the orchestrator and the like, quality control. Reviewer and Send out Opus 4.8 sub agents to execute these audits. As each skill does it like compile the results, but at the end of it, compile it all, remove the duplicates, and then present me an HTML doc that has all the proposed changes and then options for me to approve, deny or discuss them. And then have a way at the bottom to copy all of what I put in here and just paste it right back into my session with Claude.
- [02:52]
B
This is sick. I do something similar, only just way less cool. This is really awesome.
- [02:58]
A
What's so cool too that this example doesn't have it. Because this is more on static, like visual design stuff. But when I do it with motion, I'll do the same thing, but I'll have it give me the current version and the animation of it and then the proposed version in the animation. And so that especially as you're like building more of the descriptive vocabulary around animation and stuff, it becomes so helpful to look at, at the propositions visually and, and, and then and be like, oh, no, not that, that's terrible, I hate that. Or just like, yes, but add this other thing or, or I really like what you did in number two on like number six. That's in a totally different area of the app or the site or whatever that I'm working on. But grab the technique that we used in, in the second point of this doc. So just visualizing everything from your agents has been huge.
- [03:48]
B
Okay, quick question. So I see like part of it is code block, there's screenshots. Presumably these are all just screenshots.
- [03:56]
A
Right.
- [03:56]
B
And so the animation then is. It's actually like building the success and rendering that there. So is dynamically rendering a visual of any type of format just based off of what it thinks you want to accomplish or the best way to review it.
- [04:10]
A
Yeah, basically the best way to like what I'm always telling it is giving me the closest possible representation of the real thing. It's okay, like, especially, you know, we were talking about this, we've been doing some work in Swift and Mac OS native and stuff, and that is like not going to be identical, but my directive is always give me the closest possible representation of the thing so that when I say, yeah, that's a good idea, implement that, I'm doing it from a not best guess, but like, I can tell that this is the direction we want to do. And if there's a little bit of fine tuning after that, then it's just an easy like dial kit thing to like, oh, throw those parameters in there so I can tweak it just exactly how I want.
- [04:51]
B
And so then I'm presuming there's just a big copy button at the bottom and it's just taking in all oh my gosh, look at this.
- [04:56]
A
Look how many there are.
- [04:57]
B
Oh my gosh.
- [05:00]
A
I mean it's amazing because yeah, like look. Okay, here we go. This list is actually pretty reasonable like coming out of it because it has all of the context since it built this and has this file. So that's what's great about it too is that I actually paste back something not nearly as huge as looking through that whole list.
- [05:16]
B
Just the answer list, whatever. Yeah, typed up.
- [05:18]
A
Okay. Yeah, but it's like man, like look at how many things I was able to address in one autonomous run. I set this prompt up from the beginning and then did nothing and just came back an hour later and had this whole thing to approve, deny or discuss.
- [05:36]
B
Real quick message. And then we can jump back into it. So Framer just had its largest product release since I started using it. It's called Framer AI agents. They've been making a ton of improvements since launch and the one that I'm personal most excited about is it uses way less tokens now, especially on larger multi step builds. So this gives you more room to create and refine your work within the same budget, which I'm already getting a ton of benefits from while I explore a lot of out there ideas for the upcoming Dive website. Building pro websites with Framer is more fun and more efficient than it has ever been. I'm completely obsessed with their latest version and if you head to Dive Club Framer, you can get 30% off framer pro to join me and start building today. So Figma added motion to their stack, but I'll be honest, I'm having a hard time leaving a tool like Jitter. It's just so, so simple because it does one thing really well. But it's also super powerful compared to Figma too. Like you can spin up hundreds of on brand variants from a single asset or generate a whole CSV worth of videos or maybe even design your own custom text effects. There's so much to it and yet it's one of the most intuitive products in my entire stack hands down. So if you haven't used Jitter yet, I cannot recommend it enough. Just head to Dive Club Jitter to get started. Now onto the episode. I'm excited to use this for animations, man. I also use a meal skill pretty frequently and sometimes it'll Change something. And I'll be like, I think I understood what it changed, but I'm not sure. And then it's like, it'll just type it out in text. I'm like, it's not a great way to understand what changed about an animation is just like the bullet point that Cloud would give you a before and after. That's what I want, right? Like, the before and after is what I want.
- [07:25]
A
The before and after is huge. Especially, especially with animation stuff. While I'm still, again, like, I'm still learning the vocabulary for all of that. And so if you're like a much more experienced design engineer and do a lot more with motion, maybe seeing it in text is enough. And you're like, I know exactly. You know, if you're really accomplished, like, I know exactly what you're talking about. I don't have to imagine it, I get it. And yes, that's what I want. But if you're still getting used to all this stuff and still kind of transition that world, I get the vaguest sense from Claude's description, especially these days. So, yeah, seeing the before and after is like, massive.
- [07:58]
B
You know what it makes me want to build now? Like, I have this picture in my head where you could have the before and after of the animation, but then you have a single scrubber underneath it which has the full easing curve. So maybe it's over like a thousand milliseconds, but then you see how they compare. Did you build that?
- [08:12]
A
That? Claude has literally done that for me sometimes, even without me asking. Yeah, it's. It's been on like apps that I've worked on that already had Dial Kit in it. So I think while it's making it kind of references it or something is like, oh, I'll actually just throw in some sliders in there for you to like. When I say, like, I'm, I'm still in kind of the fine tuning stage, trying to find exactly where it is. At times, it is intuited, oh, it might be nice if you had some sliders in there to like really do the small tweaks.
- [08:40]
B
That's.
- [08:40]
A
So this is the kind of stuff that's like. I mean, now as I hear myself saying this, I'm like, I need to turn, like, I have this as like a slash command, slash skill. But the animation versions, especially with the sliders and the dial part of it, I need to, I need to ratify that into a skill because it is, it is really nice.
- [08:57]
B
You were talking about the moment where you first discovered HTML And I remember seeing that tweet, too. It didn't register in my brain. Like, it didn't just. I didn't get it at first. I'll be honest.
- [09:07]
A
I didn't get it.
- [09:08]
B
And then you started sending me stuff, and you're like, hey, man, I think this is actually going to start swallowing how I'm doing some of my prototyping. And I'm like, what are you talking about? And then I started trying it, and this was months ago. Like, you were early on. I will give it to you. You were quite early, and it's addicting. And I actually feel like one of the big opportunities for designers right now is to think about how you can use HTML strategically in your workflow, because you can do anything. I'll share a few of the things that I've been working on recently. Slightly more kind of more rudimentary examples, progressing down into things that I think are slightly more novel, although we should have went in the opposite order because your use case is sick and I'm not gonna be able to top that. But I think, like, the most basic thing that I started doing with HTML, that is, I feel like everybody's stepping stone is tell Claude I'm working on this component. Here's what I'm trying to accomplish. Like, let me prototype it four ways, right? So I was working on this code diff view, for instance, on a Mac app, and it's like, you know, just. Just show me different things related to the hierarchy. Pretty easy. And then you can just go back to Claude and be like, I really like layout number two. And by the way, I'm dictating all of this. So I'll just focus my cursor inside a conductor and I'll just start talking while I click around and play with it. And I might say, I really like layout, too, but yada, yada, yada, yada, change this, change that, and then show me four more. And I'll do that until I get to the point where it's good.
- [10:29]
A
So you're like, free forming your feedback as opposed to, like, mine. That's, like, very, like, segmented. Like a test almost.
- [10:37]
B
I've done yours. I have an example that looks more like yours, but when it's more exploratory stuff, I'm very much so just treating this as a visual that I can then talk over. There are different ways to do that. So, like, this one is another thing that I was doing.
- [10:50]
A
Doing.
- [10:50]
B
I had this commit chart, and I wanted it to feel like a fidget spinner. I have no language for what it could be. Frankly, I didn't want to spend that much time on it. Like this was literally just a little quick add on thing. So I was like, just give me a bunch of different effects and what they might look like and you pretty quickly realize like, okay, like I hate this ripple one. But I was like, okay, disperse is interesting. And then you zoom in on that and be like, okay, let's just show that six different ways. And I shipped a really fun little fidget spinner that you wouldn't even know it's in the UI unless you accidentally hover over it. And then it's like, oh, sick. I shipped that in about five minutes based off of three rounds of HTML prototypes. And then it was just in prod. So this is another example where it's like when you have to feel something, it's a really good way to just feel something. A million different directions. I was previously doing that in like static design tools. It's good for conceptual ideas, but when you have to feel it, it just doesn't cut it. But for HTML, you, you can dial it in and then when you get it there, you're just like, okay, build that. And it's good.
- [11:52]
A
I mean, and it's pretty cheap for the agents to make them too, like so fast. We're still using paper and stuff like that when we're on bigger surface area kind of things. But yeah, when there's motion and, and I need to feel it, prototyping it in HTML is just the speed and, and like low token cost relatively is huge.
- [12:12]
B
Here's where I start to play around with different formats. So I was like, okay, what if it's not actually about creating something? Help me understand an API. It's like I was building on top of the GitHub API. Yeah, I've never built on top of the GitHub API. I have a very rudimentary idea of what is possible. The obvious stuff, branch information. But I was like, there's probably a lot in there that I don't know. So I was like, just create me something I can scroll through and just look at all of the different things that I could, I could pull from and it would break them into categories for me. Checks and mergeability. And it showed me like all of the different individual components that I might be able to create from it. Or like the size in the shape of something. Okay, how would you want to. Oh cool. You could break it down by language. I didn't even think about that. You know, and the Same kind of thing. I just start dictating and I just talked through everything that was interesting to me about the GitHub API rendered visually and then it helped me in. I mean think about like this would just be a conversation and have to have with a developer like in years past. I'd be like, hey man, can we schedule a meeting and talk about the GitHub API and what. How that should inform the US and
- [13:14]
A
you're trying to furiously write notes while they just brain dump on you.
- [13:18]
B
Totally, totally. And now it's like I know I just created like this visual playground for myself and it worked amazing.
- [13:26]
A
Yeah, doing it from the education side is, is really cool. I. I made something kind of like this several months back. Someone sent me an article basically, I guess it was an article that had, you know, 12 chapters or something and I hated the way that the site itself was formatted to read. And so I just made like a repackaging skill that basically does like what you did of like. I hate how this is. What I like is a lot of space and just a like almost slide level. I can digest everything in just these bites like exactly that you. The way you have here. I've only used it a few times since, but the style of just like I want to consume information differently than it's presented to me via just cheap HTML documents is the best.
- [14:10]
B
I'll show you one other that I thought was pretty cool, which is inspired by Rafael Shot, who was the founder of Cron and that was acquired by Notion. And I interviewed him like two years ago and he said something about how he had a FIGMA file where he put every single toast dialogue, air notification, every single thing that the system would say. And he had a single file where he would look at all of them together and like write the copy and make sure that they were all good. And I was so inspired by that because it was always an afterthought. It was always a thing that I let slip through the cracks. A lot of manual work to do that in figma, but my God, you can one shot that in Claude and it's perfect. Just give me every system dialogue and so I can now see it, but I can type.
- [14:52]
A
That's what I was going to ask you. I was unsure of this one. You're like, I still just talk through it. And I was like, I hope you added inline editing.
- [14:58]
B
It's so great. Think about how cool this would be for like a content team too. Like this might not even be my job. You could build a UX Writing ecosystem, send that off to the team and they just do it and then you get a prompt back.
- [15:12]
A
I had no idea how much standalone HTML documents could do. That was just a complete blind spot for me as a designer turned builder.
- [15:20]
B
Same. We're talking like a few months ago, actually. Time's going pretty fast. You were early, maybe it's six months ago by now. I've had the exact same journey where I was like, what do you mean? I can use HTML? Oh, cool. I can just make quick mockups. But then you realize, no, you can literally do anything and build any type of tool quickly.
- [15:39]
A
It's been huge. I'm sure there's going to be that many more like, examples of this that hopefully people that watch this come up with their own unique use cases for this.
- [15:47]
B
You should send it to us on Twitter because it's hard to think of them sometimes.
- [15:51]
A
Yeah, I mean, in almost all of it. Like, I think in both of our examples, we always stumble upon these processes and tooling and workflows and all that stuff. Not from whole cloth, just like sitting back in a chair and just like imagining what we might be able to do. Like, it's always solving parts of our own process or things we're trying to accomplish, which is the best way for us and for most people. So, yeah, I'm sure there's other people with different contexts that will find really interesting use cases for this that I'd love to see.
- [16:18]
B
Well, you were quite early in the design community on the HTML front. I'm wondering if there are other things that you're thinking about, like, what are you early on and tinkering with now that I'll be playing with a couple of months from now.
- [16:28]
A
This is an app that's in beta made by the folks at the Internet Development Studio in Pike Place, Seattle. So a guy named Jimmy Lee owns it and runs it with some partners and I've been working out of there almost last month or so, which has been great. Like, it's a co working space, but everybody, you know, there's folks from Blue sky there, there's folks from Vercel and Anthropic and a bunch of other stuff along with the people actually from intev, there's a bunch of solo builders and people at these companies. Everyone's working on their own things, but everyone's working in the web and app development space. So it's been really great. But I, because of that, was turned on to this, this tool called Terminal Graph that Kaden Williams is the main dev on. But it's essentially like a big graph that you can put anything on here. Dev related. So terminals, notes, browser, Windows, file editor, image viewer, video player. It has all kinds of stuff that are basically like exposing a lot of dev native surfaces, but instead of it just being like behind a terminal, also tons of terminals and everything. But this allows you to see everything. What I wanted to get going was a process that I could repeat where whenever I'm looking for variations from like a whole new design direction on something, maybe it's a brand new app. In this case, I'm redesigning the NFL pick' em app that I made for my friends that we used last year. But I want like a completely fresh UI and I'm making it native too. So I'm starting from scratch in some ways. And so I have a really. I don't have anything specific in mind visually, so I'm using this as the test case. But basically whenever I want variations, what I've been finding is that I'm. I've just kind of gotten tired of come up with five variations and maybe use this skill to do it. And maybe those start to become kind of predictable. And I've kind of seen the patterns enough times and it's not giving me anything inspiring or refined enough. Like there's too much obvious. Like you shouldn't have even shown that to me. There's too. There's too many errors on this or too many things I'd have to correct to even have a good conversation about what I like and what I don't like. This process is kind of trying to help refine the outputs from an autonomous loop. So basically what this is, this is my regular terminal that has CLAUDE up and there's an MCP and CLI within terminal graph that it uses. This is like a visual layout of the brief that we have for making these revisions for making these variations and the different skills that it's going to invoke along the way. It's not connecting to these nodes, you'll see the connectors over here, but it's for me to be able to see visually. But basically what it does is when I trigger the build from here, it goes and sends the general prompt through this whole pipeline. So I'm getting five variations with totally different styles to them. And then it's going through audits using particular skills that we've identified to use. Then it puts the review into a doc here and then it goes to the next run. So the agent sees the review, makes adjustments, corrections, refinements, whatever based on the last review that was done by an independent subagent edits things on the second version, and then the same thing happens again and gets through to the third version. So what you're seeing right now is still this is a very, like, work in progress pipeline. Because now what I have to do is basically find where in this process. It feels like it's not making enough difference that I want, like between here and here. There's some changes that you see. It's not a ton, but I think I'd like better refinement between those. But I know where I can go in here to affect those changes. Like here you see this hint text. Anything written here, I can add any kind of instruction or double check prompt. Prompt or whatever in here. And that will then get injected into this part to create the third version or tell it to actually review with this skill, actually do another pass invoking this other visual skill that tends to, you know, produce more varied results or refines it more from this specific lens or whatever it is. What will come out of this is a blueprint that I can use for any project that I'm working on that I want ideation. But the whole point is I set a process in motion to get variations and stuff. By the time it says I'm done, what I'm looking at at the end has a lot more of the things that normally I'm waiting for round one to happen. Then I say, fix this, fix this. I didn't want to keep telling it to fix stuff like you would tell, like an intern, let's hit the bar of solid. And then I'm working from what I like and don't like. Not just like, this is an obvious poor visual design decision.
- [21:30]
B
I was feeling this actually doing the backyard designers thing. Like, there was the evaluation loop that happened whenever I would create an image and you could see Codex do it, where it, like, create images and then had a separate reviewer and come in and be like, no, it's. You know, it doesn't hit here or. And then it would take like three and then pick one and why. And it was really interesting to watch. It kind of was leading me to similar places where I'm like, man, I want this for my UI output too. Because I'm doing the same thing all the time. It's helpful, it's net helpful. But I'm doing a lot of granular. Like, come on. Really? Like, why did we do that again, where it does feel like, with the proper. I mean, what you have almost is like a little visual eval. Loop.
- [22:12]
A
Yeah, exactly. Yep.
- [22:13]
B
Yeah, that's kind of cool. That's kind of cool. It's still a little bit daunting to see all of this. So like, I'm glad, I'm glad you're showing the node based stuff because I'm very green on node based. I just, just, I haven't quite figured out like, how it fits and where it fits and when I would use it. So talk to me a little bit about when you think you might reach for something like this. And then also what did it actually take to set up? Like, where are you actually spending the time to create something like this?
- [22:35]
A
Ideating the same way that we always do. So the good news is I didn't do any of this. I did not manually create any of this stuff. All I did was talk into this terminal and the MCP and the cli. So it communicates to the CLI and then does the manipulations through the mcp. It can create all of this stuff. And then once it created everything, then I was just like, okay, just arrange it in a way that visually is stacked, you know, 1, 2, 3, 4, 5 in a horizontal pipeline so that I can just see the flow. So from a setup standpoint, I was not super, super prescriptive and granular about what nodes to connect to, where, which, like tools and windows to put in in which spots. I still did the same thing that we've always been doing, which is just like voice dump. What do I want and why do I want it? Which is basically what I was describing to you, which is like, I'm tired of telling Claude to do dumb little edits on, on variations for me to actually be in a place of, okay, now I can assess the idea and not have to like, either tell you to fix these 10 things before it even feels like I can really assess it or just having to imagine that or whatever. So I told it the outcome that I wanted. I gave it the Doc site from Terminal Graph. I had the MCP and the CLI plugged in already and it did everything else. So the good news is like your intimidation factor of like, ah, nodes. And like all that is like, oh no, this, this is kind of like you having your agents visualize what the API is in a different way that makes it like, understandable to you. While all these little things, like, I don't quite understand exactly how every pipeline is interconnected in every node, every connector and stuff, but I can pretty easily visually understand where in the process. And that's why I have all these browser Nodes showing the HTML of v1, v2, v3. Because then instead of having the black box of like I told you to go through all these iterations, Now I see V3, but I don't know what happened along the way. And seeing it visually like this, especially while I'm developing this pipeline, lets me find like man, review between one and two. The review is too weak. I need to have it do like a three layer review process before it goes into steps two and three because it's just not catching enough stuff.
- [25:06]
B
Yeah, it's interesting. I had definitely put most of the node based use cases in more of the visual brand marketing kind of thing connecting tools, but hadn't considered this use case. And it's something that I do every single day where it does kind of feel like if you get the system dialed in once, you can just use it all the time. And I would use something like this. So maybe you are early on this. Maybe this is another one of those HTML moments for me where I'm like, doesn't quite make sense. Again, I kind of get it now
- [25:36]
A
that you can just tell your agent what you want to accomplish and then say like do it through the terminal graph tools. And here's the Doc site. There is no barrier for entry of like you need to learn how to connect nodes. You, you don't. You, you just, you just tell the agent and the documentation and, and the CLI and MCP are powerful enough to do this for you. And then whatever you want to iterate on, you know, you, you just go back to your main terminal. But that's also like, then you can say build in checkpoints for me to put feedback of. Inject this also into the baked in prompt that's between V2 and V3. Also take my directions into account that I drop in here. So again there's just like more and more I feel like I'm just thinking differently of like yeah, it's like an eval. It's like a visual eval that us not being in the code, we can make more complex tooling and flows like this and autonomous runs that we still get to manifest and tweak and control. Basically the same way that we're used to.
- [26:41]
B
On the topic of kind of just rambling and dumping with our voice and making things happen. Can I share a workflow that I've been doing a lot more over the last few weeks?
- [26:48]
A
Yes, please.
- [26:49]
B
Okay. So do you supercut for video? What I remember them launching months ago was their mcp, but I didn't quite understand how it would fit into my workflow. I've started using it recently and it's kind of awesome. So the TLDR basically is that Supercut is just a better loom.
- [27:03]
A
Right.
- [27:04]
B
But they have an MCP that does a really good job of mirroring your transcript to the individual frames and then making it so that Claude can parse that. And so I'm giving a lot more of my feedback that previously maybe I would have done in something like agentation. I'm just doing it via video where I'll have Claude generate something and then I'll just ramble in a video sometimes for like six, seven minutes. I'll just dump it with like 15. Especially early stage when I'm doing like a new build on something, I'll just give it like 15 pieces of feedback.
- [27:32]
A
Okay, but what's like, what's the accuracy? So good.
- [27:34]
B
Way higher than you would think. Really way higher. We're talking 80, 90%.
- [27:38]
A
That's incredible.
- [27:39]
B
You gotta. You have to try it. Like. Yeah, I wrote it off for so long because I was like, there's no way that this is good. It's actually pretty good. And it's good for different types of things. So I'll show like two use cases. I literally just did this today. I was in Conductor and I really like how Conductor has this inline image thing so you can type and then add more images like this. I love that. And I miss it in all my other tools. And I'm building something in inflight where I want to allow that type of functionality. And previously I would have probably just had like an attach file button and add images like you do in GPT.
- [28:15]
A
Right.
- [28:16]
B
But I want this. And so what I did was I just recorded a supercut that was a minute long of me. Literally. I did the Crop tool and I just showed this component and then I just used it and explained all of the different states and the general UI and like functionality. And then I just pasted it in here and we had a little tiny bug, but. And then Claude just starts building like it says the video's ass was build our editor to be like that quoted too. And it kind of worked like this is. I literally just built this a few hours ago. And it basically one shotted this. I had to tweak the alignment where the chip was like down about 4 pixels, but it even took the supercut style and updated it to match our tertiary buttons, which is exactly what I would have done anyway. And I freaking built like, look at this, man. It just exists. I 1 shotted that from a supercut video.
- [29:17]
A
I think I would have just assumed that it wouldn't, wouldn't be accurate enough, that it wouldn't like pull the feedback from it well enough. Did you need to install any packages or anything? Like, is it using FFMPEG or anything like that?
- [29:29]
B
It's all just through their mcp. It's literally it. So I'll do it for specific stuff like this. But then, you know, what I've started doing is actually channeling back to like how I would work a while ago. I actually have been doing a lot more designs in canvas recently. I don't know, I was doing a lot of greenfield thinking and I kind of, I used a lot less AI for like a few weeks actually. And I just kind of did things the old fashioned way.
- [29:51]
A
How did that feel?
- [29:51]
B
Good? It felt slower, but I still used all of our ideation tactics that we were using. I was spinning up all kinds of HTML prototypes, but the actual designs I mostly did myself. So I got to the point where I was like, okay, I have the core states for this page. I have it all like laid out. It's a little rougher than I would have done in figma, but it's like the same general idea. So. So now my prompt to build something like this would be, hey, Claude, look at the selected frame. So I have the selected frame here. I have some annotations for context. And then I made a supercut of me just talking over the designs like I would for an engineer for like handoff. I'm treating it exactly the same as handoff. I'm just giving it an additional four minutes of context of what I want to accomplish. And then I'm giving it the paper URL so it can get all of the, like the code. I'm giving it the supercut, so it gets all of my context. And then I just say build this. And that's it?
- [30:43]
A
Yeah, that's.
- [30:44]
B
And it crushed.
- [30:45]
A
That's super cool. Especially because it's just like you're giving enough surfaces for the agents to like touch. So through the paper MCP and stuff. Because, you know, you select the frame and then you talk about it, it's giving that identifier to the agent. And so that's, I feel like that's kind of a theme too of a bunch of the things, the tooling and the flows that we're using. We're continuously trying to describe and like put something into the agent's hands, quote unquote, or make it something they can touch. So that the touch identifier of exactly this thing and you can see all the code and what it is that I'm talking about and my talking about it. That combo seems like a theme in a lot of the stuff we've been building.
- [31:25]
B
There's one question that I can't stop asking myself. What if companies applied to talk to you rather than the other way around around. And that question is the foundation for the all new Dive Talent network. And it's working. Like right now I'm helping many of the most exciting startups that I know to hire the designers and builders who listen to this show. So if you're curious what might be out there and if you want to get on my list, or maybe you're even looking for your next design hire, head to Dive Club Talent to join today.
- [31:59]
A
How do you decide when you're going to invest in a personal tool or a helper or utility or something?
- [32:06]
B
I think one line for me is the. Is this a quick HTML thing or anything else? Because I actually spent quite a bit. Like I built this local tool so it kind of looked like a, kind of like a dial kit agentation style, like overlaid on top of your ui. And the whole idea was to create a UI to visualize the different variants that that Claude would build for you. It was exactly what you built, where you could kind of say like, approve this one, discard this one, or tweak this one and then bundle it all up into a prompt. It was awesome. It felt good. It was really, it was a high quality tool. But then you realize, like, I don't even need this. Like I can. It's so much faster to just do it in HTML quickly. And actually this should just be a skill. It's funny, I didn't even. I hadn't thought about that in a long time. Like the very first HTML thing that you showed, I built that as a local widget that would talk to Claude. A really elegant local widget.
- [33:00]
A
I'm sure it was beautiful.
- [33:01]
B
Worthless.
- [33:01]
A
Yeah.
- [33:02]
B
Oh, it was so beautiful. It's could not be more worthless. Yeah, yeah.
- [33:06]
A
There's our. We both have graveyards. I think of a bunch of things like that. But what I like about some of the stuff that you're showing me that it's reminding me of because like, as time goes on, you know, we talk about this with regularity. Like again, are the big tools just gonna absorb this and build this in and make it native anyways? If so, I shouldn't spe time on it. But also what I'VE noticed I've been getting a lot more technical. Like, I mean that's always kind of been like. You and I have been pretty parallel. I think I jumped headfirst into this pool a little bit ahead of you, but only a bit.
- [33:38]
B
Parallel's doing me a lot of credit there.
- [33:41]
A
Close to parallel, but.
- [33:42]
B
But I've been one month behind you and it's been a little speedboat that I've just hitched my rope onto.
- [33:47]
A
Yes. What I like about when I. When I talk to you about what you're doing is that I think you keep reminding me I need to not assume how good it might be or might not be at this thing that I want it to do. Like the video thing. I wouldn't have thought to screen share. Like I would send if we were working on a product together. And like when we were working on the Dive Club OS thing back in the day, we might take a video of ourselves walking through. So here's what I did. I'm not sure about this part. Let me know if you like the way that this is flowing and the output like this, blah, blah, blah. And granted that was less visual, but it's easier to imagine on a visual plane sharing that same thing with an agent of exactly the same thing I would send to a fellow designer or my engineer. Doesn't occur to me nearly as often as I think it should. Which sometimes it's like, yeah, it's not there yet. But that's also been like a thing that I've started taking a list of things I assume that the models are going to be able to do soon, but maybe can't quite that when a new model comes out. I've just started this now. I haven't like. I haven't used it much except for a little bit on Opus 5, but like a. Hey, double check if it can do this now because I. You can feel when it's like we're not far from this being the case and then sometimes it's not even a tool or a feature that anybody calls out. It's just, oh, it can process video quite well.
- [35:13]
B
Now you want to hear a video use case that'll be. Probably blow you away a little bit. Yes, is. So I've been working very closely with the team at Decimals to build the platform that powers the Talent Network. I would share my screen but it's all a bunch of sensitive information. So I can't. So you'll just have to bear with me here. But what I end up doing is I'll do these either reviewing a bunch of people applying or I'll do like a share list. So, you know, later tonight I probably have, I don't know, like eight or nine companies that, that it'll surface people that I should share with them and I'll kind of go through and create like a little list and hit this share button. And the platform is evolving a ton. And so what in the early days this guy Ed would do is he would ask me, hey, can you just make a supercut of you using the product? And sometimes I would do it and he would go through it. But also it like it takes forever to watch, right? So we started doing it less, but then Fable came out and all of a sudden it got really, really good at parsing long videos using that, that Supercut mcp. And so now what I do is when I start this review process, which maybe it'll take me like 40 minutes for a session, I'll record the entire thing on Supercut. And sometimes I'm not even talking at all. Most of the time I'm not talking at all. But every once in a while I'll be like, ah, you know, I, I wish I could do this. Or this isn't quite working the way I thought it would be. It'll pull out all of those automatically turn it into tickets for them, and then also just do a general UX audit based off of watching me use the product to suggest improvements and to enhance my workflow. And the speed that they've been able to ship is increasing so rapidly and everything is kicked off by me just handing the supercut of my last session and then it just starts, which is crazy, man. Like so much of this stuff is going to be happening automatically in the future. I remember Soleil coming on like two years ago to a podcast and I asked him something, some silly question about, you know, what are you thinking about that you think other people are going to have more top of mind, you know, a year from now or whatever. And he just went on this rant about self improving products. And I remember almost checking out halfway in the answer, I'm like, what the hell are you talking about, dude? And he was so spot on. Now in retrospect, like he, he freaking nailed it because what we're doing with decimals is kind of self improving. We just need this one middleman of, hey, just record yourself. But that's not going to be a thing. Yeah, here soon.
- [37:29]
A
Yeah, contract that I'm on now. I literally just today and yesterday building out the same. Here's a 25 minute brain D of changes to be made to a whole component library from the VP of design. Now we need to chop that up into tickets for Jira in the proper format that the company uses for everything. And it did a remarkable job on the first run. I'm like doing some tweaks now, but the layer that in this case isn't quite right, but for other things, the layer of. And also run an audit pass from an agent, like using a skill, just observing the way that I'm using the app, I love that, that, that's super solid.
- [38:10]
B
We're rethinking the inflight onboarding because we're kind of yet again creating just a totally new version of this product. It's probably V5 at this point. I'm excited about this one though. But I was just having a brainstorming session with Fable, which is unbelievable for brainstorming. Like, Fable's crazy. It really, really is good. I was talking through what I thought were constraints, and then it basically like, kind of cut me off. It's like, no, no, no, what do you. You don't actually have to do it that way. Like, you should do it this way instead. The entire onboarding should revolve around a bot created pr. And that's how you. That's where you surface your education and all this stuff. And I'm like, never in a million years would I have considered that because I didn't even know it was possible. It didn't make sense to me. I actually told it, no, we don't need to do that. We can do it this way. The way that I was familiar with that honestly wasn't even that great. And then it brought it back up like two turns later. And it's like, hey, I know you dismissed this, but seriously, like, let's talk about how this would work. Because actually, I think it is a better way to do this. And without even fully understanding it, I had Fable then print a visual explainer of how this, this feature would work in onboarding. Just like a flowchart, simple stuff, technical considerations, endpoints, that kind of a thing. And I had it print it in paper. And then I went to the team meeting, which was like a few hours later, and I was like, hey, I've been thinking about this onboarding flow. Here's an idea. And I just, just, you know, shift to, zoomed in on the thing that Fable made and everyone freaked out. They're like, this is an unbelievable idea. How did you, like, good job. You did a great work. You know, and in my head I'm like, I don't know. I don't know how to make sense of that. You know, that's kind of, kind of out there.
- [39:46]
A
Yeah. And. And Fable actually kind of made sure that you didn't bypass. It's good idea that your team was like, this is amazing.
- [39:54]
B
100%.
- [39:55]
A
That's an interesting. What did it end up? What did it identify that was like something that you thought. What was the constraint that you thought was there that wasn't there?
- [40:03]
B
I thought that you had to install inflight through the cli.
- [40:07]
A
Okay.
- [40:08]
B
And that that was the flow. Every single thing I was thinking about was, hey, to get inflight as the feedback layer for your deployment previews, you gotta just go through the cli. And it's just hard because some people want to go through the agent, not the cli. And you have to go through the plugin. It's hard to do that. Well, Fable was like, you don't have to do that. Just automatically create a PR that installs in Fly, have it go to whatever repos are necessary, and then you can use that PR as onboarding itself. Because it's basically a billboard that describes the products to an engineer.
- [40:41]
A
Oh, that's so good.
- [40:42]
B
We covered a lot of ground. Before I let you go, I'm wondering if we can just do a ping pong of three quick questions that are kind of in this workflow. You know, what the heck is happening to us designers space? So the first one is what's something that you were doing a lot all the time the last time that we chatted? That has basically disappeared from your practice today.
- [41:05]
A
I mean, one of the things was building a lot of custom tooling. The HTML shortcut, like, takes care of so much of that. Like you said, the. The show me the options and approved deny discuss. Like, that whole area would have been a tool in your case was a tool for a minute that now we don't have to do. I think that. And then very, very specific. I think I'm less procedural now. I use. I still use the compound engineering workflow a lot, but I'm starting to use slash goal more often too. Depending on what the thing is. There's been times where it's too long running, like the goal becomes too big and it gets kind of like, you know, two hours later, it's like, whoa. Okay. I didn't want us to go that far on it, but yeah, less granular flow manipulation for plenty of other things, despite me showing a very granular version of it with Making variations in Terminal graph. What about you?
- [41:59]
B
Dude? I just don't use plan mode really anymore.
- [42:01]
A
Oh, yeah. Actually, that's a good one.
- [42:03]
B
I think probably the hard line in the sand for me has been, like, Soul and Opus 5. I haven't used plan mode since Soul 5.6.
- [42:11]
A
Interesting. Do you like Opus 5?
- [42:13]
B
I think so. I mean, I'm still kind of feeling it out. I think it has a. I can tell that it's much better than 4.8. Dude, I think Soul is. Is better than maybe both of them at, like, technical. Solve this problem. Like, the amount of times that I've had either Fable or Opus stuck in a loop where I just can't get this stupid thing fixed. And then I take that whole chat or I say, like, write up a context doc.
- [42:37]
A
Yeah.
- [42:38]
B
And then I send that over to Seoul and it one shots it. That's probably happened 15 times in the last month.
- [42:43]
A
Yeah, I've transitioned that too. Like, the anthropic models largely are like, my. My creative department. It's the brainstorming place, it's the design, you know, creative stuff, and then code execution and stuff I'm really primarily doing with Soul.
- [42:57]
B
It's honestly why I have a hard time leading Conductor. Kind of like, the Codex app is so good. It's amazing. Every time I'm in there, I'm like, this is just fantastic work. But I really miss that pairing because I kind of am in a groove with how I use the models, and it's hard for me to give up having both of them at my disposal.
- [43:17]
A
Yep, agreed.
- [43:18]
B
All right, another question here. So I think one of the more interesting things that we talked about way back when was you made the fantasy football app kind of thing, and it was interesting to see how you thought about your greenfield. Zero to one, let's just get something onto the paper kind of work. How have you seen that part of your practice evolve? Like, what are some of the strategies for going from zero to something that you're reaching for today?
- [43:42]
A
Yeah, it's a great question. I'm a designer that definitely struggles with the blank page. I want to get more of a shape in my head before, and I don't want to spend a ton of time on it because I'm also, like, I want it to be fine, develop it, and then do more of the visual language, fine tuning, tweaking. Like, after, I get a lot of the functionality dialed in, which is not a revolutionary process. But I think before, like, we were doing a lot closer to, you know, 70, 80% high fidelity in Figma or something. And then trying to drop those screen shots from Figma into the agent, you know, into V0 to build from there. And I'm doing more cheap ideation in the general shape without spending a bunch of time in the canvas. I might do a little bit of tweaking. Like, I'll ideate a bit with HTML, then I'll be like, okay, throw that into paper so that I can nudge and shift and accidental shout out to MDs, shift and nudge things into. Into, like, the place. Like, okay, this is more like what feels right.
- [44:45]
B
Right.
- [44:45]
A
And then have that fully built out. So I think the. Yeah, the ideation process is different now. And more HTML exploration to get a general shape before I build. And there was definitely, like, that first episode that we did together, which was, God, not even that long ago. That was, like, November last year.
- [45:03]
B
Yeah, not even a year.
- [45:04]
A
Like, the ideation happened, like, in V0 on top of, like, a full React web app, which is, like, now just, like, laughable. It's like, that's so inefficient. It's like I would start there and then be like, now I want to tweak this and try this and try this. And all of it was like, okay, do that. Okay, let me see. Okay, tweak this. Okay, do that. Let me see. And it was just so much more like, prompt, wait, prompt, wait, prompt, wait. And going wide now cheaply with HTML stuff. And then getting into. Now let's make the real app, because we actually kind of have a sketch of what the app will look like is. Is so much better.
- [45:39]
B
I think that's my answer. Answer two. And everything that you said, I'll. Plus one. The other thing that I'll add on top of it, too, is when I was building things previously, I. I was kind of staying away from the big, long prompt. Right. I don't write big, long prompts anymore. But I am doing massive builds, and I wasn't doing that previously. Like, I will hang out in HTML and Paperland way longer than I was even three or four months ago. Like, three or four months ago. I'd be like, let's just get something. You know, let's get the. The clay onto the. I keep wanting to say canvas too. Let's get the clay onto the DOM and we'll just kind of mold it and shape it. It's like, actually, no, that's much slower. Yeah, like, it's just much slower to manipulate the real thing than it is to kind of dial it in. A little bit. Not visually. I don't really care about visually. Just give me the, the UX and the flows and I, I want to make things happen really quickly in HTML and paper. And then I'll probably take paper and like I was showing with the supercut and I'll just be like, effectively, how can I get to the point where all I have to say is build this and it'll just do it. And I wasn't doing that a few months ago at all.
- [46:50]
A
It's really the mirror of. You hear it from the engineers all the time that are super agentic. Like they're like, I spend 70% of my time on planning and before anything is triggered and before any of my agents are building something, I spend the most amount of time planning. And that's where the investment is. And we're basically describing the design version of that, which is like visual planning in a way. But it's interesting how we've been, we've kind of shifted that from like make the clay, make the thing exist. For me to like mold and do different things on the potter's wheel was how we were doing it. And now we're like, let me just see a bunch of renderings of probably what the ceramic art will look like. Once I put the clay on the
- [47:32]
B
potter's wheel, the pendulum swung back to where we were before. Last question. And I kind of keep, keep it open ended. But I'd like to point generally more at your role, how you're thinking about the future of your career, your place in this industry as this designer builder, who am I kind of thing. So since the last time we talked, just what are some of the things that are rattling around in your brain and when you look forward in terms of like what's the next couple years look like for me.
- [48:01]
A
Yeah, it's a great question too. I mean one thing that I've mentioned to you before is like there was a period of time that being early to the AI game an attribute to itself that is becoming less and less true already. Like so many people have caught up and it doesn't take all that, the tooling so much better now. Like the, the ramp of. I haven't really used AI much for design and making that to like, oh, now I use it all the time. There's so much less that you have to learn now than like when I started doing this. So that has made me think more like, yeah, what is my shape and what holes do my peg fit in? And like right now I'm working on a Full time contract with Output, which is a music software company and working on a new product that they have that is really, really interesting. I'm really excited about and cannot talk about and I'm also working with Nick Pattison and the folks at Primary Studio on another thing I can't talk about. But it's really cool. But what I've discovered through those is I'm really enjoying the engineer implementation part of the process lately. I don't fully want to live one or the other. I don't only want to be in code and never design and make, you know, UX decisions and do all those tiny adjustments and stuff. But I don't want to be separated from like the real thing. If I am primarily designing something. Like, it makes all the sense in the world to me to own the front end. Of course, if I'm the one designing it, why wouldn't I own that? It's insane. I want to play the songs that I write, you know, like I wouldn't. I have, I have no interest in being a songwriter writer that writes for Lady Gaga and just like hands her a demo of me doing the song and then it becomes something virtually unrecognizable by the end of it. I want to play that song that I wrote. And so yeah, I think I'm actually becoming very, very recently a little bit more comfortable with the term design engineer. I still have not called myself this publicly anywhere and have said like, no, I'm a designer and a builder. But some of the work I've been doing lately and sitting between those departments and stuff, in certain cases I'm feeling more comfortable because I have meetings with the engineering team and I have meetings with the design team and I'm doing things that are both. And man, I like straddling that line. The version of Design Engineer that I thought of before, I was thinking of, of Jay Tompkins and Emil and Jakob and all these guys that like there was, there was some element of really high visual craft that I think I always associated with Design Engineer and that I still think is true in a lot of places. But the definition of it's almost like design plus engineer as opposed to design engineer, if that makes sense. Like it's really, really semantic. But having feet firmly planted in both places feels good. And I like doing it in areas of complexity where technical stuff under the hood, there's a lot to deal with and there's a lot of being 10,000ft above the thing and being right up close to the single grain of sand that I'm really enjoying and finding myself growing the most in those environments.
- [51:01]
B
Well, I find myself growing by talking and learning from you, so I appreciate you coming on. This is just becoming a staple.
- [51:09]
A
Yeah.
- [51:09]
B
You know, things are changing so quickly that I really like this format. I really like learning from you, so I appreciate you coming on and making the time today.