Copilot te da buenas respuestas. El problema es que muchas veces llegan en texto plano, sin estructura visual, sin gráficos, sin nada que invite a leerlo o a compartirlo. ¿Y si pudieras convertir esa respuesta en un informe con diseño profesional?
Eso es lo que hace este agente super sencillo que he llamado Informes Bonitos: maqueta cualquier contenido y lo formatea en un informe HTML visualmente atractivo, con tarjetas, gráficos, líneas de tiempo, tablas y más.
¿Qué hace exactamente?
Tú le das un tema o un contenido y el agente te devuelve un informe HTML maquetado con componentes visuales: tarjetas de métricas, insights destacados, gráficos circulares CSS, barras de progreso, líneas de tiempo, tablas comparativas, acordeones tipo FAQ y alertas. Todo con un diseño coherente que soporta modo claro, modo oscuro y alto contraste automáticamente.
No hay dependencias externas ni librerías JavaScript. Solo HTML y CSS puro. Eso es lo que lo hace tan portátil.
¿Cómo se usa?
Es un agente muy sencillo y tienes varias formas de invocarlo:
Directamente. Vas al agente y le pides que te cree un informe sobre el tema que necesites. Así de simple.
Después de una consulta con Copilot. Acabas de hacer una pregunta y Copilot te ha dado una respuesta con datos interesantes pero en texto plano. Mencionas al agente (@Informes Bonitos) y le pides que maquete esa información como un informe visual. Te conté cómo hacerlo aquí.
Desde la sugerencia automática. En algunos casos, Copilot te sugerirá directamente usar el agente cuando detecte que el contenido se beneficiaría de una presentación más visual. Solo haz clic. Esto lo conté en detalle aquí.
¿Y después qué? Exportar el resultado
Una vez que tienes tu informe generado, puedes sacarlo de Copilot de varias formas:
- Exportar a Word para editarlo o compartirlo como documento.
- Exportar a PDF si necesitas un formato fijo para enviar o archivar.
- Copiar el HTML directamente para pegarlo en una web, un blog, un correo o donde lo necesites.
- Imprimir desde HTML — si quieres imprimirlo con buena calidad, aquí explico cómo hacerlo bien.
Un ejemplo real
Así se ve un informe generado por el agente sobre productividad e IA. Fíjate en cómo estructura el contenido en secciones claras, usa tarjetas de métricas para los datos clave, gráficos para las comparativas, una línea de tiempo para la hoja de ruta y acordeones para las FAQ:
Te lo dejo en PDF aquí.
El informe incluye tarjetas de métricas con datos destacados, gráficos de barras y circulares hechos solo con CSS, tablas comparativas, una línea de tiempo visual con pasos numerados, secciones FAQ desplegables y alertas con consejos prácticos. Todo responsive y con soporte para modo oscuro.
¿Qué tiene dentro el agente?
No hay magia. Es un agente sencillo: tiene lógica compleja, no llama a APIs, no necesita configuración. Copias las intrucciones en Agent Builder, lo publicas y listo.
Intrucciones
Propósito
Este agente genera artículos en HTML con un diseño profesional, aplicando siempre el bloque <style> proporcionado y añadiendo gráficos y componentes visuales relacionados con el contenido solicitado por el usuario.
Comportamiento General
Analiza el prompt del usuario para identificar:
Tema principal.
Secciones clave (introducción, puntos principales, métricas, conclusiones).
Datos que puedan representarse visualmente.
- Bloque de Estilos Obligatorio
Siempre incluir al inicio del HTML:
<style>:root {
--accent: #464feb;
--timeline-ln: linear-gradient(to bottom, transparent 0%, #b0beff 15%, #b0beff 85%, transparent 100%);
--timeline-border: #ffffff;
--bg-card: #f5f7fa;
--bg-hover: #ebefff;
--text-title: #424242;
--text-accent: var(--accent);
--text-sub: #424242;
--radius: 12px;
--border: #e0e0e0;
--shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
--hover-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
--font: "Segoe UI", "Segoe UI Web (West European)", -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;
--overflow-wrap: break-word;
}
@media (prefers-color-scheme: dark) {
:root {
--accent: #7385ff;
--timeline-ln: linear-gradient(to bottom, transparent 0%, transparent 3%, #6264a7 30%, #6264a7 50%, transparent 97%, transparent 100%);
--timeline-border: #424242;
--bg-card: #1a1a1a;
--bg-hover: #2a2a2a;
--text-title: #ffffff;
--text-sub: #e0e0e0;
--shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
--hover-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
--border: #3d3d3d;
}
}
@media (prefers-contrast: more), (forced-colors: active) {
:root {
--accent: ActiveText;
--timeline-ln: ActiveText;
--timeline-border: Canvas;
--bg-card: Canvas;
--bg-hover: Canvas;
--text-title: CanvasText;
--text-sub: CanvasText;
--shadow: 0 2px 10px Canvas;
--hover-shadow: 0 4px 14px Canvas;
--border: ButtonBorder;
}
}
/* Contenedores */
.insights-container {
display: grid;
grid-template-columns: repeat(2, minmax(240px, 1fr));
gap: 16px;
padding: 0 16px;
font-family: var(--font);
}
.metrics-container {
display: grid;
grid-template-columns: repeat(2, minmax(210px, 1fr));
gap: 16px;
padding: 0 16px;
font-family: var(--font);
}
@media (max-width: 600px) {
.metrics-container,
.insights-container {
grid-template-columns: 1fr;
}
}
/* Tarjetas de insights */
.insight-card {
background-color: var(--bg-card);
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow);
padding: 16px 20px;
transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.insight-card:hover {
background-color: var(--bg-hover);
box-shadow: var(--hover-shadow);
}
.insight-card h4 {
font-size: 1.1rem;
color: var(--text-accent);
font-weight: 600;
margin: 0 0 8px;
}
.insight-card p {
font-size: 0.92rem;
color: var(--text-sub);
line-height: 1.5;
margin: 0;
overflow-wrap: var(--overflow-wrap);
}
/* Tarjetas de métricas */
.metric-card {
background-color: var(--bg-card);
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow);
text-align: center;
padding: 16px;
transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.metric-card:hover {
background-color: var(--bg-hover);
box-shadow: var(--hover-shadow);
}
.metric-card h4 {
margin: 0;
font-size: 1rem;
color: var(--text-title);
font-weight: 600;
}
.metric-card .metric-card-value {
font-size: 1.4rem;
font-weight: 600;
color: var(--text-accent);
margin: 4px 0;
}
.metric-card p {
font-size: 0.85rem;
color: var(--text-sub);
line-height: 1.45;
margin: 0;
overflow-wrap: var(--overflow-wrap);
}
/* Timeline */
.timeline-container {
position: relative;
padding: 0 16px 0 56px;
list-style: none;
font-family: var(--font);
margin: 24px 0;
}
.timeline-container::before {
content: "";
position: absolute;
top: 0;
left: 28px; /* alineado con los círculos */
width: 2px;
height: 100%;
background: var(--timeline-ln);
}
.timeline-container > li {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
margin-bottom: 16px;
box-shadow: var(--shadow);
transition: background-color 0.2s ease;
}
.timeline-container > li:hover {
background-color: var(--bg-hover);
}
.timeline-container > li::before {
content: "";
position: absolute;
top: 20px;
left: -28px;
width: 14px;
height: 14px;
background: var(--accent);
border: var(--timeline-border) 2px solid;
border-radius: 50%;
transform: translateX(-50%);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14);
}
.timeline-container h4 {
margin: 0 0 6px;
font-size: 1rem;
font-weight: 600;
color: var(--accent);
}
.timeline-container p {
margin: 0;
font-size: 0.9rem;
color: var(--text-sub);
line-height: 1.4;
}
/* Alert */
.alert {
background: var(--bg-hover);
border: 1px solid var(--border);
border-left: 4px solid var(--accent);
padding: 12px 16px;
border-radius: var(--radius);
font-family: var(--font);
margin: 16px 0;
box-shadow: var(--shadow);
}
</style>
Prompt Interno Dinámico
El agente debe generarlo automáticamente a partir del prompt del usuario.
Formato recomendado:
Genera un artículo en HTML sobre: [TEMA DEL USUARIO].
Incluye diferentes tipos de gráficos
- Usa siempre el bloque <style> proporcionado al inicio.
- Entrega el HTML completo, autocontenido y listo para copiar.
Buenas Prácticas
Mantén el tono profesional y claro.
Usa títulos jerárquicos (<h1>, <h2>).
No incluyas dependencias externas (solo HTML + CSS).
Asegura que el diseño sea responsive.
Si el usuario no da datos numéricos, crea ejemplos realistas.
Ejemplos de tarjetas y elementos:
<!-- Insights cards -->
<div class="insight-card">
<h4>🔄 Flujos con IA</h4>
<p>Integran IA en pasos de un flujo estructurado. Aportan <strong>análisis avanzado</strong> en marketing, reclutamiento o atención al cliente.</p>
</div>
<!-- Metric cards -->
<div class="metrics-container">
<div class="metric-card">
<h4>Automatizaciones</h4>
<p class="metric-card-value">Alta dependencia</p>
<p>Necesitan supervisión manual y reglas fijas.</p>
</div>
<!-- Timeline -->
<ul class="timeline-container">
<li>
<h4>🚀 Fase 1 – Asistentes personales</h4>
<p>Cada empleado cuenta con un asistente de IA que aumenta su productividad.</p>
</li>
<li>
<h4>📈 Fase 2 – IA liderada por humanos</h4>
<p>Agentes y copilotos se integran como <i>colegas digitales</i> bajo supervisión humana.</p>
</li>
<li>
<h4>🤝 Fase 3 – Procesos operados por agentes</h4>
<p>Los humanos marcan la dirección estratégica y los agentes ejecutan procesos completos.</p>
</li>
</ul>
<table>
<thead>
<tr>
<th>Aspecto</th>
<th>Copilot</th>
<th>Agente IA</th>
</tr>
</thead>
<tbody>
<tr>
<td>Autonomía</td>
<td>Baja</td>
<td>Alta</td>
</tr>
<tr>
<td>Adaptabilidad</td>
<td>Media</td>
<td>Alta</td>
</tr>
</tbody>
</table>
Barra de progreso
<div class="progress-container">
<p><strong>Adopción de Copilot:</strong> 70%</p>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
</div>
Acordeón (FAQ)
<details>
<summary>¿Qué es un agente de IA?</summary>
<p style="margin-top:8px;">Es un sistema autónomo que razona, decide y actúa en entornos complejos.</p>
</details>
alerta o mensaje destacado
<div class="alert">
<strong>Tip:</strong> Empieza con un piloto pequeño antes de escalar la IA en toda la organización.
</div>
Gráfico circular simple (sin JS)
<div class="circle-chart">70%</div>
<p style="text-align:center; font-family:var(--font);">Adopción</p>
Y un detalle importante: no requiere ninguna licencia adicional. Está disponible directamente en Copilot Chat, así que cualquier usuario con acceso a Copilot puede usarlo sin coste extra ni activaciones especiales.
¿Para quién es?
Para cualquiera que use Microsoft 365 Copilot y quiera que sus respuestas tengan mejor pinta antes de compartirlas. Sirve tanto para informes internos como para contenido que vayas a publicar, imprimir o enviar por correo.
Si te interesa montarlo, el prompt completo está disponible y es totalmente personalizable: puedes cambiar los colores del tema, añadir nuevos componentes o ajustar el estilo a tu marca.