Beyond Vibe Coding

From AI Experiments to Enterprise Solutions

Agenda

  • Vibe Coding
  • The Problem
  • The Three Pillars
  • The Workflow
  • GitHub Copilot Starter

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?

The Three Pillars

Custom Instructions

Always in context
Project-wide rules
Code standards

Agent Skills

Dynamic, modular
Specific tasks
Reusable scripts

MCP

External services
Data & integrations
Real-time context

Instructions / Rules

Universal guidelines

  • One or multiple markdown files (specific which AI coding agent your using)
  • Project conventions & architecture patterns
  • Database schema & core entities
  • Security & compliance requirements
  • High-level coding principles
  • Language-agnostic decisions

Agent skills

Structured, reusable instructions

  • SKILL.md with frontmatter (name, description) + content
  • Github Copilot, Cursor, Claude Code use the same spec 🙌
  • Dynamically loaded when needed, saves tokens

Docs: AgentSkills.io

Agent skills

Perfect for:

  • Language-specific style guides (Python, TypeScript, C#)
  • Workflow-specific tasks (testing, deployment, PR reviews)
  • Framework style guides (Vue, Angular, React, etc.)

MCP

Model Context Protocol

  • Standardized protocol for AI agents to connect with external services
  • Like USB, but for AI tooling & integrations
  • Real-time access to external data & systems
  • Integrated into agent workflows seamlessly

MCP

Perfect for:

  • Version Control: Azure DevOps, GitHub, Git
  • Design Tools: Figma, design systems
  • Frameworks & Docs: Library documentation, API references
  • Data & Services: Web search, databases, Azure/AWS
  • Communication: Slack, Teams, email integrations

Use case Custom instructions Agent Skills MCP
Universal architecture patterns ✅
Database schema & entities ✅
Security & compliance ✅
Language & framework style guides ✅
Specific task workflows ✅
Script & tool execution ✅
Dynamically loaded on demand ✅
Version control integration ✅
Design tools & systems (Figma) ✅
Library documentation & API references ✅
External data & services ✅
center
center

Phase 1: Planning

  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)
  4. Generate & Sync Tasks – Automate the admin (Azure DevOps MCP)

Phase 1: Planning

What does this solve?

  • 🚀 No context switching – Stay in your editor
  • 📊 Real-time data access – User stories & criteria instantly loaded
  • 🎯 Skills guide Copilot – Find user stories, tasks & project context automatically
  • 🔗 Automatic linking – Code connected to work items
  • 🧠 Knowledge reuse – Skills become team standards
  • 💰 Token efficiency – Pay only for what you use

Phase 2: Build

  1. Guided Implementation – Build within the lines (Copilot + Instructions + MCP + Skills)
  2. Design Verification – Validate against Figma specs (Figma MCP)
  3. Best Practice Check – Ensure quality standards (Context7 MCP + Azure DevOps)
  4. Test Validation – Verify unit tests coverage (Copilot)

Phase 2: Build

What does this solve?

  • ✅ Verified against design – No surprises in code review
  • 🏗️ Architecture compliance – Best practices enforced automatically
  • 🧪 Test coverage maintained – Confidence in changes
  • 📐 Quality gates – Catch issues before they reach production
  • 🔍 Context-aware decisions – Real specs, not guesses
  • ⚡ Development speed – Build right the first time

Phase 3: Push

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

Phase 3: Push

What does this solve?

  • 📝 Clear history – Why was this change made?
  • 🔗 Traceability – Link commits to user stories automatically
  • 👥 Team alignment – Everyone knows what's being pushed
  • 🤖 Automation ready – MCP handles linking & PR creation
  • 📦 Professional handoff – Code review becomes easier
  • 🎯 Knowledge transfer – Future devs understand decisions

Phase 4: Review

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

Phase 4: Review

What does this solve?

  • 🔍 Consistent quality – AI gatekeeper catches issues before merge
  • 💡 Learning opportunity – AI explains why changes matter
  • ⚡ Faster reviews – Checklist automated, humans focus on logic
  • 🎯 Standards enforcement – Code quality never drops
  • 🛡️ Risk mitigation – Production always stays stable

TLDR;

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

GitHub Copilot Starter

github.com/devbyray/github-copilot-starter

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!