Diseño de Presentaciones Contextualizadas
Este skill ofrece dos cosas:
- Referencia de plantillas: Muestras finalizadas en
styles/<rama>/exemplar/ysamples/. - Guía de diseño: Instrucciones en
guide/sobre «cómo organizar y qué formas usar».
Principio fundamental: El estilo sigue al contexto y al material, no está prefijado. Las muestras sirven para establecer un estándar de calidad y mostrar técnicas, no para copiarlas al pie de la letra. Cada nueva presentación debe recomponerse según su propio contenido. Copiar la disposición de las muestras o hacer que todas las presentaciones tengan el mismo aspecto es precisamente lo que este skill busca evitar: la «apariencia de IA».
Requisitos del Entorno
- macOS, Google Chrome,
uv. La renderización usa el Chrome del sistema; no es necesario descargar un navegador. - Las fuentes son las del sistema macOS y no se pueden empaquetar con el skill. Los pesos de las fuentes chinas deben especificarse con el nombre PostScript, por ejemplo,
STSongti-SC-Black,FZLTTHK--GBK1-0. Si solo se escribe el nombre de la familia másfont-weight, se recurrirá al peso regular.
Flujo de Trabajo
00 Juicio del Contexto
Lee primero el material del usuario. No preguntes nada que el material ya pueda responder. Luego, solo haz preguntas cuyas «respuestas cambien las decisiones de diseño». Haz un máximo de 3 a 4 preguntas por vez. Si hay una herramienta de preguntas, úsala.
| Pregunta | ¿Qué decide? |
|---|---|
| ¿En qué ocasión se usará? Por ejemplo, presentación de concurso, informe académico, evento escolar, informe de trabajo, otro | Qué rama de estilo elegir |
| ¿Se proyectará en vivo o se enviará como archivo para que lo vean solos? ¿Cuánto dura la presentación? | Densidad de información y número de páginas. Proyección en vivo: letras grandes, poco texto, aproximadamente 1 minuto por página. Archivo: la información puede ser más densa |
| ¿Qué quieres que el público recuerde o sienta? Por ejemplo, profesional y fiable, con ideas propias, cálido e interesante, apasionado | Qué tema dentro de la rama elegir |
| ¿Hay algún color, logotipo o plantilla obligatoria? Por ejemplo, escudo de la universidad, color del equipo, requisitos del evento | Variable de color principal |
Contexto → Rama y Tema
| Contexto | Rama | Cómo elegir el tema | Densidad |
|---|---|---|---|
| Challenges Cup, Internet+, concursos de emprendimiento, defensa de proyectos | roadshow-cn | Tema único; cuando el concurso es más comercial, tonos dorados brillantes y añade cian tecnológico | Lleno (70% o más) |
| Informe final de curso, reseña de libro, presentación de investigación en grupo | course-report | Humanidades y ciencias sociales: paper; Ciencias e ingeniería, diseño, datos: swiss | Se puede dejar espacio en blanco; el contraste de tamaño de letra debe ser grande |
| Reunión de clase, repaso de mitad/final de periodo, reuniones deportivas, clubes, graduación | school-event | Recuerdos, agradecimientos: handbook; Competiciones, motivación: pop | Se puede dejar espacio en blanco; cada página debe tener un «elemento tangible» |
| Necesita un diseño llamativo y estilo personal: portafolio, presentación personal para entrevistas de trabajo o posgrado, presentaciones de diseño, charlas personales | curve-minimal | Para ser contenido, racional, como un boceto de diseño, o para enviar archivo o imprimir: pen (fondo claro); Para más expresividad y personalidad, proyección en vivo: ribbon (fondo oscuro) | Muy poco, mucho espacio en blanco; solo un punto focal por página |
| Ninguna es adecuada | Crear un nuevo tema o rama (ver más abajo) | — | — |
Si no hay una rama adecuada, no fuerces la más parecida. Deriva un nuevo conjunto de tokens.css siguiendo el orden: «carácter → tipografía → lenguaje de formas → colores». Las variables obligatorias y las opcionales se indican al principio de styles/roadshow-cn/tokens.css. Primero, usa scripts/fontcheck.py para confirmar que Chrome está usando la fuente deseada.
El color principal debe tomarse del material del usuario en la medida de lo posible, por ejemplo, el color estándar de la universidad, el color del equipo o algún color relacionado con el tema.
01 Organización del Material
Enumera las fotos, cifras clave, citas textuales y archivos de certificados del material del usuario. La cantidad de fotos influye directamente en el diseño: si hay menos de 3 fotos, no hagas un mosaico de fotos. Por ahora, este paso se hace manualmente, sin scripts.
02 Esquema
Primero define los capítulos, luego asigna un rol a cada página: portada, página de capítulo, página de contenido, página de datos, página final. Los tipos de página típicos de cada rama se encuentran en styles/<rama>/style.md.
03 Elegir Formas por Página
Reconoce la relación de información de cada página (jerarquía, secuencia, comparación, orden, proporción, cifras clave, paralelismo, fotos de campo…) y luego busca en guide/shapes.md las formas candidatas correspondientes. Elige una según los criterios de selección y la rama actual. Si no puedes decir «por qué uso esta forma», es que la elección es incorrecta. La decoración se añade al final, eligiéndola por su función compositiva (sección 4 del mismo documento).
04 Renderización
- Escribe según la estructura de archivos de
exemplar/deck.htmlde la rama seleccionada, sin copiar su composición:- En
<head>, la primera línea debe ser el script del tema<script>{const t=new URLSearchParams(location.search).get('theme');if(t)document.documentElement.dataset.theme=t}</script>. Omitirlo hará que, incluso sirender.pypasa el nombre del tema, se renderice en silencio con el tema por defecto. - Luego, en orden: enlaza
tokens.css,lib/base.cssy elcomponents.cssde la rama.roadshow-cnes una rama de tema único y no incluyelib/base.css; sigue su propia plantilla. - Al final de la página, enlaza
lib/shapes.js. - Cada página debe ser un
<section class="slide">de tamaño 1920×1080.
- En
- En el
<style>de la página, escribe solo coordenadas y tamaños. Los colores se especifican convar(--c-*)o se leen en JS conShapes.T('rol'). - Los espacios para fotos usan
<div class="photo" data-label="…">. Cuando haya una foto real, coloca<img>dentro. - Comando de renderización:
uv run --with playwright python scripts/render.py <deck.html> <directorio_salida> [nombre_tema]
05 Verificación
render.pyverifica automáticamente: desbordamiento de cuadros de texto (solo en elementos con clase.fit), errores de JS, puntos suspensivos y variables de tema faltantes.- Revisa cada PNG de cada página. Las comprobaciones automáticas no detectan superposición de elementos, ocultaciones ni palabras huérfanas al final de línea. En la primera renderización de una página nueva, casi siempre hay estos problemas.
- Revisa con
guide/anti-patterns.md: tener solo tarjetas, degradados rosa-morado, usar emojis en lugar de ilustraciones; todo eso se considera un fallo. - Los títulos con caligrafía grande, escritura a mano o fuentes decorativas no deben llevar
.fit, o la verificación generará falsos positivos.
06 Entrega
Entrega al usuario los PNG y el PDF (ya generados por render.py) para que los revise. Actualmente no se admite la exportación a PPTX editable; para hacer cambios, modifica el HTML y vuelve a renderizar.
Índice de Archivos
| Ruta | Contenido | Cuándo leerlo |
|---|---|---|
guide/shapes.md | Relaciones de información → formas, con razón, variantes por escenario, forma de implementación, dependencias de variables | Fase 03, se usa en cada página |
guide/anti-patterns.md | Características típicas de las presentaciones hechas directamente por IA | Fase 05 |
styles/<rama>/style.md | Escenarios de uso de la rama, técnicas de diseño, tipos de página, criterios para elegir tema | Después de elegir la rama |
styles/<rama>/tokens.css | Variables de color, tipografía y tamaño; diferentes temas se sobrescriben con [data-theme] | Al cambiar el color principal o crear un nuevo tema |
styles/<rama>/components.css | Componentes HTML de la rama | Fase 04 |
styles/<rama>/exemplar/ | 4 páginas de muestra más capturas de pantalla de cada tema | Fase 04, para ver las técnicas |
styles/school-event/samples/banhui-full/ | 12 páginas de muestra completas de una reunión de clase (tema handbook, con buenas reseñas) | Al hacer una presentación completa, como referencia de ritmo |
lib/shapes.js | 19 generadores SVG (estructura, datos, decoración, dibujo a mano) | Fase 04 |
lib/base.css | Estilos de reset, lienzo, espacios para fotos | Fase 04 |
scripts/render.py | Renderización, verificación, exportación a PNG y PDF | Fases 04 y 05 |
scripts/pixeldiff.py | Comparación píxel a píxel, para verificación de regresión | Después de modificar lib/ |
scripts/fontcheck.py | Verifica qué fuentes está usando Chrome realmente | Al crear un nuevo tema o cambiar fuentes |
Pendientes
- Aún no hay scripts para las fases 01 a 03; se realizan manualmente siguiendo las instrucciones anteriores.
guide/organization.md(estructura de capítulos, roles de página, ritmo de la presentación completa) aún no está escrito.- No admite exportación a PPTX editable.
- Las fuentes no son portátiles entre máquinas: al cambiar a un entorno que no sea macOS, se deben usar fuentes web de código abierto que se puedan empaquetar.