KaigorodovTuskul/editorial-design-agent-skill

Design Editorial — direção de arte original, não preenchimento de template

Objetivo inegociável

Criar publicações coesas, distintas e específicas para o conteúdo, com a ambição editorial de um estúdio sério de direção de arte. O modelo é o diretor de arte. Não reduza o design à seleção de um dos nove tipos de slide predefinidos. O caminho original build <json> é uma regressão legada do fixture, não a estratégia de geração recomendada.

Você deve, de fato, criar e revisar HTML/CSS/SVG reais, renderizá-los no Chromium, observar a saída, corrigir problemas e verificar artefatos. Uma skill, arquivo de branding ou script de lint não podem substituir a direção visual original ou a inspeção das páginas renderizadas. Hallmark é necessário para lançamento profissional, mas não é um motor de publicação ou um substituto para esta skill.

0. Início de um novo projeto interativo — tema e tipografia

No início de um novo projeto interativo, pergunte uma vez sobre paleta e fonte, com uma resposta fácil: Usar padrões. A paleta padrão é Crystal Cobalt Enterprise — uma direção de design baseada em referências com cobalto/preto, ciano/violeta claro contido, superfícies analíticas pálidas, arte em vidro prismático original e quatro modos de direção de arte. A fonte padrão é Geologica Roman (CRSV=0). Alternativas: Azure Iris Unified, Arctic Editorial, Deep Navy, Monochrome; e Geist Sans, IBM Plex Sans, Onest, Manrope. Restrições de marca têm precedência. Se a conversa já estabeleceu uma paleta/fonte, herde-as sem perguntar novamente. Builds headless usam os padrões e os persistem com uma flag de escolha inferida.

Use instruções de produção reais, não apenas adjetivos descritivos: para Crystal Cobalt, leia references/styles/crystal-cobalt-enterprise.md, references/quality/crystal-cobalt-hallmark.md e seeds/crystal-cobalt/README.md. Toda a arte reutilizável original está em seeds/crystal-cobalt/; nunca incorpore o logotipo da AEB, o raio de sol ou seu anel de vidro original específico. Use a referência anexada como inspiração estilística e crie novas formas, composições e marcas originais.

Use node bin/editorial.mjs seeds crystal-cobalt-enterprise para listar assets, ou node bin/editorial.mjs seed <project-dir> --theme crystal-cobalt-enterprise para copiar assets de semente para o diretório assets/seeds/crystal-cobalt/ do projeto. O pipeline de build também inclui automaticamente os assets de semente do tema selecionado. Não achate o slide em um raster: mantenha campos de texto HTML editáveis acima da base estática para o PPTX híbrido.

As fontes não são incluídas. Antes de publicar, confirme a instalação exata da fonte correspondente no navegador e no renderizador PPTX; substituições bloqueiam o lançamento, a menos que sejam aprovadas com evidências de paridade regeneradas.

1. O conteúdo é a entrada do design

Leia as fontes reais (PDF de referência do usuário, texto aprovado, modelo financeiro XLSX, tabelas, fotografias e kit de marca). Não invente figuras factuais, logotipos ou fatos corporativos. Para modelos financeiros de planilha, observe que openpyxl não recalcula fórmulas. Rotule valores de demonstração como não verificados. O design pode reestruturar e apertar a prosa, mas não deve alterar o significado numérico, unidades, datas, ressalvas, denominadores, sinais ou proveniência da fonte.

Antes de codificar, mapeie internamente o ritmo narrativo do documento, por exemplo, tese de abertura → linha de base negativa → pivô estratégico → impulsionadores → cenários → ponte → decisão. Crie um conceito visual distinto para a publicação: hierarquia tipográfica, lógica de espaçamento, marcas de gráfico, ritmo calmo/intenso e um ou dois motivos de assinatura fundamentados no conteúdo. Não tome emprestada a paleta ou grade da fonte de referência literalmente, a menos que solicitado. Reutilize sua ambição editorial, não seus pixels.

2. Regras de direção de arte (liberdade com disciplina)

• Escreva layouts originais como HTML. Grades livres, posicionamento CSS, formas CSS e SVG projetados pelo autor são permitidos. Não há anatomia de slide fixa e nenhuma família de template imposta por página.
• A composição segue a afirmação. Uma tese de uma linha pode ocupar meia página. Um número pode ser monumental. Uma ponte financeira deve manter o significado quantitativo. Não coloque tudo em cartões KPI, use grades idênticas página após página ou preencha espaços em branco indiscriminadamente.
• Um mundo visual, composições diferentes. Construa uma alternância ritmada de assimétrico/calmo/denso, claro/escuro, guiado por texto/guiado por dados. Evite silhuetas idênticas consecutivas.
• Ambição criativa é necessária, não meramente tolerada. Use assimetria marcante, tipografia expressiva, composições SVG personalizadas, formas em camadas, gradientes controlados, ilustração técnica, iconografia e efeitos texturais sutis quando úteis. Torne a riqueza visual proposital e específica do conteúdo; não transforme todo slide no mesmo herói de gradiente ondulado. Se uma página parecer genérica apesar de ser mecanicamente válida, redesenhe seu conceito visual em vez de adicionar decoração aleatória. Imagens, se presentes, devem ser genuínas/licenciadas ou claramente artísticas.
• Evite precisão falsa, alegações financeiras inventadas, brilho padrão índigo-roxo, ícones onipresentes, matrizes de cartão decorativas, cirílico quebrado, gráficos de dados subpreenchidos e avisos minúsculos. Gradientes intencionais de marca nomeada são permitidos: Crystal Cobalt usa explicitamente iluminação cobalto, ciano e ocasional violeta/magenta; o conflito upstream Hallmark 2a deve ser documentado na auditoria bruta. Prefira luz direcional estruturada e profundidade localizada em vez de borrões uniformes e desfocados. Permita ilustrações e marcas SVG onde elas esclarecem a história. Ícones exigem significado semântico e consistência visual.
• Antes de codificar, crie um score visual de uma página (visual-plan.json ou notas): um elemento focal e silhueta únicos por slide; atribua os modos de superfície apropriados do tema selecionado (Crystal Cobalt: atmospheric-dark, analytical-light, data-night, mixed-strategic; Azure Iris: lighter, refined, darker); descreva seu motivo de assinatura e função de dados. Em um deck de sete slides, busque pelo menos cinco silhuetas visivelmente diferentes; não force todas as páginas em uma composição. Selecione do vocabulário do tema selecionado em references/styles/ ou invente um tratamento original mais forte.
• Gates de variação: páginas adjacentes não devem compartilhar a mesma geometria primária, tratamento de herói, motivo gráfico e densidade; dentro de um deck, inclua páginas excepcionalmente contidas e fortemente gráficas. Reserve pelo menos uma composição que quebre o arranjo esperado de título à esquerda/gráfico à direita. Use um motivo distinto em no máximo 2-3 páginas antes de variar sua expressão. Estas são regras de revisão de design, não alegações numéricas infundadas.
• Política de ícones: use ícones SVG inline propositais e estilisticamente combinados ou pictogramas finos projetados pelo autor. Use zero ícones para uma página puramente textual ou baseada em dados, 1-3 quando melhorarem a hierarquia, e nunca um ícone acima de cada KPI meramente para decoração. Não use emoji como substituto de ícone.
• Efeitos e gradientes: permita múltiplas famílias estéticas na publicação: por exemplo, seda/fita iridescente, trabalho de linha de mapa de contorno, campos de luz recortados, sobreposições técnicas translúcidas, mascaramento tipográfico, painéis suavemente graduados, texturas de grade fina e marcas SVG vinculadas a dados. Evite repetir o mesmo efeito em todas as páginas. Mantenha o SVG decorativo fora dos elementos de texto editáveis para que o PPTX Híbrido o preserve como parte do fundo estático exato.
• Construa um projeto fonte com project.json, slides/01-*.html ... independentes e assets/*.css. Cada slide fonte é um documento HTML completo offline contendo exatamente um `<section class=