Documento
Un documento se lee secuencialmente y se imprime en papel. Ambos hechos limitan la maquetación: una sola columna de texto, saltos de página reales y nada que dependa de la interacción con el ratón.
Decidir la paginación primero
- Flujo continuo (predeterminado) — un flujo de texto continuo; el motor de impresión del navegador lo divide entre páginas. Adecuado para informes, memorandos, cartas, ensayos o cualquier documento cuya longitud no controles.
- Páginas fijas — bloques explícitos
<section class="page">, uno por hoja. Adecuado cuando el número de páginas forma parte del diseño: un currículum de una página, un folleto a doble cara, un certificado, un póster.
Si la persona pidió "dos páginas", se refiere a fijas. Si pidió "un informe", se refiere a flujo continuo. Cuando no esté claro, pregunta — construir el tipo incorrecto desperdicia todo el documento.
Geometría
Enlaza el archivo del token en <head>, además de components.css si el documento usa sus componentes, y utiliza sus variables para color, tipo y espacio. Las reglas siguientes son solo de geometría del papel:
@page { size: A4; margin: 0; } /* o: size: letter; */
body { margin: 0; background: white; }
.page { width: 210mm; min-height: 297mm; padding: 24mm 22mm; box-sizing: border-box; }
.page + .page { break-before: page; }
@media screen {
body { background: gainsboro; padding: 32px 0; }
.page { margin: 0 auto 24px; box-shadow: 0 2px 24px color-mix(in srgb, black 12%, transparent); }
}
Para documentos de flujo continuo, elimina la clase .page fija y establece @page { margin: 22mm } con una columna de max-width: 66ch. Tamaño de papel: A4 a menos que la persona sea claramente estadounidense, en cuyo caso Carta. Si indicaron un tamaño, usa el suyo.
Tipografía
- Cuerpo 11–12pt, interlineado 1.5–1.6. Nunca por debajo de 10.5pt para cualquier texto que deba leerse.
- Medida 60–75 caracteres. Más ancho que eso y el ojo pierde la línea.
- Una familia de texto para el cuerpo, opcionalmente una segunda para los encabezados. Mismo emparejamiento que el sistema de diseño, si existe.
- Encabezados dimensionados según una escala, con el encabezado de nivel superior notablemente más grande — 28–36pt — no 14pt en negrita.
- Énfasis mediante peso y espacio, no solo color. Un documento que se imprima en escala de grises debe seguir siendo legible.
Estructura
- Elementos semánticos reales:
h1–h3,p,ul,table,figure,blockquote. No divs estilizados. - Números de página mediante contadores
@pagesi el documento supera las dos páginas:@page { @bottom-center { content: counter(page); } } - Tablas: alinear números a la derecha, texto a la izquierda, reglas finas en lugar de bordes completos, encabezado repetido en saltos con
thead { display: table-header-group }. - Evita
break-inside: avoiden cualquier elemento más alto que un tercio de página. - Las figuras llevan un pie de foto. Sin pie de foto, no hay figura.
Contenido
Conserva las palabras de la persona. Puedes cortar y reordenar cuando te lo pidan; no puedes parafrasear. Si una sección está vacía porque no la han escrito, deja un espacio claramente marcado en lugar de inventar texto.
Sin fotografías de stock, ni imágenes generadas que sean solo decorativas. Cuando el documento necesite una imagen real, genérala con las herramientas FLUX si están disponibles; si no, usa un cuadro de marcador de posición con una nota en fuente monoespaciada indicando qué debe ir allí.
Finalización
Ejecuta design-verify al ancho de impresión y revisa la captura de pantalla:
node ~/.config/opencode/lib/design/verify.mjs "design/Report.html" \
--width 900 --height 1200 --full --out design/.verify/report.png
Verifica que: no haya texto cortado en los bordes de la página, un encabezado huérfano al final de una página, tablas mal divididas o cualquier desbordamiento horizontal — que en impresión significa contenido perdido en el borde derecho.
A continuación, imprime a PDF tú mismo una vez (Cmd-P, Guardar como PDF) para confirmar el número de páginas y que nada se desplace al tamaño real del papel.