meadow-slides

Meadow slides

Deck con la apariencia de Meadow, construidos a partir de una pequeña especificación JSON mediante un script, de modo que cada diapositiva encaje en la misma cuadrícula, escala tipográfica y colores que los decks de ventas de Meadow. Tú escribes el contenido y eliges los diseños; el script hace el trabajo de píxeles y advierte cuando el texto no cabe.

scripts/meadow_deck.py   spec.json -> .pptx (+ --figma-json layout para Figma)
scripts/preview.py       .pptx -> PNG por diapositiva + hoja de contactos (LibreOffice o Keynote)
scripts/figma_render.js  dibuja una diapositiva del volcado de diseño mediante use_figma
scripts/install_fonts.sh instala Geist / Geist Mono / Syne para el usuario actual
references/layouts.md    cada diseño, sus campos y cuándo usarlo   <- léelo antes de escribir una especificación
references/design-system.md  tokens y reglas detrás de los diseños       <- léelo cuando te salgas del diseño
references/image-prompts.md  biblioteca de prompts para imágenes del deck           <- léelo cuando el deck necesite imágenes nuevas
references/figma.md      Receta de salida Figma y sus trampas            <- léelo solo si se desea Figma
examples/sample-deck.json      un deck de seis diapositivas que cubre los diseños principales (datos ficticios)
examples/skill-intro-deck.json el deck que presenta este skill (imágenes README)

Flujo de trabajo

1. Obtén el contenido primero. Pide (o extrae del briefing / deck antiguo / documento) el mensaje de cada diapositiva. Si el usuario te entrega un deck fuente para rediseñar, conserva su texto palabra por palabra: cambia solo lo que pidió cambiar y ofrece cortes o nuevos titulares como sugerencia aparte. La gente nota cuando su texto se reescribe en silencio.
2. Esquema. Una idea por diapositiva. Asigna cada diapositiva a un diseño de references/layouts.md (portada → diapositivas de contenido → contactos es el arco habitual). Muestra el esquema al usuario cuando el deck tenga más de ~6 diapositivas o el briefing sea vago; en caso contrario, ve directamente a construir.
3. Revisa los números. Los decks comerciales viven de presupuestos, CPM/CPV, vistas. Vuelve a calcular las cifras derivadas (CPM = presupuesto / vistas × 1000, totales, porcentajes) antes de la maquetación. Si no cuadran, maqueta igual lo que el usuario dio e indícale qué números discrepan y en cuánto. Un cliente hará la misma aritmética.
4. Escribe la especificación (deck.json), consulta el ejemplo y references/layouts.md. Las imágenes son nombres cortos empaquetados (wave-05, meadow-night-02, people-02-camera-blue) o rutas.
5. Construye: python3 scripts/meadow_deck.py deck.json -o deck.pptx. Trata cada WARN como un error: acorta el texto, divide la diapositiva o cambia de diseño, luego reconstruye. Las líneas WARN cubren texto desbordante, cirílico configurado en Syne (sin glifos cirílicos), más de una placa de acento en una diapositiva y la puerta de alineación, que se ejecuta en cada construcción:
   • texto no centrado ópticamente en una píldora, chip, botón o insignia (relleno de tinta izquierda/derecha y altura de mayúsculas arriba/abajo debe coincidir dentro de 1.5 px);
   • contenido que cruza los márgenes laterales de 96 px (las imágenes que se salen del borde de la diapositiva están bien);
   • bordes que casi se alinean, separados 1–4 px: ajústalos o sepáralos claramente;
   • espacios desiguales en una fila o pila de tarjetas del mismo tamaño. Cualquier elemento nuevo en forma de píldora pasa por Slide.pill(), que lo dimensiona y centra; el texto que sigue a otro texto en línea (un icono después de un número, una unidad, una insignia) se construye con flow=True para que se verifique su ajuste pero no se obligue a la cuadrícula.
6. Míralo. Lo más rápido y funciona en todas partes: añade --png preview/ a la construcción. Dibuja el mismo diseño con Pillow, midiendo el texto como lo hace Keynote. Para comprobar que el PPTX reconoce las fuentes en un Mac, qlmanage -t -s 1600 -o preview/ deck.pptx renderiza la diapositiva 1 a través del sistema (sin abrir ninguna aplicación). python3 scripts/preview.py deck.pptx usa LibreOffice, o Keynote como último recurso: el scripting de Keynote puede colgarse y dejar un diálogo en la pantalla del usuario, así que no lo reintentes en un bucle. Abre contact-sheet.png y las diapositivas individuales. Revisa la alineación, el hacinamiento, el contraste sobre fotos, las medias tarjetas vacías y las colisiones con el pie de página. Las representaciones de Office necesitan las fuentes instaladas (scripts/install_fonts.sh).
7. Entrega el .pptx. Menciona que los destinatarios necesitan las fuentes (assets/fonts, todas gratuitas bajo la OFL) o que deben usar la construcción --portable (ver más abajo).
8. Figma (opcional) cuando te lo pidan: sigue references/figma.md. No escribas en el archivo Figma de alguien a menos que te lo haya pedido.

Reglas que hacen que parezca Meadow

Estas son las reglas que la gente revisa primero. Los diseños ya las aplican, por lo que importan principalmente cuando escribes texto o modificas un diseño.

• Lienzo oscuro, una placa lima. Fondo #0E1013, tarjetas #1A1D21, filas interiores #23262B. Lima #D3FF31 marca la única cosa sobre la que trata la diapositiva (la oferta, el resultado, el llamado clave). Dos placas lima en una diapositiva aplanan la jerarquía. No pintes una tarjeta al azar de lima solo para tener un acento: una diapositiva puede no tener ninguno. El texto sobre lima es casi negro, nunca blanco.
• Fuentes. Un titular escrito en latín se compone en Syne, incluso dentro de un deck ruso (un nombre de producto como «Meadow Slides» en una portada). Un titular con algún cirílico es Geist, porque Syne no tiene cirílico. El script decide por titular (portada, sección, declaración, títulos de diapositiva y contactos), así que escribe el título en el idioma en que quieras que se componga. El cuerpo siempre es Geist, las etiquetas Geist Mono en mayúsculas, los números/KPI independientes en Syne (desde ~36 px).
• Cuadrícula. Márgenes de 96 px, encabezado (ceja mono + título de 64 px) en la parte superior, contenido entre y=264 e y=944, pie de página = logotipo + NN / NN. Espacios 24, radio de tarjeta 24, relleno 40.
• Dilo con superficies, no con trazos. Las tarjetas se separan por relleno, no por contornos. El único elemento contorneado es un chip de categoría (1 px blanco 18%).
• Sin nombres de competidores en el texto. Logotipos/testimonios de clientes solo si el usuario los proporcionó.
• Tipografía: el script une preposiciones/conjunciones cortas y guiones con NBSP para que las líneas no terminen en «в», «и», «—». Escribe números como 10 000+, $5 000, 1,5 млн en decks en ruso.
• Gráficos son barras oscuras sólidas sobre lima o lima sobre oscuro, línea base cero, alturas proporcionales a los datos. Un negro semitransparente sobre lima se vuelve turbio, así que no lo uses.

Imágenes

Empaquetadas: 6 ondas abstractas azul/lima (wave-01…06), 3 prados nocturnos (meadow-night-01…03), 4 tomas de personas de estilo de vida (people-…) y glifos de plataforma blancos (instagram, tiktok, youtube, vk, telegram, x, linkedin, twitch). Las ondas son adecuadas para portadas y separadores de secciones, los prados para contactos y diapositivas de cierre, las tomas de personas para contactos y diapositivas de imagen-texto.

Cuando el deck necesite algo nuevo (una portada temática como el piso de la fábrica de contenido, una escena para un caso), escribe prompts desde references/image-prompts.md: prefijo de estilo de casa + escena + nota de composición para el espacio que ocupa. Si hay una herramienta de generación de imágenes conectada (por ejemplo, el Magnific MCP images_generate), ofrécete a generar; de lo contrario, entrega los prompts y conecta los archivos devueltos a la especificación por ruta.

Variantes de salida

• --portable: asigna cada peso a Regular/Bold de la misma familia. Úsalo para la importación de Google Slides o para destinatarios que no pueden instalar fuentes. La jerarquía sobrevive, el matiz no.
• --figma-json layout.json: vuelca el diseño calculado para el renderizador de Figma.
• Notas del orador: añade "notes" a cualquier diapositiva. Van a deck-notes.md junto al PPTX, porque Keynote se niega a abrir un PPTX que tenga diapositivas de notas escritas por python-pptx. --embed-notes las coloca dentro, para decks que solo se abrirán en PowerPoint.
• PDF: añade --pdf deck.pdf (representación completa de 1920×1080 de cada diapositiva, texto no seleccionable). Úsalo cuando alguien pida un PDF para enviar o leer; no se necesita Keynote ni LibreOffice.

Cuando los diseños no encajan

Prefiere dividir el contenido en dos diapositivas antes que apretarlo. Si una diapositiva realmente necesita una nueva organización, añade una función layout_<name> a scripts/meadow_deck.py construida a partir de los mismos ayudantes (header, card, grid, bullets, kpi_tile, footer) y tokens, para que herede el sistema. Lee references/design-system.md antes de hacer eso.