IDE Vibe Coding

v1Best Practice

Coden ohne Kontext-Wechsel — Modell sitzt direkt in der IDE.

Struktur

Wie IDE Vibe Coding zusammenhängt

Beide Personen arbeiten auf einem Klon desselben Repos. CLAUDE.md, Skills und Settings kommen aus dem gemeinsamen Git-Repo — persönliche User-Skills bleiben lokal.

Wofür du das brauchst

Wann IDE Vibe Coding passt

Vier Situationen aus dem Tour-Online-Alltag. Wenn sich eine davon vertraut anfühlt, bist du hier richtig.

01

Bug in fremdem Code fixen

Du sollst einen Fehler in einem Bereich beheben, den du nie geschrieben hast. Öffne das Repo in VS Code, starte Claude Code im Terminal, beschreibe das Verhalten. Claude liest die Dateien, zeigt dir die Ursache und schlägt einen Fix vor. Du reviewst, passt an, committest.

02

Feature von Grund auf bauen

Du brauchst eine neue Komponente samt Tests und Styling. Statt Boilerplate zu tippen, beschreibst du die Anforderung. Claude nutzt die CLAUDE.md deines Repos und liefert einen Entwurf, der zu eurem Stil passt. Du iterierst weiter — kein Copy-Paste aus dem Netz.

03

Refactoring begleitet durchziehen

Ein Modul muss umgebaut werden. Claude analysiert die Abhängigkeiten, schlägt einen Schrittplan vor, du gibst pro Schritt grün. Kein Big-Bang-Rewrite, keine Black-Box — du verstehst und validierst jede Änderung.

04

Pull Request schneller reviewen

Kollegin hat PR offen, du willst sauber reviewen. Claude fasst den Diff zusammen, markiert auffällige Stellen und prüft auf typische Fehler. Du hast den Kopf frei für die inhaltliche Bewertung, statt durch 600 Zeilen Diff zu scrollen.

Voraussetzungen

Was du dafür brauchst

Einmal eingerichtet, dann fließt es. Die meisten Bausteine bekommst du firmenweit über deinen Tour-Online-Account.

Software

  • Visual Studio Code
    Download
  • Claude Code

    Das CLI-Harness direkt im VS-Code-Terminal.

    Setup-Guide
  • Git

    Für alle Tour-Online-Repos erforderlich — meist schon da.

Zugänge

  • GitHub-Org tour-online

    Zugriff auf die Team-Repos beantragen.

    IT-Ticket
  • Claude.ai Team-Plan

    Wird firmenweit bereitgestellt, läuft über deinen Tour-Online-Account.

  • Slack-Channel #ki-workflow

    Fragen, Tipps, Showcases aus dem Kollegium.

API-Keys

  • Kein eigener Anthropic-API-Key nötig

    Login in Claude Code per /login — Authentifizierung läuft über den Team-Plan.

  • Alternative: ANTHROPIC_API_KEY

    Nur wenn du explizit auf API-Abrechnung arbeitest (z.B. eigenes Tooling).

Zeit-Invest

30 Minuten Setup · 1 Stunde bis zur ersten produktiven Session · ca. 1 Woche bis flüssiges Arbeiten

Technischer Ablauf

So arbeitest du mit IDE Vibe Coding

  1. 01

    Repo auschecken

    VS Code öffnen, Terminal dazu, Repo klonen (oder wechseln).

    git clone [email protected]:tour-online/<repo>.git && code <repo>
  2. 02

    Claude Code im Terminal starten

    Im integrierten Terminal von VS Code. Beim ersten Mal /init — Claude scannt das Repo und schlägt eine passende CLAUDE.md vor.

    claude
  3. 03

    Aufgabe beschreiben

    Ein Satz reicht oft — je konkreter der Kontext (Dateipfad, erwartetes Verhalten), desto besser die erste Antwort. Claude darf nachfragen, wenn etwas unklar ist.

    > "Füge Pagination zu UserList.tsx hinzu"
  4. 04

    Änderungen reviewen

    Claude zeigt den Diff vor jedem Write. Du bestätigst mit y oder präzisierst. Bei größeren Änderungen lieber Schritt für Schritt, nicht alles auf einmal.

  5. 05

    Tests laufen lassen

    Claude schlägt passende Tests vor und führt sie aus. Bei roten Tests iteriert ihr — keine grünen Tests, kein Commit.

    > npm test
  6. 06

    Commit + Push + PR

    Commit-Message wird aus den Changes generiert, du editierst bei Bedarf. Push auf Feature-Branch, PR im UI öffnen — die Beschreibung aus Claude übernimmt.

  7. 07

    Team-Review einholen

    Der Mensch reviewt den PR. Claude darf Kommentare schreiben, aber nicht mergen. Nach Approval: squash-merge auf main.

Tour-Online-Empfehlungen

Skills, MCPs, Settings — so setzen wir das auf

Sechs Prinzipien, die das Team bei uns teilt. Keine harte Vorschrift, aber erspart dir Lehrgeld.

  1. 01

    CLAUDE.md im Repo-Root committen

    Team-Konventionen, Stil-Regeln, Lint-Erwartungen gehören dort hin. Jede:r startet automatisch mit den gleichen Vorgaben — statt Claude 30-mal dieselben Instruktionen neu zu erklären.

    /CLAUDE.md
  2. 02

    Projekt-Skills unter .claude/skills/

    Wiederkehrende Aufgaben (Migration schreiben, Komponente scaffolden, Release-Notes generieren) als Skill packen. Teamweites Werkzeug statt Prompt-Kopien.

    /.claude/skills/<name>/SKILL.md
  3. 03

    PostToolUse-Hooks für Formatierung

    Nach jedem Claude-Write einen Prettier/ESLint-Lauf. Kein Commit mit unsauberem Format — Hooks zwingen saubere Diffs, ohne dass du dran denken musst.

    /.claude/settings.json → hooks.PostToolUse
  4. 04

    MCPs für Supabase und Linear anbinden

    Claude liest das DB-Schema direkt und sieht offene Tickets. Kontext ohne Copy-Paste. Die Konfiguration gehört ins Repo, nicht ins User-Profil.

  5. 05

    Opus 4.7 als Default, Haiku für Kleinkram

    Für komplexe Änderungen Opus 4.7, für Tippfehler und Rename-Aufgaben Haiku 4.5 — kostenbewusst und trotzdem schnell. Umschalten per /model haiku in der Session.

    .claude/settings.json → "defaultModel": "opus-4-7"
  6. 06

    Claude darf niemals direkt auf main pushen

    Human-in-the-loop bleibt Pflicht. Claude baut den PR, du reviewst, du mergest. Das Gate ist kein Hindernis, sondern die Qualitätsversicherung.

Reifegrad

Basteln oder enterprise-tauglich?

Produktiv, mit PR-Review-Gate. IDE Vibe Coding ist seit Q4 2025 unser Standard für tägliche Entwicklung. Nicht mehr experimentell — aber auch kein Autopilot. Du bleibst in der Kontrolle, Claude macht den Kontextwechsel und die Boilerplate weg.

Wofür IDE Vibe Coding funktioniert

  • Prototyping & Spikes

    Ideal — schnelle Iteration mit lesbarem Output.

  • Feature-Entwicklung

    Solider Standardfall, mit PR-Review als Safety-Net.

  • Bug-Fixing

    Claude findet Root-Cause oft schneller als klassisches Debugging.

  • Refactoring

    Begleitet, in kleinen Schritten. Keine Big-Bang-Rewrites.

  • !
    Infrastruktur-Änderungen

    Nur mit explizitem Human-Review, Terraform-Plan zuerst.

  • !
    Datenmigrationen mit Kundendaten

    Nie autonom. Dry-Run Pflicht, Staging vor Produktion.

  • Security-kritische Änderungen

    Weiter klassisch — Security-Review durch Fachrolle, nicht durch Agent.

Nicht dafür gedacht

  • Kompletter Autopilot ohne Review
  • Ersatz für fachliches Code-Review
  • Release-Management und Deployment-Gates

Ansprechbar im Haus

Frag sie — sie machen das auch

Vier Kolleg:innen, die diese Constellation täglich nutzen. Keine Scheu — sie helfen gern, wenn du einsteigst oder irgendwo hängst.

Wernau

Sophia Klein

Senior Frontend, DIRS21-Team

Nutzt Claude Code täglich für DIRS21-Frontend. Gute Adresse für Fragen zu VS-Code-Integration und Feature-Workflows.

@sophia (Slack)
Leipzig

Marco Bender

Backend-Engineer

Hat die Tour-Online-CLAUDE.md verfasst und führt interne Vibe-Coding-Workshops. Ansprechpartner für Skills und Team-Konventionen.

@marco (Slack)
Wernau

Elena Fuchs

Customer Support

Arbeitet seit kurzem mit Claude Code für interne Tools. Teilt die Einsteiger-Perspektive — ideal, wenn du selbst am Anfang stehst.

@elena (Slack)
Wernau

Jonas Weber

Tech-Lead & Platform

Entscheidet über Enterprise-Guardrails, Modell-Versionierung und MCP-Integration. Bei Infrastruktur- und Compliance-Fragen hier anfragen.

@jonas (Slack)

Beispielprofile · echte Zuordnung folgt mit User-&-Rollen-Schema

Komponenten · 3

Was gehört zu IDE Vibe Coding?

Harness1 Eintrag

  • cli_bound

    Terminal-CLI oder Claude Code for VS Code-Extension — dieselbe Engine.

IDE1 Eintrag

Modell1 Eintrag

  • Opus 4.7Primär
    AnthropicReasoning1 Mio. Tokens

Originaltext aus dem Register

VS Code als Host. Claude Code als Harness — wahlweise im Terminal (Claude Code CLI) oder als VS-Code-Extension. Das Modell liest den Workspace, editiert Dateien, führt Tools aus. Opus 4.7 ist der produktive Default.