Pitch-Decks, Prototypen und One-Pager im Tour-Online-Look — geschrieben in einem Satz, in Minuten fertig.
Bisher konnte ein gutes Pitch-Deck ein halber Tag sein — Brief klären, Slides bauen, Bilder suchen, Layout korrigieren, Brand-Farben treffen. Mit Claude Design sagst du in einem Satz, was du brauchst, und siehst eine erste Version. Sliders schieben Spacing und Farbe, Kommentare zeigen, wo nachgeschärft werden soll. Im Hintergrund liegt das Tour-Online-Design-System, das Michael einmal angelegt hat — jede neue Folie kommt automatisch in DIRS21-Look. Wenn der Vertrieb das Deck in PowerPoint will, klick auf Export. Wenn das Produkt-Team einen Prototyp daraus bauen will, geht das Handoff-Bundle direkt in Claude Code.
So fühlt sich das an
Eine Sales-Kollegin hat um 9:00 ein Discovery-Gespräch mit einem 80-Zimmer-Hotel. Sie öffnet claude.ai/design, lädt das Lead-Briefing als DOCX hoch und schreibt: "Pitch-Deck für ein Mittelklasse-Stadthotel, 12 Slides, Fokus IBE und Channel-Manager, mit Case-Beispiel aus dem Schwarzwald." Claude baut das Deck im Tour-Online-Design-System. Sie justiert per Slider die Akzentfarbe, kommentiert auf Slide 7 "hier brauche ich eine größere Zahl" und Claude rendert. Um 8:55 exportiert sie nach PPTX, mailt es ans Hotel und geht ins Meeting.
Struktur
Demo-Video — wie es sich anfühlt, mit dem Werkzeug zu arbeiten.
Wofür du das brauchst
6 Situationen aus dem Tour-Online-Alltag. Wenn sich eine davon vertraut anfühlt, bist du hier richtig.
Vom Lead-Briefing zum 12-Slide-Deck im Tour-Online-Design — direkt aus dem Browser. Sales-Kolleg:innen müssen nicht mehr auf Marketing warten und produzieren trotzdem markenkonsistente Decks. Export nach PPTX für PowerPoint-Workflows oder PDF für E-Mail-Anhang.
PMs skizzieren neue Feature-Flows als Wireframe, ohne Figma zu lernen. Der Designer kann auf der Wireframe weiterarbeiten, oder Claude Design schickt das Handoff-Bundle direkt an Claude Code für einen ersten Prototyp.
Aus statischer Mockup wird ein interaktiver Prototyp — ohne Code-Review oder PR. Mit Hoteliers wird der Click-Through getestet, Kommentare landen direkt am Element. Schnellster Weg von Idee zu echtem Nutzer-Feedback.
Kampagnen-Landingpage als HTML, Instagram-Post und LinkedIn-Banner aus einem Brief. Web-Capture greift Stil-Elemente direkt von dirs21.de — die Landingpage sieht aus wie das echte Produkt, nicht wie ein generischer Stock-Entwurf.
Interne KI-Workshops, Onboarding-Decks für neue Mitarbeitende, Stakeholder-Updates. Vom Outline-Bullet-Point zum kompletten Deck im Tour-Online-Look in unter einer Stunde. Spart die "ich-baue-mal-eben-Slides"-Stunden.
Code-powered Prototypen mit Voice, Video, Shadern, 3D — ohne Frontend-Erfahrung. Für Pitches an Investoren, Konzept-Validierungen oder einfach um zu sehen, ob eine wilde Idee fühlbar wird.
Voraussetzungen
Einmal eingerichtet, dann fließt es. Die meisten Bausteine bekommst du firmenweit über deinen Tour-Online-Account.
Verfügbar für Claude Pro / Max / Team / Enterprise. Bei Enterprise standardmäßig deaktiviert — Admin muss in den Org-Settings freischalten.
Claude Design ist Teil bezahlter Claude-Pläne. Tour Online nutzt den Team-Plan; Limits laufen über die Subscription, Extra-Usage kann bei Bedarf freigeschaltet werden.
Plan ansehen ↗Bei Enterprise-Plänen standardmäßig aus — Admin muss in den Organization Settings explizit aktivieren. Bei Tour Online (Team-Plan) bereits an.
Admin-Guide ↗Von Michael in Claude Design gepflegt. Über "Design Systems → Add from share link" einbinden, dann kommt jedes neue Projekt automatisch im DIRS21-Look.
Design-System öffnen ↗Quelle für Anpassungen am Design-System: Farben, Typo, Komponenten-Vorgaben, Tonality. Wer das Claude-Design-System fortschreibt, schaut hier nach.
Zeit-Invest
5 Minuten Setup · 30 Minuten für das erste eigene Deck · 1 Tag bis das Design-System im Team sitzt
Technischer Ablauf
Claude Design läuft mit Pro, Max, Team oder Enterprise. Bei Enterprise ist es standardmäßig aus — der Org-Admin muss es in den Organization Settings einschalten. Tour Online ist auf Team, freigeschaltet.
Im Browser einloggen. Erstes Mal: kurzer Onboarding-Flow, der das Tool erklärt. Kein Download, kein Plugin.
https://claude.ai/designMichael hat ein Design-System angelegt und als Share-Link verfügbar gemacht. Über "Design Systems" → "Add from share link" einbinden — ab dann kommt jede neue Datei automatisch im Tour-Online-Look. Eigene Anpassungen werden lokal gespeichert, das Master-System bleibt zentral.
https://claude.ai/design/p/669e1d86-6120-4de5-91fd-bc3d64608deb?via=shareDrei Wege: Text-Prompt ("Pitch-Deck für ein 80-Zimmer-Stadthotel, 12 Slides"), Datei-Upload (DOCX, PPTX, XLSX, PNG, JPG), oder Web-Capture: einfach auf https://www.dirs21.de zeigen, Claude greift Header, Farben und Komponenten ab.
Claude rendert eine erste Version. Inline auf jedes Element klicken, Kommentare hinterlassen, Texte direkt editieren. Für Spacing, Farben, Layout generiert Claude eigene Slider — du verschiebst, das Design ändert sich live. "Apply across the full design" überträgt die Änderung auf alle Slides.
Drei Sharing-Modi: privat, Org-View-Link (jeder bei Tour Online kann ansehen), Edit-Access (gemeinsam editieren und mit Claude im Group-Chat sprechen). Für Pitch-Decks: Edit-Access an Sales und Marketing, alle sehen denselben Stand.
PPTX für PowerPoint-Workflows, PDF für Anhänge, Canva für Marketing-Ketten, standalone HTML für Landingpages, oder als Folder-Bundle. Org-interne URL bleibt persistent — der Link auf das Live-Design altert mit dem Design.
Wenn aus dem Prototyp echter Code werden soll: "Send to Claude Code". Claude Design packt Layout, Komponenten und Design-System-Tokens als Handoff-Bundle. In Claude Code: ein Befehl, das Repo bekommt den ersten Implementierungs-PR.
Send to Claude CodeTour-Online-Empfehlungen
7 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.
Bevor du das erste Projekt startest: das von Michael gepflegte Design-System einbinden. Dann kommt jeder neue Pitch, jede Landingpage, jeder Prototyp automatisch im DIRS21-Look — Farben, Typo, Komponenten passen ohne Nachpfriemeln.
Design Systems → Add from share link → https://claude.ai/design/p/669e1d86-6120-4de5-91fd-bc3d64608deb?via=shareWenn der Prototyp ein DIRS21-Feature betrifft: Web-Capture auf https://www.dirs21.de richten und die echten UI-Elemente abgreifen lassen. Das Mockup sieht aus wie das Produkt, nicht wie ein hingewürgter Lorem-Ipsum-Entwurf — und der Designer-Review wird kürzer.
Web-Capture → URL eingeben → Element auswählenSpacing, Farb-Nuancen, Schatten-Tiefe: Slider. Komponenten austauschen, Slide-Reihenfolge ändern, Inhalt anpassen: Chat. Wer alles im Chat versucht, verliert Zeit; wer alles per Slider macht, übersieht strukturelle Probleme.
Wenn Marketing oder Sales drüberschauen sollen: Edit-Access teilen. Sie können direkt am Element kommentieren und mit Claude im Group-Chat reden — Feedback, das in derselben Datei landet, statt in einem Slack-Faden zu verglühen.
Wenn aus dem Wireframe oder Prototyp echter Code werden soll: "Send to Claude Code" verwenden. Das Bundle enthält Komponenten, Design-Tokens und Layout-Logik — Claude Code öffnet damit einen Implementations-PR. Spart Übersetzungsverluste zwischen PM und Dev.
Send to Claude CodePPTX für die klassische Vertriebs-Pipeline (PowerPoint), PDF für E-Mail-Anhänge an Hoteliers, Canva für Marketing-Workflows mit externen Agenturen, HTML für eine schnelle Landingpage. Org-interner Link bleibt der "Living"-Stand.
Web-Capture ruft die echte Seite ab — also nichts, was hinter Login liegt und Kundendaten zeigt. Uploads (DOCX/XLSX) genauso: anonymisieren, bevor sie ins Tool gehen. Im Zweifel Legal fragen, bevor ein Hotel-Kunden-Briefing als Datei hochgeladen wird.
Reifegrad
Research Preview — seit 17. April 2026 live. Claude Design ist Anthropic-Labs — also offizielles, aber nicht final ausgereiftes Produkt. Tour Online testet es seit Tag eins. Pitch-Decks und interne Mockups laufen. Für externe, kundenkritische Marken-Auftritte (Druck, Award-Submissions, Kampagnen-Hero-Visuals) bleibt das Designer-Team verantwortlich.
Vom Brief zum on-brand Deck in Minuten — Standard-Use-Case für Tour Online.
PMs ohne Figma-Erfahrung kommen zu sauberen Wireframes; Handoff zu Claude Code möglich.
Klickbare Prototypen ohne Code-Review oder PR — schneller Feedback-Loop.
Tour-Online-Design-System sorgt für konsistente interne Kommunikation.
Web-Capture macht Mockups DIRS21-authentisch, Marketing kann ohne Designer:in starten.
Anpassungen am Design-System gehören in die Hand von Marketing und Designer:innen — nicht nebenbei in einem Pitch-Deck-Projekt.
Vor Veröffentlichung Designer-Review einplanen; Research Preview heißt: Output kann unrund werden.
Kein Print-Finish, kein CMYK-Workflow — dafür InDesign oder externe Druckerei.
Wettbewerbsbeiträge brauchen handwerkliche Tiefe, die Claude Design noch nicht liefert.
Ansprechbar im Haus
4 Kolleg:innen, die diese Constellation täglich nutzen. Keine Scheu — sie helfen gern, wenn du einsteigst oder irgendwo hängst.
Initiator & Design-System-Maintainer
Hat das Tour-Online-Design-System in Claude Design angelegt und teilt es als Share-Link. Erste Anlaufstelle für Onboarding, Design-System-Anpassungen und Best-Practices.
Produktmarketing-Manager
Nutzt Claude Design für Feature-Decks rund um DIRS21. Kann zeigen, wie aus einem Roadmap-Bullet ein präsentationsreifes Deck wird — inklusive PPTX-Export für die Vertriebs-Pipeline.
Marketing & Brand Lead
Wacht über Brand-Konsistenz. Reviewt Output, der nach außen geht, und pflegt das Tour-Online-Design-System inhaltlich (Farb-Updates, neue Komponenten, Tonality-Guidance).
Art Director
Holt sich Wireframes und Mockups aus Claude Design ins Designer-Tooling. Ansprechpartner, wenn aus einem PM-Mockup ein endkundentaugliches Design werden muss.
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.
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.
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.
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.
Dein Feedback
Zwei Klicks — und das Redaktionsteam weiß, was funktioniert und was fehlt. Optional kannst du einen Satz dazuschreiben.