graphic-ebook

O que graphic-ebook faz?

Cria ebooks B2B SaaS profissionalmente projetados — lead magnets, guias fechados, ativos de nutrição, white papers. HTML + CSS → PDF pronto para impressão. 3–10 páginas.

Regras Críticas

Antes de qualquer etapa, estas regras são absolutas:

1. Cada página DEVE caber no canvas A4 (1200×1697px). Nenhum conteúdo com overflow.
2. Todos os tamanhos de fonte escaláveis usam clamp(). px fixo apenas para bordas/elementos estruturais.
3. HTML único e autocontido. Todo CSS inline. <link> de CDN de fonte é a única dependência externa.
4. Nunca despeje HTML no chat. Salve em arquivo, mostre apenas um resumo.
5. O texto do corpo é primário. line-height ≥ 1.75 em todas as páginas de coluna de texto e barra lateral de texto. max-width ≤ 65ch para corpo de coluna única.
6. Nada de porcaria genérica de IA: sem Inter como fonte de exibição, sem gradiente roxo para azul em branco, sem fechamento "Obrigado".
7. Ritmo visual: nunca coloque 2+ páginas de coluna de texto consecutivas. Intercale com introdução de capítulo, citação-destaque ou grade de estatísticas.
8. * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } — CSS global obrigatório. O Chromium remove todas as cores de fundo em PDF sem isso.
9. Toda página, exceto a capa, deve ter um rodapé de página: número da página + nome da marca. Posição absoluta na parte inferior de cada .slide.
10. Antes de gerar HTML, comprometa-se com uma direção de design: um tom, um elemento de assinatura, um sistema de fundo. Genérico = falha. Cada ebook deve ser claramente projetado para seu público e assunto — não um modelo.

---

Passo 1: Coleta de Briefing

Quatro campos obrigatórios. Se todos os quatro estiverem presentes no prompt do usuário: pule para o Passo 2.

Se algum estiver faltando, pergunte exatamente:

"Para criar seu ebook, preciso de quatro coisas:

1. Tópico — sobre o que é o ebook? (seja específico: '5 maneiras de reduzir o CAC', não 'dicas de marketing')
2. Público — quem lê? (cargo, porte da empresa, ponto problemático: 'Gerentes de Sucesso do Cliente em empresas SaaS de 50–500 pessoas que lutam contra o churn')
3. Ação desejada — o que o leitor deve fazer depois? (agendar uma demo, baixar um modelo, compartilhar com a equipe)
4. Conteúdo — você tem conteúdo existente ou devo redigir a partir do tópico?"

Pare e aguarde. Não leia arquivos de referência. Não gere HTML ou esboço.

---

Passo 2: Coleta Completa

Faça todas as 9 perguntas em uma mensagem, agrupadas. As predefinições se aplicam se ignoradas.

Conteúdo

1. Número de páginas — 3–5 (guia rápido / checklist) / 6–8 (guia padrão) / 9–10 (mergulho profundo) (padrão: 6)
2. Principais conclusões — 3–5 coisas que o leitor deve saber ou fazer após a leitura (informa a estrutura do capítulo)
3. Nome da marca — nome da empresa ou produto para capa e rodapé (ou "pular")
4. Logotipo da marca — URL ou "nenhum"

Design 5. Estilo — clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / soft-cloud / "mostrar opções" (padrão: clean-slate) 6. Número de capítulos — quantas seções principais? (padrão: derivado do número de páginas)

Saída 7. Detalhes do CTA — agendamento de demo / inscrição em newsletter / download de modelo / outro (padrão: "agendar uma demo") 8. Informações de contato — e-mail + URL para página de CTA de fechamento (ou "adicionarei depois") 9. Slug — slug do nome do arquivo (ex.: "reduce-churn-guide-2025"; derivado do tópico se ignorado)

Predefinições:

Pergunta	Padrão
Número de páginas	6
Principais conclusões	derivar do tópico
Nome da marca	nenhum
Logotipo da marca	nenhum
Estilo	clean-slate
Número de capítulos	derivado do número de páginas
Detalhes do CTA	agendar uma demo
Informações de contato	placeholder (sinalizado no checklist)
Slug	kebab-case do tópico

Se estilo = "mostrar opções": Gere 3 pré-visualizações HTML de página única (apenas capa) salvas em .claude-design/previews/style-a.html, style-b.html, style-c.html. Abra cada uma automaticamente. Peça ao usuário para escolher antes do Passo 3.

---

Passo 3: Arquitetura Interna

Derive internamente. Nunca mostre isso ao usuário.

Mapeamento capítulo → página:

Páginas	Estrutura típica
3	capa + [1 página de conteúdo] + cta-fechamento
4	capa + [1 introdução de capítulo + 1 coluna de texto] + cta-fechamento
5	capa + sumário + [1 introdução de capítulo + 1 coluna de texto] + cta-fechamento
6	capa + sumário + [2 introduções de capítulo + 1 coluna de texto] + cta-fechamento
8	capa + sumário + [3 introduções de capítulo + 2 páginas de conteúdo] + cta-fechamento
10	capa + sumário + [4 introduções de capítulo + 3 páginas de conteúdo] + principais-conclusões + cta-fechamento

Regra do sumário: Inclua para ebooks ≥ 6 páginas. Para ebooks de 3–5 páginas, use uma lista com marcadores "O que tem dentro" na página de capa ou pule completamente.

Arquitetura de CTA de três pontos (para ebooks ≥ 6 páginas):

1. CTA de introdução (após página 2) — menção inline sutil de 1 linha: "explore nossa [ferramenta] em [url]"
2. CTA no meio do ebook (após uma grade de estatísticas ou introdução de capítulo) — pequena caixa .callout--stat ou .callout--tip com CTA de 1 linha
3. CTA de fechamento (página final) — página inteira, ação de conversão primária

Verificação de ritmo visual: Se 2+ páginas text-column consecutivas aparecerem no plano → insira quote-callout ou stat-grid entre elas antes de prosseguir.

Direção de design (derive da predefinição de estilo + público — nunca mostrado ao usuário):

Decisão	Derivar de
Tom	Que registro emocional este público espera? (autoritário, editorial, enérgico, calmo, acolhedor…)
Elemento de assinatura	UM dispositivo visual usado consistentemente: numerais decorativos grandes, barra de acento diagonal, sobreposição de grade de pontos, malha gradiente na capa, linhas de régua, sangria de forma geométrica. Escolha um. Use-o.
Sistema de fundo	Como os fundos variam entre as páginas? Capa e introduções de capítulo = mais distintos. Páginas de conteúdo mais silenciosas, mas NÃO todas brancas. CTA de fechamento = inversão escura ou de acento total. Nenhuma página idêntica de fundo por 3+ consecutivas.
Estilo de movimento	O que as animações .reveal fazem? Escolha uma e mantenha-se consistente: translateY(16px) → 0, scale(0.97) → 1, translateX(-12px) → 0. Atrasos escalonados a 0,1s de intervalo.
Detalhe inesquecível	Qual é a ÚNICA coisa que um leitor lembrará sobre o design? Nomeie-a antes de escrever qualquer CSS.

Se nenhuma direção forte for derivável apenas da predefinição de estilo, pergunte-se: o que uma agência de design de alto nível produziria para este público e tópico específicos? Então execute isso.

Limites de densidade de texto do corpo:

• coluna de texto 1-col: 180–250 palavras no máximo por página
• coluna de texto 2-col: 280–380 palavras no máximo (140–190 por coluna)
• barra lateral de texto: 140–180 palavras principal + ≤70 palavras na barra lateral
• introdução de capítulo: 40–60 palavras (apenas teaser)
• citação-destaque: 30–45 palavras
• grade de estatísticas: 3–6 métricas, rótulos mínimos

---

Passo 4: Estrutura da Página

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

Produza uma lista numerada com rótulos de [layout-type] por página. Exemplo para 6 páginas:

Página 1: [cover] — título, subtítulo, marca
Página 2: [toc] — 3 títulos de capítulo + números de página
Página 3: [chapter-intro] — Abertura do Capítulo 1
Página 4: [text-column] — Corpo do Capítulo 1 (1 coluna)
Página 5: [stat-grid] — 4 métricas principais
Página 6: [closing-cta] — CTA de agendamento de demo + contato

Confirme com o usuário antes do Passo 5.

---

Passo 5: Rascunho de Conteúdo

Escreva o texto por página em texto simples (sem HTML). Regras por tipo de layout:

• cover: título (≤10 palavras, lidera com valor ou tensão — não um rótulo genérico) + subtítulo (≤15 palavras) + rótulo de categoria opcional + nome da marca
• toc: títulos de capítulo (≤6 palavras cada) + números de seção correspondentes. Lista numerada limpa.
• chapter-intro: número do capítulo (decorativo) + título do capítulo (≤8 palavras) + parágrafo teaser (2–3 frases)
• text-column (1-col): título da seção + parágrafos do corpo. Máx. 250 palavras. Prosa > marcadores. Toda frase merece seu lugar.
• text-column (2-col): mesmas regras, 140–190 palavras por coluna. Use para comparações, pares de etapas, perspectivas duais.
• text-sidebar: corpo principal (140–180 palavras) + tipo de destaque na barra lateral (dica / aviso / estatística / citação / checklist) com máx. 70 palavras
• quote-callout: citação de destaque ≤40 palavras + atribuição (nome, cargo, empresa ou fonte)
• stat-grid: 3–6 métricas — número + rótulo + contexto de 1 linha. Opcional: 1 frase narrativa abaixo.
• key-takeaways: 5–8 conclusões, ≤15 palavras cada, imperativo quando possível
• closing-cta: título ≤5 palavras (imperativo) + corpo de 1 frase + ação CTA + e-mail + URL (ambos obrigatórios)

Palavras proibidas (sem exceções): "powerful", "seamless", "game-changing", "leverage", "innovative", "revolutionary", "transform", "cutting-edge", "robust", "unlock", "scalable" (como preenchimento).

---

Passo 6: Geração de HTML

Leia TODOS estes antes de gerar. Não parafraseie ou resuma — leia os arquivos reais.

Referências desta skill:

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

Ativo agrupado (caminho exato — inclua conteúdo verbatim completo no bloco <style>):

• assets/viewport-base.css — agrupado dentro do diretório desta skill

Resolução de caminho: Todos os caminhos prefixados com assets/ ou scripts/ são relativos ao diretório que contém este arquivo SKILL.md. No Claude Code após a instalação: ~/.claude/skills/graphic-ebook/assets/ e ~/.claude/skills/graphic-ebook/scripts/. Resolva o caminho real a partir da localização do arquivo SKILL.md antes de ler.

Regras de Geração

1. HTML único e autocontido. Todo CSS inline. <link> de CDN de fonte é a única dependência externa.

2. Inclua o conteúdo completo verbatim de viewport-base.css dentro do bloco <style>.

3. Adicione substituições de retrato A4 APÓS viewport-base.css (no mesmo bloco <style>):

/* 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;
}
/* CRÍTICO: impede o Chromium de remover planos de fundo em PDF */
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

4. Cada página = <section class="slide"> — obrigatório para detecção de página de export-pdf.sh.

5. Comente cada página: /* === PAGE N: LAYOUT-TYPE === */

6. Texto do corpo: clamp(0.875rem, 1.25vw, 1.05rem), line-height: 1.75, max-width: min(65ch, 100%) em todos os <p> em layouts de coluna de texto e barra lateral de texto.

7. Números de estatísticas: hero em clamp(3rem, 8vw, 5.5rem) na cor de destaque. Suporte em clamp(2.5rem, 7vw, 5rem) na cor secundária.

8. Nenhuma imagem disponível → visuais gerados por CSS apenas (gradientes, formas geométricas, padrões de pontos, elementos abstratos). Nunca mostre caixas placeholder.

9. Sem SlidePresentation JS. Inclua apenas IntersectionObserver mínimo para animações .reveal.

10. Decoração de número de capítulo (em páginas chapter-intro):

.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;
}

11. Caixas de destaque tipadas (para páginas text-sidebar):

.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; }

12. Rodapé da página (em todas as páginas, exceto capa):

.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>[Nome da Marca]</span><span>[N]</span></div>

13. Layout de 2 colunas: display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4%, 3.5rem); com border-right: 1px solid var(--divider) na coluna esquerda.

14. Layout de barra lateral de texto: display: grid; grid-template-columns: 2fr 1fr; gap: clamp(1.5rem, 3%, 2.5rem);

Regras de Qualidade de Design (dos princípios de design frontend)

Estas regem a ambição estética de cada ebook gerado. Aplicadas após as regras estruturais, antes da saída.

Tipografia:

• A fonte de exibição deve ter caráter em tamanhos grandes. Plus Jakarta Sans 800, Instrument Serif, Syne, Lora, Fraunces — todas aceitáveis. Inter no peso de exibição = sinal imediato de porcaria.
• Nunca use o mesmo peso de fonte para dois níveis de hierarquia consecutivos. Título da capa (800) → título do capítulo (700) → título da seção (700, tamanho menor) → corpo (400/500).
• Combine uma fonte de exibição com uma fonte de corpo refinada quando a predefinição suportar (ex.: Instrument Serif + Inter, Syne + IBM Plex Sans). Pilhas de fonte única devem usar contraste de peso.

Fundos e atmosfera:

• A capa DEVE ter um pseudo-elemento ::before ou ::after decorativo significativo criando profundidade visual: letra fantasma em opacity: 0.04–0.06, sangria de forma geométrica, sobreposição de gradiente radial ou padrão de grade de pontos/linhas.
• Páginas de introdução de capítulo DEVEM contrastar visualmente com as páginas de conteúdo adjacentes — use var(--bg-alt) ou um tratamento alternativo adequado ao estilo.
• Páginas de conteúdo (coluna de texto, barra lateral de texto) podem ser brancas/neutras, mas

…

[truncado para tradução]