Imágenes de Presentación
Las imágenes de presentación se crean como páginas HTML en formato 16:9. Cada página mide 1920×1080 píxeles y, tras aplicar el estilo seleccionado, un navegador sin cabeza la renderiza como PNG de 3840×2160. Estas imágenes se insertan en propuestas, informes y documentos de proyecto.
CRÍTICO — Antes de crear cualquier página, DEBES leer las siguientes especificaciones con la herramienta Read:
kirklin-slides-copy.md: normas tipográficas, aplicables a todos los estilos.kirklin-slides-layouts.md: contenido y reglas de diseño de los 27 formatos.kirklin-slides-components.md: estructura de página y nombres de clases de componentes.- Especificaciones del estilo elegido: colores, tamaños de fuente y dimensiones de cada formato. La ubicación del archivo se encuentra en la lista de estilos.
- Antes de crear, renderizar, verificar, renumerar, exportar, previsualizar un estilo o capturar una publicación, lee obligatoriamente
kirklin-slides-workflow.md. - Antes de añadir un nuevo estilo, lee obligatoriamente
kirklin-slides-new-style.md.
En adelante, <directorio de la skill> hace referencia al directorio donde se encuentra este archivo.
Estilos
El estilo determina los colores, fuentes, tamaños de letra y elementos decorativos de las imágenes. Todos los estilos comparten el mismo conjunto de páginas de ejemplo, nombres de clases de componentes y normas tipográficas. Actualmente se ofrece el siguiente estilo:
| Estilo | Nombre en inglés | Casos de uso | Especificaciones |
|---|---|---|---|
| Estilo presentación oscura | launch-dark | Proyectos, presentaciones de propuestas, proyecciones explicativas | kirklin-slides-style-launch-dark.md |
Las páginas de ejemplo se encuentran en assets/pages/. Los archivos de estilo de cada estilo están en assets/styles/<nombre en inglés>/style.css. Ejecuta node <directorio de la skill>/scripts/preview-style.ts <nombre en inglés> resumen.png para generar una imagen de resumen de todas las páginas de ejemplo de un estilo.
Casos de uso
- Crear imágenes para documentos como propuestas, informes y materiales de proyecto.
- Modificar o complementar imágenes existentes.
- Elaborar páginas individuales como portadas, horarios o presentaciones del equipo.
- Exportar todas las imágenes en el orden del documento y generar una imagen de resumen.
- Capturar publicaciones de redes sociales e insertarlas en las imágenes.
- Añadir nuevos estilos basados en las imágenes proporcionadas por el usuario, por ejemplo un estilo claro.
Decisiones rápidas
- Cuando el proyecto ya tenga un archivo
slides/style.css, se usará ese estilo. El comentario en la primera línea del archivo indica el nombre en inglés del estilo. Las nuevas páginas se colocarán en el mismo directoriopages/. - Si el usuario especifica un estilo, se usará ese.
- Si el proyecto no tiene
style.cssy el usuario no especifica un estilo: si solo hay un estilo, se usa directamente; si hay varios, se recomienda uno según el contenido y el contexto, y el usuario confirmará tras ver la imagen de resumen. - Si el usuario proporciona un conjunto nuevo de imágenes y pide que se usen en adelante, se añadirá un nuevo estilo siguiendo
kirklin-slides-new-style.md, y los estilos existentes se mantendrán sin cambios. - Primero se determina el título de cada página, luego se elige el formato según el contenido principal. La siguiente tabla muestra la correspondencia entre contenidos comunes y formatos. La descripción completa está en
kirklin-slides-layouts.md.
| Contenido | Formato |
|---|---|
| Un número clave | Número grande |
| Varios números | Bloques de números |
| Varias conclusiones paralelas | Puntos clave |
| Varias características o capacidades | Lista de iconos |
| Disyuntiva entre dos enfoques | Comparación |
| Elementos agrupados en dos dimensiones | Cuadrantes |
| Comparación de varios elementos en varios aspectos | Tabla |
| Comparación de magnitudes | Barras horizontales |
| Valores estadísticos por período | Gráfico de columnas |
| Evolución de un indicador en el tiempo | Gráfico de líneas |
| Composición de un total | Gráfico de anillo |
| Fases que se reducen progresivamente | Embudo |
| Hitos | Línea de tiempo |
| Planificación por fases | Roadmap |
| Tareas semanales | Diagrama de Gantt |
| Dos actividades simultáneas | Doble vía |
| Pasos secuenciales | Flujo |
| Una cita textual | Cita |
| Una imagen con explicación | Imagen + texto |
| Publicación externa | Captura de pantalla |
| Miembros y roles | Equipo |
| Socios | Muro de logotipos |
| Un fragmento de código | Código |
Límites fundamentales
- Todas las imágenes tienen un lienzo de 1920×1080, y el resultado renderizado es 3840×2160.
- El texto se sitúa dentro del área definida por el estilo, cuyos márgenes se definen mediante cuatro variables en
style.css. - La página solo contiene estructura, contenido y porcentajes calculados a partir de los datos. Los colores, tamaños de fuente y demás estilos los determina el estilo; el significado de los colores se define en las especificaciones del estilo.
- Cada página expresa un solo tema; si el contenido es extenso, se divide en varias páginas.
- Los números, nombres de personas y fechas provienen de los materiales del usuario, o se calculan directamente a partir de ellos (por ejemplo, totales, fechas de inicio y fin, valores máximos). Los cálculos se indican en el pie de página. Los números que no aparecen en los materiales ni pueden calcularse no se incluyen en la imagen, ni se realizan estimaciones.
- El texto de marcador de posición de las páginas de ejemplo se reemplaza completamente por el contenido del usuario; las partes no proporcionadas se eliminan por completo.
- Los gráficos comparables utilizan la misma escala, y se indica en el pie de página.
- Los títulos son oraciones completas que terminan con un punto. Se añade un espacio entre caracteres chinos y números o letras en inglés. Los rangos numéricos se escriben con «a».
- El número de secuencia de las imágenes en el documento coincide con su orden de aparición; al insertar una página nueva, se renumeran.
- Los scripts están escritos en TypeScript; los scripts auxiliares del proyecto también usan TypeScript.
Ejemplos
# MAL: el título es un tema, no hay espacio entre números y caracteres chinos, el rango usa una tilde
Introducción al proceso de aprobación
Cada módulo necesita 2~3 personas
# BIEN: el título es una conclusión y termina con un punto
El nuevo proceso reduce la espera de aprobación en dos días.
Cada módulo necesita de 2 a 3 personas
# MAL: dos gráficos de barras usan escalas diferentes, y la opción elegida usa un color que indica gravedad
# BIEN: dos gráficos de barras usan la misma escala y se indica en el pie de página; la opción elegida usa el color que en las especificaciones del estilo indica selección
Lista de verificación
- Después de modificar cada página, se ha vuelto a renderizar y se ha inspeccionado el PNG con la herramienta Read.
- El script de verificación no informa problemas; no queda texto de marcador de posición de las páginas de ejemplo.
- Todos los números, nombres de personas y fechas se encuentran en los materiales del usuario o pueden calcularse a partir de ellos.
- Los pies de foto de las imágenes del documento coinciden con los títulos, y los números de secuencia coinciden con el orden de aparición.
- Cuando el usuario solicita la exportación, el script de exportación se ejecuta sin errores y se ha revisado la imagen de resumen.
- Tras modificar los scripts, las páginas de ejemplo o los estilos de esta skill, se ejecuta
pnpm --dir <directorio de la skill> testy todas las pruebas pasan.
Fuera del alcance de esta skill
- Archivos .pptx y presentaciones en línea
- Carteles, tarjetas para redes sociales y diseño web
- Redacción del cuerpo del documento
Referencias
| Archivo | Descripción |
|---|---|
kirklin-slides-copy.md | Normas tipográficas |
kirklin-slides-layouts.md | Catálogo de formatos |
kirklin-slides-components.md | Estructura de página y componentes |
kirklin-slides-workflow.md | Flujo de trabajo y uso de scripts |
kirklin-slides-new-style.md | Añadir un nuevo estilo |
kirklin-slides-style-launch-dark.md | Estilo presentación oscura |
assets/pages/ | Páginas de ejemplo de los 27 formatos |
assets/styles/ | Estilos de cada estilo |
scripts/use-style.ts | Configurar el estilo para un proyecto |
scripts/add-page.ts | Copiar una página de ejemplo según el formato |
scripts/render.ts | Renderizar páginas |
scripts/check-pages.ts | Verificar texto y diseño |
scripts/export-slides.ts | Exportar todas las imágenes del documento y la imagen de resumen |
scripts/preview-style.ts | Generar una imagen de resumen de ejemplo de un estilo |
scripts/post-shot.ts | Capturar publicaciones de redes sociales |