Guía de Componentes MDX - Showcase

Este artículo demuestra todos los componentes MDX avanzados disponibles para crear contenido rico e interactivo en el Academy.

Callouts

Los callouts permiten destacar información importante con 4 tipos diferentes.

Información

Este es un callout de información con un título. Úsalo para compartir detalles importantes.

Consejo Pro

Los callouts tipo "tip" son perfectos para compartir consejos prácticos y mejores prácticas.

Atención

Las advertencias llaman la atención sobre puntos críticos o errores comunes a evitar.

Peligro

Los callouts de peligro señalan riesgos importantes o acciones potencialmente destructivas.

Bloques de Código

Los bloques de código ahora incluyen un botón de copiar y soportan mostrar el nombre del archivo.

hljs typescript

// Ejemplo de código TypeScript
interface User {
  id: string
  email: string
  name: string
}

async function fetchUser(id: string): Promise<User> {
  const response = await fetch(`/api/users/${id}`)
  return response.json()
}

El código inline también funciona: const greeting = "Hello World".

Steps / Timeline

Usa el componente Steps para describir procesos paso a paso.

Definir objetivos

Comienza identificando claramente lo que quieres aprender de tus usuarios. ¿Qué hipótesis quieres validar?

Preparar preguntas

Crea una lista de preguntas abiertas basadas en los principios del Mom Test. Evita preguntas hipotéticas.

Reclutar participantes

Identifica y contacta usuarios representativos de tu público objetivo. Apunta a 5-8 entrevistas para empezar.

Realizar entrevistas

Haz tus preguntas, escucha activamente y toma notas detalladas. Profundiza en respuestas interesantes.

Analizar resultados

Sintetiza tus notas, identifica patrones y extrae insights accionables.

Accordion / FAQ

Los accordions son perfectos para preguntas frecuentes u organizar contenido denso.

El Mom Test es una metodología de entrevista de usuario creada por Rob Fitzpatrick. Se basa en preguntas sobre el pasado en lugar del futuro, evitando así los sesgos de validación.

Comienza con 5-8 entrevistas. Empezarás a ver patrones emerger. Continúa hasta alcanzar la saturación (cuando nuevas entrevistas ya no aportan insights nuevos).

Usa tu red existente, redes sociales, foros especializados o plataformas de reclutamiento. Lo importante es dirigirse a personas que correspondan a tu usuario ideal.

Citas con Atribución

Las citas enriquecen tus artículos con testimonios o referencias de autoridad.

The measure of usefulness of an early customer conversation is whether it gives us concrete facts about our customers' lives and world views.
Rob Fitzpatrick
The Mom Test

Get out of the building and talk to customers. There are no facts inside your building, only opinions.
Steve Blank
The Startup Owner's Manual

Imágenes con Zoom

Las imágenes pueden ampliarse al hacer clic para una mejor visualización.

Equipo en reunión — Las entrevistas de usuarios en equipo permiten cruzar observaciones y capturar más detalles.

Tablas

Las tablas se estilizan automáticamente para mejor legibilidad.

| Método | Ventajas | Desventajas | Cuándo usarlo | |---------|-----------|---------------|------------------| | Sync | Interacción directa, profundizar | Consume tiempo | Descubrimiento inicial | | Async | Escala, menos sesgo | Menos profundidad | Validación cuantitativa | | Híbrido | Lo mejor de ambos | Complejo de gestionar | Investigación continua |

Listas

Las listas con viñetas y numeradas se estilizan automáticamente:

Mejores prácticas de entrevista:

Haz preguntas sobre el pasado, no el futuro
Escucha más de lo que hablas (ratio 80/20)
Profundiza en las respuestas con "¿Por qué?" y "¿Cómo?"
Toma notas detalladas durante o justo después
Busca hechos concretos, no opiniones

Errores comunes a evitar:

Hablar de tu solución demasiado pronto
Hacer preguntas hipotéticas ("¿Usarías...?")
Buscar validación en lugar de verdad
Ignorar señales negativas
No profundizar en respuestas vagas

Tipografía Optimizada

El texto está optimizado para una lectura cómoda con:

Line-height de 1.7 para el cuerpo del texto
Max-width de 65 caracteres para evitar fatiga ocular
Espaciado apropiado entre elementos
Letter-spacing ajustado en títulos

El texto en negrita y en cursiva también está soportado, así como enlaces a otros recursos.

Conclusión

Estos componentes permiten crear artículos Academy ricos y atractivos. ¡No dudes en combinarlos para crear contenido educativo de calidad!