Graphic Case Study
Genera un PDF de caso de estudio B2B con diseño profesional a partir de los detalles de una historia de cliente. La salida es un único archivo HTML autocontenido (se abre en cualquier navegador) más un PDF listo para imprimir. Soporta 7 diseños de secciones de página y 9 preajustes de estilo.
Reglas críticas -- no negociables:
- Cada página DEBE caber dentro del lienzo A4 (1200×1697px). Sin desbordamiento de contenido.
- TODOS los tamaños de fuente escalables usan
clamp(). Solo px fijo para bordes/líneas estructurales. - HTML único autocontenido: todo CSS en línea. Cero dependencias externas excepto el enlace CDN de fuente.
- Nunca volcar HTML en el chat. Guardar en archivo, mostrar solo resumen.
- Los números de resultados DEBEN ser visualmente dominantes -- al menos 3× el tamaño del texto del cuerpo.
- Sin contenido AI genérico: nada de Inter como fuente de visualización, nada de gradiente morado sobre blanco, nada de cierre de "Gracias".
Paso 1: Recopilación breve
Necesito cuatro cosas para empezar. Si las cuatro están presentes en el mensaje: saltar al Paso 2.
Si falta alguna, preguntar exactamente:
"Para crear tu caso de estudio, necesito cuatro cosas:
- Nombre del cliente -- nombre de la empresa (o un descriptor para anonimizar: "Minorista Fortune 500")
- Desafío -- ¿qué problema tenían antes de usar tu producto? (2-5 oraciones)
- Solución -- ¿qué hizo tu producto para resolverlo? (características, enfoque)
- Resultados -- resultados medibles: idealmente 3 estadísticas (%, tiempo ahorrado, impacto en ingresos, etc.)"
Esperar las cuatro antes de continuar.
Paso 2: Recopilación completa
Hacer todas las preguntas en un solo mensaje, agrupadas por categoría. El usuario puede saltar cualquier -- se aplican valores por defecto.
"Algunas preguntas antes de empezar:
Contenido
- Contexto del cliente -- ¿industria, tamaño de empresa, ubicación? (opcional, se usa para la página de descripción general)
- Testimonio -- ¿cita del cliente (máx. 40 palabras) + nombre del orador + cargo? (o "lo añadiré después")
- Número de páginas -- 1 página (tarjeta resumen) / 2 páginas (estándar, por defecto) / 4 páginas (detallado)
- Logotipo del cliente -- URL o "ninguno"
Diseño 5. Nombre de tu empresa -- nombre del proveedor para la página de CTA (+ URL del logotipo si está disponible) 6. Estilo -- clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / "muéstrame opciones" 7. Orientación -- A4 vertical (por defecto, 1200×1697) / apaisado 4:3 (1200×900)
Salida 8. ¿Anonimizar? -- Mantener nombre de la empresa / reemplazar con descriptor de industria 9. Slug -- slug del nombre de archivo (ej. "acme-corp-2025"); lo derivaré del nombre del cliente si se salta"
Valores por defecto si se salta:
| Pregunta | Por defecto |
|---|---|
| Contexto del cliente | ninguno |
| Testimonio | ninguno |
| Número de páginas | 2 |
| Logotipo del cliente | ninguno |
| Nombre de tu empresa | derivado del contexto |
| Estilo | clean-slate |
| Orientación | A4 vertical |
| Anonimizar | mantener nombre |
| Slug | kebab-case del nombre del cliente |
Si estilo = "muéstrame opciones":
Generar 3 vistas previas HTML de una página (solo página de portada). Guardar en .claude-design/previews/style-a.html, style-b.html, style-c.html. Abrir cada una: open .claude-design/previews/style-a.html etc. Elegir 3 preajustes de estilo que coincidan con el contexto del caso de estudio. Preguntar al usuario que elija antes del Paso 3.
Paso 2.5: Arquitectura interna de página (no se muestra al usuario)
Derivar internamente antes del Paso 3. Nunca preguntar al usuario.
Identificación de métrica destacada: Escudriñar los resultados en busca del número más impresionante (% más grande, $ más grande, el mayor multiplicador). Esta métrica recibe tratamiento de color de acento y el máximo peso visual en la página de resultados.
Número de páginas -> plantilla de estructura:
| Número | Secuencia de páginas |
|---|---|
| 1 página | 1 página: [portada-compacta] -- todo el contenido condensado en una página |
| 2 páginas | Página 1: [portada] + [desafío-solución] apilados · Página 2: [resultados] + [testimonio-cta] apilados |
| 4 páginas | Página 1: [portada] · Página 2: [descripción general] + [desafío] · Página 3: [solución] + [resultados] · Página 4: [testimonio] + [cierre-cta] |
Carácter visual derivado de la elección de estilo:
- clean-slate → autoridad profesional, espacio en blanco generoso, seguro para empresas
- midnight-editorial → oscuro premium, peso editorial, empresas de tecnología/AI
- matt-gray → neutral confiable, operativo, seguro para juntas directivas
- warm-earth → calidez accesible, consultoría/agencias/servicios
- brutalist → audaz destacado, con visión de diseño, que llama la atención
- Si no se especifica: por defecto clean-slate para B2B SaaS, midnight-editorial para empresas técnicas.
Paso 3: Estructura de página
Leer references/page-library.md antes de planificar.
Planificar la secuencia completa de páginas. Asignar tipos de sección de los 7 en references/page-library.md a cada sección de página. Múltiples secciones pueden apilarse dentro de una página.
Salida como lista numerada con etiquetas [tipo-de-sección] por página. Ejemplo para 2 páginas:
Estructura propuesta (2 páginas, estilo clean-slate):
Página 1:
[portada] -- Acme Corp redujo el tiempo de informes en un 80%
[desafío-solución] -- proceso manual / automatización DataPulse
Página 2:
[resultados] -- 80% de tiempo ahorrado, 95% de reducción de errores, $200K ahorrados
[cierre-cta] -- Ponte en contacto: [email protected]
¿Funciona esta estructura, o debo ajustar algo?
Esperar confirmación antes del Paso 4.
Paso 4: Borrador de contenido
Escribir copia por sección de página. Solo texto plano -- sin HTML todavía.
Reglas de copia por sección:
portada: nombre de la empresa + resultado principal (máx. 12 palabras, DEBE comenzar con el número: "Acme redujo el tiempo de informes en un 80%") + etiqueta de categoría opcional ("Historia de éxito del cliente")descripción general: solo 4 datos -- Industria / Tamaño de empresa / Ubicación / Caso de uso -- cada valor máx. 4 palabrasdesafío: párrafo de contexto (2-3 oraciones) + 3 puntos de dolor (1 oración cada uno, sin relleno de viñetas)solución: 2-3 menciones de características -- nombre de la característica (máx. 3 palabras) + 1 oración de descripción del resultado cada unaresultados: 3 métricas (número + etiqueta corta + 1 línea de contexto). Opcional: narrativa de 2 oraciones. CERO texto del cuerpo con el mismo peso que los números.testimonio: cita exacta (máx. 40 palabras) + nombre del orador + cargo + empresacierre-cta: titular (máx. 5 palabras) + texto de acción de CTA (3 palabras) + correo electrónico + URL (ambos requeridos)
Palabras prohibidas (sin excepciones): "poderoso", "sin fisuras", "revolucionario", "apalancar", "innovador", "revolucionario", "transformar", "de vanguardia", "robusto", "desbloquear", "escalable" (como adjetivo de relleno).
Filosofía de copia: Los números vencen a los adjetivos. Lidera cada sección con el resultado, no con la característica. Los fragmentos están bien.
Paso 5: Generación HTML
Leer TODO antes de generar cualquier HTML:
Referencias de esta habilidad:
references/design-system.mdreferences/page-library.mdreferences/style-presets.md
Referencias cruzadas de frontend-slides (leer este archivo exacto):
/Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css-- incluir el contenido COMPLETO textualmente dentro del bloque<style>
Reglas de generación:
- HTML único autocontenido. Todo CSS en línea. El enlace CDN de fuente
<link>es la única referencia externa. - Incluir el contenido COMPLETO textualmente de
viewport-base.cssdentro del bloque<style>-- no parafrasear ni acortar. - Después de pegar viewport-base.css, añadir anulaciones para A4 vertical:
/* Anulaciones para A4 vertical */ 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; } - Cada sección de página =
<section class="slide">-- requerido para la detección de export-pdf.sh. - Comentar cada página:
/* === PÁGINA N: TIPOS-DE-SECCIÓN === */ - Números de estadísticas de resultados:
clamp(2.5rem, 7vw, 5rem)como mínimo. Métrica destacada en color de acento. Otras métricas en color de texto secundario. - Sin imágenes proporcionadas -> elementos visuales generados con CSS (formas geométricas, fondos degradados, construcciones CSS similares a iconos). Nunca mostrar cuadros de marcador de posición visibles.
- Sin SlidePresentation JS. Incluir solo un IntersectionObserver mínimo para animaciones de entrada
.reveal(experiencia del espectador; la exportación PDF renderiza al estado final automáticamente). - Para apaisado 4:3 (si se solicita): usar valores
clamp()de las proporciones de graphic-slide-deck -- apaisado 1200×900 significa 1vw=12px, similar a vertical.
Disciplina tipográfica (todo basado en clamp, ajustado para A4 vertical de 1200px):
- Titular de portada:
clamp(2rem, 5vw, 3.5rem) - Encabezado de sección:
clamp(1.25rem, 2.5vw, 2rem) - Cuerpo:
clamp(0.875rem, 1.25vw, 1.1rem) - Número de estadística (destacada):
clamp(3rem, 8vw, 5.5rem)en color de acento - Número de estadística (secundaria):
clamp(2.5rem, 7vw, 5rem)en color secundario - Cita:
clamp(1.1rem, 2vw, 1.5rem)cursiva - Etiqueta/título:
clamp(0.65rem, 0.9vw, 0.8rem)mayúsculas
Paso 6: Autocontrol de calidad
Revisar cada elemento. Corregir cada fallo -- no saltar.
Diseño y renderizado:
- Cada
.slidetieneheight:100vh; height:100dvh; overflow:hidden - TODOS los tamaños de fuente escalables usan
clamp() - Sin desbordamiento de contenido en viewport de 1200×1697 -- verificar la densidad de cada página con los límites de
references/page-library.md - Elementos visuales generados con CSS presentes para todos los espacios de marcador de posición de imágenes
- Sin
-clamp(),-min(),-max()en CSS -- envolver negativos encalc(-1 * ...)
Estructura:
- El número de páginas coincide con el plan del Paso 3
- Cada página usa
class="slide" - Todas las secciones de contenido del Paso 3 están presentes
-
class="slide"solo en elementos<section>, no en divs internos
Calidad de diseño:
- La métrica destacada es visualmente dominante en la sección de resultados -- color de acento, tamaño más grande, sin elementos competidores con el mismo peso
- Los tokens del preajuste de estilo se aplican consistentemente (colores, fuentes de
references/style-presets.md) - Sin patrones de contenido genérico (ver lista NO USAR en
references/style-presets.md) - Jerarquía tipográfica clara: titular de portada >> encabezado de sección >> cuerpo (al menos relación 2:1)
Contenido:
- Sin palabras prohibidas en ninguna copia
- El titular de portada comienza con un número o resultado medible
- La cita del testimonio tiene 40 palabras o menos
- El CTA de cierre tiene titular + acción + correo electrónico + URL (los cuatro)
- Todas las estadísticas en la sección de resultados tienen etiquetas (sin números desnudos)
Paso 7: Salida
Guardar el HTML principal:
mkdir -p case-study/[slug]
Escribir en: case-study/[slug]/index.html
Abrirlo: open case-study/[slug]/index.html
Archivos HTML por página (siempre generarlos):
Extraer cada <section class="slide"> del HTML principal. Para cada una, crear un archivo independiente con:
- El bloque
<style>completo del HTML principal (copiado textualmente) - La
<section class="slide">individual envuelta en un shell HTML mínimo - Sin JS (visualización estática por página)
Escribir en: case-study/[slug]/page-01.html, page-02.html, etc.
Exportación PDF (siempre hacer para A4 vertical):
bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
case-study/[slug]/index.html \
case-study/[slug].pdf --portrait
Si se solicitó apaisado 4:3, omitir --portrait y usar --compact en su lugar (1280×720).
Nota: la primera ejecución instala Playwright automáticamente (~30-60 segundos). Informar al usuario.
Limpieza: Eliminar .claude-design/previews/ si se generaron archivos de vista previa de estilo en el Paso 2.
Paso 8: Resumen (sin HTML en el chat)
Presentar en el chat:
## Caso de estudio: [nombre del cliente]
Fecha: [hoy] | Estilo: [estilo] | Páginas: [N] | Formato: A4 vertical
Proveedor: [tu empresa] | Cliente: [nombre del cliente]
---
### Archivos
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 verificación del caso de estudio
- [ ] Reemplazar marcador [IMAGEN: logotipo] con el archivo de logotipo real
- [ ] Verificar que todas las estadísticas son precisas (página [número de página de resultados])
- [ ] Confirmar que el cliente ha aprobado el uso de la cita
- [ ] Revisar la ortografía del nombre de la empresa, precisión del cargo del orador
- [ ] Probar que el número de páginas del PDF = [N] y que no hay recortes de contenido
- [ ] Compartir PDF en case-study/[slug].pdf
No imprimir HTML en el chat.
Referencia de secciones
| Sección | Propósito |
|---|---|
| portada | Página de apertura -- nombre del cliente, resultado del titular, logotipos |
| descripción general | Perfil de un vistazo -- industria, tamaño, caso de uso |
| desafío | El problema -- contexto + puntos de dolor |
| solución | Cómo tu producto lo resolvió -- menciones de características |
| resultados | Métricas clave + narrativa de apoyo |
| testimonio | Cita destacada a ancho completo del cliente |
| cierre-cta | Logotipo del proveedor + información de contacto + siguiente paso |