Graphic Case Study (Estudo de Caso Gráfico)

Estudo de Caso Gráfico (Graphic Case Study)

Gera um PDF de estudo de caso B2B projetado profissionalmente a partir de detalhes da história do cliente. A saída é um único arquivo HTML autocontido (abre em qualquer navegador) mais um PDF pronto para impressão. Suporta 7 layouts de seção de página e 9 predefinições de estilo.

---

Regras críticas — inegociáveis:

1. Cada página DEVE caber dentro da tela A4 (1200×1697px). Nenhum estouro de conteúdo.
2. TODOS os tamanhos de fonte escaláveis usam clamp(). px fixo apenas para bordas/linhas estruturais.
3. HTML autocontido: todo CSS embutido. Zero dependências externas, exceto o link CDN da fonte.
4. Nunca despeje HTML no chat. Salve em arquivo, mostre apenas o resumo.
5. Os números de resultados estatísticos DEVEM ser visualmente dominantes — pelo menos 3× o tamanho do texto do corpo.
6. Sem porcaria genérica de IA: sem Inter como fonte de exibição, sem gradiente roxo em branco, sem fechamento "Obrigado".

---

Etapa 1: Coleta Resumida

Preciso de quatro coisas para começar. Se todas as quatro estiverem presentes na mensagem: pule para a Etapa 2.

Se alguma estiver faltando, pergunte exatamente:

"Para criar seu estudo de caso, preciso de quatro coisas:

1. Nome do cliente -- nome da empresa (ou um descritor para anonimizar: 'Varejista Fortune 500')
2. Desafio -- qual problema eles tinham antes de usar seu produto? (2 a 5 frases)
3. Solução -- o que seu produto fez para resolver? (recursos, abordagem)
4. Resultados -- resultados mensuráveis: idealmente 3 estatísticas (%, tempo economizado, impacto na receita, etc.)"

Aguarde todos os quatro antes de continuar.

---

Etapa 2: Coleta Completa

Faça todas as perguntas em uma única mensagem, agrupadas por categoria. O usuário pode pular qualquer uma — padrões se aplicam.

"Algumas perguntas antes de começar:

Conteúdo

1. Contexto do cliente -- setor, porte da empresa, localização? (opcional, usado para a página de visão geral)
2. Depoimento -- citação do cliente (máx. 40 palavras) + nome do palestrante + cargo? (ou 'Adicionarei depois')
3. Número de páginas -- 1 página (cartão de resumo) / 2 páginas (padrão) / 4 páginas (detalhado)
4. Logotipo do cliente -- URL ou 'nenhum'

Design 5. Nome da sua empresa -- nome do fornecedor para a página de CTA (+ URL do logotipo, se disponível) 6. Estilo -- clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / 'mostre-me opções' 7. Orientação -- retrato A4 (padrão, 1200×1697) / paisagem 4:3 (1200×900)

Saída 8. Anonimizar? -- Manter nome da empresa / substituir por descritor do setor 9. Slug -- slug do nome do arquivo (ex.: 'acme-corp-2025'); vou derivar do nome do cliente se for pulado"

Padrões se pulados:

Pergunta	Padrão
Contexto do cliente	nenhum
Depoimento	nenhum
Número de páginas	2
Logotipo do cliente	nenhum
Nome da sua empresa	derivado do contexto
Estilo	clean-slate
Orientação	retrato A4
Anonimizar	manter nome
Slug	kebab-case do nome do cliente

Se estilo = 'mostre-me opções': Gere 3 pré-visualizações HTML de página única (apenas capa). Salve em .claude-design/previews/style-a.html, style-b.html, style-c.html. Abra cada uma: open .claude-design/previews/style-a.html, etc. Escolha 3 predefinições de estilo que correspondam ao contexto do estudo de caso. Peça ao usuário para escolher antes da Etapa 3.

---

Etapa 2.5: Arquitetura Interna da Página (não mostrado ao usuário)

Derive internamente antes da Etapa 3. Nunca pergunte ao usuário.

Identificação da métrica herói: Examine os resultados em busca do número mais impressionante (maior %, maior $, maior multiplicador). Essa métrica recebe tratamento com a cor de destaque e peso visual máximo na página de resultados.

Número de páginas -> modelo de estrutura:

Contagem	Sequência de páginas
1 página	1 página: [capa-compacta] -- todo o conteúdo condensado em uma página
2 páginas	Página 1: [capa] + [desafio-solução] empilhados · Página 2: [resultados] + [depoimento-cta] empilhados
4 páginas	Página 1: [capa] · Página 2: [visão geral] + [desafio] · Página 3: [solução] + [resultados] · Página 4: [depoimento] + [cta de encerramento]

Caráter visual derivado da escolha de estilo:

• clean-slate → autoridade profissional, bastante espaço em branco, seguro para empresas
• midnight-editorial → escuro premium, peso editorial, empresas de tecnologia/AI
• matt-gray → neutro confiável, operacional, seguro para conselhos
• warm-earth → calor acessível, consultoria/agência/serviços
• brutalist → ousado e marcante, design inovador, que chama atenção
• Se não especificado: padrão clean-slate para B2B SaaS, midnight-editorial para empresas técnicas.

---

Etapa 3: Estrutura da Página

Leia references/page-library.md antes de planejar.

Planeje a sequência completa de páginas. Atribua tipos de seção dos 7 em references/page-library.md a cada seção de página. Várias seções podem ser empilhadas dentro de uma página.

Saída como lista numerada com rótulos [tipo-de-seção] por página. Exemplo para 2 páginas:

Estrutura proposta (2 páginas, estilo clean-slate):

Página 1:
  [capa] -- Acme Corp reduziu tempo de relatório em 80%
  [desafio-solução] -- processo manual / automação DataPulse

Página 2:
  [resultados] -- 80% de tempo economizado, 95% de redução de erros, $200K economizados
  [cta de encerramento] -- Entre em contato: [email protected]

Esta estrutura funciona, ou devo ajustar algo?

Aguarde confirmação antes da Etapa 4.

---

Etapa 4: Rascunho de Conteúdo

Escreva o texto por seção de página. Apenas texto simples — ainda sem HTML.

Regras de texto por seção:

• capa: nome da empresa + resultado do título (máx. 12 palavras, DEVE começar com o número: 'Acme reduziu tempo de relatório em 80%') + rótulo de categoria opcional ('História de Sucesso do Cliente')
• visão geral: apenas 4 fatos -- Setor / Porte da empresa / Localização / Caso de uso -- cada valor com máx. 4 palavras
• desafio: parágrafo de contexto (2 a 3 frases) + 3 pontos de dor (1 frase cada, sem preenchimento de marcadores)
• solução: 2 a 3 destaques de recurso -- nome do recurso (máx. 3 palavras) + descrição do resultado em 1 frase cada
• resultados: 3 métricas (número + rótulo curto + contexto de 1 linha). Opcional: narrativa de 2 frases. ZERO texto do corpo com o mesmo peso dos números.
• depoimento: citação exata (máx. 40 palavras) + nome do palestrante + cargo + empresa
• cta de encerramento: título (máx. 5 palavras) + texto da ação de CTA (3 palavras) + e-mail + URL (ambos obrigatórios)

Palavras proibidas (sem exceções): 'poderoso', 'perfeito', 'revolucionário', 'alavancar', 'inovador', 'revolucionário', 'transformar', 'de ponta', 'robusto', 'desbloquear', 'escalável' (como adjetivo de preenchimento).

Filosofia do texto: Números vencem adjetivos. Lidere cada seção com o resultado, não com o recurso. Fragmentos são aceitáveis.

---

Etapa 5: Geração de HTML

Leia TUDO antes de gerar qualquer HTML:

Referências desta skill:

• references/design-system.md
• references/page-library.md
• references/style-presets.md

Referências cruzadas frontend-slides (leia este arquivo exato):

• /Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css -- inclua TODO o conteúdo na íntegra dentro do bloco <style>

Regras de geração:

1. HTML autocontido. Todo CSS embutido. O link CDN da fonte é a única referência externa.
2. Inclua TODO o conteúdo na íntegra de viewport-base.css dentro do bloco <style> — não parafraseie ou encurte.
3. Após colar viewport-base.css, adicione as substituições de retrato A4:

   /* Substituições de retrato A4 */
   html { scroll-snap-type: none; scroll-behavior: auto; }
   .slide {
     width: 100vw;
     height: 100vh;
     height: 100dvh;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     position: relative;
     scroll-snap-align: none;
   }
   

4. Cada seção de página = <section class="slide"> — obrigatório para detecção do export-pdf.sh.
5. Comente cada página: /* === PÁGINA N: TIPOS-DE-SEÇÃO === */
6. Números de estatísticas de resultados: clamp(2.5rem, 7vw, 5rem) no mínimo. Métrica herói na cor de destaque. Outras métricas na cor de texto secundária.
7. Nenhuma imagem fornecida -> visuais gerados por CSS (formas geométricas, fundos gradientes, construções CSS que parecem ícones). Nunca produza caixas de espaço reservado visíveis.
8. Sem SlidePresentation JS. Inclua apenas um IntersectionObserver mínimo para animações de entrada .reveal (experiência do visualizador; a exportação para PDF renderiza para o estado final automaticamente).
9. Para paisagem 4:3 (se solicitado): use valores clamp() das proporções do graphic-slide-deck — paisagem 1200×900 significa 1vw=12px, semelhante ao retrato.

Disciplina tipográfica (tudo baseado em clamp, ajustado para retrato A4 de 1200px):

• Título da capa: clamp(2rem, 5vw, 3.5rem)
• Título da seção: clamp(1.25rem, 2.5vw, 2rem)
• Corpo: clamp(0.875rem, 1.25vw, 1.1rem)
• Número de estatística (herói): clamp(3rem, 8vw, 5.5rem) na cor de destaque
• Número de estatística (secundário): clamp(2.5rem, 7vw, 5rem) na cor secundária
• Citação: clamp(1.1rem, 2vw, 1.5rem) itálico
• Rótulo/legenda: clamp(0.65rem, 0.9vw, 0.8rem) maiúsculo

---

Etapa 6: Auto-QA

Verifique cada item. Corrija todas as falhas — não pule.

Layout e renderização:

• Cada .slide tem height:100vh; height:100dvh; overflow:hidden
• TODOS os tamanhos de fonte escaláveis usam clamp()
• Nenhum conteúdo estoura na viewport 1200×1697 — verifique a densidade de cada página em relação aos limites em references/page-library.md
• Visuais gerados por CSS presentes para todos os espaços reservados de imagem
• Sem -clamp(), -min(), -max() em CSS — envolva negativos em calc(-1 * ...)

Estrutura:

• Número de páginas corresponde ao plano da Etapa 3
• Cada página usa class="slide"
• Todas as seções de conteúdo da Etapa 3 estão presentes
• class="slide" apenas em elementos <section>, não em divs internas

Qualidade do design:

• Métrica herói visualmente dominante na seção de resultados — cor de destaque, maior tamanho, sem elementos concorrentes com o mesmo peso
• Tokens de predefinição de estilo aplicados consistentemente (cores, fontes de references/style-presets.md)
• Sem padrões de porcaria (verifique a lista NÃO USE em references/style-presets.md)
• Hierarquia tipográfica clara: título da capa >> título da seção >> corpo (pelo menos proporção 2:1)

Conteúdo:

• Nenhuma palavra proibida em nenhum texto
• Título da capa começa com um número ou resultado mensurável
• Citação do depoimento tem 40 palavras ou menos
• CTA de encerramento tem título + ação + e-mail + URL (todos os quatro)
• Todas as estatísticas na seção de resultados têm rótulos (sem números nus)

---

Etapa 7: Saída

Salve o HTML principal:

mkdir -p case-study/[slug]

Escreva em: case-study/[slug]/index.html

Abra-o: open case-study/[slug]/index.html

Arquivos HTML por página (sempre gere estes):

Extraia cada <section class="slide"> do HTML principal. Para cada um, crie um arquivo independente com:

• O bloco completo <style> do HTML principal (copiado na íntegra)
• O <section class="slide"> individual envolto em um shell HTML mínimo
• Sem JS (visualização estática por página)

Escreva em: case-study/[slug]/page-01.html, page-02.html, etc.

Exportação para PDF (sempre faça isso para retrato A4):

bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
  case-study/[slug]/index.html \
  case-study/[slug].pdf --portrait

Se paisagem 4:3 foi solicitada, omita --portrait e use --compact (1280×720).

Nota: a primeira execução instala o Playwright automaticamente (~30 a 60 segundos). Informe o usuário.

Limpeza: Exclua .claude-design/previews/ se os arquivos de pré-visualização de estilo foram gerados na Etapa 2.

---

Etapa 8: Resumo (sem HTML no chat)

Apresente no chat:

## Estudo de Caso: [nome do cliente]
Data: [hoje] | Estilo: [estilo] | Páginas: [N] | Formato: Retrato A4
Fornecedor: [sua empresa] | Cliente: [nome do cliente]

---

### Arquivos
Principal:   case-study/[slug]/index.html
Por página:  case-study/[slug]/page-01.html -> page-0N.html
PDF:         case-study/[slug].pdf

---

### Lista de Verificação do Estudo de Caso
- [ ] Substituir espaço reservado [IMAGEM: logotipo] pelo arquivo de logotipo real
- [ ] Verificar se todas as estatísticas estão precisas (página [número da página de resultados])
- [ ] Confirmar que o cliente aprovou o uso da citação
- [ ] Revisar a ortografia do nome da empresa, precisão do cargo do palestrante
- [ ] Testar a contagem de páginas do PDF = [N] e se nenhum conteúdo é cortado
- [ ] Compartilhar PDF em case-study/[slug].pdf

Não imprima HTML no chat.

---

Referência de Seção

Seção	Propósito
capa	Página de abertura -- nome do cliente, resultado do título, logotipos
visão geral	Perfil rápido -- setor, porte, caso de uso
desafio	O problema -- contexto + pontos de dor
solução	Como seu produto resolveu -- destaques de recurso
resultados	Métricas principais + narrativa de apoio
depoimento	Citação em destaque de largura total do cliente
cta de encerramento	Logotipo do fornecedor + informações de contato + próximo passo