Communitygithub.com

JP Magazine Poster

Habilidade do Codex para gerar cartões de mídia social no estilo editorial japonês moderno.

O que é JP Magazine Poster?

Esta habilidade do Codex é especializada em transformar tópicos, textos de origem ou conjuntos de imagens em pôsteres no estilo de revistas japonesas modernas. Ela é útil para designers, criadores de conteúdo ou equipes de marketing que desejam produzir rapidamente materiais visuais com uma estética editorial refinada. A habilidade suporta a geração de pôsteres em HTML e PNG, com foco em layouts limpos e tipografia precisa. O fluxo de trabalho inclui uma rodada única de esclarecimento para garantir que o usuário defina estilo, tema, número de pôsteres e seleção de templates. As imagens são priorizadas: primeiro as fornecidas pelo usuário, depois geração por modelos de bitmap disponíveis no sistema e, por último, desenho SVG como último recurso. O conteúdo é ajustado para cada zona dos templates (título, citação dourada, detalhes) com regras de pontuação específicas. A saída final inclui arquivos HTML, PNG e um manifesto JSON com informações de validação. A habilidade também impõe restrições de qualidade, como não referenciar arquivos SVG no HTML final e garantir que a renderização só comece após o formulário de esclarecimento ser respondido.

Funciona com~Claude Code✓Codex CLI~Cursor
npx skills add Buds-2025/jp-magazine-poster

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Pôster de Revista Japonesa

Fluxo de Trabalho

Use esta habilidade para transformar um tópico, texto de origem ou conjunto de imagens do usuário em arquivos de pôster no estilo de revista japonesa.

  1. Leia references/template-contract.md antes de selecionar templates ou preencher campos.
  2. Antes do trabalho de produção, faça exatamente uma rodada de esclarecimento no formato de formulário:
    • Resuma a solicitação atual do usuário em 1 a 3 frases curtas.
    • Pergunte sobre escolhas ausentes ou confirmáveis ​​em relação a estilo/tema, quantidade de pôsteres, fonte das imagens, seleção de template, tom do texto, diretório de saída e qualquer conteúdo obrigatório ou a evitar.
    • Prefira perguntas numeradas e compactas com opções concretas quando útil.
    • Pergunte apenas uma vez. Não repita o ciclo para obter mais esclarecimentos após o usuário responder.
    • Se o usuário ainda deixar lacunas, prossiga com padrões razoáveis ​​e registre essas suposições no especificação ou manifesto.
  3. Entenda o tema do usuário e a quantidade solicitada de saídas com base na solicitação original e na única resposta.
  4. Escolha templates:
    • Use os IDs de template explícitos do usuário quando fornecidos.
    • Use todos os 8 templates quando o usuário solicitar todos os estilos.
    • Caso contrário, escolha o menor número de templates que se ajustem à forma do conteúdo.
  5. Crie conteúdo conciso para cada zona:
    • title: sem pontuação final. Orações curtas podem usar vírgulas dentro do título.
    • goldenQuote: deve terminar com um ponto final em chinês ou inglês.
    • detail: pontuação normal e contexto factual da fonte.
    • Substitua aspas chinesas por colchetes angulares, a menos que o usuário exija explicitamente o texto original entre aspas.
    • Evite linhas de caractere único e linhas de caractere único mais pontuação.
  6. Escolha imagens por prioridade estrita:
    • Caminhos ou URLs de imagem fornecidos pelo usuário.
    • Chame um modelo ou ferramenta disponível no sistema para gerar imagens bitmap temáticas correspondentes e, em seguida, salve os arquivos raster selecionados no diretório de saída antes da renderização.
    • Desenhe arte SVG polida apenas depois que as imagens do usuário estiverem ausentes e os modelos/ferramentas de geração de imagem disponíveis estiverem indisponíveis, falharem ou não puderem retornar arquivos bitmap locais ao projeto. Registre esse motivo em assumptions ou manifest.
    • SVG pode ser usado apenas como fonte de desenho interna e deve ser rasterizado para PNG antes da renderização final em HTML.
  7. Escreva uma especificação JSON de entrada e execute:
node scripts/render_poster.js --spec input.json --out output/<run-name>
node scripts/validate_poster.js --html output/<run-name>/*.html

Se a validação falhar, encurte ou reescreva o texto, ajuste as quebras de linha explícitas, altere o foco da imagem e, em seguida, renderize e valide novamente.

Requisitos de Qualidade

  • Não comece a renderizar, gerar imagens ou ajustar o texto até que o formulário de coleta de uma rodada tenha sido perguntado e respondido, a menos que o usuário diga explicitamente para pular as perguntas.
  • Detalhes ausentes após a coleta de uma rodada devem ser preenchidos com padrões práticos em vez de mais perguntas.
  • O HTML final não deve referenciar arquivos .svg ou data:image/svg+xml.
  • A obtenção de imagens deve seguir a prioridade estrita: imagens fornecidas pelo usuário, depois geração de bitmap disponível no sistema e, por último, desenho SVG polido como último recurso.
  • Imagens geradas, desenhadas ou de fallback devem ser gravadas como arquivos PNG/JPEG/WebP no diretório de saída antes de serem colocadas nas zonas de imagem.
  • Não trate arte fallback de template ou rasterização SVG como equivalente à geração de bitmap por modelo/ferramenta. Se a geração por modelo/ferramenta for ignorada ou falhar, registre o motivo exato.
  • A exportação de pôster PNG padrão é em escala 2x para uma saída de revisão mais nítida.
  • As notas do cartão de objeto do Template 03 devem ser muito curtas, pois cada cartão tem uma altura de linha fixa de 216 px.
  • As zonas de imagem do Template 06 devem manter .jp-photo-zone { width: 100%; max-width: 100%; } para que a imagem esquerda não invada a coluna de texto direita.

Formato da Especificação

Entrada mínima:

{
  "theme": "white",
  "templates": ["vertical-02"],
  "sourceText": "Tópico ou texto de origem do usuário",
  "assumptions": ["Quaisquer padrões usados após a coleta de uma rodada."],
  "images": [
    {
      "slot": "single-photo-feature",
      "src": "D:/path/to/image.png",
      "fit": "cover",
      "focus": "center 50%"
    }
  ],
  "content": {
    "title": "Título do pôster",
    "goldenQuote": "Uma frase editorial clara.",
    "details": ["Detalhe um.", "Detalhe dois."]
  }
}

Notas:

  • theme aceita white, midnight, light ou dark.
  • templates aceita IDs de template como vertical-02, nomes de template como vertical-single-photo-headline ou all.
  • content.details pode ser uma matriz de strings ou objetos com heading, title e body.
  • images[].slot deve corresponder a um data-slot-id ou data-relation-id listado no contrato do template.

Saída

O script de renderização cria:

  • Um arquivo HTML por pôster.
  • Um arquivo PNG por pôster quando o Playwright está instalado e o Chromium está disponível.
  • manifest.json com template, tema, fonte da imagem, caminhos de arquivo de saída e status de validação/exportação.
  • generated-images/*.png quando imagens geradas, de fallback ou de fonte SVG são rasterizadas.

Mantenha o layout do template original intacto. Não altere tamanhos de fonte, alturas de linha, larguras, margens seguras, configurações de grade ou estrutura visual para forçar o conteúdo a caber. Ajuste o conteúdo em vez disso.

Habilidades Relacionadas