Does WireFraming / UX Exist in 5 Years with AI?

[Music] welcome to the Parker re show where we simplify Tech Ai and productivity to help you win I'm Parker X I'm a programmer who shipped dozens of products been in the startup game for over a decade and been a part of one successful exit every Friday at noon Eastern I bring you everything that I learn across the week from being in the trenches and package it up this week we're diving into five juicy topics One open ai's latest tool drops two building a product flow from zero to launch using three agents three forel's new chat setup four reloom wire framing tool and five the ongoing clash between Elon Musk and open AI so no fluff no filler let's Dive Right In as I mentioned with open AI we've been excited and waiting for something to come out and they just put this video out about 19 hours ago from today I want to show you a quick look at an no we're not going to watch that it's going to be too long you can go watch that yourself but the gist of it is they've added in this ability to basically connect different apps so if you've used other other tools in the past you typically have a co-pilot that's native to the product what's different about this is It's using an extension that you install into in the case of vs code to get context of whatever it is that you're looking at so it can do one window it can do multiple window windows but it has to see the window so you can already kind of guess one of the main cons if you're a programmer to that limitation is it doesn't allow you to get full context which I just think is wild and so let's take a look at some of the other areas you can see here that it has terminal iterm xedit and X code I think this is going to be the biggest win for X code and if you want to keep up with all the updates from the actual creator of this Alexander and baricos is the head of the chat desktop app and they did launch a lot of stuff as well in tandem that allows it to just run better this was a super laggy app before and now it's very quick so you'll notice you're at the bottom there's this big old new icon and when you click on it it'll pop up and it'll show you work with beta so if you don't have this what you can do is just update your app so I believe that is in the top left you just hit check for updates I think this is available on Windows as well not a Windows user and when you go in for the VSS code one I'll give a quick demo of it what I had to do was on the on the blog that they posted there's a file that you download and you basically download that file and then you run a command so I'll just show you how that that works we'll just go into the article here and let's see if we can't see this work with apps on Mac OS cool exactly what we're looking for if you don't have chaty BT plus you need that it's also available for team users but here's all the options kind of covered that it has the context of the windows you can also select Snippets if you don't select anything it's just going to see what's available on the screen and you basically go and there's a download link in here and you download it and then in VSS code code you will do command shift p or open the command pallet and then do extensions install from V6 that's the extension type so couple steps to get it up and running wish that was easier but that allows you to get this extension that then makes it work so let's do a quick demo of it just to show so in this case I have an electron app and I made this by two shotting with 01 and had a really good prompt and if you want to make stuff like this that'll be part two of this chat which is this agent that I built this agent flow got to get a little coffee and in here what this electron app was doing was I had a bunch of different desktop or uh ssds that I just wanted to be able to see them in the top right Mac bar and just be able to object all of them at once instead of men clicking so let's open up a couple files and we'll see how it works so in here you would just click click code and now it says working with code and this also does work if you have the smaller toast so you'll see the code that's loaded in there if you hover over it and you can add more and more files so if I say okay I want to have four then you can obviously do that and so now I have four and in this case I know that this was not working I hadn't taking the time to actually debug it but I know what part's not working so I'll say expert electron developer you are tasked with debugging our disk app disy app and I typically I'll do a couple on liners that are very tur and the goal is to say what the role is it's like a system prompt in line one and then the second one would be what that task is of the rule the third one is the goal of the task so in this case we want to make it so that when you do hit a on all because currently this app lets you see all the different discs as well as phones basically any connection we want to make sure that it actually does that job and logs it out so currently or uh expected outcome for users is that they can select the disy icon in their Mac bar and when they do that they can view all of the attached discs ssds hard drives and there's an option to click eject all we want to make sure that this is logged out and done in a safe way so what I just did there too is a tip oops didn't hit Escape was I just entered voice mode and that's just done in dictation through the Mac settings it's really good and I'll just hit enter let's see now the first thing I want to say about this is before he even gives me an answer let's assume that it's awesome I just don't love that it's all this copy pasta I think it's double-edged sword because a lot of the time when you do have something that's in line say we were using Klein or we were using continue or using cursor or uh AER any of those tools it just and you don't watch it you may try to force yourself to do it but a lot of the time unless you're very disciplined like get lazy and those muscles atrophy so I think on the side of like being bullish on this product or this solution is before you go and you do the copy paste just mentally make a note to actually read what it's outputting so it looks like we need to update this function so then what I would do is I haven't looked at this code in a while so I would just do command shift o and then I'll type in get external and that's not even it so I'll do this get external drives where is that file that's in the tray so it looks like it added some stuff here do a quick scan to see what it actually did helis external cool if air looks like it's the same right it basically wrapped it in a tri catch and that's fine and then it also for this menu item so I'll grab that and then we'll just dump that in there okay and then for the reasons it says okay cool we validated that the try tray icon there great we did these logs cool and we're using 40 probably be better with a one preview but I like to do that stuff for architecture and I don't want to burn through those update create menu items to handle empty or missing devices gracely so let's find what file you know what what I'd like to see is that this would be the file name that seems like a very obvious thing if it has the context I get that the language is important this is just a standard heris that you see but I would like to see the actual file name in there rather than having to explicitly say hey this is what we're doing and and telling it because everyone has the same problem so now we have this one where's that create menu items it looks like it handled those empty things what is it actually doing though just out of this label change so nothing nothing different again I'd like to see the file name and I'd like to see the diffs because what we're doing right here and while you're waiting eagerly waiting for me to get to the next thing you have to go through it and see what is the difference and you're looking back and forth so that's pretty pretty annoying and then eject volume to log let's see where eject volume is on function now I just added logging with a bunch of ifs interesting it's actually deleting a bunch of it too so that's the gist of it when it comes to vs code I want to do a quick example let's try something else let's try with iterm so I know I typically use warp I think that this is just there's really no reason for me need to use anything else cuz I don't pay a dime for it and I can just start typing natural language in the app so I think this is kind for them I don't think it's that great where now I need to open this see how it works though and where are you iterm we already did that so now it's working with iterm let's see what we can do let's say remove or write a last 200 lines interesting so pulls in the context the last 200 100 lines remove package and Clean Cash see what it does from RF seems like it would put it in one line for these first two at least that seems weird and I again I still have this added step of cool now I got to go so enough on that one I think you kind of get where my head is at when it comes to that particular release I think that it is helpful but it's kind of a Miss at the same time now the second topic is this this full AI from zero from an idea to the actual implementation and this is something I was working on for a few hours that takes everything that I've learned from product management of how do you stay in the problem area and then turn that into a solution and have a time box that constrains the solution so that would be the first step before you do any coding so you always measure twice cut once and then the second step and then is actually writing out a technical spec so this mimics aer's architect but it's on steroids and the third one is actually the implementation of Step by-step so I want to just walk through this and kind of how it works and as well as the outputs that I'm getting from it and areas I think this can improve I'm going to be posting this in a GitHub with versions as they make it better and better because I think people need to have access to this I think that it is going to be the way that all software development is done in the future as you will chain these together there will be team members representa as agents and you'll work with them and it'll be fantastic there's some other resources in here too before I get into the actual nitty-gritty but this guy's really good for following Daniel Mack 8 so he talks about how typically his flow is he sketch out the rough idea with the help of Sonet 3 and then then ask it to create the summary with the functional non-functional so text backc and then he loads it in preview and says give me the step by step so it's pretty similar and these guys from all hands it's open source Dev or uh I think it's like Devon was that really hypy product that came out a while ago that doesn't seem like it has legs but then someone open sourced it as a competitor and then they've renamed to all hands so you may want to check out I think it's a slack you join their slack bunch of nerds in there and the guy who's actually working on it is Graham so he has something similar so it's funny how Twitter works I just or X Works CU I just came across this after I finished this version and one one piece before I even do the step one is actually sketching so I have a notebook it's the fastest way to get your ideas down on how the flow will work so you're mapping it before you go and you even have it write the pitch map out how this thing is going to work and that's just doing a process called breadboarding which is you write the name of the screen and then all the things that the screen needs to do with words and then you draw arrows to what the things on the screen lead to so on the pitch so the format of a pitch is a problem a time box a solution no go rabbit holes and success criteria and then we have some guides below to help steer the AI so in this case this is following Shape Up methodology which allows you to stop running in circles when you're building software it's fantastic it's therapeutic but in the case of the problem it's really the motivation behind the work so I'm tweaking this because it's too wordy so go ahead and delete that and for you to just get the idea is this thing spits out a one pager you review that one pager that right now looks like this so you get the problem the time box so instead of saying an estimate based on a solution you flip that because when you give an estimate on a solution you miss it because you don't have the ability to know everything ahead of time when you go do the thing so it comes up with the time box that it thinks is a good bet based on what we tell it and then it comes up with the solution the node go which are areas that you should totally avoid any rabbit holes that may come up when working with this type of technology for this type of solution so this is the first artifact that it gives and then from that you get into this prompt or this is the output of it but you're making that text spec so step one just again input a problem a rough outline of the solution and a time box so I would say in the case of discy hey I hate having to manually go in individually eject 10 different devices I want to have one master button and I think that it should be a Mac menu bar written in electron and I think it should be the ability to have all the devices listed and one button that has eject all and we want to log stuff and then I'd say the time box for this is 2 hours so then you get the output of that pitch which is what we saw and then on the next one you actually take the pitch that it generated and then you use this prompt to write the St the spec so once you felt good about the pitch then you bring this in and you give it the stack this is really important based on what project you're working on so in my case I get super specific you have to be very specific with these models because they don't have the latest and greatest packages it's trained on this massive Corpus of information so if you say react query it doesn't know that that's tan stock query so you want to put that in the version numbers to and this is also where you can get to the actual file structures you want now that's for net new projects I want to make this work for existing ones as well where you give it a file tree maybe a repo pack but all that's included you want to basically think of how do you want the formatting how do you want all the files laid out what are the functional non-functional requirements what's the text stack we're using and this is the actual outline of the thing that it'll get back and then some additional steering so things like hey you don't have to go and give me don't burn tokens teaching me how to make Tailwind work that's included and then you get that output and you're reviewing it so it's just this cycle right where you're trying to take its output make it better in this case I was making something that generated summary threads of Po popular long form podcast because Lex fredman while he's great I don't want to listen to him for 10 hours I just want to know what was good and the idea was okay you got to listen to this thing pick out the pieces that you think are the most important and then style the thread based on a bunch of examples that I can provide it from popular Twitter posts so it gives me back this user interface all the core features of it as well as what it does the backend stuff the error handling security compliance user stories nonfunctional stuff like performance security usability maintainability and then the actual technical stack again so it's very robust and it gives you this massive thing and then it actually this is one area where I think in the open source Community we can do a good job making it better it's just timelining stuff is still struggling with that so once you do get that and puted the pitch you got this polished technical spec then you go into the implementation so I should receive step-by-step instructions for the delivery of this again trying to skip over a bunch of those early steps that Oiler plat cuz it's just burning tokens is burning that context window and it's pretty dang good honestly so again you're saying hey you're going to receive both this pitch and the taex spec so I need to I think I put thaton you're giving it both and you're saying we need production ready files and you have all this stuff in here not going to read it to you but you also inform it similar to cursor that hey if you're running out of room here we'll just stop the combo and then outline what are the remaining files that you did not do so the output of that would be all the files and then at the end of it it's saying hey here's where I feel comfortable ending with this output so you might get like 15 files which is pretty pretty good using o1 and then it'll say here's the remaining stuff so let's output oh doesn't look like I have an output oopsies but I'll update that and put it in a repo but the actual output of it it got me to a point where it worked but it was slow which is crazy so I was able to get the interface up and running and I'm just kind of Blown Away that point you're in cursor if you have strict linting you're going to find the errors so this is a big deal absolutely a big deal the next one is versell dropping this AI chatbot now they've had one out for a long time but I think why this one is special is it uses all the new goodies so if you're a big nerd and you like verel and you like well if you like next JS this is going to be really helpful for building stuff so it's basically just updated so you have a model selector and it looks like they just took v0 basically and put it in here if you go back in time the first one that they launched was at an event where they showed how to book flights with United and it had streaming in components so this one if you're building chat stuff you should definitely check out because it's just really well structured that's it for that story really quick the next one let's just take a look at this reloom thing so reloom basically lets you type in what your company does or what the idea does and it will go and generate a site map which then informs the build out of wireframes so let's click take it for a spin with an example immediately spitting this out it gave me this example of rebank is a digital bank that offers a range of financial services primarily through a mobile app allowing you to manage your money on the go so you take your oneliner and you put it in there and it'll generate this site map now I'm assuming I can't do more because of the tokens but then if I hit wireframe it's going to go ahead and actually make a pretty good wireframe and that's really helpful so you don't have to go and do this step anymore and it's really good and I think that this just helps you when you're shaping work to help understand like what is it we're actually doing a lot quicker the final story is a big deal Musk escalates open AI lawsuit if you know the backstory Elon was a part of open AI early on $20 million into it kind ofed a lot of controversy there but the short of it is without even reading this Elon getting very close with the current office or the incoming office this change of leadership for the United States those ties are really powerful and I believe that this will shape the future of AI development because what was happening when you know a year ago was all the leadership from Google in mainly open AI was spending a lot of time on the hill in DC spending a lot of time trying to put guard rails around what you can and can't do and they were the Arbiter of Truth they were the ones that could determine what's good and what is bad and that's a horrible way to introduce a life-changing technology to the world because it doesn't provide any room for competition it also creates a monopoly where if you want something that could be considered subjective in any topic they can just bias the absolute heck out of it and they can tell you this is the answer and that's bad so he alleges that open ey is trying to eliminate competitors such as his by extracting promises from investors not to fund them so that's something going on where Sam is saying hey if you invested in an open Ai and you want your shares you can't go and bet on Elon don't bet against them everything he's touched Works he turns the impossible to late is what he says it's kind of funny because it's true and I think that his ability to stand up a super compute cluster like setup in 17 days is wild absolutely wild and that is it for today if you guys enjoyed the video make sure you like And subscribe and I'll see you in the next one [Music]