ship-to-show

Ship to Show

Framework en 7 fases para transformar un prototipo en un case study de portafolio.

Cuándo usar esta skill

• El usuario tiene un prototipo (React, Vue, HTML, Figma exportado) y quiere documentarlo
• El usuario quiere crear un case study para su portafolio
• El usuario quiere producir videos de demostración de una interfaz
• El usuario quiere publicar un proyecto de prototipo en su sitio web

Prerrequisitos a verificar

Antes de comenzar, verificar que las herramientas estén instaladas:

node --version && npm --version && ffmpeg -version | head -1 && git --version && gh --version && vercel --version

Si falta alguna herramienta, indicar el comando de instalación (macOS):

• Node.js: brew install node
• FFmpeg: brew install ffmpeg
• Git: brew install git
• GitHub CLI: brew install gh y luego gh auth login
• Vercel CLI: npm i -g vercel

Las 7 fases

1. ENCUADRAR     →  Identificar sector, usuarios, problema, punto de vista de diseño
2. ESTRUCTURAR   →  Hacer el prototipo ejecutable en local
3. ENRIQUECER    →  Agregar los recorridos faltantes para producir 5 videos
4. FILMAR        →  Producir los videos mediante Puppeteer + FFmpeg
5. NARRAR        →  Redactar el case study con estructura narrativa y leyendas
6. EMPAQUETAR    →  GitHub, Vercel, archivo de integración autoportante
7. PUBLICAR      →  Integrar en el sitio de portafolio

Ejecutar las fases secuencialmente. Cada fase produce un entregable concreto antes de pasar a la siguiente. No comprimir las fases.

---

Fase 1: ENCUADRAR (15 min)

Entrada: un archivo de código o un prototipo
Salida: case-study.md (v1), CLAUDE.md, memoria del proyecto

Acciones

1. Leer el código fuente del prototipo
2. Identificar:
   • El sector de actividad y el contexto de mercado
   • Los usuarios objetivo (rol, contexto de uso, presión)
   • El problema abordado (con un número clave si es posible)
   • Las funcionalidades clave existentes
   • El punto de vista de diseño (qué hipótesis prueba el prototipo)
3. Redactar un executive summary de 1500 caracteres con subtítulos narrativos
4. Crear un archivo CLAUDE.md con el posicionamiento del proyecto
5. Crear un archivo de memoria con el contexto completo

Lista de verificación

• Sector identificado
• Usuarios descritos (rol, contexto, presión)
• Problema formulado con un número
• Punto de vista de diseño explícito
• Executive summary redactado
• CLAUDE.md creado

---

Fase 2: ESTRUCTURAR (10 min)

Entrada: el archivo de código bruto
Salida: proyecto funcional en localhost

Acciones

1. Crear package.json con las dependencias detectadas
2. Configurar la herramienta de build (Vite recomendado)
3. Configurar Tailwind CSS si se usa
4. Crear index.html y punto de entrada
5. Ejecutar npm install
6. Iniciar en localhost

Punto de atención

Si el proyecto está en un sistema de archivos de red (Google Drive, Dropbox, OneDrive), copiarlo a local antes de ejecutar. Los observadores de archivos no funcionan en sistemas de archivos remotos.

Lista de verificación

• npm install sin errores
• npm run dev inicia el servidor
• El prototipo se muestra en el navegador
• Sin errores en la consola

---

Fase 3: ENRIQUECER (30-45 min)

Entrada: el prototipo funcional + el encuadre
Salida: prototipo filmable con recorridos completos

Acciones

1. Identificar 5 recorridos filmables:
   • Visión general / clasificación (bandeja de entrada, filtrado, selección)
   • Funcionalidad principal (la interacción clave del producto)
   • Toma de decisiones y retroalimentación (acción, confirmación, impacto)
   • Caso límite (falso positivo, error, caso rápido)
   • Flujo completo (encadenamiento, métricas de sesión)
2. Listar las interacciones faltantes para cada recorrido
3. Implementar las interacciones faltantes
4. Agregar datos variados por caso
5. Agregar conexiones simuladas (Slack, email, CRM, exportación)
6. Agregar micro-interacciones (animaciones, feedback sonoro si es relevante)

Lista de verificación

• 5 recorridos identificados y funcionales
• Datos diferentes para cada caso
• Integraciones simuladas visibles
• Cada recorrido filmable en 10 a 20 segundos

---

Fase 4: FILMAR (30 min)

Entrada: los recorridos definidos + el prototipo funcional
Salida: 5 a 8 videos MP4, 5 capturas de pantalla PNG

Acciones

1. Crear la estructura del pipeline de video:

video-scenes/
├── capture.js
├── scenes/
│   ├── shared/
│   │   ├── design-tokens.css
│   │   ├── animations.css
│   │   └── components.css
│   ├── 01-scene.html
│   └── ...
└── output/

2. Extraer los tokens de diseño del prototipo (colores, tipografía, espaciados, radios)
3. Crear las animaciones CSS compartidas (fadeIn, slideUp, scaleIn, stagger, typing)
4. Para cada escena, crear un archivo HTML con:
   • Un storyboard temporal en comentario CSS
   • Animaciones CSS timeline controlables fotograma por fotograma
   • El markup que reproduce la interfaz del prototipo
5. Crear capture.js (Puppeteer + FFmpeg) con control mediante Web Animations API
6. Renderizar todos los videos
7. Capturar 5 capturas de pantalla Retina del prototipo real

Técnica clave: control fotograma por fotograma

// Pausar todas las animaciones
document.getAnimations({ subtree: true }).forEach(a => a.pause());

// Para cada fotograma, avanzar el tiempo
document.getAnimations({ subtree: true }).forEach(a => {
  a.currentTime = currentTimeMs;
});

Especificaciones de video

• 1920x1080
• 30 fps
• H.264 (MP4) + WebM opcional
• Fondo negro (#0a0a0a)
• Tipografía Inter (Google Fonts)
• Duración 8 a 20 segundos por video

Lista de verificación

• Todos los videos renderizados en MP4
• Vista previa accesible (servidor HTTP local)
• Capturas de pantalla Retina tomadas
• Calidad visual verificada

---

Fase 5: NARRAR (20 min)

Entrada: el encuadre + los videos + los recorridos
Salida: case-study.md (FR), case-study-en.md (EN)

Acciones

1. Redactar el case study con la siguiente estructura narrativa:

   • Encabezado (título, subtítulo, categoría, autor)
   • Imagen hero (ancho completo)
   • Intención del experimento (contexto personal, 3 párrafos)
   • El insight fundador (el problema con un número)
   • VIDEO: antes/después (o comparativo)
   • La pregunta de diseño (principios rectores)
   • VIDEO: flujo de datos / arquitectura
   • Una sección por funcionalidad (texto + video + leyenda)
   • Aprendizajes (mecanismos transferibles)
   • Stack + enlaces

2. Cada video va acompañado de su leyenda:

   • Título en negrita (lo que muestra el video)
   • Frustración: el problema del usuario
   • Beneficio: el valor aportado

3. Sin cuadrícula de videos sin contexto. Cada video tiene su propia narrativa.

4. Producir las versiones FR y EN

Tono

Practicante que comparte un experimento. No un vendedor que promociona un producto. Títulos específicos y profesionales (sin lenguaje informal). Estructura visible: problema, mecanismo, implicación.

Lista de verificación

• Case study FR completo
• Case study EN completo
• Cada video tiene su leyenda frustración/beneficio
• Sección de aprendizajes con mecanismos transferibles
• Títulos de sección narrativos y profesionales

---

Fase 6: EMPAQUETAR (15 min)

Entrada: todos los entregables de las fases anteriores
Salida: repositorio GitHub, prototipo Vercel, PORTFOLIO-INTEGRATION.md

Acciones

1. Crear .gitignore (node_modules, dist, .env, frames)
2. Inicializar repositorio git, commit estructurado
3. Subir a GitHub (repositorio público)
4. Desplegar el prototipo en Vercel (producción)
5. Crear PORTFOLIO-INTEGRATION.md autoportante:
   • Metadatos YAML del proyecto
   • Comandos de copia de assets
   • Contenido completo del case study, sección por sección
   • Inventario de assets (videos, capturas de pantalla, posiciones)
   • Formato de los videos (autoplay/loop/muted/playsinline)
   • Formato de las leyendas
   • Lista de verificación de publicación

Lista de verificación

• Repositorio GitHub creado y subido
• Prototipo desplegado en Vercel
• PORTFOLIO-INTEGRATION.md autoportante
• Archivo copiado en el proyecto de portafolio

---

Fase 7: PUBLICAR (variable)

Entrada: PORTFOLIO-INTEGRATION.md en el proyecto de portafolio
Salida: página de proyecto publicada en el sitio

Acciones

Esta fase se ejecuta en una sesión separada, en el proyecto de portafolio. El prompt:

Lee PORTFOLIO-INTEGRATION.md e implementa el case study como proyecto
en mi sitio. El archivo contiene todas las instrucciones: assets,
contenido, estructura de página, formato de videos y leyendas.

Lista de verificación

• Assets copiados en el proyecto de portafolio
• Página de proyecto creada
• Videos en autoplay/loop/muted
• Leyendas debajo de cada video
• og:image configurado
• Versiones FR y EN
• Enlaces al prototipo y GitHub funcionales

---

Resumen

Fase	Duración	Entregables
1. Encuadrar	15 min	case-study v1, CLAUDE.md
2. Estructurar	10 min	proyecto localhost
3. Enriquecer	30-45 min	prototipo filmable
4. Filmar	30 min	videos + capturas de pantalla
5. Narrar	20 min	case study FR/EN
6. Empaquetar	15 min	GitHub, Vercel, paquete
7. Publicar	variable	página de portafolio
Total	~2h30	case study completo publicado