KaigorodovTuskul/editorial-design-agent-skill

Diseño Editorial — dirección de arte original, no relleno de plantillas

Objetivo no negociable

Crear publicaciones cohesivas, distintivas y específicas para el contenido, con la ambición editorial de un estudio serio de dirección de arte. El modelo es el director de arte. No reduzcas el diseño a seleccionar uno de nueve tipos de diapositivas predefinidos. La ruta original build <json> es un artefacto de regresión heredado, no la estrategia de generación recomendada.

Debes realmente crear y revisar HTML/CSS/SVG original, renderizarlo en Chromium, observar el resultado, corregir problemas y verificar los artefactos. Una skill, un archivo de marca o un script de linting no pueden sustituir la dirección visual original ni la inspección de las páginas renderizadas. Hallmark es necesario para un lanzamiento profesional, pero no es un motor de publicación ni un reemplazo de esta skill.

0. Inicio de un nuevo proyecto interactivo — paleta y tipografía

Al inicio de un nuevo proyecto interactivo, pregunta una vez por la paleta y la fuente, con una respuesta fácil: Usar valores predeterminados. La paleta predeterminada es Crystal Cobalt Enterprise — una dirección de diseño basada en referencias con cobalto/negro azulado, luz cian/violeta contenida, superficies analíticas pálidas, arte de vidrio prismático original y cuatro modos de dirección de arte. La tipografía predeterminada es Geologica Roman (CRSV=0). Alternativas: Azure Iris Unified, Arctic Editorial, Deep Navy, Monochrome; y Geist Sans, IBM Plex Sans, Onest, Manrope. Las restricciones de marca tienen prioridad. Si la conversación ya ha establecido una paleta/fuente, hereda esas sin preguntar de nuevo. Las compilaciones headless usan los valores predeterminados y los persisten con una marca de elección inferida.

Usa instrucciones de producción reales, no solo adjetivos descriptivos: para Crystal Cobalt, lee references/styles/crystal-cobalt-enterprise.md, references/quality/crystal-cobalt-hallmark.md y seeds/crystal-cobalt/README.md. Todo el arte reutilizable original está en seeds/crystal-cobalt/; nunca incrustes el logotipo de AEB, el sol o su anillo de vidrio original específico. Usa la referencia adjunta como inspiración estilística y crea nuevas formas, composiciones y marcas originales.

Usa node bin/editorial.mjs seeds crystal-cobalt-enterprise para listar los activos, o node bin/editorial.mjs seed <directorio-del-proyecto> --theme crystal-cobalt-enterprise para copiar los activos semilla en assets/seeds/crystal-cobalt/ del proyecto. El pipeline de compilación también incluye automáticamente los activos semilla del tema seleccionado. No aplastes la diapositiva en un raster: mantén los campos de texto HTML editables sobre la capa inferior estática para el PPTX híbrido.

Las fuentes no están incluidas. Antes de publicar, confirma la instalación exacta de la fuente coincidente en el navegador y el renderizador de PPTX; las sustituciones bloquean el lanzamiento a menos que se aprueben con evidencia de paridad regenerada.

1. El contenido es la entrada de diseño

Lee las fuentes reales (PDF de referencia del usuario, copia aprobada, modelo financiero XLSX, tablas, fotografías y kit de marca). No inventes cifras fácticas, logotipos o hechos corporativos. Para modelos financieros en hojas de cálculo, ten en cuenta que openpyxl no recalcula las fórmulas. Etiqueta los valores de demostración como no verificados. El diseño puede reestructurar y ajustar la prosa, pero no debe cambiar el significado numérico, las unidades, las fechas, las advertencias, los denominadores, los signos o la procedencia de la fuente.

Antes de codificar, mapea internamente el ritmo narrativo del documento, por ejemplo: tesis de apertura → línea base negativa → pivote estratégico → impulsores → escenarios → puente → decisión. Crea un concepto visual distinto para la publicación: jerarquía tipográfica, lógica de espaciado, marcas de gráficos, ritmo tranquilo/ruidoso y uno o dos motivos característicos basados en el contenido. No tomes prestada literalmente la paleta o la cuadrícula de la referencia de origen a menos que se solicite. Reutiliza su ambición editorial, no sus píxeles.

2. Reglas de dirección de arte (libertad con disciplina)

• Escribe diseños originales como HTML. Se permiten cuadrículas libres, posicionamiento CSS, formas CSS y SVG diseñado por el autor. No hay una anatomía fija de diapositiva ni una familia de plantillas impuesta por página.
• La composición sigue la afirmación. Una tesis de una línea puede ocupar media página. Un número puede ser monumental. Un puente financiero debe mantener el significado cuantitativo. No metas todo en tarjetas KPI, uses cuadrículas idénticas página tras página o llenes el espacio en blanco indiscriminadamente.
• Un mundo visual, diferentes composiciones. Construye una alternancia ritmada de asimétrico/tranquilo/denso, claro/oscuro, dirigido por texto/dirigido por datos. Evita siluetas idénticas consecutivas.
• Se requiere ambición creativa, no solo se tolera. Usa asimetría impactante, tipografía expresiva, composiciones SVG personalizadas, formas en capas, degradados controlados, ilustraciones técnicas, iconografía y efectos de textura sutiles cuando sea útil. Haz que la riqueza visual sea intencionada y específica del contenido; no conviertas cada diapositiva en el mismo héroe de degradado ondulado. Si una página se siente genérica a pesar de ser mecánicamente válida, rediseña su concepto visual en lugar de agregar decoración aleatoria. Las imágenes, si están presentes, deben ser genuinas/con licencia o claramente artísticas.
• Evita precisión falsa, afirmaciones financieras inventadas, brillo púrpura-índigo predeterminado, iconos omnipresentes, matrices de tarjetas decorativas, cirílico roto, gráficos de datos con información insuficiente y avisos legales diminutos. Se permiten degradados intencionales de marca nombrada: Crystal Cobalt usa explícitamente cobalto, cian y ocasionalmente iluminación violeta/magenta; el conflicto ascendente con Hallmark 2a debe documentarse en la auditoría en bruto. Prefiere luz direccional estructurada y profundidad localizada sobre manchas borrosas uniformes. Permite ilustraciones y marcas SVG donde aclaren la historia. Los iconos requieren significado semántico y consistencia visual.
• Antes de codificar, redacta una partitura visual de una página (visual-plan.json o notas): un elemento focal y una silueta únicos por diapositiva; asigna los modos de superficie apropiados del tema seleccionado (Crystal Cobalt: atmospheric-dark, analytical-light, data-night, mixed-strategic; Azure Iris: lighter, refined, darker); describe su motivo característico y su rol de datos. En una presentación de siete diapositivas, apunta a al menos cinco siluetas visiblemente diferentes; no fuerces todas las páginas a una sola composición. Selecciona del vocabulario del tema seleccionado en references/styles/ o inventa un tratamiento original más fuerte.
• Compuertas de variación: las páginas adyacentes no deben compartir la misma geometría primaria, tratamiento héroe, motivo gráfico y densidad; dentro de una presentación, incluye páginas excepcionalmente sobrias y páginas fuertemente gráficas. Reserva al menos una composición que rompa la disposición esperada de titulares a la izquierda/gráfico a la derecha. Usa un motivo distintivo en un máximo de 2 a 3 páginas antes de variar su expresión. Estas son reglas de revisión de diseño, no afirmaciones numéricas sin fundamento.
• Política de iconos: usa iconos SVG en línea intencionados y estilísticamente consistentes o pictogramas delgados diseñados por el autor. Usa cero iconos para una página puramente de texto o datos, de 1 a 3 cuando mejoren la jerarquía, y nunca un icono sobre cada KPI meramente como decoración. No uses emojis como sustitutos de iconos.
• Efectos y degradados: permite múltiples familias estéticas en toda la publicación: por ejemplo, seda/cinta iridiscente, linework de mapas de contorno, campos de luz recortados, superposiciones técnicas translúcidas, enmascaramiento tipográfico, paneles suavemente graduados, texturas de cuadrícula fina y marcas SVG vinculadas a datos. Evita repetir el mismo efecto en cada página. Mantén el SVG decorativo fuera de los elementos de texto editables para que el PPTX Híbrido lo conserve como parte del fondo estático exacto.
• Construye un proyecto fuente con project.json, slides/01-*.html ... independientes y assets/*.css. Cada diapositiva fuente es un documento HTML completo y fuera de línea que contiene exactamente una `<section class=