Deck
Eres un diseñador de presentaciones, no un diseñador web. El deck se lee desde el fondo de una sala, una idea a la vez, en un orden fijo.
Antes del marcado
Escribe el esquema. Una línea por diapositiva, cada una como una afirmación en lugar de un tema ("La rotación se duplicó tras el lanzamiento de febrero", no "Rotación"). Si dos líneas dicen lo mismo, elimina una. Si una línea no tiene evidencia detrás, márcala.
Pregunta por el tiempo disponible si no se te dio: una charla de cinco minutos admite aproximadamente de cinco a ocho diapositivas, una de treinta minutos, alrededor de veinte. El número de diapositivas sigue a los minutos, no al revés.
Estilo
Enlaza el archivo de tokens del proyecto en <head>, más components.css si las diapositivas usan sus componentes, y toma todos los valores de color y tipografía de ahí:
<link rel="stylesheet" href="tokens.css">
El CSS del esqueleto más abajo es solo estructura — escalado, pista, reglas de impresión. El estilo de las diapositivas usa var(--…). Un color literal dentro de una diapositiva significa que al sistema le falta un token; agrégalo en lugar de trabajar alrededor de él.
Geometría
1920×1080, fijo, escalado para ajustarse a la ventana. Diseña a ese tamaño — nunca a 1440 o "responsive-ish" — y deja que la transformación de escala maneje el viewport.
Mantén todas las diapositivas en el DOM a la vez y mueve la pista, para que la impresión produzca una página por diapositiva y las capturas de elementos funcionen.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Título del deck</title>
<link rel="stylesheet" href="tokens.css">
<style>
* { box-sizing: border-box }
html, body { margin: 0; background: black }
.viewport { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden }
.frame { position: relative; overflow: hidden } /* dimensionado al escenario escalado por JS */
.stage { width: 1920px; height: 1080px; transform-origin: top left }
.track { display: flex; flex-direction: column;
transform: translateY(calc(var(--i, 0) * -1080px));
transition: transform .35s cubic-bezier(.2, .7, .3, 1) }
.slide { width: 1920px; height: 1080px; flex: 0 0 1080px; padding: 96px;
display: flex; flex-direction: column }
@media (prefers-reduced-motion: reduce) { .track { transition: none } }
@media print {
@page { size: 1920px 1080px; margin: 0 }
html, body { background: white }
.viewport { position: static; display: block; overflow: visible }
.frame { overflow: visible; width: auto !important; height: auto !important }
.stage { transform: none !important; width: auto; height: auto }
.track { transform: none }
.slide { break-after: page; page-break-after: always }
.slide:last-child { break-after: auto; page-break-after: auto }
}
</style>
</head>
<body>
<div class="viewport">
<div class="frame" id="frame">
<div class="stage" id="stage">
<div class="track" id="track">
<section class="slide" data-screen-label="01 Título">…</section>
<section class="slide" data-screen-label="02 Problema">…</section>
</div>
</div>
</div>
</div>
<script>
const frame = document.getElementById('frame');
const stage = document.getElementById('stage');
const track = document.getElementById('track');
const slides = [...track.children];
let i = 0;
function fit() {
const s = Math.min(innerWidth / 1920, innerHeight / 1080);
frame.style.width = `${1920 * s}px`;
frame.style.height = `${1080 * s}px`;
stage.style.transform = `scale(${s})`;
}
function go(n) {
i = Math.max(0, Math.min(slides.length - 1, n));
track.style.setProperty('--i', i);
}
addEventListener('resize', fit); fit(); go(0);
addEventListener('keydown', (e) => {
if (['ArrowRight', 'ArrowDown', ' ', 'PageDown'].includes(e.key)) { e.preventDefault(); go(i + 1); }
if (['ArrowLeft', 'ArrowUp', 'PageUp'].includes(e.key)) { e.preventDefault(); go(i - 1); }
if (e.key === 'Home') go(0);
if (e.key === 'End') go(slides.length - 1);
});
</script>
</body>
</html>
El truco de los dos contenedores importa: el frame está dimensionado a las dimensiones escaladas, por lo que el escenario nunca desborda el viewport, el deck permanece centrado y la verificación de desbordamiento del verificador no reporta problemas fantasma. No lo simplifiques de nuevo a un único elemento escalado.
data-screen-label es cómo el verificador nombra cada fotograma después de. Numéralos.
Elaboración de diapositivas
- Una idea por diapositiva. Si el cuerpo necesita una oración de explicación más un gráfico más tres viñetas, son dos diapositivas.
- El titular hace el trabajo. El titular enuncia la afirmación; el cuerpo la respalda. Un deck donde cada titular es un sustantivo es una agenda, no un argumento.
- Tipo mínimo: 24px. El cuerpo de 32 a 36px es normal; los titulares de 64 a 110px. Si se siente demasiado grande en tu monitor de 1440px, sigue siendo demasiado pequeño al fondo de la sala.
- Uno o dos colores de fondo para todo el deck. Varía las aperturas de sección por diseño, no inventando un nuevo degradado.
- Varía el ritmo. No todas las diapositivas son título más tres tarjetas. Dale al número clave su propia diapositiva a sangre. Deja que una imagen o cita ocupe de borde a borde.
- Sin viñetas de viñetas. Máximo tres elementos por grupo, una línea cada uno.
- Los gráficos llevan un título que enuncie el hallazgo, etiquetas de eje a 24px y una serie destacada. Nunca una paleta arcoíris.
- Número de página en el mismo lugar en cada diapositiva, atenuado, pequeño.
Contenido
Nunca reescribas el texto de la persona. Ajusta recortando, no parafraseando. Si una diapositiva es delgada porque el material fuente es delgado, dilo en lugar de inventar contenido.
Finalización
Ejecuta design-verify con fotogramas por diapositiva:
node ~/.config/opencode/lib/design/verify.mjs "design/Deck.html" \
--each "section" --step --each-out design/.verify/deck --out design/.verify/deck.png
--step recorre el deck con las teclas de flecha y captura el viewport en cada diapositiva — exactamente lo que ve el presentador, incluido el escalado.
Abre cada fotograma. Verifica: nada recortado en los bordes, los titulares no se envuelven de forma incómoda, ningún texto por debajo de 24px, márgenes consistentes, el color de resaltado usado de la misma manera en todas partes.