Sketch Infographic
Creas una página que explica una fuente: un título, una cuadrícula de paneles y un pie de página con el nombre de la fuente. Cada panel presenta un punto con un pequeño diagrama y una o dos oraciones. Escribes la página como una especificación JSON; scripts/build.mjs organiza la cuadrícula, la dibuja con el renderizador propio de Excalidraw, la verifica y genera un PNG y un archivo .excalidraw editable.
El dibujo es la parte fácil. La página solo vale la pena publicarla si cada panel dice algo cierto sobre la fuente, en menos palabras de las que usó la fuente.
1. Lee la fuente y planifica la página
Léela toda. Luego escribe el plan en tu respuesta, antes de cualquier JSON:
- Título: el tema en dos a cinco palabras. Subtítulo: quién lo dijo y sobre qué, en una línea ("Un planificador de tránsito sobre por qué los autobuses superan a los nuevos ferrocarriles en ciudades pequeñas").
- Formato: retrato 3:4 (1500×2000) a menos que el usuario nombre otro formato, o su página de ejemplo tenga otra forma. Otros formatos están en references/spec.md.
- Seis o siete paneles, suficientes para llenar la página. Un formato 3:4 admite aproximadamente cuatro filas: tres filas de dos medios paneles y un panel de ancho completo. Cada panel tiene un encabezado que plantea el punto (no una etiqueta de tema), una idea de imagen y una conclusión de como máximo dos oraciones y unas 30 palabras. El panel de ancho completo contiene el ejemplo más rico.
- Pie de página: la fuente (autor, título, fecha) y cualquier advertencia que dé la fuente, como "notas de diseño y un prototipo, no un producto enviado".
Espera la aprobación del usuario sobre el plan cuando la fuente sea larga o el enfoque no esté claro; en caso contrario, continúa directamente.
Trabajar a partir de una página de ejemplo que el usuario comparte: enumera sus paneles primero y mantén cada uno en tu plan, a menos que el usuario pida menos. Igualar su apariencia pero omitir un panel es la forma más común de no estar a la altura.
Sé fiel a la fuente. Cada número, nombre y afirmación en la página debe estar en la fuente. Atribuye las opiniones ("el autor argumenta..."). Cuando añadas tu propia ilustración de un punto, indícalo en la página ("un ejemplo inventado de cómo podría suceder eso"). Omite lo que no puedas dibujar honestamente en lugar de inventar una cifra para ello.
2. Elige una imagen para cada panel
Usa un diagrama por panel, basado en los patrones de references/patterns.md: una cadena de pasos, antes y después, muchos en uno, un bucle de vuelta a la fuente, una comparación de opciones, un gráfico de barras, una línea de tiempo. Elige el patrón que coincida con la afirmación, no el que se vea más recargado. Un panel cuyo punto sea una lista puede ser tres cajas etiquetadas. El texto dentro de los dibujos son pocas palabras, nunca una oración.
El color conlleva significado, de la misma manera en toda la página: verde para bueno o el camino predeterminado, naranja para riesgo o lo que cambió, rojo para fallo, azul para la cosa sobre la que se actúa, púrpura para un agente o modelo, amarillo para la llamada de atención más importante en la página. El gris es neutro. Consulta references/spec.md para los nombres.
3. Escribe la especificación y construye
Guarda cada página en su propia carpeta, como page.json; pregunta dónde si el usuario no lo ha dicho. El formato y cada tipo de elemento están en references/spec.md; assets/example.json es una página completa. Luego ejecuta, desde la carpeta de esta habilidad:
node scripts/build.mjs <carpeta>/page.json
Imprime el ancho del área de dibujo de cada panel (dibuja dentro de él; la altura se ajusta) y escribe page.png y page.excalidraw junto a la especificación. Si falta el tiempo de ejecución, indica cómo instalarlo.
4. Verifica y luego corrige
- Corrige cada advertencia. El código de salida 3 significa que la página se construyó con advertencias: el contenido es más alto que la página (dice cuántos píxeles recortar), algo sobresale de su panel, se superpone con otra cosa, tiene una flecha atravesando su texto, tiene una flecha demasiado corta para leerse como tal, hizo que una caja creciera porque su etiqueta no cabía, o usa un carácter que Excalifont no tiene (flechas como →, marcas de verificación, emojis), que se renderiza en una fuente del sistema. Dibuja flechas y marcas como elementos en su lugar.
- Luego mira el PNG (abre el archivo de imagen) y revisa cada panel: ¿el ojo sigue las flechas en la dirección correcta?, ¿cada flecha y línea comienza y termina en algo?, ¿las puntas de flecha están libres entre sí?, ¿algún texto está apretado contra un borde?, ¿los paneles en una fila se ven equilibrados?, ¿el encabezado coincide con la imagen? ¿La página está llena o un panel está mayormente vacío? Corrige la especificación y construye de nuevo. Dos o tres rondas es normal.
- Con una página de ejemplo, compara las dos una al lado de la otra, panel por panel: mismos paneles, mismo tipo de dibujo, densidad similar. Di qué aún es diferente.
- Lee las palabras una vez más contra la fuente (paso 1), en la página tal como está dibujada.
5. Entrega
Entrega al usuario la ruta del PNG y del .excalidraw, y el resumen de una línea del plan. Indica que el archivo .excalidraw se abre en excalidraw.com o en la aplicación Excalidraw para ediciones manuales, y que después de las ediciones manuales, ese archivo, no page.json, es la página: volver a construir la sobrescribe.
Recrear la página publicada de otra persona está bien como estudio o prueba privada; no ofrezcas ninguna para publicar. Su diseño, redacción y marca son suyos.