CodeKitHubVad är detta verktyg?
Microsoft Teams Chat Generator är ett webbläsarbaserat mockup-verktyg som återskapar Teams en-till-en-chattvy — en header med kontaktens avatar, närvaroprick, namn och status, plus samtals-/video-/delningsikoner, och en meddelandetråd som använder Teams rundade, högerjusterade bubbelstil för utgående meddelanden.
Teams använder som standard ett ljust tema (vit bakgrund, dämpade Fluent-lila accenter #6264A7), vilket motsvarar hur de flesta Microsoft 365-användare ser det, med en valfri mörkt läge-omkopplare.
Varje kontakt har en närvarostatus — Tillgänglig (grön), Upptagen (röd), Borta (gul) eller Offline (grå) — som visas som en liten färgad prick på avataren, precis som i den riktiga Teams-klienten.
Endast för underhållning och mockup-användning: bygg en företagsproduktdemo, illustrera ett Microsoft 365-arbetsflöde för en presentation, eller skapa en storyboard för ett supportscenario. Det får aldrig användas för att utge sig för en verklig konversation på arbetsplatsen, en verklig kollega, eller fabricera bevis för något som någon faktiskt inte sa.
Ingenting du skriver lämnar någonsin din enhet. Hela konversationen ritas med HTML Canvas API direkt i din webbläsare, och PNG-filen genereras och laddas ned lokalt.
Varför använda det?
- Skapa realistiska Teams-chattskärmbilder för företagsprogramvarudemos och fallstudier.
- Skapa en mockup av hur ett Teams-bot- eller aviseringsmeddelande kommer att se ut innan du bygger det.
- Illustrera ett IT-supportscenario, onboardingflöde eller exempel på arbetsplatskommunikation för en presentation.
- Prototypa ett Teams-liknande chattgränssnitt för ett internt verktyg.
- 100 % lokal rendering — din konversationstext rör aldrig en server.
Så använder du det
- Ange kontaktnamn och närvarostatus (Tillgänglig, Upptagen, Borta eller Offline).
- Ladda upp ett foto för avataren, eller lämna det som en färgad cirkel med initialer.
- Välj ljust eller mörkt tema — Teams är ljust som standard.
- Lägg till meddelanderader: skriv texten, välj en sida (de/jag) och en tidsstämpel.
- Se den telefonformade förhandsvisningen uppdateras live, klicka sedan på "Ladda ned PNG" för att spara bilden.
Exempel
Inmatning
Kontakt: "Jordan" · Status: "Tillgänglig" · Meddelande 1 (de): "Hej! Fick du chansen att titta på det?" · Meddelande 2 (de): "Perfekt, jag skickar resten ikväll" · Meddelande 3 (jag): "Precis gjort — ser jättebra ut, skicka det"Resultat
En PNG-bild som visar en ljus Teams-chatt: en header med Jordans avatar, en grön närvaroprick, namn och "Tillgänglig"-status, två ljusgrå inkommande bubblor till vänster med namn och tidsstämpel ovanför, och en ljuslila utgående bubbla till höger.Bilden genereras omedelbart i den direktuppdaterade förhandsgranskningscanvasen och laddas ned med ett enda klick — ingen väntan, ingen uppladdning.
Vad du kan anpassa
- Kontaktnamn och närvarostatus (Tillgänglig, Upptagen, Borta, Offline).
- Avatar: ladda upp ett riktigt foto (beskuret till en cirkel) eller välj en reservfärg.
- Ljust eller mörkt tema, med ljust som Teams autentiska standardvärde.
- Obegränsat antal meddelanderader, var och en med egen text, sida (de/jag) och tidsstämpel.
Ansvarsfull användning
Denna generator finns för att göra det enkelt att skapa tydligt fiktiva Teams-liknande skärmbilder för företagsdemos, presentationer och designarbete. Det är inte ett verktyg för att fabricera bevis, iscensätta trakasserier på arbetsplatsen, eller vilseleda någon att tro att en falsk konversation ägde rum i en verklig Microsoft 365-klientorganisation. Om du planerar att dela en bild som skapats med detta verktyg, överväg att lägga till sammanhang (som "falsk" eller "mockup") så att tittarna förstår att det inte är en verklig konversation.
Vanliga frågor
Är det lagligt eller etiskt att använda det här verktyget?
Själva verktyget är lagligt att använda för underhållning, produktdemos, presentationer och designarbete. Det som inte är lagligt eller etiskt är att använda den genererade bilden för att lura någon — till exempel genom att presentera den som en verklig Teams-konversation för att begå bedrägeri, trakassera eller förtala en kollega, eller utge sig för en verklig arbetsplatschatt. Beroende på var du bor kan sådant missbruk utgöra bedrägeri, förtal eller trakasserier. Använd detta endast för tydligt fiktiva eller illustrativa syften.
Laddar verktyget upp mina meddelanden eller foto någonstans?
Nej. Varje meddelande, namn, foto och inställning du anger stannar i din webbläsares minne och ritas direkt på ett canvas-element med hjälp av JavaScript. PNG-filen genereras och laddas ned på din enhet — ingenting skickas någonsin till någon server.
Kan jag styra närvarostatusprickens?
Ja. Välj Tillgänglig (grön), Upptagen (röd), Borta (gul) eller Offline (grå) från närvaro-rullgardinsmenyn, och den lilla färgade prickens på kontaktens avatar uppdateras i enlighet med detta, precis som i den riktiga Teams-klienten. Om ditt scenario handlar om ett snabbt svar eller en pågående konversation, använd Tillgänglig eller Upptagen; om poängen med din mockup är att ett meddelande förblev obesvarat eller sågs i efterhand, använd Borta eller Offline för att göra det trovärdigt.
Använder Teams verkligen rundade chattbubblor så här?
Ja. Till skillnad från Discord och Slack, som visar meddelanden som en platt lista, använder Microsoft Teams rundade meddelandebubblor: inkommande meddelanden visas till vänster med avsändarens namn ovanför, och dina egna meddelanden visas högerjusterade i en ljuslila bubbla. Detta verktyg återger exakt den layouten.
Kan jag ladda upp ett riktigt foto som avatar?
Ja. Klicka på "Ladda upp foto" för att använda vilken bild som helst från din enhet som kontaktens avatar — den beskärs automatiskt till en cirkel. Om du hoppar över detta återgår avataren till en färgad cirkel med kontaktens initialer.