mauromendezg@gmail.com

Tipo C · Consumer · Claude Code · Claude Design · Notion (MCP)

Instagram Fix.
El detalle que +1600
usuarios pidieron arreglar.

Análisis crítico + solución construida en 1 día.

Case studyCase study · Publicado abril 2026
TL;DR

Resumen

Encontré una queja recurrente en el App Store de Instagram: en el carrusel de fotos, todas las imágenes se ajustan al tamaño de la primera. +1600 usuarios pidiéndolo, sin respuesta del equipo.

Lo que construí en un día

Discovery, story map, historias de usuario con criterios de aceptación, prototipo navegable end-to-end con Claude Code + Claude Design, y documentación completa en Notion vía MCP.

El resultado

El resultado funciona. Independencia de tamaño entre fotos, fit correcto, navegación real. No es un mockup — es un build.

El problema

Lo que descubrí en los reviews

Entré al App Store de Google y leí los reviews de Instagram. +1600 personas reportando el mismo issue: subir un carrusel de imágenes con dimensiones distintas fuerza a todas a adoptar el aspect ratio de la primera. Si subes una foto vertical seguida de una horizontal, la horizontal se recorta o queda mal encuadrada.

Por qué este caso

Es un detalle pequeño, pero recurrente. Y es exactamente el tipo de problema que un PM debería detectar antes de que se vuelva ruido en redes — no después.

Decisión deliberada

No inventé el problema. Lo encontré. Lo que demuestro acá no es ingenio creativo — es metodología para encontrar problemas reales y operar sobre ellos rápido.

Discovery & Story Map

El escenario asumido

El negocio ya priorizó la funcionalidad, IT está de acuerdo, y como PM tengo que documentar para que el equipo de desarrollo pueda tomar el ticket sin reuniones de 40 personas. Trabajé en Claude Code con un skill instalado para discovery y mejores prácticas de producto digital.

Qué generé

  • Discovery completo (mercado, usuarios afectados, impacto)
  • Story map: desde "el cliente sube la imagen" hasta "ve el fit correcto en pantalla"
  • Timeline entre sprints e historias de usuario por sprint
  • Métricas de éxito: adoption rate, engagement increase, error rate, NPS

Output

Todo en markdown, versionado, listo para que cualquier stakeholder lo lea sin que yo esté presente.

Definición & Criterios de aceptación

Nivel de detalle por historia

Cada historia de usuario quedó con criterios de aceptación específicos. Sin ambigüedad para el equipo de desarrollo.

Ejemplo de la historia central

Como usuario que sube un carrusel, quiero que cada foto mantenga su aspect ratio original, para que mi composición visual no se distorsione.

Criterios de aceptación

  • Cada imagen mantiene su ratio independiente
  • El preview en tiempo real muestra el resultado final
  • El scroll es nativo, sin saltos
  • Estados manejados: imagen cargando, imagen subida, error de upload

Por qué importa

Este es el nivel de detalle que reduce la ida y vuelta con desarrollo de semanas a horas.

Build con Claude Design + Claude Code

Algo nuevo

Acá hice algo nuevo: usé Claude Design (no Figma) para diseñar las pantallas, y Claude Code para construir el prototipo navegable.

Cuestionario de Claude Design

Claude Design me hizo un cuestionario antes de generar nada: qué contenido (mixto), qué dispositivo (iPhone 16 Pro Max), qué dirección estética (minimalista), qué color de acento (magenta tipo Instagram), qué tipo de presentación (storyboard horizontal con anotaciones).

Iteración con Claude Code

Le pasé el contexto completo de Claude Code + screenshots de referencia del feed actual de Instagram. Generó las pantallas con personas reales con derechos libres. Luego volví a Claude Code, pasé las pantallas + las historias de usuario, y construí el prototipo navegable. Iteré una vez (la primera versión era explicativa, no navegable). La segunda quedó funcional end-to-end.

Stack final

  • Claude Code (lógica + prototipo)
  • Claude Design (UI)
  • Notion vía MCP (documentación)
Plan de implementación

Lo que el equipo recibe

Cierro con el plan que un equipo de desarrollo necesita.

Contenido del plan

  • Capa de base de datos
  • Consideraciones de seguridad
  • Orden de construcción
  • Dependencias entre componentes
  • Lo que ES y lo que NO ES un plan (no es código, no es promesa de fechas, no es documento fijo)
Lo que aprendí construyéndolo

1. Claude Design + Claude Code juntos

Hacen un trabajo que en una compañía tradicional toma semanas. La integración entre ambos no es trivial — pasar contexto de uno a otro de forma limpia es la habilidad real.

2. El prompt nunca está perfecto

La primera iteración de Claude Design entregó pantallas explicativas, no navegables. Tuve que pedirle introspección sobre por qué interpretó así el requerimiento. Esa conversación es donde se aprende a operar el modelo.

3. Encontrar el problema es la mitad del trabajo

Cualquiera puede construir cuando ya tiene el ticket. La diferencia del PM moderno es saber leer reviews, foros y comportamiento real para encontrar el problema antes de que llegue a la mesa.

Disclosure

Qué es real, qué es hipotético

Este case study es metodología real aplicada a un cliente hipotético. El problema viene de reviews públicos del App Store. La solución construida funciona — el prototipo navega, las historias están escritas, la documentación existe. Lo único hipotético es que Instagram no me contrató para esto.

El nivel de rigor

El rigor que apliqué acá es el mismo que aplicaría el lunes por la mañana en cualquier producto en producción.