Live-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.
Du tippst die Komponente, Claude Desktop zeigt sofort die gerenderte UI nebenan — keine Preview-Server, kein `npm run dev`, kein Tab-Jonglieren zwischen Browser und Editor. Ideal für Feintuning, Design-Reviews und Prototypen, aber kein Ersatz für ein echtes Dev-Setup mit Hot-Reload und Test-Runs.
So fühlt sich das an
Stell dir vor: Der Product-Owner braucht bis zum Lunch drei Hero-Varianten für die Frühlingskampagne. Du öffnest Claude Desktop, pastest den aktuellen Hero-Code ein, bittest um drei Variationen. Claude rendert jede direkt im Preview-Panel neben dem Chat. Du siehst Typo-Breaks, Abstände, Farbkontrast sofort und kannst in Echtzeit nachjustieren. Zehn Minuten später hast du drei klickbare Varianten als Screenshots in Slack — ohne Webpack-Build, ohne Branch.
Struktur
Demo-Video — wie es sich anfühlt, mit dem Werkzeug zu arbeiten.
Wofür du das brauchst
4 Situationen aus dem Tour-Online-Alltag. Wenn sich eine davon vertraut anfühlt, bist du hier richtig.
Kampagne braucht drei Hero-Versionen. Du beschreibst die Varianten, Claude Desktop rendert sie direkt, du wählst aus. Kein Build-Schritt, kein Screenshot-Jonglieren — die Version, die der PO sieht, ist identisch zu der, an der du arbeitest.
Du willst eine neue Button-Variante für das DIRS21-Design-System. Ausgangspunkt sind Tokens und eine Basis-Komponente. Du baust die Variante im Chat, siehst sie live, iterierst am Spacing und an den Hover-States.
Kleine interaktive Elemente wie Toasts, Tooltips, Inline-Validierungen — die sind im Browser-Reload-Flow unangenehm. Im Preview-Panel von Claude Desktop siehst du den State sofort, jede Prop-Änderung.
Error-Banner, leere Listen, 404-Seiten — Zustände, die man sonst nur bei echten Fehlern sieht. Du bittest Claude, den State-Prop zu setzen, und siehst das Ergebnis, ohne den Fehler im Browser provozieren zu müssen.
Voraussetzungen
Einmal eingerichtet, dann fließt es. Die meisten Bausteine bekommst du firmenweit über deinen Tour-Online-Account.
Offizieller Desktop-Client von Anthropic. Mac, Windows, Linux.
Download ↗Wird firmenweit bereitgestellt, läuft über deinen Tour-Online-Account.
Zugriff auf die Team-Repos über IT beantragen.
IT-TicketFragen, Tipps und Showcases aus dem Kollegium.
Zeit-Invest
Technischer Ablauf
Offizieller Download für Mac, Windows oder Linux. Kein Terminal nötig — das ist der Punkt.
Halte einen Snippet-Ordner mit Tailwind-Config, CSS-Variablen oder Theme-Objekten bereit. Je besser der Context, desto realitätsnäher die Preview.
Pastet den aktuellen Komponenten-Code komplett ins Chat-Fenster. Zusammen mit einem Satz, was du möchtest: „Bau mir eine Variante mit Icon rechts statt links."
Claude Desktop rendert die Komponente direkt neben dem Chat. Änderungen an Props oder CSS werden in Echtzeit sichtbar, wenn du iterierst.
Statt „sieht nicht gut aus" lieber „Mehr Luft über dem Titel" oder „Primärfarbe für Button-Hover statt Accent". Je genauer, desto brauchbarer die nächste Runde.
Wenn die Variante passt, kopier den Code zurück in dein Repo. Commit und Push laufen wie gewohnt über IDE oder CLI.
Vor dem Merge einmal im echten Projekt bauen. Claude-Desktop-Preview ist nicht pixelgenau mit deiner App-Shell.
npm run devHä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.
Manuelle MCP-Registrierung in der Desktop-Config.
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.
Manuelle MCP-Registrierung in der Desktop-Config.
Tour-Online-Empfehlungen
5 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.
Visual Vibe Coding glänzt, wenn du eine einzelne Komponente in mehreren Varianten siehst. Größere Arbeit (ganze Seiten, verknüpfte Komponenten) überfordert den Preview-Kontext.
Theme-Farben, Abstands-Skala, Font-Settings als erster Prompt-Block. Sonst rendert Claude Desktop zwar, aber in seiner eigenen Interpretation — nicht in deinem Design-System.
-- Tokens --\n--color-primary: …\n--space-4: 1rem\n--font-display: "Neue DIN"Hardcoded Dummy-Objekte im Prompt statt echter API-Responses. Claude kann lokal keine APIs callen, und echte Daten gehören nicht in externe Tools.
Wenn die Variante sitzt, geh zurück in VS Code. Tests schreiben, Commits strukturieren, Review-Prozess durchlaufen. Visual Vibe Coding ist Prototyping, nicht Production-Writing.
Für Design-Review mit Nicht-Entwickler:innen: nimm ein Screenshot aus dem Preview-Panel, schick das in Slack. Code ist Distraction, wenn es um Wirkung geht.
Weiterlernen & Referenzen
5 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.
Offizielle FAQ zum Desktop-Client: Installation, Shortcuts, Features.
Wie die Preview-Panels funktionieren und was sie rendern können.
Community-Tutorials zum Prototyping von React-Komponenten mit Claude Desktop.
Wie Anthropic Coding-Harnesses intern einsetzt — übertragbar aufs UI-Prototyping.
Community-Austausch über alles rund um Claude Desktop, Projects, Artifacts.
Reifegrad
Produktiv für Prototyping und Feintuning. Visual Vibe Coding ist schnell für UI-Iterationen, aber kein Ersatz für ein Dev-Setup mit Tests und CI/CD. Wir setzen es ein, wenn der Feedback-Cycle „sehen + tippen" wichtiger ist als Wiederholbarkeit.
Genau dafür gebaut — schnelles visuelles Feedback.
Neue Variante, neues Pattern — ohne Build-Zyklus.
Live-Preview macht Mikro-Anpassungen erträglich.
Screen teilen, Varianten durchklicken, sofortiges Feedback.
Mehrere verknüpfte Komponenten mit API-Calls sind mühsam zu mocken — lieber im echten Setup.
Preview rendert statische States gut, Motion kommt nicht immer pixelgenau.
Hier gibt's keine Test-Runs. TDD gehört in IDE Vibe Coding.
Finaler Code gehört über dein Dev-Setup committet, nicht aus dem Chat raus.
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 Visual Vibe Coding fürs Feintuning von DIRS21-UI-Komponenten. Gute Adresse für Design-Token-Setup und React-Patterns.
Art Director
Design-System-Owner. Pilotiert Visual Vibe Coding für Design-Reviews mit dem Produkt-Team.
Marketing & Brand Lead
Nutzt die Constellation für schnelle Hero-Varianten bei Kampagnen — der 10-Minuten-Showcase ist ihr täglicher Einsatz.
Customer Support
Spielt Fehler-States und leere Listen durch, bevor sie Kunden erreichen. Einsteiger:in, gibt gutes Onboarding-Feedback.
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 PracticeProgrammieren 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.
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.
Versionsarchiv
Dein Feedback
Zwei Klicks — und das Redaktionsteam weiß, was funktioniert und was fehlt. Optional kannst du einen Satz dazuschreiben.