Intro & Setup0:00
We're going to diveright in, no introductions. If you want to follow along, get out your VS Code. Some of the things I'm showing are VS Code Insiders. Who's an Insiders user? Anybody? I'll get to explain that. So, Insiders is our pre-release that's built, basically, by whatever the team landed the day before.
It's going to release actually twice a day. And it has all the latest things we're working on. VS Code otherwise releases on a monthly basis. The next release is coming up next week on the 11th. So, who has done vibe coding?
Vibe Spectrum0:50
Anybody? Some, some. Who has negative feelings about vibe coding? OK, some. So yeah, we want to fully give in to the vibes in this presentation. It's going to be a lot of screenshottable slides to bring home to your team.
So get your phones out now. We're going to embrace exponentials and forget that code even exists how Andrej Karpathy created that vibe coding idea. So, vibe coding in itself and why it has these negative connotations, it starts in this fun chaos mode.
Because part of the journey of what I'm presenting, looking at the clock in 13 minutes and 40 seconds, is how we get to this other side of professional Zen vibes. And to break it down a bit, this initial vibe coding, what you see most people do on YouTube when they work on websites and ship them to production and then wonder why everything is slowly falling apart and their bills go up, that's the YOLO vibe coding and not meant to ship to production.
It's about speed, instant gratification. There's creativity in there. And it's really about this fast learning. Hopefully I can highlight that. Then next, and these are all made-up terms. This is an ever-evolving space. You can find, if you have better words, please bring them to me.
But structured vibes brings guardrails to how these things actually act. And if you have an LLM in this first space, it will just do creative things. Guardrails added to enter the state of maintainability and balance it to bring you some more sustainable code in the end.
YOLO vibes are not meant to be used in the long term. Structured vibes are where you bring actually that enterprise state in the end that somebody you feel comfortable handing it over. And lastly, we have the spec-driven vibes, where I think most of you probably want to end up with.
And that's where vibes, the idea of vibe coding, scales up to large code bases with scale and reliability and really that velocity of everybody feeling the vibes and generating code, but in a generating code in a way that fits into the code base.
YOLO Vibes3:00
So quick YOLO outliner. As Karpathy termed it, it's all about the outcomes. You don't look at code. You iterate using language. Best even talk to the AI. Then auto-accepting is really part of it. You don't want to you talk to the AI, you look at what it creates, and all the rest just lands.
If it ever goes wrong, you just reset everything completely. You throw out the code, or you undo and you keep going. And there is a place for YOLO vibe coding. It's not just weird weekend things. It's rapid prototyping and proof of concept you just want to explore.
It's where creativity really shines and you can focus on the outcome. And that's the thing where vibe coding really shines. And while you do it, you can learn. You can try something in a Rust code base. Make a Rust game.
Make a Rust frogger. Try a different stack. Make a neon flickering Rust frogger. Just, and then look at the code in the end, like how do games work actually in Rust. Have AI explain the code back to you.
And lastly, personal projects is where we see it most. Just over the weekend, my kids needed an app to do X, and we built it together, and now we have an app to do X. And I'm not shipping it to production, but it's my app.
So we can do some demos. I think the easiest way to show it off, just open a new VS Code window. This is my Insiders. If you haven't done it, oh, I have an update pending. This is Insiders, so it's every day something new.
Live Demo4:16
I'm excited. But not updating now. OK,
so make sure you're in agent mode, whichright now isn't yet the default. We're working on that.
You don't see it.
Oh, shoot.
Same problem, I guess. Auto sharing to don't monitor. Change.
Whoa. Entire screen.
There we go.
Ta-da. OK, thank you. Yeah, so let's start with the don't care about the code. And one way to do this is auto-approve. If you look at Chat Auto Proof, it's a, with caveats, cool option. And you can enable it also for, for example, your workspace only.
But auto-approve allows you to avoid all these confirmation buttons that the chat otherwise annoyingly throws at you while you're trying to vibe. So while we're here, let's start this. You see this little microphone button down here? And that is built into VS Code.
It's actually a local model. Nothing leaves your machine. And it's really a great way to just chat with the AI. You can actually set it back that it responds everything back to you. Let's try it. Let's make our first app.
And then go back to the slides because we want to just make Copilot vibe what we asked for. So actually, the shortcut for me is Command I. I like that one. Let's make an app for water hydration tracking in React and Vite.
It should use Material UI and follow nice Apple-esque design principles. So yeah, thank you.
OK, enough of those. So what you see now first is actually we have a create new workspace tool, which lets you vibe code a little bit easier. It's, let's do.
Is this just Copilot, or is this something else?
Just Copilot.
OK.
Yeah, the Copilot agent mode. It comes with that tool. So demo, one, two, whatever. It's vibe coding. So we don't care about the code. But it has to be somewhere. OK, now because we have the repo or workspace, it will just continue.
And now it will actually just see how it starts it off. Create a React workspace, water hydration tracking app, Material UI, Apple-esque design. It made a plan in the background, and now it shares the high-level plan with us, and it goes off.
So we can go back to the slides and not care about the code.
NPM install, npm dev. So I trust it. It will do stuff.
The model used is the one that was at the bottom?
Yes. Yeah. So this is using Claude 7.4, which I find really good at UI. I actually ran the same demo with different models. 4.1 makes it look very wireframe-y. 2.5 Pro has an interesting design sense where it always looks somewhat different.
And Claude Sonnet makes it always look like a blockchain landing page if you make itright. So lots of gradients and dark and big letters. So kind of as we seven minutes. So we have a YOLO toolbox. It's agent mode.
There's a new workspace flow. That's really interesting. So if you haven't tried it out yet, it can also trip you off if you ask for something in a new app in an existing project. Make sure if you hit that.
Voice dictation built in. Visual context I might get to showing around. So once it actually starts finishing, it will open up the page in browser preview in VS Code, and I can actually select specific elements. And then the auto-accept option.
There's another auto-accept after delay if you don't have that on in VS Code. There's an auto-save that I really like to drive any live updates in the background that are running. And the undo and revert I quickly show up here.
If anything goes wrong, there's always these buttons up here for undo and going back. So see where it is. Still installing. Beautiful Wi-Fi making demos easier.
Working with this, I kind of need to how do you get console errors and things like that? Are you able to.
Yes. Actually, when this runs and it runs any thermal commands, and the thermal commands fail, it will actually look at the output. So if there's any dependencies missing, it will go off and install them. It's still like Chat CN had some changes in how you install it, for example.
It will figure out because the error message is, use this package instead, and the next command will use theright.
But there are console errors that do not show up.
Sometimes it'll run things in the background terminal, but there's ongoing fixes to make it basically always find it. OK, let's keep going. Next one. While it runs, it's use vibe code, use YOLO vibe code. So really try it out.
YOLO Tips9:12
Embrace the exponentials to build that AI intuition. Like what is AI good at? What AI can't do yet? And find that for yourself. Just baseline what AI can do. And that's where YOLO vibe coding with like a very open canvas and being able to steer AI is an extremely powerful skill to inform all of other AI usage.
Then the second one is using frameworks I picked React and Vite in my demo because it gives a nice grounding and it's something that hasn't changed in a while. So that's a good way. If you use any new ones, you want to be more explicit about how to read the docs and where to find information.
And lastly, it's all about iteration. So it's a whiteboard. You want to wipe things off completely. You want to start from scratch. You want to work on specific items. But it's really about having this iterative workflow outlined. Quick check-in.
Still working on some files. OK, we keep going. So structured vibe coding. And that's where we bring in a template. And that template comes with a consistent text stack. And that could be your internal stack. It could be a container that you give to developers.
Structured Vibes10:16
So if you want to work on UX, bring this template in and you can just start vibing. That could be even for non-technical people. Just check out this repo or work from this template on GitHub. Open it in VS Code.
Engage agent mode in voice mode and start vibing. But because it's a template, it comes with this consistent text stack, and it comes with instructions to guide the Copilot flow onto specific conventions that you're already running with. And then lastly, we want to custom tools using MCP and other things to make sure if it needs information or needs more context, that can that get.
And that's really more reliable and more consistent than YOLO mode. If you ask YOLO mode, it wouldn't have given it Material UI. It might have picked any other design framework. It might have went with Tailwind. So that allows you to internally, we use Fluent UI.
So you're going to use Fluent UI. This is where you get the package. And just it's outlined and it's clear. And so it's really great for bootstrapping these greenfield projects because you end up with something people can hand over to engineering.
And engineering doesn't say, like, this is totally not what we're doing. Interesting also, it's better at the off-mainstream, like anything that's not popular, like Spring Boot, whatever latest version you have that the AI struggles with, you can add more instructions on top that it gets itright more often.
I'm going to show a quick how this would look like. Still vibing. Yeah, I think it's mostly internet speed here making it slow. So let's figure out this is a nice repo. It's actually on the internet. If you go to github.com/digitarout.
And then I put it up. I think it's still under frontend vibes template. So let's zoom in. If you want to take a screenshot for later.
Wait, hold up. Again?
Yeah. How's this screen sharing working? I don't know. I'm not technical. Is this entire screen,right?
It's one on desktop too.
OK. Yeah, I think every time I switch back to PowerPoint, it tries to do the Mood screen again. OK, so
GitHub again. GitHub again.
Sharing the vibes here. Two minutes. OK, we got good. Yeah, so that's a nice template. Just going to do a quick roundup. So one, we have chat modes. That's what I'm highlighted here on the left. GitHub folder chat modes.
And you can define already tools. You define what tools are in the mode and what's the system prompt. And then they show up down here. Actually, you can switch out agent. It's a new agent that's now doing test-driven development for you.
And that description here, I wrote in another demo earlier about how to do test-driven development. I didn't know there's a red, green, and anything else. So that's up to you how you define that mode. But this basically now guides it.
You have to write tests first. And then you write code, and then it's passed. And only move to writing code after I confirm because I want to review the tests. And that's much easier for review to me. You can also create prompts.
And that's a way for your team to create these reusable tasks that are then used across different iterations. It could be a new landing page for your design team. Like we need a new micro landing page. This is how you restructure it.
And then it can just create it. And lastly, instructions. Those are new. Those are in .github/instructions. And those can outline what specific parts of the code base do. So to go back to the slides. Yeah, the thing again.
So you want to bring in workspace instructions. There's a good document on VS Code documentation on customization. If you want to go deeper, there's the instructions I showed and prompts. You want to make them dynamic for specific parts of the code base.
Customization13:52
And you want to start bringing MCP. Couldn't show up MCPright now because we're running out of time. Check out my MCP talk from the MCP track if you want to see some of those demos. Also, VS Code has access to problems and tasks.
So if you have your task runners set up in VS Code and your linters properly, it will actually start fixing code as it makes mistakes, which is a really powerful context to have for the AI. And lastly, if you haven't found that little spark icon in the commit, it's really important once you start working and having workable code to keep committing that workable code so you don't get into weird areas where it worked before, and now my vibe coding broke it, and that's always sad.
So review is important.
Always on these instructions are important. Start with errors. Committing is important. So commit often. Pause the agent to inspect. Lastly, in 10 seconds, spec-driven really brings this often repeat idea, which you'll see here as well. You start with a spec.
You make a plan. And then you implement the plan. And that really brings it up to the large scale. And the features we have here, I showed off, prompts, more MCPs, and more task-specific tools that you can bring in.
Spec-Driven15:04
And we're up. Happy to chat more outside.





