Programmieren mit KI direkt im VS-Code-Editor — für Dev-Teams, die ihren Flow behalten wollen, ohne ständigen Tab-Wechsel zwischen ChatGPT und Code.
VS Code auf, Terminal daneben, Claude schreibt mit — kein Kontext-Wechsel zum Browser, kein Copy-Paste aus dem Chat. Du beschreibst den Task, Claude liest dein Repo und liefert den Diff, aber gemergt wird erst nach deinem Review.
So fühlt sich das an
Du bekommst das Ticket "UserList braucht Pagination". In VS Code öffnest du das Repo, startest Claude Code im Terminal, schreibst einen Satz: "Füge Pagination zu UserList.tsx hinzu, 20 Items pro Seite, URL-State." Claude liest die bestehende Komponente, schlägt den Diff vor, du bestätigst. Tests laufen, grün. 20 Minuten später ist der PR offen, du hast dich zwischendurch um deinen Kaffee gekümmert.
Struktur
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
4 Situationen aus dem Tour-Online-Alltag. Wenn sich eine davon vertraut anfühlt, bist du hier richtig.
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.
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.
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.
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
Einmal eingerichtet, dann fließt es. Die meisten Bausteine bekommst du firmenweit über deinen Tour-Online-Account.
Login per /login in der CLI. Für Tour Online: Team-Plan-Zugang, kein eigener API-Key nötig.
Zugriff auf die Team-Repos über IT beantragen.
IT-TicketWird firmenweit bereitgestellt, läuft über deinen Tour-Online-Account.
Fragen, Tipps und Showcases aus dem Kollegium.
Nur wenn du auf API-Abrechnung arbeitest (eigenes Tooling, Automatisierung). Für den Alltag reicht der Team-Plan-Login.
Zeit-Invest
Technischer Ablauf
VS Code öffnen, Terminal dazu, Repo klonen (oder wechseln).
git clone [email protected]:tour-online/<repo>.git && code <repo>Im integrierten Terminal von VS Code. Beim ersten Mal /init — Claude scannt das Repo und schlägt eine passende CLAUDE.md vor.
claudeEin 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"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.
Claude schlägt passende Tests vor und führt sie aus. Bei roten Tests iteriert ihr — keine grünen Tests, kein Commit.
> npm testCommit-Message wird aus den Changes generiert, du editierst bei Bedarf. Push auf Feature-Branch, PR im UI öffnen — die Beschreibung aus Claude übernimmt.
Der Mensch reviewt den PR. Claude darf Kommentare schreiben, aber nicht mergen. Nach Approval: squash-merge auf main.
Häufige Stolpersteine
Die 5 Fragen, die am häufigsten ins Slack-Channel kommen — mit Antwort. Wenn deiner fehlt, freut sich der Kanal.
Erweiterungen im Stack
Automatisch aus den Komponenten abgeleitet — jede Extension gehört zu einem Host (z. B. Claude Code oder VS Code) und erscheint hier, wenn dieser Host Teil der Constellation ist. Nichts davon ist an diese Seite gebunden, neue MCPs und Skills tauchen überall auf, wo sie passen.
Context-Window-Optimierer für AI-Coding-Agents — 98% weniger Rohdaten im Kontext durch Sandbox-Tools und Session-Continuity.
Hooks automatisch, SessionStart + PreToolUse + PostToolUse — ~98% Context-Ersparnis.
Multi-Modell-Orchestrierung aus Claude Code heraus — Gemini, GPT-5, Grok, Kimi, Ollama & Co. parallel konsultieren. Nice-to-have, sobald du Accounts bei weiteren Providern hast.
Primärer Host. Tools via `mcp__pal__*` (chat, consensus, clink, codereview, debug, thinkdeep, planner, precommit, challenge, apilookup).
Offizielles Supabase-MCP — Schema lesen, Migrations anwenden, SQL ausführen, Edge Functions deployen direkt aus Claude Code.
DIRS21-Redaktions-Skill für HTML/CSS im Mahlzahn-Look — near-black Monochrom, Highlighter-Akzent, Neue DIN Variable als Display-Font.
Schreib HTML. Rendere Video. Für KI-Agents gebaut. Puppeteer-Capture, FFmpeg-Encoding, GSAP-Timelines, TTS und Transitions — alles aus einem Composition-File.
Installation via `npx skills add heygen-com/hyperframes` — registriert fünf Slash-Commands in Claude Code (`/hyperframes`, `/hyperframes-cli`, `/hyperframes-registry`, `/website-to-hyperframes`, `/gsap`).
Generiert raffinierte Brainstorming-Charts im Obsidian-Vault — vernetzt Ideen, Quellen und Follow-ups.
Gemini-Image-Generator via CLI — Nano Banana 2 (Flash) für schnelle Konzepte, Pro für finale Assets. Style-Transfer, Green-Screen-Transparenz, Cost-Tracking.
Via Claude-Code-Marketplace-Plugin oder manuellem Symlink nach ~/.claude/skills/. CLI muss separat via `bun link` oder $PATH-Symlink global verfügbar sein.
Pragmatischer Supabase-Skill — Auth, Edge Functions, Realtime, Storage, Database, Branching. Kennt die Quirks und liefert Copy-paste-Snippets.
Postgres-Performance-Best-Practices von Supabase: Query-Tuning, Index-Strategien, Row-Level-Security-Pattern, Connection-Pooling.
Video-Editor-Skill für Claude Code — schneidet Füllwörter, brennt Untertitel, generiert Animations-Overlays. Text-first über ElevenLabs-Transkript statt Frame-Dumping.
Installation via symlink: ln -s $(pwd)/video-use ~/.claude/skills/video-use. Skill-Loader erkennt video-use automatisch in neuen Claude-Code-Sessions.
Tour-Online-Empfehlungen
6 Empfehlungen, die das Team bei uns teilt. Keine harte Vorschrift, aber erspart dir Lehrgeld. Jeder Eintrag lebt als eigenständiger Datensatz — wiederverwendbar über mehrere Stacks.
Team-Konventionen, Stil-Regeln und Lint-Erwartungen gehören dort hin. Jede:r startet mit denselben Vorgaben — statt Claude 30-mal dieselben Instruktionen neu zu erklären.
/CLAUDE.mdWiederkehrende Aufgaben (Migration schreiben, Komponente scaffolden, Release-Notes erzeugen) als Skill packen. Teamweites Werkzeug statt Prompt-Kopien.
/.claude/skills/<name>/SKILL.mdClaude liest das DB-Schema direkt und sieht offene Tickets. Kontext ohne Copy-Paste. Die Konfiguration gehört ins Repo, damit alle dasselbe Setup haben.
Nach jedem Claude-Write läuft Prettier/ESLint automatisch. Kein Commit mit unsauberem Format — der Hook zwingt saubere Diffs, ohne dass du dran denken musst.
/.claude/settings.json → hooks.PostToolUseFü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"Human-in-the-Loop bleibt Pflicht. Claude baut den PR, du reviewst, du mergest. Das Gate ist kein Hindernis, sondern die Qualitätsversicherung.
Weiterlernen & Referenzen
6 kuratierte Ressourcen — offizielle Doku, Tutorials, Videos, Deep-Dive-Artikel und Community-Kanäle. Nach Einstiegstiefe geordnet, damit du genau die nächste Runde Lernen findest.
Die Wahrheitsquelle: Installation, Konfiguration, Tools, Slash-Commands.
Schneller Einstieg mit einem konkreten Mini-Projekt.
Beispiel-Skills, die du direkt in dein Repo übernehmen kannst.
Offizielle Video-Tutorials und Live-Demos zu Claude Code.
Wie Agenten wirklich funktionieren — Pflichtlektüre fürs Team.
Interner Austausch: Fragen, Tipps, Showcases aus dem Kollegium.
Reifegrad
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.
Ideal — schnelle Iteration mit lesbarem Output.
Solider Standardfall, mit PR-Review als Safety-Net.
Claude findet Root-Cause oft schneller als klassisches Debugging.
Begleitet, in kleinen Schritten. Keine Big-Bang-Rewrites.
Nur mit explizitem Human-Review, Terraform-Plan zuerst.
Nie autonom. Dry-Run Pflicht, Staging vor Produktion.
Weiter klassisch — Security-Review durch Fachrolle, nicht durch Agent.
Ansprechbar im Haus
4 Kolleg:innen, die diese Constellation täglich nutzen. Keine Scheu — sie helfen gern, wenn du einsteigst oder irgendwo hängst.
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.
Backend-Engineer
Hat die Tour-Online-CLAUDE.md verfasst und führt interne Vibe-Coding-Workshops. Ansprechpartner für Skills und Team-Konventionen.
Customer Support
Arbeitet seit kurzem mit Claude Code für interne Tools. Teilt die Einsteiger-Perspektive — ideal, wenn du selbst am Anfang stehst.
Tech-Lead & Platform
Entscheidet über Enterprise-Guardrails, Modell-Versionierung und MCP-Integration. Bei Infrastruktur- und Compliance-Fragen hier anfragen.
Beispielprofile · echte Zuordnung folgt mit User-&-Rollen-Schema
Originaltext aus dem Register
Verwandte Stacks
Andere Stacks mit verwandtem Zweck — nebenan, falls dir dieser nicht ganz passt oder du Varianten vergleichen willst.
Best PracticeLive-Vorschau von React-Komponenten direkt in Claude Desktop — für Frontend-Devs und Design-Teams, die ihre UI neben dem Chat rendern wollen, ohne Browser-Tab-Wechsel.
Eine Canvas statt 50 Tabs — Flora bündelt über 50 Bild-, Video- und Text-KI-Modelle für Kreativ-Teams, die Brand-Assets und Kampagnen schneller entwickeln.
ExperimentellPitch-Decks, Prototypen und One-Pager im Tour-Online-Look — geschrieben in einem Satz, in Minuten fertig.
Dein Feedback
Zwei Klicks — und das Redaktionsteam weiß, was funktioniert und was fehlt. Optional kannst du einen Satz dazuschreiben.