flyanx/xiaohongshu-card

Gerador de Cartões Xiaohongshu (xiaohongshu-card)

Transforma um artigo científico popular → um conjunto completo de cartões visuais Xiaohongshu (JPG múltiplas imagens), seguindo padrões validados na prática. Adequado para artigos de WeChat, Sohu, periódicos científicos e outros.

1. Especificações de Saída (Fixo)

Item	Padrão
Tamanho do cartão	1080 × 1440 (3:4, proporção recomendada pelo Xiaohongshu)
Formato de exportação	JPG quality 95, nomeado semanticamente (01-capa.jpg, 02-visao-geral.jpg…10-contracapa.jpg)
Entregável	Apenas JPG; HTML é apenas arquivo de trabalho interno (mantido no diretório do projeto para facilitar reedição e reexportação)
Tamanho da fonte para mobile	Corpo do texto 29-30px / Título grande 60-92px / Título de etapa 40px / Valor de parâmetro 46px / Nota da figura 20px (em largura 1080, ainda nítido quando reduzido no celular)

2. Estrutura de Páginas (Template Fixo + Adaptação ao Número de Etapas)

Capa → Visão Geral → Páginas de Etapas STEP (uma página por etapa, STEP 0N/Total de etapas) → Dicas → FAQ → Contracapa

• Capa: Composição centralizada apenas com texto (linha de etiqueta + subtítulo + título grande + subtítulo 2), espaçamento proposital
• Visão Geral: Três blocos de vantagens + princípio em uma frase + diretório de cinco etapas (número STEP + nome + resumo em uma frase)
• Página de Etapa: Identificador vermelho no topo "STEP 0N / 05" + título grande da etapa + bloco de conteúdo (lista de pontos/fluxo/cartão de parâmetros) + imagem original do artigo
• Página de Dicas: Avisos importantes em formato grande (um por linha ◆)
• Página FAQ: Cartões grandes de perguntas frequentes, cerca de 4 itens (se insuficiente, pode extrair de outros parágrafos do artigo, sem inventar)
• Contracapa: FIN → Obrigado pela leitura / Obrigado pelo apoio → Logotipo da marca → ＋ Seguir → "Marca · Mais conteúdo a caminho" (conteúdo lido da configuração da marca)
• Quando o número de etapas ≠ 5, adapta-se automaticamente (total de etapas segue); quando imagens/conteúdo estiverem apertados, quebrar em páginas (1-2 blocos de informação por página é mais confortável)

3. Estratégia de Imagens (Prioridade para Imagens Originais)

1. Prioridade para imagens originais: Extrair imagens do artigo original e verificar a posição de cada imagem no artigo, garantindo correspondência com o texto (se não corresponder, mover a página ou informar o usuário)
2. Descriptografia AES do Sohu: O atributo data-src das imagens do Sohu está criptografado com AES-ECB-PKCS7, chave www.sohu.com6666. Use scripts/decrypt-sohu.py para descriptografar e obter a URL real //qX.itc.cn/.... Ao baixar, inclua o Referer (URL da página do artigo) + User-Agent do navegador para evitar proteção anti-hotlinking
3. Se o artigo original realmente não tiver imagens: Só então permitir a geração de imagens ilustrativas por IA — fundo branco, esquema de cores único (pode ter estilo universal), e deve marcar ao usuário "Esta imagem foi gerada por IA"
4. Imagens em formato horizontal (por exemplo, 1080×289): Usar contêiner .fig com altura fixa + object-fit: contain; múltiplas imagens empilhadas verticalmente (.fig-col) / lado a lado (.fig-row)

4. Verificação de Qualidade (Obrigatória, Antes da Entrega)

Use scripts/verify.js (playwright) para verificação programática. Se não atender, ajuste iterativamente o tamanho da fonte/espaçamento/altura da imagem automaticamente:

• Taxa de preenchimento da página de conteúdo 80-100% (espaço vazio ≤ 20%, a página não pode estar muito vazia)
• Sem overflow (parte inferior do conteúdo mais profundo ≤ altura do cartão)
• Todas as imagens carregadas com sucesso (naturalWidth > 0)
• Páginas de capa e contracapa são propositalmente espaçadas, isentas da verificação de taxa de preenchimento

5. Sistema de Estilos (3 Integrados, Padrão: Manual Racional de Experimentos)

Estilo	Visual	Uso
A Manual Racional de Experimentos (padrão)	Fundo branco com texto preto + destaque vermelho #E63946, grade suíça, blocos numerados, identificador STEP	Conteúdo profissional, instruções de experimentos
B Espaçamento Premium	Fundo bege claro + dourado quente #D4A574, peso de fonte extra leve, muito espaçamento	Cenários de alto padrão e minimalistas
C Divulgação Científica Suave	Fundo bege #f6f2ea + verde natural #7a8a72, cartões com cantos arredondados	Contas de divulgação científica amigáveis

Adicionar novo estilo: basta adicionar uma classe de estilo no CSS do template (ex.: .X) e registrá-la na configuração STYLES.

6. Configuração de Marca

assets/brand-config.example.json define: nome da marca, caminho do logotipo, texto da contracapa, estilo padrão. Padrão interno: configuração Aiji Bio (logotipo: assets/logo-ige.png). Outras marcas podem copiar este arquivo e alterar os campos.

7. Linhas Vermelhas (Violação = Refazer)

• Remover informações limitadas/redundantes da plataforma: Fonte do conteúdo, CTAs de curtir/compartilhar, instruções "deslize para a esquerda", etc., não devem aparecer
• Não inventar conteúdo: Todas as informações vêm do artigo original; informações complementares (como FAQ) devem ser extraídas de outros parágrafos do artigo
• Imagens devem corresponder exatamente ao texto: Verificar a posição no artigo original; se não houver imagem no original, não colocar imagem (preencher com texto) ou marcar como gerada por IA
• Contra AI slop: Não usar emojis decorativos, não usar gradiente roxo, não usar cantos arredondados com borda colorida à esquerda, não desenhar imagens SVG falsas, não usar fontes padrão do sistema como fonte de exibição

8. Fluxo de Trabalho (9 Etapas)

1. Extrair artigo: WebFetch/curl para obter o texto completo (título, WeChat, data, corpo, imagens), salvar HTML original
2. Destilar essência: Organizar conforme a estrutura da página — conceito/princípio, etapas (com parâmetros), precauções, FAQ
3. Extrair imagens: Analisar imagens do artigo original (Sohu usa scripts/decrypt-sohu.py), baixar e registrar a posição de cada imagem no artigo
4. Definir estrutura da página: Capa/Visão Geral/Páginas STEP N/Dicas/FAQ/Contracapa, determinar o número de etapas
5. Gerar HTML: Copiar assets/card-template.html, preencher o conteúdo no array de dados PAGES do JS (ver comentários do template), colocar imagens no diretório imgs/ do projeto
6. Verificação iterativa: Abrir com Playwright → executar scripts/verify.js → ajustar tamanho da fonte/espaçamento/altura da imagem conforme resultado até 10/10 PASS
7. Exportar JPG: Modificar o array NAMES em scripts/export-jpg.js → executar exportação (1080×1440 quality 95)
8. Confirmação do usuário: Exibir todos os cartões → ajustar conforme feedback (texto/cores/logotipo/contracapa) → reexportar
9. Entrega: Listar os arquivos JPG + dicas de publicação (título/tags de referência)

9. Instruções de Uso do Template (card-template.html)

• Arquivo HTML único + vanilla JS orientado a dados: cada item do array PAGES é uma página, cada item do array blocks é um bloco de conteúdo
• Tipos de bloco: {t, p} bloco de texto / {t, lines:[['a)','texto'],...]} lista de fluxo / {params:[[valor,etiqueta],...]} cartão de parâmetros / {step:{t,d}} explicação de etapa / {img} {imgs, col} imagem / {faq} / {notes} / {dir} diretório de cinco etapas / {why} bloco de vantagens / {tip} dica / {recape} bloco de resumo rápido
• Três tipos de página: type:'cover' (capa), type:'step' (página de etapa, step: N), type:'content' (visão geral/dicas/FAQ), type:'end' (contracapa)

10. Dependências de Ambiente

• Node.js + playwright (no projeto: npm i playwright)
• Python3 + pycryptodome (apenas para descriptografia do Sohu)