graphic-ebook
Crea libros electrónicos B2B SaaS profesionalmente diseñados: lead magnets, guías cerradas, activos de nurturing, white papers. HTML + CSS → PDF listo para impresión. De 3 a 10 páginas.
Reglas críticas
Antes de cualquier paso, estas reglas son absolutas:
- 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 fijos para bordes y elementos estructurales. - Único HTML autocontenido. Todo el CSS en línea. Solo el
<link>de la CDN de la fuente como dependencia externa. - Nunca volcar HTML en el chat. Guardar en archivo, mostrar solo un resumen.
- El texto del cuerpo es primordial.
line-height ≥ 1.75en todas las páginas de columna de texto y barra lateral de texto.max-width ≤ 65chpara cuerpo de una sola columna. - Sin contenido genérico de IA: no usar Inter como fuente de visualización, ni degradado de púrpura a azul sobre blanco, ni cierre con "Gracias".
- Ritmo visual: nunca colocar 2 o más páginas de columna de texto consecutivas. Romper con introducción de capítulo, cita destacada o cuadrícula de estadísticas.
- Antes de generar HTML, comprometerse con una dirección de diseño: un tono, un elemento característico, un sistema de fondo. Genérico = fracaso. Cada ebook debe estar diseñado de forma distintiva para su audiencia y tema, no ser una plantilla.
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }— CSS global obligatorio. Chromium elimina todos los colores de fondo en PDF sin esto.- Cada página excepto la portada debe tener un pie de página: número de página + nombre de la marca. Posición absoluta en la parte inferior de cada
.slide.
Paso 1: Recopilación breve
Cuatro campos obligatorios. Si los cuatro están presentes en el mensaje del usuario: saltar al Paso 2.
Si falta alguno, preguntar exactamente:
"Para crear tu ebook, necesito cuatro cosas:
- Tema — ¿de qué trata el ebook? (sé específico: '5 formas de reducir el CAC', no 'consejos de marketing')
- Audiencia — ¿quién lo lee? (rol, tamaño de empresa, punto débil: 'Customer Success Managers en empresas SaaS de 50 a 500 personas que luchan con la rotación')
- Acción deseada — ¿qué debería hacer el lector después? (reservar una demo, descargar una plantilla, compartir con el equipo)
- Contenido — ¿tienes contenido existente o debería redactarlo a partir del tema?'
Detenerse y esperar. No leer archivos de referencia. No generar ningún HTML ni esquema.
Paso 2: Recopilación completa
Hacer las 9 preguntas en un solo mensaje, agrupadas. Se aplican valores predeterminados si se omiten.
Contenido
- Número de páginas — 3–5 (guía rápida / lista de verificación) / 6–8 (guía estándar) / 9–10 (análisis en profundidad) (predeterminado: 6)
- Conclusiones clave — 3–5 cosas que el lector debe saber o hacer después de leer (informa la estructura de los capítulos)
- Nombre de la marca — nombre de la empresa o producto para la portada y el pie de página (o "omitir")
- Logotipo de la marca — URL o "ninguno"
Diseño 5. Estilo — clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / soft-cloud / "muéstrame opciones" (predeterminado: clean-slate) 6. Número de capítulos — ¿cuántas secciones principales? (predeterminado: derivado del número de páginas)
Salida 7. Detalles de la CTA — reserva de demo / registro de boletín / descarga de plantilla / otro (predeterminado: "reserva una demo") 8. Información de contacto — correo electrónico + URL para la página de CTA de cierre (o "lo añadiré después") 9. Slug — slug del nombre del archivo (ej., "reduce-churn-guide-2025"; derivado del tema si se omite)
Valores predeterminados:
| Pregunta | Predeterminado |
|---|---|
| Número de páginas | 6 |
| Conclusiones clave | derivar del tema |
| Nombre de la marca | ninguno |
| Logotipo de la marca | ninguno |
| Estilo | clean-slate |
| Número de capítulos | derivado del número de páginas |
| Detalles de la CTA | reserva una demo |
| Información de contacto | marcador de posición (marcado en la lista de verificación) |
| Slug | kebab-case del tema |
Si estilo = "muéstrame opciones": Generar 3 vistas previas HTML de una página (solo portada) guardadas en .claude-design/previews/style-a.html, style-b.html, style-c.html. Abrir cada una automáticamente. Pedir al usuario que elija antes del Paso 3.
Paso 3: Arquitectura interna
Derivar internamente. Nunca mostrar esto al usuario.
Mapeo capítulo → página:
| Páginas | Estructura típica |
|---|---|
| 3 | portada + [1 página de contenido] + cierre-cta |
| 4 | portada + [1 introducción de capítulo + 1 columna de texto] + cierre-cta |
| 5 | portada + toc + [1 introducción de capítulo + 1 columna de texto] + cierre-cta |
| 6 | portada + toc + [2 introducciones de capítulo + 1 columna de texto] + cierre-cta |
| 8 | portada + toc + [3 introducciones de capítulo + 2 páginas de contenido] + cierre-cta |
| 10 | portada + toc + [4 introducciones de capítulo + 3 páginas de contenido] + conclusiones-clave + cierre-cta |
Regla de la tabla de contenido (TOC): Incluir para ebooks de ≥ 6 páginas. Para ebooks de 3 a 5 páginas, usar una lista con viñetas de "Qué hay dentro" en la portada u omitirla por completo.
Arquitectura de CTA en tres puntos (para ebooks de ≥ 6 páginas):
- CTA de introducción (después de la página 2) — mención sutil en línea de 1 línea: "explora nuestra [herramienta] en [url]"
- CTA a mitad del ebook (después de una cuadrícula de estadísticas o introducción de capítulo) — recuadro pequeño
.callout--stato.callout--tipcon CTA de 1 línea - CTA de cierre (página final) — página completa, acción de conversión principal
Verificación de ritmo visual: Si aparecen 2 o más páginas consecutivas de text-column en el plan → insertar quote-callout o stat-grid entre ellas antes de continuar.
Dirección de diseño (derivar del preset de estilo + audiencia — nunca mostrar al usuario):
| Decisión | Derivar de |
|---|---|
| Tono | ¿Qué registro emocional espera esta audiencia? (autoritario, editorial, enérgico, tranquilo, cálido…) |
| Elemento característico | UN recurso visual utilizado de manera consistente: números decorativos sobredimensionados, barra de acento diagonal, superposición de puntos, malla de degradado en la portada, líneas de regla, sangría de forma geométrica. Elegir uno. Usarlo. |
| Sistema de fondo | ¿Cómo varían los fondos entre páginas? Portada e introducciones de capítulo = las más distintivas. Páginas de contenido más tranquilas pero NO completamente blancas. Cierre CTA = oscuro o inversión completa de acento. Sin 3 o más páginas consecutivas con fondo idéntico. |
| Estilo de movimiento | ¿Qué hacen las animaciones .reveal? Elegir uno y mantenerse consistente: translateY(16px) → 0, scale(0.97) → 1, translateX(-12px) → 0. Escalonar retardos con 0.1s de diferencia. |
| Detalle inolvidable | ¿Cuál es la ÚNICA cosa que un lector recordará del diseño? Nombrarlo antes de escribir cualquier CSS. |
Si no se puede derivar una dirección sólida solo del preset de estilo, pregúntate: ¿qué produciría una agencia de diseño de primer nivel para esta audiencia y tema específicos? Luego ejecútalo.
Límites de densidad del texto del cuerpo:
- columna de texto 1 col: 180–250 palabras máximo por página
- columna de texto 2 col: 280–380 palabras máximo (140–190 por columna)
- barra lateral de texto: 140–180 palabras principales + ≤70 palabras en la barra lateral
- introducción de capítulo: 40–60 palabras (solo adelanto)
- cita destacada: 30–45 palabras
- cuadrícula de estadísticas: 3–6 métricas, etiquetas mínimas
Paso 4: Estructura de la página
Leer references/page-library.md antes de planificar.
Generar una lista numerada con etiquetas [tipo-de-diseño] por página. Ejemplo para 6 páginas:
Página 1: [portada] — título, subtítulo, marca
Página 2: [toc] — 3 títulos de capítulo + números de página
Página 3: [introducción-de-capítulo] — Apertura del Capítulo 1
Página 4: [columna-de-texto] — Cuerpo del Capítulo 1 (1 columna)
Página 5: [cuadrícula-de-estadísticas] — 4 métricas clave
Página 6: [cierre-cta] — CTA de reserva de demo + contacto
Confirmar con el usuario antes del Paso 5.
Paso 5: Borrador de contenido
Escribir el texto de cada página en texto plano (sin HTML). Reglas por tipo de diseño:
- portada: título (≤10 palabras, lidera con valor o tensión, no una etiqueta genérica) + subtítulo (≤15 palabras) + etiqueta de categoría opcional + nombre de la marca
- toc: títulos de capítulo (≤6 palabras cada uno) + números de sección correspondientes. Lista numerada limpia.
- introducción-de-capítulo: número de capítulo (decorativo) + título del capítulo (≤8 palabras) + párrafo de adelanto (2–3 oraciones)
- columna-de-texto (1 col): encabezado de sección + párrafos del cuerpo. Máximo 250 palabras. Prosa > viñetas. Cada oración se gana su lugar.
- columna-de-texto (2 col): mismas reglas, 140–190 palabras por columna. Usar para comparaciones, pares de pasos, perspectivas duales.
- barra-lateral-de-texto: cuerpo principal (140–180 palabras) + tipo de llamada en la barra lateral (consejo / advertencia / estadística / cita / lista de verificación) con máximo 70 palabras
- cita-destacada: cita extraída ≤40 palabras + atribución (nombre, cargo, empresa o fuente)
- cuadrícula-de-estadísticas: 3–6 métricas — número + etiqueta + contexto de 1 línea. Opcional: oración narrativa de 1 línea debajo.
- conclusiones-clave: 5–8 conclusiones, ≤15 palabras cada una, en imperativo cuando sea posible
- cierre-cta: titular ≤5 palabras (imperativo) + cuerpo de 1 oración + acción de CTA + correo electrónico + URL (ambos obligatorios)
Palabras prohibidas (sin excepciones): "poderoso", "sin fisuras", "revolucionario", "apalancar", "innovador", "innovador", "transformador", "de vanguardia", "robusto", "desbloquear", "escalable" (como relleno).
Paso 6: Generación de HTML
Leer TODO esto antes de generar. No parafrasear ni resumir — leer los archivos reales.
Referencias de esta habilidad:
references/design-system.mdreferences/page-library.mdreferences/style-presets.md
Recurso empaquetado (ruta exacta — incluir el contenido completo textual en el bloque <style>):
assets/viewport-base.css— empaquetado dentro del directorio de esta habilidad
Resolución de ruta: Todas las rutas con prefijo
assets/oscripts/son relativas al directorio que contiene este archivo SKILL.md. En Claude Code después de la instalación:~/.claude/skills/graphic-ebook/assets/y~/.claude/skills/graphic-ebook/scripts/. Resolver la ruta real desde la ubicación del archivo SKILL.md antes de leer.
Reglas de generación
-
Único HTML autocontenido. Todo el CSS en línea. Solo el
<link>de la CDN de la fuente como dependencia externa. -
Incluir el contenido completo textual de
viewport-base.cssdentro del bloque<style>. -
Agregar anulaciones de retrato A4 DESPUÉS de viewport-base.css (en el mismo bloque
<style>):
/* Anulaciones 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;
}
/* CRÍTICO: evita que Chromium elimine los fondos en PDF */
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
-
Cada página =
<section class="slide">— obligatorio para la detección de páginas de export-pdf.sh. -
Comentar cada página:
/* === PÁGINA N: TIPO-DE-DISEÑO === */ -
Texto del cuerpo:
clamp(0.875rem, 1.25vw, 1.05rem),line-height: 1.75,max-width: min(65ch, 100%)en todos los<p>en diseños de columna de texto y barra lateral de texto. -
Números de estadísticas: hero a
clamp(3rem, 8vw, 5.5rem)en color de acento. Soporte aclamp(2.5rem, 7vw, 5rem)en color secundario. -
No hay imágenes disponibles → solo elementos visuales generados por CSS (degradados, formas geométricas, patrones de puntos, elementos abstractos). Nunca mostrar recuadros de marcador de posición.
-
Sin JS de SlidePresentation. Incluir solo un IntersectionObserver mínimo para animaciones
.reveal. -
Decoración de número de capítulo (en páginas de introducción de capítulo):
.chapter-number-deco {
font-family: var(--font-display);
font-size: clamp(6rem, 18vw, 14rem);
font-weight: var(--display-weight);
opacity: 0.06;
position: absolute;
top: -0.1em;
right: var(--page-padding);
line-height: 1;
color: var(--accent);
pointer-events: none;
user-select: none;
}
- Recuadros de llamada tipificados (para páginas de barra lateral de texto):
.callout { border-left: 3px solid; border-radius: var(--card-radius, 4px); padding: clamp(0.75rem, 1.5%, 1.1rem); }
.callout-label { font-size: clamp(0.58rem, 0.8vw, 0.68rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5em; }
.callout--tip { background: rgba(22, 163, 74, 0.07); border-color: #16A34A; }
.callout--tip .callout-label { color: #16A34A; }
.callout--warning { background: rgba(217, 119, 6, 0.07); border-color: #D97706; }
.callout--warning .callout-label { color: #D97706; }
.callout--stat { background: rgba(var(--accent-rgb, 100,100,100), 0.07); border-color: var(--accent); }
.callout--stat .callout-label { color: var(--accent); }
.callout--quote { background: var(--bg-elevated); border-color: var(--divider); font-style: italic; }
.callout--quote .callout-label { color: var(--text-muted); }
.callout--checklist { background: rgba(8, 145, 178, 0.07); border-color: #0891B2; }
.callout--checklist .callout-label { color: #0891B2; }
- Pie de página (en cada página excepto la portada):
.page-footer {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: clamp(0.5rem, 1%, 0.625rem) var(--page-padding);
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--divider);
font-family: var(--font-body);
font-size: clamp(0.55rem, 0.75vw, 0.65rem);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
}
HTML: <div class="page-footer"><span>[Nombre de la marca]</span><span>[N]</span></div>
-
Diseño de 2 columnas:
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4%, 3.5rem);conborder-right: 1px solid var(--divider)en la columna izquierda. -
Diseño de barra lateral de texto:
display: grid; grid-template-columns: 2fr 1fr; gap: clamp(1.5rem, 3%, 2.5rem);
Reglas de calidad de diseño (de los principios de diseño frontend)
Estas rigen la ambición estética de cada ebook generado. Se aplican después de las reglas estructurales, antes de la salida.
Tipografía:
- La fuente de visualización debe tener carácter en tamaños grandes. Plus Jakarta Sans 800, Instrument Serif, Syne, Lora, Fraunces — todas aceptables. Inter en peso de visualización = señal inmediata de contenido genérico.
- Nunca usar el mismo peso de fuente para dos niveles jerárquicos consecutivos. Título de portada (800) → encabezado de capítulo (700) → encabezado de sección (700, tamaño más pequeño) → cuerpo (400/500).
- Combinar una fuente de visualización con una fuente de cuerpo refinada cuando el preset lo admita (ej., Instrument Serif + Inter, Syne + IBM Plex Sans). Las pilas de una sola fuente deben usar contraste de peso en su lugar.
Fondos y atmósfera:
- La portada DEBE tener un pseudo-elemento
::beforeo::afterdecorativo significativo que cree profundidad visual: letra fantasma conopacity: 0.04–0.06, sangría de forma geométrica, superposición de degradado radial, o patrón de puntos/líneas. - Las páginas de introducción de capítulo DEBEN contrastar visualmente con las páginas de contenido adyacentes — usar
var(--bg-alt)o un tratamiento alternativo apropiado al estilo. - Las páginas de contenido (columna de texto, barra lateral de texto) pueden ser blancas/neutras, pero no consecutivas bloques extensos de blanco puro. Variar con fondos alternos o patrones sutiles cuando sea posible.
[...truncado para la traducción]