ship-to-show

Ship to Show

Framework em 7 fases para transformar um protótipo em um case study de portfólio.

Quando usar este skill

• O usuário tem um protótipo (React, Vue, HTML, Figma exportado) e quer documentá-lo
• O usuário quer criar um case study para seu portfólio
• O usuário quer produzir vídeos de demonstração de uma interface
• O usuário quer publicar um projeto de protótipo em seu site

Pré-requisitos a verificar

Antes de começar, verificar se as ferramentas estão instaladas:

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

Se faltar alguma ferramenta, informar o comando de instalação (macOS):

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

As 7 fases

1. ENQUADRAR     →  Identificar setor, usuários, problema, ponto de vista de design
2. ESTRUTURAR    →  Tornar o protótipo executável localmente
3. ENRIQUECER    →  Adicionar os percursos faltantes para produzir 5 vídeos
4. FILMAR        →  Produzir os vídeos via Puppeteer + FFmpeg
5. NARRAR        →  Redigir o case study com estrutura narrativa e legendas
6. EMPACOTAR     →  GitHub, Vercel, arquivo de integração autossuficiente
7. PUBLICAR      →  Integrar no site do portfólio

Executar as fases sequencialmente. Cada fase produz um entregável concreto antes de passar para a próxima. Não comprimir as fases.

---

Fase 1: ENQUADRAR (15 min)

Entrada: um arquivo de código ou um protótipo Saída: case-study.md (v1), CLAUDE.md, memória do projeto

Ações

1. Ler o código-fonte do protótipo
2. Identificar:
   • O setor de atividade e o contexto de mercado
   • Os usuários-alvo (função, contexto de uso, pressão)
   • O problema abordado (com um número-chave se possível)
   • As funcionalidades-chave existentes
   • O ponto de vista de design (qual hipótese o protótipo testa)
3. Redigir um executive summary de 1500 caracteres com subtítulos narrativos
4. Criar um CLAUDE.md com o posicionamento do projeto
5. Criar um arquivo de memória com o contexto completo

Checklist

• Setor identificado
• Usuários descritos (função, contexto, pressão)
• Problema formulado com um número
• Ponto de vista de design explícito
• Executive summary redigido
• CLAUDE.md criado

---

Fase 2: ESTRUTURAR (10 min)

Entrada: o arquivo de código bruto Saída: projeto funcional em localhost

Ações

1. Criar package.json com as dependências detectadas
2. Configurar a ferramenta de build (Vite recomendado)
3. Configurar Tailwind CSS se for usado
4. Criar index.html e ponto de entrada
5. npm install
6. Iniciar em localhost

Ponto de atenção

Se o projeto estiver em um sistema de arquivos remoto (Google Drive, Dropbox, OneDrive), copiá-lo localmente antes de iniciar. Os file watchers não funcionam em sistemas de arquivos remotos.

Checklist

• npm install sem erros
• npm run dev inicia o servidor
• O protótipo é exibido no navegador
• Sem erros no console

---

Fase 3: ENRIQUECER (30-45 min)

Entrada: o protótipo funcional + o enquadramento Saída: protótipo filmável com percursos completos

Ações

1. Identificar 5 percursos filmáveis:
   • Visão geral / triagem (inbox, filtragem, seleção)
   • Funcionalidade principal (a interação-chave do produto)
   • Tomada de decisão e feedback (ação, confirmação, impacto)
   • Caso limite (falso positivo, erro, caso rápido)
   • Fluxo completo (encadeamento, métricas de sessão)
2. Listar as interações faltantes para cada percurso
3. Implementar as interações faltantes
4. Adicionar dados variados por caso
5. Adicionar conexões simuladas (Slack, e-mail, CRM, exportação)
6. Adicionar micro-interações (animações, feedback sonoro se pertinente)

Checklist

• 5 percursos identificados e funcionais
• Dados diferentes para cada caso
• Integrações simuladas visíveis
• Cada percurso filmável em 10 a 20 segundos

---

Fase 4: FILMAR (30 min)

Entrada: os percursos definidos + o protótipo funcional Saída: 5 a 8 vídeos MP4, 5 screenshots PNG

Ações

1. Criar a estrutura do pipeline de vídeo:

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

2. Extrair os design tokens do protótipo (cores, tipografia, espaçamentos, raios)
3. Criar as animações CSS compartilhadas (fadeIn, slideUp, scaleIn, stagger, typing)
4. Para cada cena, criar um arquivo HTML com:
   • Um storyboard temporal em comentário CSS
   • Animações CSS timeline controláveis quadro a quadro
   • O markup que reproduz a interface do protótipo
5. Criar capture.js (Puppeteer + FFmpeg) com controle via Web Animations API
6. Renderizar todos os vídeos
7. Capturar 5 screenshots Retina do protótipo real

Técnica-chave: controle quadro a quadro

// Pausa todas as animações
document.getAnimations({ subtree: true }).forEach(a => a.pause());

// Para cada quadro, avança o tempo
document.getAnimations({ subtree: true }).forEach(a => {
  a.currentTime = currentTimeMs;
});

Especificações do vídeo

• 1920x1080
• 30 fps
• H.264 (MP4) + WebM opcional
• Fundo preto (#0a0a0a)
• Tipografia Inter (Google Fonts)
• Duração de 8 a 20 segundos por vídeo

Checklist

• Todos os vídeos renderizados em MP4
• Preview acessível (servidor HTTP local)
• Screenshots Retina capturados
• Qualidade visual verificada

---

Fase 5: NARRAR (20 min)

Entrada: o enquadramento + os vídeos + os percursos Saída: case-study.md (PT), case-study-en.md (EN)

Ações

1. Redigir o case study com a seguinte estrutura narrativa:

   • Cabeçalho (título, subtítulo, categoria, autor)
   • Imagem hero (largura total)
   • Intenção da experimentação (contexto pessoal, 3 parágrafos)
   • O insight fundador (o problema com um número)
   • VÍDEO: antes/depois (ou comparativo)
   • A pergunta de design (princípios diretores)
   • VÍDEO: fluxo de dados / arquitetura
   • Uma seção por funcionalidade (texto + vídeo + legenda)
   • Aprendizados (mecanismos transponíveis)
   • Stack + links

2. Cada vídeo é acompanhado de sua legenda:

   • Título em negrito (o que o vídeo mostra)
   • Frustração: o problema do usuário
   • Benefício: o valor entregue

3. Sem grade de vídeos sem contexto. Cada vídeo tem sua própria narrativa.

4. Produzir as versões PT e EN

Tom

Praticante que compartilha uma experimentação. Não um vendedor que faz a promoção de um produto. Títulos específicos e profissionais (sem linguagem coloquial). Estrutura visível: problema, mecanismo, implicação.

Checklist

• Case study PT completo
• Case study EN completo
• Cada vídeo tem sua legenda frustração/benefício
• Seção de aprendizados com mecanismos transponíveis
• Títulos de seção narrativos e profissionais

---

Fase 6: EMPACOTAR (15 min)

Entrada: todos os entregáveis das fases anteriores Saída: repositório GitHub, protótipo Vercel, PORTFOLIO-INTEGRATION.md

Ações

1. Criar .gitignore (node_modules, dist, .env, frames)
2. Inicializar repositório git, commit estruturado
3. Push no GitHub (repositório público)
4. Implantar o protótipo no Vercel (produção)
5. Criar PORTFOLIO-INTEGRATION.md autossuficiente:
   • Metadados YAML do projeto
   • Comandos de cópia de assets
   • Conteúdo integral do case study, seção por seção
   • Inventário dos assets (vídeos, screenshots, posições)
   • Formato dos vídeos (autoplay/loop/muted/playsinline)
   • Formato das legendas
   • Checklist de publicação

Checklist

• Repositório GitHub criado e enviado
• Protótipo implantado no Vercel
• PORTFOLIO-INTEGRATION.md autossuficiente
• Arquivo copiado para o projeto do portfólio

---

Fase 7: PUBLICAR (variável)

Entrada: PORTFOLIO-INTEGRATION.md no projeto do portfólio Saída: página do projeto publicada no site

Ações

Esta fase é executada em uma sessão separada, no projeto do portfólio. O prompt:

Leia PORTFOLIO-INTEGRATION.md e implemente o case study como um projeto
no meu site. O arquivo contém todas as instruções: assets,
conteúdo, estrutura da página, formato dos vídeos e legendas.

Checklist

• Assets copiados para o projeto do portfólio
• Página do projeto criada
• Vídeos em autoplay/loop/muted
• Legendas abaixo de cada vídeo
• og:image configurado
• Versões PT e EN
• Links do protótipo e GitHub funcionais

---

Resumo

Fase	Duração	Entregáveis
1. Enquadrar	15 min	case-study v1, CLAUDE.md
2. Estruturar	10 min	projeto localhost
3. Enriquecer	30-45 min	protótipo filmável
4. Filmar	30 min	vídeos + screenshots
5. Narrar	20 min	case study PT/EN
6. Empacotar	15 min	GitHub, Vercel, pacote
7. Publicar	variável	página do portfólio
Total	~2h30	case study completo publicado