CodeKitHubWas ist dieses Tool?
Der Microsoft Teams Chat Generator ist ein browserbasiertes Mockup-Tool, das die Einzelchat-Ansicht von Teams nachbildet — einen Header mit dem Avatar des Kontakts, Präsenzpunkt, Name und Status, plus Anruf-/Video-/Freigabe-Symbolen, sowie einen Nachrichtenverlauf mit Teams' abgerundetem, rechtsbündigem Sprechblasenstil für ausgehende Nachrichten.
Teams ist standardmäßig im Light Theme (weißer Hintergrund, gedämpfte Fluent-Violett-Akzente #6264A7), so wie es die meisten Microsoft-365-Nutzer sehen, mit optionalem Umschalter zum Dark Mode.
Jeder Kontakt hat einen Präsenzstatus — Verfügbar (grün), Beschäftigt (rot), Abwesend (gelb) oder Offline (grau) — dargestellt als kleiner farbiger Punkt auf dem Avatar, genau wie im echten Teams-Client.
Nur für Unterhaltung und Mockup-Zwecke: erstelle eine Unternehmensproduktdemo, illustriere einen Microsoft-365-Workflow für eine Präsentation, oder storyboarde ein Support-Szenario. Es darf niemals verwendet werden, um eine echte Arbeitsplatzunterhaltung, einen echten Kollegen vorzutäuschen oder Beweise für etwas zu fälschen, das jemand nie gesagt hat.
Nichts, was du eingibst, verlässt jemals dein Gerät. Die gesamte Unterhaltung wird mit der HTML-Canvas-API direkt in deinem Browser gezeichnet, und das PNG wird lokal erzeugt und heruntergeladen.
Warum sollte man es nutzen?
- Erstelle realistische Teams-Chat-Screenshots für Unternehmenssoftware-Demos und Fallstudien.
- Entwirf, wie eine Teams-Bot- oder Benachrichtigungsnachricht aussehen wird, bevor du sie umsetzt.
- Illustriere ein IT-Support-Szenario, einen Onboarding-Ablauf oder ein Beispiel für Arbeitsplatzkommunikation für eine Präsentation.
- Prototype eine Teams-artige Chat-UI für ein internes Tool.
- 100% lokales Rendering — der Text deiner Unterhaltung erreicht nie einen Server.
Anleitung
- Lege Kontaktname und Präsenzstatus fest (Verfügbar, Beschäftigt, Abwesend oder Offline).
- Lade ein Foto für den Avatar hoch oder belasse ihn als farbigen Kreis mit Initialen.
- Wähle Light oder Dark Theme — Teams ist standardmäßig hell.
- Füge Nachrichtenzeilen hinzu: Text eingeben, eine Seite (die andere Person/ich) und einen Zeitstempel wählen.
- Beobachte, wie sich die Vorschau in Telefonform live aktualisiert, und klicke dann auf "PNG herunterladen", um das Bild zu speichern.
Beispiel
Eingabe
Kontakt: "Jordan" · Status: "Verfügbar" · Nachricht 1 (die andere Person): "Hey! Hattest du Gelegenheit, es dir anzusehen?" · Nachricht 2 (die andere Person): "Perfekt, ich schicke heute Abend den Rest" · Nachricht 3 (ich): "Gerade gemacht — sieht super aus, veröffentlichen"Ausgabe
Ein PNG-Bild mit einem hellen Teams-Chat: ein Header mit Jordans Avatar, einem grünen Präsenzpunkt, Name und Status "Verfügbar", zwei hellgraue eingehende Sprechblasen links mit Name und Zeitstempel darüber, und einer hellvioletten ausgehenden Sprechblase rechts.Das Bild wird sofort im Live-Vorschau-Canvas erzeugt und lässt sich mit einem Klick herunterladen — kein Warten, kein Upload.
Was du anpassen kannst
- Kontaktname und Präsenzstatus (Verfügbar, Beschäftigt, Abwesend, Offline).
- Avatar: echtes Foto hochladen (kreisförmig zugeschnitten) oder Standardfarbe wählen.
- Light oder Dark Theme, wobei Light der authentische Teams-Standard ist.
- Unbegrenzte Nachrichtenzeilen, jede mit eigenem Text, Seite (die andere Person/ich) und Zeitstempel.
Verantwortungsvolle Nutzung
Dieser Generator existiert, um es einfach zu machen, eindeutig fiktive Teams-artige Screenshots für Unternehmensdemos, Präsentationen und Designarbeit zu erstellen. Er ist kein Werkzeug, um Beweise zu fälschen, Belästigung am Arbeitsplatz zu inszenieren oder jemanden glauben zu lassen, eine gefälschte Unterhaltung habe in einem echten Microsoft-365-Tenant stattgefunden. Wenn du planst, ein mit diesem Tool erstelltes Bild zu teilen, füge am besten einen Hinweis (wie "fake" oder "Mockup") hinzu, damit Betrachter verstehen, dass es sich nicht um eine echte Unterhaltung handelt.
Häufig gestellte Fragen
Ist die Nutzung dieses Tools legal oder ethisch vertretbar?
Das Tool selbst ist für Unterhaltung, Produktdemos, Präsentationen und Designarbeit legal nutzbar. Nicht legal oder ethisch ist es, das erzeugte Bild zu verwenden, um jemanden zu täuschen — etwa es als echte Teams-Unterhaltung auszugeben, um Betrug zu begehen, einen Kollegen zu belästigen oder zu verleumden, oder einen echten Arbeitsplatzchat vorzutäuschen. Je nach Wohnort kann ein solcher Missbrauch Betrug, Verleumdung oder Belästigung darstellen. Bitte nutze dieses Tool nur für eindeutig fiktive oder illustrative Zwecke.
Lädt das Tool meine Nachrichten oder mein Foto irgendwohin hoch?
Nein. Jede Nachricht, jeder Name, jedes Foto und jede Einstellung, die du eingibst, bleibt im Speicher deines Browsers und wird mit JavaScript direkt auf ein Canvas-Element gezeichnet. Die PNG-Datei wird auf deinem Gerät erzeugt und heruntergeladen — nichts wird jemals an einen Server gesendet.
Kann ich den Präsenzstatus-Punkt steuern?
Ja. Wähle Verfügbar (grün), Beschäftigt (rot), Abwesend (gelb) oder Offline (grau) aus dem Präsenz-Dropdown, und der kleine farbige Punkt auf dem Avatar des Kontakts aktualisiert sich entsprechend, genau wie im echten Teams-Client. Wenn dein Szenario eine schnelle Antwort oder eine laufende Unterhaltung betrifft, nutze Verfügbar oder Beschäftigt; wenn dein Mockup zeigen soll, dass eine Nachricht unbeantwortet blieb oder erst später gesehen wurde, nutze Abwesend oder Offline, um das glaubwürdig zu machen.
Verwendet Teams wirklich solche abgerundeten Sprechblasen?
Ja. Anders als Discord und Slack, die Nachrichten als flache Liste anzeigen, verwendet Microsoft Teams abgerundete Sprechblasen: Eingehende Nachrichten erscheinen links mit dem Absendernamen darüber, und deine eigenen Nachrichten erscheinen rechtsbündig in einer hellvioletten Sprechblase. Dieses Tool bildet genau dieses Layout nach.
Kann ich ein echtes Foto als Avatar hochladen?
Ja. Klicke auf "Foto hochladen", um ein beliebiges Bild von deinem Gerät als Avatar des Kontakts zu verwenden — es wird automatisch kreisförmig zugeschnitten. Wenn du das überspringst, bleibt der Avatar ein farbiger Kreis mit den Initialen des Kontakts.