🎶 Vibe Coding 🎶

First of all Thank you Laure for having me here at this Lunch & Learn Session, and Welcome everyone at our trendy workshop vibe coding :)

My name is Robbie and I am a software engineer here at TPS in team innovation. Together with Heino I follow up on new trends and technologies to cook up some interesting and sometimes also pretty challenging pocs.

And of course we sometimes vibe code, for example during maker weeks. But a small sidenote, I am surely not yet an expert at this since is pretty new. But I do want to share with you all, some of the things I have learned.

Our agenda for today will look something like this.

Agenda

25minA good chunk of Theory
5minSmall Q&A
40minHands on "Vibez" + Live demo
10minWrap up & Key takeaways

First we'll have a block of about 25 minutes where we'll look at the theory: What is vibe coding, How dit it come to be? Where and how can I use this new methodology. Is this going to be the future of coding? What tools are now available to help me with building my app. Where can I use it? What are best practices? and why should I even care about it?
[SPACE] Then we'll have a small conversation in the Q&A
[SPACE] To get us starting with the fun part, we'll have a hands-on session where you guys and girls can get your hands dirty. I've prepared some nice challenges for you to work on to try out vibe coding yourself. It's gonna be a lot of fun, I promise!
Once we are on a roll, I'll demonstrate some of the things here on screen in a live demo. I did not really prepare that live part, but I guess I want to try out claud.code with you guys and maybe we'll build an example.
[SPACE] Finally, we'll wrap up this lunch with a short moment to reflect upon some key takeaways to take with you on your journey. Oh yeah, and of course if you want to share what you've built or your experience, feel free to do so.

"Don't wait for inspiration. Code until it arrives."

They say that the most daunting thing when starting something new is the blank canvas. But then you realize that the blank canvas is just a canvas. And you just go with the flow and just start, just start goddammit.

You might fail miserably and you start again. You try again and again until you get it right. You try different things, you experiment, you iterate, you learn. You learn from your mistakes and you keep on learning.

The same goes for coding. You can sit there and wait for inspiration to hit you, but it won't come. When you just start, that's when more ideas will come.

What is vibe coding?

No seriously,

What is vibe coding?

Vibe coding is a new way of coding where you just put in one prompt and then you can rest a bit in your chair and let AI do the work for you. Go grab a coffee, go chat with one of your beloved colleagues about your fabulous dreams of quitting your job and opening a beach bar that vanish every time payroll hits. [PAUSE]

This Sounds great, right? Well, it is. But it's not. [SPACE]

So seriously what is it?

Vibe coding is a programming paradigm dependent on artificial intelligence where developers describe what they want in natural language and let AI generate the code for them.

The term was introduced and coined by Andrej Karpathy in February 2025 and was added to the Merriam-Webster Dictionary the following month as a "slang & trending" noun.

Some cool projects have already been made. And A good percentage of global code is now for some percentage ai generated, weather that is a good thing or not is what we'll discover along the way.

The hottest new programming language is English

Perspective

But that needs a little bit more nuance.

An experienced coder, will quickly spot potential quirks or might stand very strongly against the whole idea of vibe coding.

What if a non technical user gets stuck? What if you have never written a single line of code? How do you start? How do you fix things?

You see the perspective really matters, and the way you should handle it depends on your perspective.

Are you a coder? Are you a problem solver? Are you a good communicator? Are you a creative mastermind? Are you just leaving school and looking for a job? [PAUSE] Well good luck to you with this kind of market.

Isn't this going to create
a whole bunch of crappy apps?

AI (code) slop

Future Coding?

(How) Can I use this new methodology?

🤚🏼

(or +1 in chat)

How can I use this new methodology?

Coding != Programming

Coding is the skill of translating logic into instructions for a computer by writing code. An elite coder might be able to bang out a hundred words per minute of perfect C code in VIM purely from memorized syntax, but large language models are making this skill obsolete. An eight year old prompter can now write code faster than a skilled professional with twenty years of experience.

Programming on the other hand is a far broader skill that's kinda hard to describe. It's both an art and a science that requires ingenuity, creativity, and good instincts gained throughout years of experience.

Are there any rules I can apply?

Rules

Choose the right stack
Get gud at Git
Think like a PM

The first rule and this rule is the most flexible one is to choose the right stack you are building in. And what is considered to be the RIGHT stack? Well, for starters your new fancy javascript framework is probably going to kill your vibez because ai might not have had enough training data to get good at it.

You wanna choose something popular that already exists for a while like: React, Svelte or tailwind, express, node, fastApi you name it.

In terms of languages choose one of the popular ones, and if you are a coder and already know some languages it certainly at your advantage to choose something you already know. (duh)

[SPACE] The second rule is...Get good at git. Some people in the crowd know me as a git nerd because I know all the commands like a bit of a freak, but hey I like the terminal.

Git is a version control system that allows you to keep track of changes to your code and collaborate with others. It's essential for any software development project.

When something goes wrong while vibe coding...you can always fall back to your latest commit or latest stashed changes.[SPACE]

The third rule is to think like a PM. Maybe for the devs among us a harder step. But again this depends on your personal skills.

Ask not what can AI do for me? but what can I do for AI?

You are not a coder anymore...

V.I.B.E.S.

Verify continuously
Iterate in inches
Blueprint before you build
Explain and understand
Scope your prompts

Keep your vibe coding sessions on vibes.
[SPACE] Verify continuously - Test & Review AI output every step of the way. Never ship code that you haven't run and inspected.
[SPACE] Iterate in inches - Prompt -> run -> refine -> repeat To steer the model and catch mistakes early on.
[SPACE] Blueprint before you build - this is the most important step of the workflow. This is the same in regular coding. We often first go to the drawing board and choose how we're going to build what we're about to build.
You really want to spend a lot of time on this step. You want a detailed, thorough plan that you can pass to your agent so it knows exactly what you want.
[SPACE] Explain and Understand - Ask the ai or yourself to comment and clarify until the logic is crystal clear.
[SPACE] Scope your prompts - Limit each request to one file or feature to stop the model from 'fixing' things you didn't ask for.

> Write a detailed plan/spec for a saas app I want to build where I can drop links to articles/youtube/videos/research papers. Then it uses AI to summarize each of them and can use relevance search to help me search through all the stored articles. Ask me questions to help fill out any gaps in what this app should be.

PRD

> Now write this in the form of a PRD using the .md file format

TODO

> Also come up with a step by step todo list to build this out in .md format.

Common problems
& Simple solutions

Your Agent is not fully up to date with the documentation

MCP

MCP stands for Model Context Protocol . It is a protocol that allows you to provide your agent with extra tools, memory or prompting capabilities.

Thats the tldr version of it. Anthropic has a great article on it. They are also the one behind the standardization of the spec.

You can find tons of examples and servers out there, it's like an app store but then for developers.

Surely check out the Context7 MCP, for to fetch the latest documentation.

Oh yeah! I did forget to make a slide on which models to use when Vibe coding. You can find the comparison list at LMarena.ai

Generally: Gemini 2.5, 03, grok3 and 4o, feel also free to use the Sonnet models.

I keep bumping into the same issues , and my agent keeps making the same mistakes.

I want to be able to tell my agent on
every prompt that it needs to keep in mind something specific.

Rules

(Global or Workspace)

What about security?

Ask ai to do a security audit...😄

Or again you can use rules

Should I write tests?

What are the tools I can use?

Code Editors

Cursor $20/month is a great one, and one might say the best one, it has a lot of features and is very developer friendly. It also has a lot of integrations with other tools.[SPACE]

Windsurf (formally known as codeium) 15$/month is another great one, it has a lot of features and is very developer friendly.

By the way those two are clones of the third one[SPACE]

Visual Studio Code is a more robust, more used code editor. It has of course the github copilot plugin with a nice update for about a month old where you can also use agents to practically do the same thing you would do in cursor or windsurf. And its free. At least the editor, github copilot is paying.

Zed as a fourth but not as well known as the other three.[SPACE]

Browser Based

Then you have the browser based tools

These work straight up in the browser and also work great!

Usually they have a built in canvas or deployment system where you can immediately see what you are building which is great if you don't like build your own in the terminal.

I recommend non coders today to use these tools, of course installing an IDE is also a good choice.

First we have Firebase.studio the one that came out most recently. This tool is completely free and ready to use. It's funny how the google giant just whiped away all the other paying tools in one blow.

Bolt.new is one of the older ones and is really great for ui's and frontends. It has a token base pricing. Developed by the StackBlitz team. Who do all their coding in the cloud.

Lovable just came out recently with a polished 2.0 version of their app and it works way better than before. Check em out at lovable.dev

v0 of vercel and their nextjs. It also came about the same time bolt.new got introduces. I myself am not a big nextjs fan so I haven't tried this one out yet.

And last but not least replit another browser based ide with ai capabilities. They have diferent plans for pricing.

Plugins And Extensions

Next up are the plugins and extensions on code editors.

You have Cline an open source plugin for visual studio code.

Then there is Roo code which is actually a fork of of Cline. Roo code is a free visual code plugin, where you can hook up something like openrouter.ai and then choos the models you want. What I like about roo code is it's transparancy and all the settings they provide. It's really a nice extension to use. While vibe coding you know exatly how much money your calls to specifci models cost.

Then we have Avante for neo vim users.

And last but not least, Github copilot which also has strongly evolved over the years.

I bet that most of the developer remember their first Github Copilot auto complete like I do.

Command Line

Thanks for listening!

🙏

Q & A

Let's code!

https://bit.ly/4k2R1ua

🎶 Vibe Coding 🎶

Agenda

What is vibe coding?

What is vibe coding?

Perspective

Isn't this going to create a whole bunch of crappy apps?

AI (code) slop

Future Coding?

(How) Can I use this new methodology?

🤚🏼

How can I use this new methodology?

Coding != Programming

Are there any rules I can apply?

Rules

V.I.B.E.S.

PRD

TODO

Common problems & Simple solutions

Your Agent is not fully up to date with the documentation

MCP

I keep bumping into the same issues , and my agent keeps making the same mistakes.

I want to be able to tell my agent on every prompt that it needs to keep in mind something specific.

Rules

What about security?

Ask ai to do a security audit...😄

Or again you can use rules

Should I write tests?

What are the tools I can use?

Code Editors

Browser Based

Plugins And Extensions

Command Line

Thanks for listening!

🙏

Q & A

Let's code!

Isn't this going to create
a whole bunch of crappy apps?

Common problems
& Simple solutions

I want to be able to tell my agent on
every prompt that it needs to keep in mind something specific.