Beyond Vibe Coding

From AI Experiments to Enterprise Solutions

Agenda

  • Vibe Coding
  • Prompting Hell
  • Missing Rules
  • The "Starter" Framework
  • 9 Steps to Control Quality
  • Before & After

Who Am I?

  • 👋 I’m Raymon
  • 📅 37 years
  • 🧑‍💻 Tech Lead at
  • 🤖 I love working with AI
  • 🫶 Frontend Dev is my specialty since 2010

About SBB

  • 🏢 Semi-government organization connecting MBO education with industry
  • 🎓 Ensuring MBO students learn skills that companies actually need
  • 🤝 Matching students with internships at recognized training companies
  • 🇳🇱 Collaborating with educational institutions & businesses across the Netherlands
  • 💡 Bridge between what's taught and what's needed in practice

Vibe Coding

Generating code with AI without clear rules,
standards, or context.

Then spending hours debugging when it breaks

The scenario

🤔🤔🤔

AI is a fantastic engine

But it needs guidance

What's the problem?

  • AI is a pleaser
  • It's a guessing game
  • It will never ask you what you exactly mean
center

AI needs context

  • Instructions
  • Documentation
  • Design system
  • Component library
  • Code styleguides
  • Commit style
  • Database schema's
  • Figma design
  • Tickets / Userstories
  • etc..
center

How are we going to give that?

Instructions

GitHub Copilot Starter

github.com/devbyray/github-copilot-starter

Turn this into a starter for Cursor, Claude, ChatGPT or other AI coding tools

But we need more!

MCP

MCP

  • Azure DevOps/Github
  • Frameworks / Library docs
  • Git
  • Figma
  • Web search
  • Azure / AWS

The workflow

  1. Plan
  2. Build
  3. Push
  4. Review

Phase 1: Plan

  1. Refine User Stories – Sharpen the problem (Azure DevOps MCP)
  2. Verify Criteria – Check the Definition of Done (Acceptance Criteria)
  3. Create Technical Plan – Design before coding (Copilot + Starter)
  4. Generate & Sync Tasks – Automate the admin (Azure DevOps MCP)

Demo

Phase 2: Build

  1. Guided Implementation – Build within the lines (Copilot + Starter)
  2. Fetch Real Context – Use facts, not guesses (Context7 MCP)

Demo

Phase 3: Push

  1. Semantic Commits – Document the "why" (Copilot + Starter)
  2. Automated PR – Bridge the gap to the team (Azure DevOps MCP)

Demo

Phase 4: Review

  1. AI-Assisted Review – The Gatekeeper for quality (Starter Template)

TLDR;

  1. Context is everything
  2. Vibe coding is cool, but not within product applications in our organizations

1. It starts fun 2. We give that initial prompt in a new project 3. Everything is fine! 4. That first prompt is magic!

1. After building, everything works!

But then the frustration starts! This change was not what you mend

Ahh it changed the wrong file! Your frustration is rising

Your build is not running anymore, it gives so many errors!

Ahhh that final moment of AI breaking everything down!

Maybe AI is not that good?

Your done with AI! From now on you are coding everything by hand again!

- Protocol - Like USB, but then tooling for AI to talk to other services.