CodeKitHub¿Qué es esta herramienta?
El Generador de chats de Microsoft Teams es una herramienta de maquetación basada en el navegador que recrea la vista de chat individual de Teams — una cabecera con el avatar del contacto, el punto de presencia, el nombre y el estado, más iconos de llamada/vídeo/compartir, y un hilo de mensajes que usa el estilo de burbuja redondeada y alineada a la derecha de Teams para los mensajes salientes.
Teams usa por defecto un tema claro (fondo blanco, acentos violeta Fluent apagado #6264A7), tal como lo ve la mayoría de usuarios de Microsoft 365, con un interruptor opcional para el modo oscuro.
Cada contacto tiene un estado de presencia — Disponible (verde), Ocupado (rojo), Ausente (amarillo) o Sin conexión (gris) — mostrado como un pequeño punto de color en el avatar, igual que en el cliente real de Teams.
Solo para entretenimiento y maquetas: crea una demo de producto empresarial, ilustra un flujo de trabajo de Microsoft 365 para una presentación, o esboza un escenario de soporte. Nunca debe usarse para suplantar una conversación laboral real, un compañero real, o fabricar pruebas de algo que alguien no dijo realmente.
Nada de lo que escribas sale nunca de tu dispositivo. Toda la conversación se dibuja con la API de Canvas de HTML directamente en tu navegador, y el PNG se genera y descarga de forma local.
¿Por qué utilizarlo?
- Crea capturas realistas de chats de Teams para demos de software empresarial y casos de estudio.
- Maqueta cómo se verá un bot o una notificación de Teams antes de construirlo.
- Ilustra un escenario de soporte de TI, un flujo de incorporación o un ejemplo de comunicación laboral para una presentación.
- Crea prototipos de una interfaz de chat estilo Teams para una herramienta interna.
- Renderizado 100% local: el texto de tu conversación nunca toca un servidor.
Cómo utilizarlo
- Define el nombre del contacto y su estado de presencia (Disponible, Ocupado, Ausente o Sin conexión).
- Sube una foto para el avatar, o déjalo como un círculo de color con iniciales.
- Elige tema claro u oscuro — Teams es claro por defecto.
- Añade filas de mensajes: escribe el texto, elige un lado (ellos/yo) y una marca de tiempo.
- Observa cómo se actualiza la vista previa con forma de teléfono en tiempo real y haz clic en "Descargar PNG" para guardar la imagen.
Ejemplo
Entrada
Contacto: "Jordan" · Estado: "Disponible" · Mensaje 1 (ellos): "¡Hola! ¿Has tenido oportunidad de mirarlo?" · Mensaje 2 (ellos): "Perfecto, te envío el resto esta noche" · Mensaje 3 (yo): "Ya lo he visto — se ve genial, adelante"Resultado
Una imagen PNG que muestra un chat de Teams claro: una cabecera con el avatar de Jordan, un punto de presencia verde, nombre y estado "Disponible", dos burbujas entrantes gris claro a la izquierda con el nombre y la marca de tiempo arriba, y una burbuja saliente violeta claro a la derecha.La imagen se genera al instante en el lienzo de vista previa en vivo y se descarga con un solo clic — sin esperas, sin subidas.
Qué puedes personalizar
- Nombre del contacto y estado de presencia (Disponible, Ocupado, Ausente, Sin conexión).
- Avatar: sube una foto real (recortada en círculo) o elige un color por defecto.
- Tema claro u oscuro, con claro como el valor predeterminado auténtico de Teams.
- Filas de mensajes ilimitadas, cada una con su propio texto, lado (ellos/yo) y marca de tiempo.
Uso responsable
Este generador existe para facilitar la creación de capturas de estilo Teams claramente ficticias con fines de demos empresariales, presentaciones y trabajo de diseño. No es una herramienta para fabricar pruebas, organizar acoso laboral ni engañar a nadie haciéndole creer que una conversación falsa ocurrió en un tenant real de Microsoft 365. Si piensas compartir una imagen creada con esta herramienta, considera añadir contexto (como "falso" o "maqueta") para que quien la vea entienda que no es una conversación real.
Preguntas frecuentes
¿Es legal o ético usar esta herramienta?
La herramienta en sí es legal de usar para entretenimiento, demos de producto, presentaciones y trabajo de diseño. Lo que no es legal ni ético es usar la imagen generada para engañar a alguien — por ejemplo presentarla como una conversación real de Teams para cometer fraude, acosar o difamar a un compañero, o suplantar un chat laboral real. Según dónde vivas, ese tipo de uso indebido puede constituir fraude, difamación o acoso. Úsala solo con fines claramente ficticios o ilustrativos.
¿La herramienta sube mis mensajes o mi foto a algún sitio?
No. Cada mensaje, nombre, foto y ajuste que introduces permanece en la memoria de tu navegador y se dibuja directamente en un elemento canvas mediante JavaScript. El archivo PNG se genera y descarga en tu dispositivo — nada se envía nunca a ningún servidor.
¿Puedo controlar el punto de estado de presencia?
Sí. Elige Disponible (verde), Ocupado (rojo), Ausente (amarillo) o Sin conexión (gris) en el desplegable de presencia, y el pequeño punto de color en el avatar del contacto se actualiza para coincidir, igual que en el cliente real de Teams. Si tu escenario trata de una respuesta rápida o una conversación en curso, usa Disponible u Ocupado; si el objetivo de tu maqueta es mostrar que un mensaje quedó sin respuesta o se vio más tarde, usa Ausente o Sin conexión para que ese detalle resulte creíble.
¿Teams realmente usa burbujas de chat redondeadas así?
Sí. A diferencia de Discord y Slack, que muestran los mensajes como una lista plana, Microsoft Teams usa burbujas de mensaje redondeadas: los mensajes entrantes aparecen a la izquierda con el nombre del remitente arriba, y tus propios mensajes aparecen alineados a la derecha en una burbuja violeta claro. Esta herramienta reproduce exactamente ese diseño.
¿Puedo subir una foto real como avatar?
Sí. Haz clic en "Subir foto" para usar cualquier imagen de tu dispositivo como avatar del contacto — se recorta automáticamente en forma de círculo. Si omites este paso, el avatar vuelve a ser un círculo de color con las iniciales del contacto.