I'm (finally) showing how I design with AI
00:00:00Okay, let's get our bearings on toolsreal quickly. Um, this is a lot of thisis going to apply to whatever you'reusing. I'm a big conductor fan. It'sreally good for having multiple thingsgoing in parallel. It's not thatdifferent from especially the newcursor. In fact, the new cursor in manyways is a copy of conductor and it'sreally good at spinning up differentwork trees and then for each work tree Ihave like a set of agents and I'll showyou how I use that. Uh the other toolthat I've been using a ton recently ispaper uh which is basically like Figmaonly uh it's it's an alpha so it doesn'thave all of the functionality but thecanvas is the DOM and I find that thegetting ideas in and out of paper andlike kind of connecting the two ispretty seamless and so I I basicallyview paper as like my ex visualextension to cloud code and uh GPT whichI will bounce in and out of. And then uhwhat I'm going to be working on, so I'mI'm uh building this product calledInflight, which is all about basicallylike how do we get feedback in the thisAI world where we're just shillingdeployment preview links everywhere andwhat does it look like to close thatloop where I can like share something,get feedback, bring it back into myagent, and then work on
00:01:15that nextversion. And how can we make that astight as possible? So, I'm going to grabrandom things from here. Um, howevermuch of a plan you think I have, I Ipromise you it's less. This is just kindof how I would work when I'm sittingdown. The first thing that I want to dois this these cards, right? So, likeInflight will give me a way to keeptrack of all of my prototype links. Wealso can organize things by channels.And this primitive here is is this cardhere, this grid card. And it bugs me.I've been using it. It's bugging me thatI have to hover over it to see theinformation. And so this thing that I'vebeen wanting to do for a while is likelet's just pull this apart so I canactually see more things at a glance. Sothe way that that would probably workfor me is I'm going to take a screenshotand I'm going to go to conductor and I'mgoing to hit command N which is going toopen up a new work tree. So just like acopy of my codebase effectively and I'mgoing to go ahead and paste this in. I'mI use um Whisper Flow for likeeverything. You can use Monologue, Aqua,whatever. Uh, but I would say somethinglike,"Hey, I want to work on uh a new versionof this grid card component, and I thinkthe things that I want to improve are Iwant to show the title and the uhproject owner and
00:02:30the feedback commentcount at all times." So, I'm thinkingthat could live below the thumbnail. Andbasically we're creating like a bottomcontainer underneath the image wherethat information is visible at alltimes. I don't really want to changeanything else. Um like the versionselector has to stay the same. Probablythe position of it would stay the same.But then the other thing that I want toprototype is I want to have some kind ofa hover interaction where I can read alike two sentence overview of what thisproject is about. And I want to have ahover interaction so that I can justhover over the card and see this at aglance. And when we actually build it,we can just hardcode that data. But umfor right now I just want to do some UIexplorations. So what I want to do iscreate 10 different concepts in paper.And for each concept I want twoversions. The default state. So thedefault layout and then the the hoverstate. So, like when I'm hovering overthis item, maybe there's a separateaffordance that's triggering this likelittle TLDDR preview text
00:03:46and I want tosee that combination of states 10different ways and then we can pick avisual direction and turn it into aplayground. But to start, um, I havepaper open and I'd like you to just dosome design work so we can startexploring.>> Okay. While it's processing all that, Iwant to speak to some questions aboutcodecs and conductor and cursor. There'sa lot of confusion in this area. Um,there's a couple things I was alreadyOh, no. Did it Did it not capture thatwhole brain dump?>> I I have never I'm I'm sure it's in myhistory, but yeah, it's weird that itdidn't.>> Yeah,>> it's weird. There we go.>> So, conductoris a harness. Cursor is a harness.Um, if you use cursor, you can you canuse cursor the app without evensubscribing to cursor and and use theterminals in there and run codeex orcloud code or you can have your cursorsubscription and and pick the modelsthrough their regular interface and allthat kind of stuff. um conductor issimilar in that it is a harnessum but it really it runs off of
00:05:01your ownclaw code and or codeex regularsubscriptions so like those Macs and prosubscriptions and stuff and so what'snice about it is that you can have youknow multiple sessions up and I thinkRit's going to show this at some pointwhere you're going to have open GPT 5.5five bounce off of each other. Um, soit's there's a lot of like what'sbetter, what's better, and it's likeman, they're they're all merging.They're all getting closer and closer tokind of the same kind of thing. So, youknow, pick what feels comfortable foryou. Um, the Codeex app if you do likeusing GPT 5.5 and Codeex is excellent interms ofit's good at like computer use and beingwith you on your computer and drivingsome stuff for you. There's a lot ofgood features in it. It's by far thebest like native app um for runningcloud code or running codecs and stuffand GPT 5.5. Um, but the other thing toflag is that if any of you have beenfollowing Anthropic, they've been makingsome changes about um how they'reallowing the Mac subscription to be usedon what they're calling third
00:06:16partyharnesses.>> Um, that was initially triggered byOpenClaw, but it actually applies toConductor, too. And starting I thinkJune 5th, you're going to get anallowance of like third party harnesstokens for Opus or for all anthropicmodels. And that's separate from yourregular like cloud code CLI or clouddesktop app usage. So,>> and I I've kind of been going a littlebit like I'm testing out uh 5.5 as mydaily driver>> for that reason. like I might have thatdo the bulk of my coding and>> opus do more of like the plan mode.Anytime I'm in paper, I like to do Opusfor sure.>> Yes, agreed.>> So, as a thought partner and beingcreative, I like Opus quite a bit more.>> Execution on GPT 5.5 is really strong.Um, we obviously only got Opus 4.8yesterday.>> Um, so,>> huh,>> I wish we had it for here. I'm excitedto try it. Well, you can switch your uhit is>> I don't think is it in there already?>> Oh, maybe I have to restart. I have toupdate. Whatever. Whatever. Whatever.>> Yeah.>> Um>> um but yeah,
00:07:31>> let me let me give a quick disclaimerhere. So, a couple things I did. One isit gave me like a list like a cloud willtypically give me like a list of thingsit wants to explore. I got the sensethat it was going a little bit widerthan I want. So, I kind of narrowed itin and was just like, hey, likeconstrain what we're exploring. Um, Iwant to actually I don't really careabout using my components and my typestyles and everything perfectly becausefor me like paper is medium fidelity.Like it's not about um it's not aboutgetting it pixel perfect and I'll showwhy in a second. Um, but I did kind oftweak that prompt and I have it in thesettings. I think maybe this is thedefault now, but in the follow-upbehavior you can have it be like Q whereyou can stack prompts or steer whereit's actually going to like impact theprompt in progress. So I have it set tosteer. So, I just kind of guided it alittle bit and we're going to again likeI wouldn't sit here and watch thishappen, but you can see how it's it's umit's already starting to work, but Idon't really care right now. Like thewhole point is I don't want to wait forloading states. So, what I I've alreadyI've already got my next thing that Iwant to work on, which is a much smallerlike this would be an example ofsomething I want to ship to productionright away. I don't need team input.It's just bugging me and I just want tofix it. this the previous grid card waslike, okay, there's definitely going tobe a checkpoint with the team
00:08:46uh becausewe're going to try something and then Iwant to do one more project in tandemthat's going to be let's prototype likea heavier swing engineering wise andjust kind of feel it out and like relyon plan mode heavily. Uh but just tokind of get more get more um what's itwhat's it? Irons in the Fire is thatwhat it's called? Whatever.>> So on the website I have these sections,right? Refresh it. Um, and each one haslike a little animation. And I haveconsistent padding here, but I reallywanted to break the frame. I didn't wantit to be super clean. So, I have thiscontainer breaking out of it. But thisspacing is driving me crazy. Originally,I thought it'd be a good idea cuz I waslike, "Oh, like it'd be cool to have thecopy for agent button. When you getfeedback, it like turns it into the nextstep that you copy for the agent." It'dbe cool to have that like next to thistext. And the more I look at it, themore I hate it with everything in me.So, I'm going to just I'm going to justspace that out. So, this is what I woulddo. I took my screenshot and then Iwould say um
00:09:47maybe Zoom really is messing with SuperWhisper, which is interesting.>> Is it hijacking your um input?>> Quick quick test. I'm going to do aquick test with Super Whisperers to makesure this is working.Okay, that's a that's a fun live demowrinkle that we're going to we're goingto work through. I'm might just have tohave super whisper up. Yeah. Okay, thisis fine. I have super whisper up andI'll just copy and paste it. It'swhatever. So, umI don't like how the the optical spacingbetween the um container that's breakingthe frame in the section above and theclose the loop for your agent text. It'sjust too tight. So, I know that we havelike a consistent py value everywhere,but um for this section, I think weprobably need to change it. So, can youjust give me a dial kit for the spacing?Just like the the space between thesetwo sections or um yeah, anything elsethat you think I would need and thenI'll tweak it.
00:10:54This is hilarious that I'm copy copyingand pasting from Super Whisper.>> Zoom sucks.>> Yeah, ridiculous. Okay, so uh this iswe're about to see Dial Kit is gosh,man. There's like two tools that I'mgoing to use today that I I cannotrecommend enough for everybody. Um so Ijust I don't actually know what the URL>> they're just the easiest free wins.>> Yeah. So, this tool here, um, I'll putit in the in the chat.>> Shout out Josh>> is the first first tool. Yeah, JoshPucket. It's basically like it'll giveyou custom parameters for literallyanything that you want to tweak on thepage. This is about to be a prettysimple example. You can get crazy. Youcan do like every element of an easingcurve, all of the offset. Um, you canyou can do you can pull in all of yourlike tailwind values to change colors,opacities, and sometimes I don't evenknow like like a good example is likefor shaders, right? Um,>> I don't even know what I don't know thelanguage for what a shader what shadercontrols even are. And I can saysomething like give me all of therelevant controls for this shader and itwill just add it. And I can just tweaksliders like a madman and it whateverwhen it looks pretty I copy it. So,we're about to see
00:12:09like a simple exampleof how I would use that. Um, but again,I don't want to look wait for loadingstates. So, I'm going to do somethingelse, which is here. Um, another thingthat's kind of just been on my listforever. So, for context, there's twoways that you can use inflight. Almostevery single time I I'm embeddinginflight into my preview deploymentlinks, but uh you can also just postlike a level link. I made the dive clubwebsite work. and you have this thisconcept of adding questions and when yourecord a walkthrough it'll automaticallysuggest them for you but I want to beable to spatially associate questionslike be able to like pin it to a part ofthe design and I don't really know Idon't have much of a picture in my headof what this could look like but we'rejust going to roll with it today. Soagain, kind of same thing. I'm justgoing to giveClaude a bit of context. Um, and we'rejust going to hit command Nanddo my stupid super whisper hack again.Um,for this one, I'm going to do use. So,this is another guy that I like. Uh,superpower. Do you use superpowers,Kyle?>> No.>> Okay.
00:13:24Um, I had the technicalco-founder, I'm put this in the chat,technical co-founder, Maven, uh, and oneof the best engineers I worked with sayshe uses this all the time. I sent it tomy engineer. He loves it. Now he uses itall the time. And now if I'm going totake like a just try a slightly biggertechnical swing, um, I like using it.>> I don't actually even really know why.Just enough people that are way betterat engineering have told me to use itand I just blindly trust them if I'mbeing totally honest. Um, so, uh,let's do this.>> I think my version of this is thecompound engineering plugin.>> Yeah, I would imagine it's probablypretty similar. Okay, it's so hard to Idon't know when Super Whisper isworking. This is insane. Okay, here wego.Okay, so you know how there's thefeedback guide and you're addingquestion items to it? What I want toprototype is the ability to add somekind of a spatial association with aquestion. So it should feel like pinningwhere you're attaching it to an elementon the DOM. But I don't want to use thesame visual style as a pen cuz that'sgoing to be kind of confusing. So maybefor the time being we can just use acircle with the
00:14:40question number in it.And I should be able to like drag thataround. And we're attaching it to a DOMelement in the exact same way as we aredoing the element pinning UX.Yeah. I I that's just basically theintent is like I want to make it so thatwhen somebody is clicking on a questionin the feedback guide, it willautomatically take the reviewer to thatpart of the design even if it's on adifferent route. for instance. Um, socan you just ask me any clarifyingquestions and we can work on a plantogether.
00:15:19>> Okay.>> The exact functionality of my first appI ever built, which was>> the Figma plugin. Remember the frametask one that like>> Oh, yeah. Yeah.>> load it all in and attach the frames ondifferent pages and it would fly youthere.>> Um,okay. This is just going to run andwe're gonna go here. Okay. What Ichanged.All right. Let's see. Let's go back tohere. Oh, I got to open up the freakingWhat am I talking about? Uh, so this iskind of one of the things I really likeabout conductor is you have this conceptof a run script.
00:16:00I don't actually know where it is. MaybeI shouldn't have went into here.count experimental advanced.>> Okay, I'm not even going to deal withit. Uh there's a run script in Conductorwhere I don't even know how it works. Ijust had Cloud make it for me, but itbasically makes it so all you have to doto start start up your local host isjust command R, which is so freakingcool.>> Um so that is just up now and I willopen up my local host. Um okay, see thiswhat it added right here? This is dialkit. Um whoa, Charlie's in here. What'sup, Charlie? [laughter]Now I'm nervous because the guy whomakes conductor is watching me useconductor, and I'm a designer, not anengineer. [laughter]>> Hell yeah. Thanks, Charlie.>> Okay, so so simple example, but watchhow easy this is. So, I can I can getthese little controls and just slidethem. Um,I definitely don't want to mess withthat. Let's reset. So, I think it's assimple as this. I just want a little bitof gap.
00:17:09Let's do 80. So when I have it where Ilike, I can just hit copy and and thenI'll just paste and it'll just do it.Okay, we got Oh, I was about to say wehave three loading states, but we don't.And that's the whole point, right? Sothis is why I like conductor. Um, sookay, got the lay of the land. I'm kindof skimming this really quickly wiredinverse entry point.
00:17:40Okay, so it's going to ask me questionsand this is kind of like really highlevel advice where especially when I'mdealing with things where it's like I'mworking on a feature, prototyping afeature and it's not just like a UIthing. I just have it ask me a ton ofquestions and and and use that as likethe precursor to a plan. Soreplace Okay.Um,no, it's [clears throat] not replacingthe avatar teardrop pin because theavatar teardrop pin is what reviewersyou use to leave like a pinned commenton a prototype. This is adding aseparate connector between the questionitem itself and an element on the DOM.So if I have a question about like if ifI as the project owner have a questionwhere I want feedback on like a cardcontainer, I should be able to click abutton which enters me into this like Idon't want to say pinning mode cuz Iwant it to feel different but likebasically that where there's like thiselement association mode where then I'mI have a DOM selector come up. I'mselecting where on the DOM I want toplace this question and then um and thenit's just saved. And I think we couldprobably add another icon button
00:18:55to theleft of the trash can like delete iconand that just triggers the the uhelement selector mode where I can placethat question somewhere.Copy. Oh, hey, it worked automatically.Nice. Okay, that would be great. Okay,so let's pop over here. Um,
00:19:20nice.This one's probably just pretty good togo then. Um, so I just will say likeremove the dial kit. Actually, first I'mgoing to create a new tab and create aPR. Um, and then this one will move thedial kit. Those will go. That's going tobe good to go. Oh, grid card concepts.All right, let's look at let's look athere. Let's see what's going on overhere. All right, so Iah zoom controls.All right, whatever. Um, this is this iskind of like how I work now. It's weird.Like, normally I would take advantage ofthis B blank canvas and I would uh, youknow, I'm just going to start sketchingthings out. I don't really think until Ihave things to look at now. And am Iself-conscious about that? Yes, maybe alittle bit. But it's really, reallyeffective. And I'm always able to seesomething that I didn't plan onotherwise. So, this is giving me acouple different examples here. This islike it's showing it on hover. I don'tkind of feel like there's No, that'sthat's not good.Huh. That's kind of interesting,actually.See, like I definitely wouldn't havethought of that. Interesting.
00:20:39Now I know why your co-founder Kylehates your choo choos because you haveso many going at once. It happens. So[laughter]>> uh Santos made he's like you have toshare your computer audio so people hearall of the choo choos.>> I switched I switched my conductor thingto choo choos too and I love it but Idon't have I feel like mine are longerrunning so I just don't have like asmany choo choos hitting my ears as youdo.>> Yeah. Um, so, so, okay, I have so manythings. My brain's going so manydifferent directions. Yes, the choo choois what happens when conductor has anagent done and it's just like>> it's it's uh I'm a slave to the choochoos. Um, okay. [laughter]All right. So, so I this tab is paper.This is this is kind of like the reallygosh this is I think the coolest part of>> what it looks like to work today is likethis tab is paper but now I'm going tocreate a new tab inside of this worktree and say [gasps] I want to create aplayground. So, let's do likeslashplaygroundslashgridand the fir and then like on the left Iwant to have a uh like a version historybasically and the first item should justsay default and I want you to import thecurrent grid card and can we just createlike a dummy
00:21:54set of grid cards like giveme like six or eight or something likethat. Um look at the code diff of theactual grid card like layout componentand match it exactly. If you need dummycontent, you can pull from the imagesand the avatars that we're using on thelanding page and just make somethingthat feels real. Um, and yeah, so giveme that like default starting spot andthen I'm going to create like a V1underneath that and start pullingconcepts from paper. But can you buildthe scaffolding for the playground firstand then also make it so that whenever Irefresh the page the the starting URLshould be the most recent version andwhenever I duplicate a version I want acompletely new component so that I havethis source of truth preserved.Nice. I don't know what I changed sothis to work in Zoom. Okay, this one twopunch is like a really big part of myworkflow right now where like I'll dovisual explorations in paper. I'll kindof set up like a playground becauseeventually I want to have a single linkthat's like interactive that I couldsend to people to like to play with itand that will be in code and I haveClaude building that while it's alsodesigning in paper. So let's just keepgoing through here.Um [sighs and gasps]
00:23:10yeah I don't Top title's kind ofinteresting actually. H>> I can address a few questions whileyou're looking over there.>> Yeah. Yeah. Go for it. Go for it. cuz Iactually am like doing this for real.>> Yeah. [laughter]Um, okay. I'm seeing some themes on.First of all, if anyone does more promosin the chat, I will boot you. Put that[laughter] in there, but I already didit after I warned some folks. So, don'tdo that. That's lame. This is free andit's valuable.Kick rocks. Um, [clears throat]design system adherence. This isactually this is something that's comingup pretty regularlyand actually I feel like this is wedon't have to get all the way here nowbut like I'm curious if you've switchedover RID to using like a design MD foryour design system. Um>> for for my uh very large codebase of myportfolio that I'm about to ship today.Um, I did a design-system.mmdand the cuz one of the issues that youcan run into is if your design.mmd isreally heavy. Um, I think that getsautoloaded just like your agents.mmd forGPT or claude.md
00:24:26for claude. Uh, so itcan eat up a lot of context on everyfresh session if you have it all loadedinto that. And there's plenty of timesthat you're not doing anything with UI,so it's like not even relevant. So thenice way to get around that is tomention in the cloud.mmd or agents.mmdthat you have this other file where allof your design system lives and wheneverwe do anything related to UI or designor doing something in paper whateveralways go reference the real tokens fromdesign system MD and then have anotherinstruction there that when we makeupdates and stuff to you know if if wechange something that applies in a fewplaces that we go back to the designsystem MD and update that after we'vemade those code changes um and prompt itto to confirm with you that you do wantto make those um kind of like sweepingchanges and stuff.>> Yeah, I'm so I I I have like a I havelike almost like a cascading set ofClaude MD files at different levels ofthe codebase. One of them is at the UIkit level.>> And so even like in paper right now, um>> this is pretty freaking close. Actually,it's basically identical.
00:25:41Like thispopover is exactly how I do popovers. Umit's like just a basy component with uour like tokens. Uh the layout's thesame. The only thing that's different isit got the SVG. It's using the wrongSVG, but I don't really care. Umlike this matched it basically. Thisthis is my great card. And so I'm prettyand it's like more like there are littlelittle tiny pixel level details, butagain I just I don't really care aboutthat>> because I've I've really started I'mdoing I've started doing more of therefinement work in code which I'll showyou in a second.>> Um>> let's I'm trying to fly through this. Ihave picked like a meux thing I guess.Let's just get something going.Um, [clears throat]when you click on a number, it shouldjust scroll to.Okay. So, let's go back to the grid cardconcepts and maybe that'll be more ofthe focus moving forward. So, I I have Ihave someI have some things that I wantum based off of this. So, I'll probablyjustfocus here.
00:26:56Um, okay. One thing that I definitelydon't want is I don't want a layoutshift. So, looking at these, about halfof them have the subtext expandingdown or up. And that's going to make thewhole page layout feel weird. So, I'mnow realizing I I definitely want thatas a constraint, which means it almostcertainly has to be some kind of apopover on hover on top of the item,which I I actually think I definitelylike number three. Um,>> that feels kind of interesting to me.And we could have like some kind of afade out on the bottom perhapsunderneath the popover. I'm not sure.>> Um, and then I guess number one isinteresting too.Can you Actually,let's just build these. Let's just buildthese. So,in our new playground that we just made,
00:27:54can we build number one and number threeto start?Oh, come on. Super whisper.Um,I'm just going to do it over here. So,quick context. I'm like getting a littlebit nervous about the time. I wouldalmost certainly do another round ofdesign exploration in paper and saylike, I want number one and I wantnumber three. Show me that fivedifferent ways.>> Uh, and then I would go into code, butthere's like a bunch of things that Iwant to show and it's 38.>> So, um,>> I think number three is is strong enoughto like>> I actually think it's kind ofinteresting. Yeah.>> Yeah. Yeah, I like it.>> Um, okay.>> Uh, another another quick I saw somepeople asking about work trees. So, allthese threads that you see on the leftof Rid's screen are different worktrees. That's what's kind of nice aboutconductors. It just does that for you.Now, within the same work tree, like theone we're looking at now, he has twosessions open. So, it's still the worktree is a clone of your your mainbranch. So what's nice is that you cando
00:29:10a work tree and have multiple threadsin there and you could, you know, haveone be opus, one be GPT 5.5 or andbounce back and forth or you could justdo a few different, you know, areas ofsomething you're tackling within thatwork tree and then you can have aseparate work tree doing totally otherstuff and they won't interfere becauseit's just another clone. Um, and thenconductor makes it easy with the the uhbuttons in the top right to just makePRs, merge it, do all that stuff. Um, soit's just nice. Work trees is just likea really safe way to it's yeah, cloneiterate. If you like it, submit the PRsand then merge it to main if it allchecks out.
00:29:59So [clears throat] just for the sake ofuh showing this, I did have I kicked offanother paper exploration. I also kickedoff a build inside of the So you can seelike it has the design. It's nowbuilding it as V1 inside of our newplayground, which I'll even just spin upthat playground to check on it reallyquickly.This is how almost all of my exploratorywork starts for what it's worth. Um butI think I said this nice. So just likethat. Um I have this grid. Uh althoughthe layout. Okay. So here's whereagentation kind comes interesting. Seethis guy right here. Uh it sounds likefrom the chat a lot of people are usingthis already, but I'm going to put it inthere just in case.>> Mhm.>> Um this is so good that the reply[clears throat] tweet of Make LocalFigma's release yesterday literallycited Agentation as their inspiration.Like it's you should be usingagentation. It's kind of as as simple asthat. Um, so I'm just going to grabthis. Um,[clears throat]it looks like you built this into twoseparate rows, but I want the staggeredapproach like we have in production. So,can you look at the code diff and figureout what is different and make it matchthe production page layout more closely?
00:31:16Okay. So, it just creates a a copy. Iknow there's like an MCPU for it. Idon't have it installed cuz I'm lazy.Um,but I'll do this. And then, um, this islooking good. I also want to make surethis is easy to share. I might share itafter this. So, um,can you make sure that this newplayground/grid route is exposed outsideof O so I can share it without makingpeople log in.
00:31:43And all of these things are working inparallel, which is fun. Uh, let's seewhat we got here. Wow. So, it alreadymade V1. Cool. Let's see what this lookslike.Okay.Okay.First off, the bottom padding is is kindof ridiculous.
00:32:05There's too much bottom padding in thedefault state. Can you make it match thepadding top and eliminate anyunnecessary margin?Oh, this super whisper thing is crushingme, dude.Um, interesting. Interesting.
00:32:28[snorts] Can we try adding an overlay tosubtly fade out the content below thethe card?>> Asking if this is a um playground tool.It's not. It's just told us to build aplayground.>> Yeah. which is like okay let's pausethere then if there's a question so likeII build a custom playgroundall the time all the time I'll do slashplayground slash whatever I'm working onand then I'm just dumping concepts and Ican make a huge mess everything's umexposed behind like this or or hiddenbehind this playground route whichrequires an inflight URL so nobody canfind it um andI'll just list a ton of versions andI'll even return back to thingssometimes like I actually ship myplayground explorations with theproduction code itself cuz sometimes Ireturn back to that playground and steala concept or like we just built like anext steps feature. I pulled theinteraction from a playground that Imade like a month and a half ago for atotally different exploration that justlike was in the back of my mind and Iself plagiarized basically. So, I have alot of playgrounds. Um,
00:33:44and it's they'rejust custom environments that I ambuilding myself. Um, so hopefully thatmakes sense.Okay. Uh, it's not Dang, why isn't it?All right. So, this isthis is where prompting this is likegets kind of fun. Like, why isn't thisworking?
00:34:10Yes, Henry, this is a little bitchaotic.>> Yeah. Welcome to my dayto-day.>> Exactly. But this is like>> now I'm like, "Oh, should I start thispan?" I'm like, "Oh, actually, I reallywant to unblock this." [laughter]>> Yeah.>> Okay. Can a question be associated withone element only or multiple elements?Let's do one for now.
00:34:35And this one's just good. So, what Idon't need to do right now, um, but I'mgoing to do it just for the sake ofshowing you, I always hit this reviewbutton, which is fantast fantastic. Um,it just automatically starts a codereview. Um, sometimes if it's reallycomplex, I will do a code review andthen I'll switch models. I don't know ifCharlie's in here, but I'd love to beable to switch models from this buttonbecause all the time I will go intosettings, change to 5.5, and then starta new review. Yeah, [laughter]>> totally.>> Um, and uh, okay. So, and then the otherthing that I will do is sometimes I willdo this actually almost all the time Iwill do this. I will say um, I want tosimplify and this is a like actual cloudcode plugin that I installed. You justpaste the URL. If you just Google maybeKyle you can find it or something. Idon't even remember where this is, butif it goes through the code and justlooks for opportunities to likeconsolidate, simplify, stuff like that.So, I I want to simplify this PR. Um,look for opportunities to make myengineer not hate me, but don't risk anyvisual regressions.
00:35:52The UI UX is dialed in. So, it's goingto tell me that I'm an idiot becausethis is literally a oneline code change.But I wanted to show it because I dothis prompt like a lot, like everysingle meaningful PR basically.>> I think that slash command is isn't thatbuilt into cloud code? That's>> I actually don't even know. It might be.Um, in fact, I think you're right. Ithink this is>> complexity confirms.>> Okay, cool. Yeah, I use this all thetime. Um, so it reviewed the workspace.Obviously, it said there's nothing tochange. Um, but I would probably likesometimes it'll list things out and I'llbe like, let's do two or three and ormaybe I'll be like, you know, let'swhich ones are actually which ones areactually worth doing. I ask Claude whichitems are review theater a lot versuswhich ones are actually worth doing andit always eliminates some from the list.So, another kind of pro tip.>> Um, okay.And it already created the PR here. Onething that's kind of nice, um,Conductor just gives you the the GitHublike PR button natively here. They justadded the Versale preview, which isreally freaking awesome, too.>> Um, so I can just click this>> and I'll fire another slot PR at myengineer
00:37:07>> and that's ready to go. Um,I might have uh let's see, I removed thedial kit, right? Yeah. Okay.update the PR title description.Okay, cool.
00:37:28I'm going to speak to another generalkind of thing.>> Yeah, go for it. Go for it.>> Um, so Bryce asked like what's thelifespan of these implementations? Toolsare changing all the time. Uh, what arethe real takeaways here that aren't justtoolbased?>> That's very salient. Um, yeah. Like Riddand I did an episode together in Januaryand none of that stuff is the same. LikeI showed I showed a bunch of my flowstuff. Like very little of it is thesame.>> Which is also why I tried to talk thereand we're always kind of trying to dothis like sharing the philosophy becausethe literal tool itself is going tochange. We're still what we're in foranother like year or two, you know, ofjust like new tool, new tool, new model,new tool, model. Like it's, you know,we're in that zone. So stay water, beadaptable with it, but start to figureout like your own process as far as andyour own like flows of ofthe like riding superpowers. I use thecompound engineering um plugin and it'slike main workflowsall the time and they're super solid.Like even that like that prompt thatthat RID did to simplify um in thecompound
00:38:44engineering plugin for thatpart of the process, it does thatautomatically. It has all just uh KieranClawson from every um made it and himand Trevan Chow are iterating on a bunchright now. I It's I swear by it. It'sreally up there. I think superpower, butthat's kind of the same like that's casein point. Rid's using superpowers uhthat skill to like and plug in to get alot of that um dialed in. I use compoundengineering and it you know they allwork like yeah if you abed everythingyou could endlessly change up yourtoolkit and stuff. just just get tostuff that like makes you faster, makesyou feel aware of what's going on. Umit's yeah, like none of us have andsorry to Charlie and Steven from paperin here, but none of us have like toolloyalty right now. I mean, you guys knowthat like>> whoever has the best thing right now andwe're all talking to each other and belike, "Hey, have you tried this? Haveyou tried this? So, I just added this tomy flow and it's huge. Like,>> we're bouncing around all the time, butthe how do I
00:39:59work with AI effectively,that has a little bit more stayingpower. Um, and yeah, it's it's hard tokeep up with, but you follow folks likeus that are staying at the front end andthe the bleeding edge and you know, wetry to share a lot of like what we'removing to, but butit the tool stack does not make theproduct or the design. We're all just,you know, like if you get a Craftsmanpower drill versus a Makita versus alike they're all drills. Learn how touse a drill and and how wood works, youknow. Um, so yeah, long rant about toolsand all of this information being likenot evergreen and not relevant inprobably like 5 months.
00:40:49Um, okay. I get it's chaotic. I told youthat's why I gave disclaimers up front.But few things that are going on rightnow. I I did have paper explore somemore concepts. Um,I don't I don't they're fine. Uh, thisis interesting though to me. There'ssomething clean about this V15. So, Ihave Claude building V15 as V3 in theplayground and then I used Agentation tocreate a V2.>> U, let's just see.
00:41:21It's a lot of movement for theYeah, that doesn't that doesn't feelamazing.Yeah, that makes me think I'm gonna likeV3 because it's not going to move thecontent. Okay. So, that's fine. That wasa good example. I was like, I kind ofhad I just want It looks pretty in bothstates statically, but then it didn'tfeel good.>> Yeah, you got to see it in context.>> So, I'm going to just ignore that. Um,this is driving me crazy, though,because this freakingThis is where it comes like becomesclear that I'm not an engineer, cuz I'msure an engineer could just jump rightin and grab this and be like,
00:41:57"Uh, okay, okay, okay, okay, okay.Look at that. Ruin my screenshot.How do I just get the full screen? So,this is this is super lame. I'm going todo it anyway cuz I do it all the timefor interactions. There's got to be abetter way to do this. Somebody tell methere's a better way to do this. But allthe time I create I take I use Cleot totake videosand then I pause the I stop the videoand then I um open it up in the editor.Or actually for this I'll just save it.I open it up in the editor and then Itake a screenshot. [laughter]>> This is so hacky,>> dude. It works really well forinteractions though because then you usethe scrubber and and you can like stopit exactly on the point where I'm like,"Oh, that's why it looks weird becauselike the H1 is getting squished and I Icouldn't really tell in like 100%speed." And then I'll take a screenshotof just the point where the H1 issquished. paste that in. And it's Imean, it works, right?>> It really works. I'm sure there'ssomebody somewhere. Please God, tell methis about>> I'm I'm just gonna make you a skill forthis.>> Yeah, it's unbelievable. Um, okay. Wait,wait, wait. Yeah. Okay.
00:43:12Um,I don't exactly know what's going onright now, but the dummy grid that youassembled isn't staggered like theproduction grid. And it looks like it'sbecause each item in the grid row isfilling the container. Uh, where I Iwant it to like be set to fit or autoheight uh so that there's like astaggered approach. So, can you justlook more closely at the code diffbetween what is in production and whatis in this playground and fix it acrossall of the versions?
00:43:46paste. Okay. Where's my V3? Did itfinish V3? All right. Let's play withthis.Kind of have hope for this.Okay. I don't like how heavy the bluris, but this is kind of interesting tome.
00:44:07Yeah, it's kind of interesting.By the way, as long as we're shoutingout resources, um, saw Lori dropped insomething for Chris Pucket's course,NUMA, if you're getting started. Uh,that looks great. I haven't lookedinside of it. I've just been seeing his>> She's a paid associate of Chris.[laughter]Um and then uh yeah, interface craftby Josh Pucket, whom we mentionedearlier, uh the dial kit um skill ortool, whatever. Uh the interface craftskill that you get if you sign up forthe course is really solid and it has areally nice approach. I see a lot ofpeople talking about animations and umgetting the frames and trying to breakit down and stuff and interface craft isjust a really great resource library.It's super super well done and deep andthe skills are really solid too. And thethe the way he approaches animations iswith this storyboard methodology.And it's really effective for breakingeverything down and helping like youragents understand the animation withoutlike especially
00:45:22if you combine that andsome you know individual frames ofdifferent moments in the um in the inthe animation. you you can do both, butit it makes it it creates betteranimations and it understands thembetter because of it. So, highlyrecommenduh the interface craft um membership andthe skills that he has paired with ittoo.I'm just scrolling through the chat andit's like there's a lot in this chat.So, yeah. Umuh if anybody's really feels like we'renot answering your question and it isburning just hammer that chat more. Uh Ijust quick touch base on where I'm at.So I I'm giving a little bit morecontext. Um I'm honestly just trying tofinish this. So we're running out oftime.>> Go over by a little bit.>> Yeah. Yeah. It's fine. It's fine. Imean, I'm actually working on this. So,I'll probably just keep going and peoplecan if they want, but but um I've justgiven it more context and it is now uhhopefully spitting out a plan. I havethe grid card concepts working. Uh Iwanted the blur to be more subtle on B3.Ah, see it's it's it's the transitionisn't good. This is feeling
00:46:37kind ofclose though.We probably just have to fix the minheight.>> Um, Stefan, this flow totally works forbuilding iOS apps from a likevisual design standpoint. I'm not sure.>> Dude, iOS apps are hard right now, man.>> Uh, speak on that.>> Like I've I've just been talking with alot of teams and like how they'resharing iOS apps. It's just it's it'snot super easy. I mean like you canbuild andI guess like agentation wouldn't evenwork I don't think I'm not sure as soonas you as soon as you like start workingin Xcode specifically gets a little bitthere's more pressure>> basically.>> Yeah. Yeah.>> The the fact is if you're buildingnative mobile apps right now all thetooling is just behind for you.>> Yes.>> Unfortunately>> little little painful. Um, Luca, youasked how you get your code ready forreview. Uh, I mean again, you know, Ijust compound engineering. Um,can do, you know, ideulate it. Itsnatural flow is brainstorm, plan, work,
00:47:54review, compound. So, it's just doing alot of that stuff for you. But and Idon't do all of the steps necessarily,but um yeah, I mean just use use youragent like something to observe andagain this is kind of the philosophylike this this won't change for a while.um is like the way that Rid is talkingto AI. And this is part of the reasontoo that we all really beyond savingtime with um doing voice dictation, youtalk differently than you type. And thenice thing about that is that you tendto give more context>> and your agents love context. So, likejust tell it whatever you're trying todo or whatever you're concerned about.So, Luca, like if you had somethingyou're like, I want to submit this PR. Idon't want to have it be embarrassing.Is does this look legit for me to submitthis PR onto GitHub onto this like open-source codebase? And then just let ithelp you with that. to like use AI tohelp you use AI better and just>> tell AI that you're not an engineer too.So like like I I've told it>> that's in my global
00:49:10>> Exactly. It's on my global too. Like I'mnot an engineer. The person who's goingto review my PRs, his name is Ver and heI do not want to look like an idiot infront of Ver. Your job number one likeyour your number one job is to likebuild my thing and your number two jobis to not make me look like an idiot infront of you. [laughter] Bot thinks Veris like the angriest, most justdisgusting slave master ever. And it'sperfect because that's like it will allthe time, even in plan mode, it'll belike recommended, you know, route twobecause this is what is going to makeVer not hate you as much. [laughter]>> That's so good. And it's in all yourlike session history now. So likeClaude's like memory is grabbing on toit.>> Oh, totally. Totally. It is deep deep inClaude's mind right now. It's But it'sit's really effective, right? It's likeI don't want to make [laughter]big decisions. Like please help meaccomplish my intent without making bigdecisions basically.>> Yeah.>> Um okay, real quick. I want to show yousomething. Uh and this is maybe anotherum maybe there's a way to productizethis a little bit better. But what I allthe time do is when I have plan likethis is this is the plan right now. Um Iit's 1:00. So I I would normally readthis plan. I promise. [laughter] andlike kind of look for like an initialpass like okay are we are we on theright track here kind of thing. Um andI'll probably
00:50:25do like a couple back andforths just with Claude where I'm almostalways having Opus 4.7 and soon 4.8 makethe actual plan but then I'll do thisturn this plan into a markdown file forcodeex to review and it's going tocreate a file. I'm then going to showyou what I do with it. I create a newtab in conductor. I set that tab to GBT5.5 and now I'm having it review theplan and I have them go back and forthon this markdown and I have it give aconfidence score which you know maybe iscompletely it might be nonsense but Ithink it kind of helps a little bitwhere I will literally tell Codeex if itjust gives me this I can do it for real.Um we're going to go on to low and fastfor everything for a second. So what I Iwould say give me a confidence scorefrom one to 100 that this plan is goingto effectively it's going to work likeit's going to uh accomplish my intentand it's going to do it in a way thattechnically makes sense and then Ibounce back and forth where like claudewill write the plan codeex will pokeholes and give a confidence score then Iwill pass all of that
00:51:40back to Claude itwill update it then I'll pass it back toGPT and say okay review it again, give anew confidence score, and I do thatuntil I get confidence scored up to likehigh 80s or 90 or something like thatbecause it almost always starts off atlike 60.>> Um, and I've been having a lot ofsuccess actually uh specifically with5.5>> because at least when compared to 4.7, Ihas been a little bit better at some ofthe like nitty-gritty technical details.So, it almost always finds things thatare missed in the original plan. Okay,so I'll just do this. Copy this new tab.5.5.
00:52:21Can you review this plan? Uh look foropportunities to improve. Look for edgecases that we missed. Uh look foropportunities to simplify and then whenyou are done providing suggestions, givea confidence score from one to 100 thatthis plan is going to uh match my intentand be executed perfectly.Okay. I normally set this to extra high.I'm not going to just for the sake oftime.>> I just I want to automate all this foryou so bad.>> I know. I know.>> I'm going to I'm making skill afterthis.>> In the back of my head, I'm like, I needto This should be a single skill and Ijust do this over and over and overagain. Uh so I'm going to let that go.Let's check over here.>> Yeah. So I I my my progressive blur waskind of Oh, that's kind of nice. That'sbetter. By the way, for anybody else whogets into like kind of repeatedprocesses like these, um, I made a skillfor making skills that is quitecomprehensive and has been veryeffective called skill distillery. Youcan find that on GitHub and it's free.Um, but it's really good for making likelayered skills that aren't just singlefile and
00:53:36it it helps you make kind oflike mini products or mini apps for youragents basically. Um,yeah. So, go check it out, download it,take it for a spin, give me feedback ifyou have it. I have a bunch of other Ijust released 2.0 and 2.1 of my designmotion principle skill. Um, there's abunch of other stuff on there that'sfree on my GitHub that you can go grabif you want.>> Uh, plus one, I use cow skills. So, uh,this isan example of like how I kind of dofront end. So, like when I'm ready tostart refining the details, I'mbasically using agentation foreverything. And people will be like,>> uh, why are you telling it to change thepadding left? Just change the CSS. I amfully capable of changing the CSS, but Idon't care about loading states becauseI'm always doing things in parallel. So,like I actually don't really freakingcare. Like I I'm I'm totally okay justdescribing a bunch of things where I'mlike um let's uh let'sslow this hover state down maybe to 300milliseconds.Um, and I'll just describe a bunch ofthings and then grab it and paste it
00:54:51and and then I just go do something elseand it's like I don't Is that is thatlike I don't know. Is it wasteful?Maybe. Am I burning the Amazon? Maybe.But it works for me. And um yeah, sothis is working. Uh, I'm in a It's10:05, so I I'll probably>> Yeah,>> maybe we'll just pause. Like, are thereother questions that we haven't answeredreal quickly?>> I know there's been a lot going on inthe chat trying to keep up.>> Yeah. Um,
00:55:27oh,>> quick little tip.Uh, I'll post more about this later, butuh, when your when your agent is makingdocumentation for you to review, thelatest hack that's going around a lotthat that I've jumped on to fully ishave your agent in the global rules makenice um, HTML files instead of MDs anduse the MDs for agent reading, but forhumans, have it make uh, uh the HTMLfiles and I'm even a bunch of my skillsincluding design motion principles. Thenew version has like a pre-esignedtemplate. So you'll now get your auditsand stuff like that and the ideas in anHTML file and it's even showing you likethe animations you have right now andit's proposedum changes to it in just a basic littleHTML file. So>> I did that this morning actually sinceyou texted me about it. I made upthere's like a technical plan forsomething that>> is just like an idea I have and I turnedit into an HTML and it was then sharablewhich was great. Uh real quick I got areview from Codex. I literally justpaste that sucker in.>> Yep.>> And then
00:56:42go on to what else I'm doing.Um so there was a question about do Iever use paper by hand? I totally do.Honestly, I'm feeling very constrainedon time um right now. But like almostalways I will take the thing that I likeand then I'll just mess around with it.Like I just remove this in code. I wouldjust remove that here. Um, this border II didn't I actually don't even reallycare about the border. So, like I wouldprobably just remove that here. Um, alot of times I'll just duplicate itagain and start riffing like you knowmaybe I don't want this. Um, I don'tknow all the different kinds of thingsthat you can do, but I almost always usepaper like twice to get something thatfeels directionally correct. Then I willdo uh I I'll riff with it and like youknow just just tweak little layouts ortypography or just kind of change thingsabout 10 20%. Uh and then I get to thepoint I'm like cool I like this. Itdoesn't have to be perfect. It just hasto be>> good enough where I'll just like useagentation in the front end to liketweak things and then I'll just selectthe frame and just say um I'll go backto conductor and just say build thisbasically.>> Yep. Um, [clears throat]okay.
00:57:56This is uhOh, weird. It normally just says updatethe plan.Do you update the plan?[laughter]Um,I'm I'm definitely I'm definitelyskimming things right now for sure. But>> um Oh, it's waiting for me. ABC. Gosh,pick something too complex.
00:58:22Just going to pick stuff so we can see.See one.Uh, all right. Let's look at the chathere.Uh, why use conductor over cursor? I'lladmit the new cursor feels closer toconductor. I think they they copied alot of things, but I really like worktrees by default. Um, I really likethese agent tabs up here. I also reallylike how they productized a bunch ofstuff. Um, like all the controls you getin here for like all the GitHub actionsand everything. This run script is dope.I freaking love the run script.>> There's also an element of like I'vebeen using this now for about fourmonths. I'm super comfortable in it.>> Um, but I I do feel like I'm able to domore things at once in Conductor.>> Mhm. In a in a clean like visual way.>> Yeah.>> Yeah. Honestly, like at a certain pointit's just like we can't like we hoparound tools a lot, but like we can'ttry everything all the time. There's wedo try especially me like tries all thestuff all the time, but it's Yeah, it'sa lot.>> Yeah.Um
00:59:34there's some questions around like whathow do you start if you don't have likea design system or would you use paperfor more like highle brand explorations?I'm like the answer is totally yes.>> Yeah,>> it's really good at references too. Solike>> sometimes I will>> like when I was making Let's see if Ihavedo I uhlet me try this.Do I have this up?
01:00:03When I was Oh gosh, I'm incognito. Holdon.Okay. Uh, when I was making like an oldversion of the inflight website, therewas a lot more like graphic Ah, dang it.I don't have it saved. That's fine. Itwas a lot more graphic concepts. I'm notreally good at graphic design. So, I wason Pinterest and I found a bunch of likeconstellation patterns that I like and Ifed all of those into Claude inConductor and I was like, let's juststart exploring like crazy differentways that I can bring this into SVG inpaper. That was actually before thequiver partnership too. So now um>> another another link worth sharing. Whatis it? Quiver AI.>> Yeah.>> Oh yeah.>> Horrible H1. I don't It's better thanthis H1. It's like you can generate SVGbasically and you can do this in papernow. So I would>> I would go crazy with with just likegenerating all different kinds of likeSVG concepts in paper.>> Um the same thing. You get the one youwant, you grab it, you build it, youbring it like you just tell Claude inConductor, "Okay, build V12 orwhatever." And then I'm having so muchsuccess just doing SVG animations withwith uh
01:01:18Quad. I mean, even umeven the thing on the website like>> like this kind of this kind of guy, Idon't actually really know how thatworks. I'll be totally honest with you,but I one-shoted it. It was super easy.And then I just spun up a dial kit to uhtweak when each value happened. Got itwhere I wanted in about 5 minutes. Copypaste and I haven't touched it since andit's been on the live website. Um, andthat's I have so many examples of thatwhere the the if you can if you usequiver in paper to generate the baseSVG, get where you want it, bring itback into code, and then uh do an SVGanimation with Claude, like you can beyou can get crazy places without havingany [laughter] clue what is happeningunderneath the hood.>> I would have never even known to liketell Claude to do an exploration justusing SVGs and animating those. Andthat's and that's why we keepemphasizing just like contextualizetalk to AI like it's a person you'retrying to work with like tell them whytell them what you're trying toaccomplish and let it give you you knowinteresting options of like you knowlike I was doing this on my portfolioand I saw that React flow library existsfor like an animated
01:02:34you know flowchartkind of nice looking thing but um it'salso kind of heavy and there's and itand harder to like dial in really well.So, I did use that for a bigger one, butthen I was saying all of this to Claudeand it was like, "Well, for the herosection, I could just do an SVGanimation instead. Want to see what thatlooks like?" And I was like, "Hell yeah,go ahead." And then it basically gave melike the 95% version of what I wanted.>> Yep. Yep. Um,
01:03:06Matthew says, "Oh, no. Who said this?"Geppe says, "How to do an SVG animationwith quad." I literally would just say,"I have no idea how to do an SVGanimation with quad, but this one guy onthe live stream said that I could, andcan you just do something like tell mehow to do it and it will work. Ipromise.">> And then give it and then and then say,"Okay, cool. Give me a dial kit to likecontrol it and you're good. You'll getthere."Um,and just just because before I wrap up,so like um, Jackson says like so you canprompt the quiver model in paper togenerate SVGs and like that I thinkthat's like honestly the main takeawayand why I like conductor so much is likegiven the work tree are the things thatI'm working on and then within a worktree I have the different tabs and onetab could be in paper doing SVGs, onetab could be in paper doing productdesign, one tab could be in local hostbuilding a playground, another could belike researching some random thing onthe internet for best practices aroundhow to do like layout transitions. Idon't know. Um, and all of the like Ihave my agents working on in totallydifferent tools and mediums all in asingle work tree and then it just choochoos me along basically.>> And again, the reason to do this uh Iyou know earlier talked to this a littlebit but some people were asking aboutwork trees versus branches. The reasonit do work trees and that conductor doesautomatically
01:04:22is that RID could do allthose things on literally like the samesection of the inflight tool or theinflight website and none of them willinterfere with each other because thework trees are clones. If he tried to dothe same thing with multiple branches onthe same code base, his agents areliterally going to bump into each otherand they'll see each other be like,"Wait, what the hell?" Um, so just itit's just doing the work trees and againlike I wasn't doing it before conductorbut conductor makes it so like nativeand natural like it's just like oh it'sjust a new tab that that the mentalmodel just like clicked for me and nowit's just like this is this is for surethe way to go. You can still havemultiple branches within one work tree,but just having separate work trees forall your separate likemental lanes of what you're working on,even if you're on the same code base isthe gem.>> Mental lanes is a good way of puttingit. I I just Yeah, I would never workwithout a work tree at this point. Um,I'm going to show you I'm going to showyou one last piece here. So,>> I have I have my playground. Like thisis a pretty common it it was cut shortin in some ways and you know obviouslywe're doing our best here but like>> if we do the if we do the summary rightlike we
01:05:37have paper paper does a bunch ofvisual directions I'm just trying to seethings like genuinely I I would not havecome up with this I think it's kind ofinteresting I probably would have takenit a different way but it was like itwas fun to explore right um so then sopaper helps me see all the potentialdirections I normally pick a few that Ilike I then say okay let's do fiveishmore within that like based off of thesetwo or three that I like>> that by that point I probably getsomewhere pretty interesting where Imight grab one or two now I'm manuallykind of riffing making tweaks and nowI'm saying all right let's build thisthing>> I'm almost always building in I like asstep one and I'm doing this in parallelI'm almost always doing aslashplayground slash you know whateverI'm working on um then using versionshere to like build different directions.Uh, and so I'm like kind of like hackingmy own version history. It it probablyshould be a skill. Um, because I givethat same promot over and over and overagain.>> And uh I'm sure Yeah, I'm sure Kyle'sgoing to make you into a skill here. Um,and then whenever I'm like like at thispoint I'm like, "Okay, I got somethinglike I think this is like genuinelyinteresting right here." like this
01:06:52wouldthis solves the problem that I wanted tocome into this with. So then what I whatI do is um from inside of conductorsterminal or uh we actually have like awhole like plugin or MCP uh set upinside of um it just works if if you'rein cursor you can type like slashsharekind of thing. I just type inflightshare and then this is going toI use Verscell so it's going to nativelyconnect. Um I'm going to push thesechanges and what it is it's going to nowdeploy Verscell. Um, so it'll give me asecond here, but the idea is likeI'm kind of ready. Like the reason Ilike playground files right now so muchis because I can just send this link topeople and have them tinker and liketest out the different versions and andsee what they think. And I think it's aa a trap a trap with jumping into codeis we can get into execution mode tooquickly and we basically just have asingle preview that is built on like theactual surface area of the product whereit's like really difficult to showdifferent versions.>> Yeah. Uh, and so we end up
01:08:08just showingthe one thing when and and and becausethere's like this pressure to showthings that are in code, it it umwe end up just skipping like a prettygood touch point where it's like no, no,no, let's go wide. Yeah.>> Right. Like so how like this flow for meis my attempt of like I'm buildingthings, everything's functional, I'msending real prototypes, but I'm stillgoing really wide. Um, and so likeLuca's question here, how do I sharelocal previews with other nontechnicalpeople?>> The answer is it depends. Like in theideal world, you have like some kind ofa deployment pipeline set up like mostcommonly you'd have like a verselldeployment link or something like that,netifi, something like that. Um,>> or they>> Well, yeah. So like I I use I useVerscell. So like you can see like it ithad there's a versel deployment here andthen I can click start new project andthen it's just going to open it up. Soin this situation here oh in thissituation I'm in playgroundslashgridand then uh I like recording a littlevideo on top of on top of this.>> Umthat's the
01:09:23real bug I should have fixed.[laughter] Okay, cool. Uh so what I'llsay I'll do something like this for theteam where I'm like let's set up theproblem. So hey I'm working on uh thisgrid card and I think the thing that'sbugging me is like I can't see I justcan't see the information until I hoverand I think we're putting too muchvaluable information behind a hoverstate and more of that should be exposedso the whole page is more skimable. So Ihave three different concepts here. Uhone of them actually puts it like in acontainer so when you hover it slidesup. Um maybe that interaction should betied to like hovering over thecontainer. I'm not sure. Um the secondconcept is like this progressive blurhere. I think the end state looks cool,but the I concerned there's a little bittoo much motion. And then um the thethird version here is like maybe it'sjust like a a fixed div at the bottom.And then on hover we just show the likeTLDDR as an overlay. So I'm I'm curiouswhich one of these directions feels bestand if you have any other ideas that Ishould try or visual nitpicks or thingslike that.Um, so then what invite's going to do isit's going to see like the code diff,the designs. It's going to automaticallygenerate suggested questions for me. Um,so you can see like it's creating like apoll based off
01:10:38of these versions. I canedit it if I want. So if I wanted to dolike V1, V2,V3 kind of thing. Um, maybe I can getrid of this. I don't know. And then wegive like I like doing sentiment stuff alot or if it's like late in the processI'll do like a ship it so you can likeit's just good to go out the doorbasically.>> Um and then when I'm ready I just hitpublish and what this is going to do isuh it actually creates like a startingpoint for the URL too. So I'm not justsharing like a a generic link. So I'llhit publish. Copy this link. It'll writethe Slack message for me. Um, and sothen when I send this off to the team,they're automatically dumped into here.So they can see like the playground thatI made, a little bit of video context,which just like here thinking, what'sthe problem? Why am I even working onthis? And then they can go through andsay like obviouslyI'm going to pretend to be you.Obviously V3 is better and this is cool,but um, you know, you can say this textshould be bigger. And I like gettinglike the pinned comments and everything.Um,and maybe we'll do uh maybe a hybrid
01:11:53ofV2 and V3 would be best.>> And then if I go back, what I'm gettingthen is all of this feedback. And thenthat will actually turn into next steps.I think it's on like a 60 seconds. Andso I'll just take all of these thisfeedback, paste it back into a new tabin conductor because I'm just leavingthis grid concepts open. And I'm tellingit to like pull down the changes.>> Um,>> that's my work.>> Same work tree.>> Everything's Yeah. So, like theconductor basically becomes like myto-do list effectively. Like I'm justgoing to leave grid card concepts openbecause I'm not even really ready tocreate a PR yet. I don't actually careabout a PR. I want to know like one, arewe even down to work on this? Two, likewhich one of these is best. Um and andthen I'm going to like iterate iterateand then finally I'll get to the pointI'm like okay cool everybody's kind ofon the same page here and we're going togo ahead and create a PR in which casethen I would just hit this button inconductor and kick off that processprobably do the review that kind of>> Yeah. Yeah. Yeah.>> Hell yeah. Thanks for stopping by. Hesaid he had like five agents cooking onsome new ideas from this video.
01:13:08[laughter] I kind of figured you see seeall the silly things I'm doing verymanually. Um yeah. [clears throat] Uhvery cool that both Charlie and Stephenwere payuctor.>> Yeah.>> Gracing us with their presence. Um>> yeah.>> And that the tool that Rid was using isinflight. And yes, go sign up for it.>> Shameless bug.>> Yeah. It's great though. It being ableto do it straight from your terminal andstuff is huge. I use it all the time.I'm building constantly. I have like 10different projects in flight as it wereuh at one time and I need feedback andit's hard to keep track of everythingand it just Yeah, it's really nice.Oh my gosh, I forgot one thing. God,>> dude, I made a list of things I wantedto do. I'm going to show one thinglately.>> Yeah, Stephen knew exactly what I wasabout to show.>> Hey, we rules.>> This is the thing that nobody uses. Uh,so, so paper has a a Chrome extension.That's so freaking cool. So, I just typepaper, go down. Um, and it, you can justselect any element. So, like remember Ibuilt this one in or actually I don'teven remember. Um, I'll just go intopaper and then I
01:14:23just paste it and youget like the core shell.>> Oh>> Just like that. And all that yet,>> dude. It's so good. Because like it'sit's because because paper is likerooted in code like this is HTML CSSDOM. You don't need an MCP. [laughter]>> Hell yeah, dude.>> You just cop. So all the time I'll maybeI'll get the initial direction withpaper.>> Yeah.>> But then I'll, you know, I'm iterating.I'm making a mess of things in myplayground and then I'll stumble onsomething or I'm like, "Oh, that'scool." And then I'll be like, "Huh,there's probably other ways to evenbranch off of that direction." So thenI'll just grab that component, paste it,and then I'll be like, okay, I'll tellI like V7,but I think we should explore it likefive different ways along this axis, andI want to experiment d like just go andthen I'll have it do like a crazy visualrun off of something that I actuallyarrived at initially in code. And sothat's kind of what the paper snapshotthing does for me where it snapshot>> paper birectional>> is dope. I can't believe I haven't beenusing that. No, people need to use itway more like [laughter]and and and I guess another thing likeanother way that I honestly could have
01:15:39honestly if I was starting this fromscratch um kind of just winging it alittle bit but if I was starting thisfrom scratch I would probably do thiscuz I don't I don't have like I don'thave productiondesign's just way behind production forme like I used to care so much abouthaving my design files in sync and Nowthey're like, I just don't even care. Idon't care at all. Um, and part of it isbecause I'm doing more exploring incode. I'm nailing the finer details incode. And then it's super easy. If Iwant to if I want to riff on something,I just just use the snapshot, grab it,and then paste it. And then I'll I willstart my design exploration process ontop of what was already in production.It's really helpful.>> Um, like so much of our>> so much of of the inflight product isthis feedback guide here. I literallydon't have a a version of this like inin design really.And when I was in Figma, it was drivingme crazy.>> Yeah.>> Because I had made the I had made thelike two card version of it in code andI just it was really hard to like riff.But now with um>> with paper like I just copy the wholething, paste it
01:16:55>> and then start pulling it apart andmessing around from there. Yeah. And ifanybody's wondering, uh, we're notsponsored by any of these tools[laughter]>> because we have no loyalty.>> Yeah. Let's uh I'm just making surethere's no nothing else in the in thechat. It's a lot of more emojis. Um,[snorts]>> I think I think I probably I think Kyle,anything else from you? I think>> I don't think the darnest>> uh Yeah, we showed a lot. I know we'reit's a little chaotic, but um>> so it is life today with when wieldingagents.>> This this is what it looks like whenwhen we're doing our own work uh thismuch chaos. So you can just rewatch therecording>> uh if you need to break some stuff down,but feel free to um>> I won't speak for you. Feel free to hitme up uh if you have some follow-upquestions from this on Twitter andstuff. I'm gonna I'm gonna pull Kyle'sarm to get him to help me with someskills, too. So, maybe we can we can dolike a an audit based off of theEverybody just saw the the true insanityof my day today, and I'm sure there arebetter ways to do it.>> I'm going to normalize it and clean itand make it so much easier for you. Forsure.
01:18:11>> Um,>> yeah. All right. Well, this is fun.>> Thanks everyone for hanging out.>> Yeah, everyone, you'll get the links tothe recording in emails. Um, chat withus on X. I'm shipping my full portfoliolater today. Finally,>> at xanto.co.Um,>> yeah. I think that's that's pretty muchit for now.>> This was fun. I hope it was fun. Hope itwas fun for everybody and>> fun for us.>> Tag us tag us in things if you're goingto>> if you like iterate on this or trylittle things. Tag us on Twitter becausewe'd love to see and everybody'slearning together. I actually meant togive that disclaimer. We're all learningtogether. This is this is not a a goldstandard of how to do it by any means.This is like>> starting the conversation because uhit's things are changing really fast.So, [music] Yep.