Dibujos que explican

Crea una skill llamada "dibujos-que-explican" con estos archivos, con el contenido exacto que va después de cada encabezado ===.
- En Claude Code: en la carpeta ~/.claude/skills/dibujos-que-explican/
- En Codex: en la carpeta ~/.codex/skills/dibujos-que-explican/
Son solo archivos de texto con instrucciones; no ejecutes nada. Cuando termines, dime qué archivos creaste.

=== SKILL.md ===
---
name: dibujos-que-explican
description: Crea dibujos a mano, en formato 16:9, que explican una idea de un texto en español, con anotaciones escritas a mano en español y un personaje fijo (Xiaohei, el personaje de Ian). Úsala cuando el usuario pida un dibujo, una ilustración, "explicar con un dibujo", una imagen para su post o artículo, imágenes para un blog, Notion, newsletter o carrusel, un shot list de ilustraciones, ideas de qué dibujar en un texto, o cuando quiera quitar un título o corregir una palabra de un dibujo ya hecho. Estilo por defecto: fondo blanco puro, línea negra a mano, pocas anotaciones en rojo, naranja y azul, limpio pero con una metáfora rara que funciona.
---

# Dibujos que explican

Adaptación al español de **Ian Xiaohei Illustrations**, de Ian (MIT). Ver `NOTICE.md`.

## Qué hace

Diseña y genera ilustraciones horizontales 16:9 para acompañar un texto en español (artículo, post, newsletter, guía). La meta no es una ilustración comercial, ni una infografía de presentación, ni un dibujo tierno: es tomar el juicio clave, el proceso, la estructura, el estado o la metáfora del texto y convertirlo en un dibujo a mano limpio, un poco absurdo, creativo, que se entiende sin ser un manual de instrucciones.

El personaje visual por defecto es **Xiaohei (el personaje de Ian)**: negro y sólido, ojos de punto blanco, patitas finas, cara inexpresiva, haciendo en serio algo absurdo pero que tiene sentido. Xiaohei siempre participa en la acción central del dibujo; nunca está al lado como decoración.

## Modo explicar (por defecto cuando preguntan "¿qué es...?" o "explícame...")

Probado en español el 29 oct 2026 (v0.4): el estilo de Ian más dos anclas de claridad. Cuando el pedido es explicar UN concepto (y no ilustrar un artículo entero):

1. Escribe la definición en una frase que entienda cualquiera ("GitHub es un lugar para guardar código, colaborar y volver a versiones anteriores").
2. Elige un ejemplo concreto y cotidiano de un negocio pequeño (la web de una tienda, una reunión con Ana).
3. Convierte el ejemplo en UNA sola escena con una metáfora física un poco absurda y un objeto poco tecnológico. Nada de filas de pasos numerados ni viñetas: eso lo vuelve presentación.
4. Xiaohei aparece una vez (dos como máximo) y hace la acción principal.
5. De 3 a 5 anotaciones sueltas alrededor, de 1 a 4 palabras, cada una con una flecha a mano que apunta al objeto que explica. Pueden nombrar el ejemplo ("cambio de Ana").
6. Las dos anclas: arriba un título corto y discreto con la pregunta ("¿Qué es GitHub?"); abajo la definición completa (máximo 16 palabras), en negro.
7. Línea fina y limpia, sin sombreado ni rayado, mucho blanco.

En este modo el título y la definición están permitidos; no se agrega ningún otro texto. Usa la plantilla "Explicar un concepto" de `references/plantilla-prompt.md`.

## Lee estas referencias

Léelas según lo que pida la tarea, sin cargarlas todas de una vez:

- `references/estilo.md`: el ADN del estilo, colores, texto y prohibiciones.
- `references/personaje.md`: cómo es Xiaohei, su carácter, sus acciones y lo que no debe ser.
- `references/composicion.md`: tipos de estructura, cómo inventar una metáfora nueva y la regla de no copiar.
- `references/plantilla-prompt.md`: la plantilla del prompt para cada imagen y los prompts de edición.
- `references/checklist.md`: revisión después de generar y cómo iterar.

## Sobre la generación de imágenes

Usa la herramienta de generación de imágenes disponible (por ejemplo `image_gen` en Codex, o un MCP de imágenes conectado).

**Nota honesta para Claude Code:** Claude Code no trae un generador de imágenes incorporado. Si no hay una herramienta o MCP de generación de imágenes conectado, esta skill entrega el shot list más un prompt listo para copiar por cada imagen, para correrlo en ChatGPT o en cualquier herramienta de imágenes. Dilo así al usuario, sin fingir que generaste algo.

## Flujo de trabajo

### 1. Digerir el texto

Primero lee lo que te dio el usuario: el texto, un link, una página de Notion, un archivo Markdown o el contenido de una captura. Extrae:

- Cuál es la idea central.
- Qué párrafos cargan un giro en la forma de pensar.
- Qué partes se explican mejor con un dibujo.
- Qué partes funcionan solo con texto y no necesitan dibujo.

No reparta dibujos de forma pareja. Prioriza los "anclas de comprensión": un juicio central, dos puntos de quiebre, un ciclo de entrada y salida, una bifurcación, un antes y después, un contenido que se reutiliza de varias formas, el camino que sigue un cliente, los errores comunes, un cambio de estado de una persona.

### 2. Primero la estrategia de dibujos

Si el usuario solo pregunta "qué dibujos usarías" o "dónde van dibujos", entrega primero el shot list. Para cada imagen indica:

- Después de qué párrafo va.
- El tema del dibujo.
- La idea central.
- El tipo de estructura.
- Qué hace Xiaohei en el dibujo.
- Elementos sugeridos.
- Las anotaciones en español sugeridas (3 a 5, de 1 a 3 palabras cada una).

Por defecto, de 4 a 8 imágenes. Si el texto es corto, de 1 a 3. Aun en un texto largo, no pases de 9. Con lo justo basta; el texto no es un álbum de fotos.

### 3. Generar una por una

Si el usuario pide claramente "genera", "hazlo", "crea los dibujos" o "haz las imágenes", no te detengas a pedir confirmación: genera cada imagen por separado con la herramienta de imágenes disponible. Nunca juntes varias imágenes en una sola.

Cada imagen explica una sola estructura central. El prompt siempre incluye:

- Ilustración horizontal 16:9 para un texto en español.
- Fondo blanco puro.
- Dibujo a mano en línea negra.
- Pocas anotaciones escritas a mano en español, en rojo, naranja o azul.
- Mucho espacio en blanco.
- Xiaohei como el que hace la acción central.
- Prohibido: estilo presentación, ilustración comercial, dibujo infantil o tierno, arquitecturas complejas, título en la esquina superior izquierda.
- Las anotaciones escritas exactamente como se indican, con tildes y ñ.

No copies dibujos anteriores. La regla de `references/composicion.md` vale siempre: cada vez inventa desde el texto actual una metáfora rara pero que tenga sentido, salvo que el usuario pida expresamente repetir una composición.

Si estás en Claude Code sin herramienta de imágenes: entrega el prompt completo de cada imagen en su propio bloque de código, numerado, listo para copiar.

### 4. Revisar e iterar

Después de generar, revisa con `references/checklist.md`. Si aparece alguno de estos problemas, vuelve a generar o edita solo esa parte:

- Xiaohei solo decora.
- El dibujo está demasiado lleno.
- Parece diagrama de flujo o presentación.
- Hay demasiado texto o palabras mal escritas (letras cambiadas, tildes faltantes o inventadas, ñ convertida en n).
- Aparece un título arriba a la izquierda ("Errores comunes", "Flujo de trabajo", "Arquitectura").
- El estilo quedó tierno, infantil o rígido.
- El fondo no es blanco limpio.

Si falla una sola palabra, pide corregir solo esa palabra (ver los prompts de edición en `references/plantilla-prompt.md`) antes de regenerar todo.

### 5. Guardar y entregar

Si el usuario trabaja dentro de un proyecto o carpeta, copia las imágenes finales a:

```text
imagenes/<slug-del-articulo>/
```

Con nombres en orden:

```text
01-tema-del-dibujo.png
02-tema-del-dibujo.png
```

Conserva los archivos originales generados y no sobrescribas imágenes existentes, salvo que el usuario pida reemplazarlas.

## Cómo entregar

Antes de generar, la estrategia va corta y precisa. Al entregar, incluye:

- Cuántas imágenes hiciste (o cuántos prompts, si no hay herramienta de imágenes).
- Para qué sirve cada una y dónde va en el texto.
- Dónde quedaron guardadas.
- Cuáles son las más sólidas y cuáles son opcionales.

No expliques teoría del estilo; deja que el dibujo hable.

=== references/estilo.md ===
# ADN del estilo

## En una frase

Blanco puro, minimalista, a mano, mucho espacio vacío, contenido, absurdo, con aire de boceto de producto, anotaciones a mano en español, estructura clara pero sin ser un manual.

Como si alguien que lleva años trabajando en IA, producto, diseño y herramientas para desarrolladores dibujara de pasada en una hoja blanca para explicar algo.

## Siempre

- Ilustración horizontal 16:9 para acompañar un texto.
- Fondo blanco puro: nada de beige, gris cálido, textura de papel, degradados, sombras, ruido o papel envejecido.
- Línea negra a mano como base: trazo fino, un poco tembloroso, nada mecánico, nada vectorial, sin contornos gruesos.
- Mucho espacio en blanco: el dibujo ocupa entre el 40% y el 60% de la imagen, con al menos un 35% vacío, idealmente con una zona entera en calma.
- Pocas anotaciones a mano en español: entre 3 y 5, de 1 a 3 palabras cada una.
- Ortografía correcta: tildes (á, é, í, ó, ú), ñ, y signos de apertura (¿ ¡) cuando correspondan. Palabras cortas y comunes se dibujan mejor que palabras largas o técnicas.
- Una imagen explica una sola acción, estructura, estado o metáfora.
- La estructura se entiende sola: nunca escribas en el dibujo el nombre del tipo de estructura.

## Colores

- Negro: el dibujo principal, el personaje, los contornos, la estructura, el texto principal y los objetos centrales.
- Rojo: anotaciones clave, problemas, el punto emocional, avisos importantes, resultados.
- Naranja: el flujo principal, caminos, flechas, lo automático, el movimiento de A a B.
- Azul: notas secundarias, lo que pasa en la cabeza, el estado del sistema, una segunda capa de explicación, avisos de IA o del asistente.

El azul no es obligatorio en cada imagen. Sé mezquino con el color: mejor menos que más.

## Nunca

- Ilustración comercial.
- Infografía de presentación.
- Diagrama de flujo formal.
- Diapositiva de curso.
- Póster de dibujo tierno.
- Ilustración infantil.
- Diagramas de arquitectura complejos.
- Ilustración plana pulida.
- Interfaces con estética tecnológica.
- Capturas reales de aplicaciones.
- Fondos complejos, degradados, sombras o texturas.
- Explicar cada nodo.
- Un título de tipo arriba a la izquierda ("Flujo de trabajo", "Arquitectura del sistema", "Errores comunes", "Hoja de ruta").

## Dirección estética

Raro, creativo, interesante, limpio y simple, con imaginación suelta.

Nunca tierno, infantil, recargado ni rígido.

=== references/personaje.md ===
# Xiaohei (el personaje de Ian)

Xiaohei (小黑, "el negrito pequeño" en chino) es el personaje creado por Ian para sus ilustraciones. En esta adaptación se mantiene exactamente como Ian lo define.

## Quién es

Xiaohei es el personaje visual fijo de estos dibujos.

Por defecto aparece en cada imagen. No es una mascota, ni un sticker, ni una decoración tierna: es un trabajador absurdo que participa en serio en el funcionamiento del sistema.

## Cómo se ve

- Una criatura pequeña, negra y sólida.
- Ojos de punto blanco.
- Patitas finas; a veces bracitos finos.
- El cuerpo puede ser un cilindro, un grano negro, una caja negra, un embudo, una sombra, un agujero o un bloque negro dentro de una máquina.
- Contorno un poco irregular, con sensación de hecho a mano.
- Expresión vacía, ida, tranquila y seria.

## Carácter

- Muy serio, pero lo que hace es un poco absurdo.
- Como un operador discreto del sistema.
- Humor seco, nunca hace gracia a propósito.
- Algo torpe, pero no tonto.
- Como si de verdad estuviera a cargo de una tarea dentro de un boceto en la pizarra.

## Tareas típicas

Xiaohei siempre hace la acción central:

- Carga material.
- Tira de cuerdas para juntar fuentes de información.
- Se queda atascado en un punto de quiebre.
- Mueve la palanca de "decidir" dentro de una máquina.
- Se convierte en el embudo que filtra.
- Corta en pedazos un "pescado de contenido".
- Sella con un timbre los mensajes para clientes.
- Lleva de la mano el camino del cliente.
- Levanta un cartel de aviso frente a un hoyo.
- Saca la mano por un agujero pero no alcanza a atrapar el contenido.
- Al lado del dibujo, acarrea ladrillos, construye un puente, abre una puerta, clasifica o anota.

## Prohibido

- Dibujar a Xiaohei como una mascota demasiado tierna.
- Dibujarlo como personaje de caricatura infantil.
- Darle ropa compleja, caras de sticker u ojos brillantes.
- Dejarlo parado en una esquina mirando.
- Dejar que le robe protagonismo a la estructura.
- Dibujarlo demasiado comercial, redondeado o pulido.

## La prueba

Si al quitar a Xiaohei la metáfora central sigue funcionando completa, Xiaohei es decoración: reescribe el prompt para que sea él quien hace la acción.

=== references/composicion.md ===
# Composición y reglas de originalidad

## Tipos de estructura

Elige una sola estructura. No mezcles varias.

### Flujo de trabajo

Sirve para: entrada, proceso, salida; producción de contenido; flujos con IA; cadenas automáticas.

Cómo: entrada a la izquierda, Xiaohei o una máquina rara procesando al centro, salida a la derecha, flechas naranjas para el flujo principal.

### Parte de un sistema

Sirve para: fuentes de información, filtros, bases de datos, un generador, una parte de un sistema con agentes.

Cómo: dibuja solo de 3 a 5 módulos centrales, con Xiaohei haciendo la acción clave en uno de ellos.

### Antes y después

Sirve para: caos y orden, manual y automático, disperso y reunido, ansiedad y calma.

Cómo: caos a la izquierda, calma a la derecha, flecha naranja al medio. El personaje puede ser más exagerado.

### Estados de una persona

Sirve para: el dolor del cliente, el estado de quien crea contenido, demasiadas herramientas, ansiedad por la información, pasar de estancado a funcionando.

Cómo: de 2 a 4 estados pequeños, cada uno con una anotación corta.

### Metáfora

Sirve para: una fábrica de contenido, una bodega de información, la caja negra de la cabeza, una máquina de procesos, el reporte diario automático.

Cómo: un objeto o máquina grande y rara, pocas entradas, una salida. Tiene que quedarse en la memoria.

### Capas de un método

Sirve para: un método, niveles de un sistema, capacidades apiladas, capas de un sistema de contenido.

Cómo: cajas apiladas, nunca una pirámide formal; Xiaohei al lado acarreando ladrillos o construyendo.

### Mapa o camino

Sirve para: de la idea al lanzamiento, el camino del cliente, adónde lleva el contenido, una ruta de aprendizaje.

Cómo: un camino curvo, pocos puntos, Xiaohei tirando de una cuerda o caminando.

### Mini historieta

Sirve para: del fracaso al éxito, un proceso real, una queja, el cambio antes y después de usar algo.

Cómo: de 2 a 4 escenas pequeñas, una sola acción por viñeta.

## Cómo inventar una metáfora original

Cada vez, inventa la metáfora desde el texto actual. Nunca copies un dibujo anterior.

### Tres pasos

1. Cambia el concepto abstracto por una acción física: atascarse, perderse, volverse pesado, clasificar, decantar, fermentar, abrir una puerta, doblar, desempacar, devolver.
2. Cambia la estructura del sistema por un objeto de baja tecnología: una máquina rota, una caja de cartón, un cajón, una tubería, un buzón, un dial raro, una balanza, un pozo, una escalera, un escritorio extraño.
3. Haz que Xiaohei cargue con la acción: nada de estar al lado; está atascado en la máquina, tira de la cuerda equivocada, vigila la puerta, acarrea, remienda, pesa, sostiene la escalera, anota, mete cosas en un aparato raro.

### Objetos disponibles

- Caja de cartón, cajón, máquina vieja, embudo, balanza, buzón, puerta, pozo, escalera, tubería, ovillo de lana, compuerta, ruleta, caja negra, perforadora, máquina de pasta, cordel para colgar ropa, escritorio raro.
- Usa solo 1 o 2 por imagen. No llenes el dibujo.

### Acciones de Xiaohei

- Tirar, cargar, meter, pescar, aplastar, pesar, coser, cortar, girar, vigilar, empujar, recibir, desarmar, marcar, reciclar.
- La acción sirve a la idea central. No hagas cosas raras solo por ser raras.

## Regla de no copiar

Las imágenes de ejemplo de Ian no vienen en esta adaptación. Lo que sigue es la lista de composiciones que Ian ya usó; no las repitas, salvo que el usuario diga claramente "igual a esta", "copia esta composición" o "parte de este ejemplo":

- Una cinta transportadora con dos puntos de quiebre.
- Xiaohei tirando de la palanca de decisión dentro de una máquina de contenido.
- Xiaohei convertido en embudo que filtra tráfico, confianza y conversión.
- Xiaohei cortando un pescado de contenido.
- Xiaohei llevando de la mano el camino del cliente.
- Xiaohei tirando de tres capas de fuentes de información.
- Tres Xiaohei: uno con megáfono, uno construyendo un puente, uno abriendo una puerta.
- Xiaohei sellando una caja de herramientas de mensajes.
- Xiaohei con un cartel mirando un camino lleno de hoyos.

Aun con temas parecidos, cambia la metáfora. Por ejemplo, "el camino del cliente" no tiene que ser un camino: puede ser Xiaohei amarrando la cola de un contenido a el picaporte de una puerta. "Un contenido, muchos usos" no tiene que ser un pescado: puede ser Xiaohei aplastando una bola de papel hasta sacarle varias formas.

=== references/plantilla-prompt.md ===
# Plantilla del prompt de imagen

Genera cada imagen por separado. Reemplaza las variables según el texto y nunca juntes varias imágenes en una.

Las instrucciones van en inglés porque los modelos de imagen las siguen mejor así. Lo que va entre llaves `{...}` se escribe en español, y las anotaciones van entre comillas exactamente como deben aparecer, con tildes y ñ.

```text
Generate one standalone 16:9 horizontal illustration for a Spanish-language article.

Visual DNA:
Pure white background. Minimalist black hand-drawn line art. Slightly wobbly pen lines. Lots of empty white space. Sparse red/orange/blue handwritten Spanish annotations. Clean absurd product-sketch feeling. No gradients, no shadows, no paper texture, no complex background, no commercial vector style, no PPT infographic look, no cute mascot poster, no children's illustration, no realistic UI.

Recurring IP character required:
Xiaohei, a small solid-black absurd creature with white dot eyes, tiny thin legs, blank serious expression, slightly uneven hand-drawn body shape. Xiaohei must perform the core conceptual action, not decorate the scene. Make Xiaohei serious, deadpan, and slightly bizarre, not cute.

Theme:
{tema del dibujo}

Structure type:
{tipo de estructura: Workflow / System part / Before-after / Character states / Concept metaphor / Method layers / Map route / Mini comic}

Core idea:
{la idea central que explica esta imagen}

Composition:
{la escena concreta: dónde está Xiaohei, qué está haciendo, cuál es el objeto principal, cómo se mueve la información}

Suggested elements:
{elemento 1} / {elemento 2} / {elemento 3} / {elemento 4}

Spanish handwritten labels (write each one exactly as given, keep every accent and ñ):
"{anotación 1}" / "{anotación 2}" / "{anotación 3}" / "{anotación 4 opcional}" / "{anotación 5 opcional}"

Color use:
Black for main line art and Xiaohei. Orange for main flow/path/arrows. Red only for key warnings/problems/results. Blue only for secondary notes or feedback/system state.

Constraints:
One image explains only one core structure. Keep the main subject around 40%-60% of the canvas. Preserve at least 35% blank white space. Use only 3 to 5 short handwritten Spanish labels, 1 to 3 words each, spelled exactly as listed with correct Spanish accents (á é í ó ú ñ ¿ ¡); add no other text. Do not write a title in the top-left corner. Do not write the structure type on the image. Do not make it a formal diagram, course slide, or dense explainer. Do not copy prior examples or reuse known case compositions unless explicitly requested; invent a fresh visual metaphor for this specific article. It should be clear but not instructional, interesting but not childish, strange but clean.
```

## Explicar un concepto (modo explicar)

```text
Generate one standalone 16:9 horizontal hand-drawn illustration that explains one concept to a complete beginner, in Spanish.

Visual DNA:
Pure white background. Minimalist black hand-drawn line art: thin, clean, slightly wobbly pen lines, no shading, no hatching, no texture, few details, lots of empty white space. Sparse red/orange/blue handwritten Spanish annotations. Clean absurd product-sketch feeling. No gradients, no shadows, no commercial vector style, no PPT infographic look, no cute mascot poster, no realistic UI.

Recurring character:
Xiaohei, a small solid-black creature with white dot eyes, tiny thin legs, blank serious expression, slightly uneven hand-drawn body. Xiaohei appears once (twice at most) and performs the core action of the metaphor. Serious and deadpan, not cute.

Scene:
ONE single scene, one slightly absurd physical metaphor with one low-tech object: {la metáfora y el objeto}. It acts out this concrete example: {el ejemplo concreto}. Draw any tools or data involved ({herramientas}) recognizably inside the scene. No rows of numbered steps, no panels.

Text (spell every Spanish word exactly as given, with every accent, ñ, ¿ and ¡; add no other text):
- Small, discreet handwritten title at the top center, black: "{la pregunta}"
- 3 to 5 loose handwritten annotations around the drawing, each with a hand-drawn arrow pointing at the object it explains (orange for the main flow, red for the key point, blue for a side note): "{anotación 1}" / "{anotación 2}" / "{anotación 3}" / "{anotación 4 opcional}" / "{anotación 5 opcional}"
- At the bottom center, the definition in black handwriting: "{definición, máximo 16 palabras}"

Constraints:
Keep the drawing around 40%-60% of the canvas and at least 35% white space. It must be understood in 5 seconds by someone who knows nothing about the topic, thanks to the title and the definition.
```

## Consejos para las anotaciones en español

- Usa palabras cortas y comunes: "clientes", "caos", "ventas", "tiempo", "sin contestar". Las palabras largas o técnicas se deforman más.
- Si una palabra con tilde sale mal varias veces, cambia esa palabra por un sinónimo sin tilde antes que aceptar una falta de ortografía (por ejemplo, "pedido" en vez de "petición").
- Nunca más de 5 anotaciones: cada palabra extra es otra oportunidad de error.
- Escribe las anotaciones con mayúscula inicial solo si la llevan; en minúscula se ven más a mano.

## Prompts de edición

Corregir una palabra mal escrita:

```text
Edit the provided image. Replace only the handwritten word "{palabra incorrecta}" with "{palabra correcta}", spelled exactly like that, including every Spanish accent and ñ. Keep the same handwriting style, color, size and position. Preserve everything else exactly: character, other labels, paths, line style, composition, aspect ratio, and image quality. Do not add any new text or objects.
```

Quitar el título de la esquina superior izquierda:

```text
Edit the provided image. Remove only the handwritten title "{texto a borrar}" and its underline from the top-left corner. Fill that area with the same clean white background, matching the surrounding blank paper. Preserve everything else exactly: characters, labels, paths, line style, composition, aspect ratio, and image quality. Do not add any new text or objects.
```

Hacerlo más raro:

```text
Regenerate this illustration with the same core meaning and simple layout, but make Xiaohei more central to the conceptual action. Xiaohei should be doing the strange work that explains the idea, not standing beside the diagram. Keep it clean, sparse, hand-drawn, and not cute. Keep the same Spanish handwritten labels, spelled exactly as before.
```

=== references/checklist.md ===
# Checklist de calidad

## Tiene que cumplir

- Es horizontal 16:9.
- El fondo es blanco limpio.
- Aparece Xiaohei.
- Xiaohei hace la acción central; no solo decora.
- No copia una composición anterior: es una metáfora nueva para este texto.
- El dibujo es raro, creativo e interesante.
- Es limpio y simple; el dibujo no ocupa más del 60% de la imagen.
- Una imagen explica una sola estructura.
- Las anotaciones están en español, son pocas (3 a 5), cortas y se leen bien (1 a 3 palabras; en el modo explicar, 1 a 4 palabras con flecha).
- En el modo explicar: una sola escena (sin fila de pasos), título con la pregunta y definición abajo; alguien que no sabe nada lo entiende en 5 segundos.
- La ortografía está bien: tildes donde van, ñ y no n, sin letras cambiadas ni palabras inventadas.
- El naranja solo marca el camino principal o las flechas.
- El rojo solo marca lo importante, un problema, un aviso o un resultado.
- El azul solo marca notas secundarias, retroalimentación o el estado del sistema.

## Señales de falla

Si aparece cualquiera de estas, vuelve a generar o edita solo esa parte:

- Un título arriba a la izquierda ("Errores comunes", "Flujo de trabajo", "Arquitectura del sistema", "Hoja de ruta").
- Xiaohei parece mascota, sticker o dibujo tierno.
- Parece presentación, diapositiva de curso o diagrama de flujo formal.
- Demasiados elementos, flechas o nodos.
- El texto se volvió párrafos de explicación.
- El fondo tiene textura de papel, sombras, degradados, beige o ruido.
- Aparecen interfaces reales o pantallas con estética tecnológica.
- Palabras mal escritas, tildes faltantes o inventadas, letras que no existen en español, o anotaciones ilegibles.
- Texto en inglés u otro idioma que se coló en el dibujo.
- El dibujo es rígido y no tiene una metáfora absurda.
- Se parece demasiado a una de las composiciones de Ian listadas en `composicion.md`.

## Cómo iterar

- Muy común: haz que Xiaohei sea quien hace la acción y agrega una metáfora rara pero que funcione.
- Muy complejo: quita nodos; deja una sola acción y 3 a 5 anotaciones cortas.
- Muy tierno: refuerza "deadpan, blank serious expression, not cute, not mascot".
- Muy presentación: quita títulos, marcos, cuadrículas ordenadas y flechas de sobra; conviértelo en una escena a mano.
- Muy parecido a un ejemplo: conserva la idea central, cambia el objeto principal y la acción de Xiaohei.
- Palabra mal escrita: primero edita solo esa palabra con el prompt de corrección de `plantilla-prompt.md`; si hay varias mal, regenera con menos anotaciones y palabras más simples.

## Cómo saber si está listo

Un buen dibujo hace que el lector primero piense "qué raro esto" y en un segundo entienda la estructura.

Si a primera vista parece una página de tutorial y no un boceto de producto absurdo sobre una hoja blanca, no está listo.

=== agents/openai.yaml ===
interface:
  display_name: "Dibujos que explican"
  short_description: "Dibujos a mano 16:9 con anotaciones en español y el personaje Xiaohei, para explicar las ideas de tu texto"
  default_prompt: "Use $dibujos-que-explican to diseñar y generar algunos dibujos que expliquen las ideas clave de este texto en español."
policy:
  allow_implicit_invocation: true

=== NOTICE.md ===
# Aviso

**Dibujos que explican** es una adaptación al español de **Ian Xiaohei Illustrations**, una skill para agentes de IA creada por Ian y publicada con licencia MIT (ver `LICENSE`).

- Proyecto original: <https://github.com/helloianneo/ian-xiaohei-illustrations>
- GitHub de Ian: <https://github.com/helloianneo>
- Sitio de Ian: <https://www.ianneo.xyz/opc>
- X/Twitter de Ian: <https://x.com/ianneo_ai>

El personaje Xiaohei (小黑) es de Ian y forma parte de su lenguaje visual. Esta adaptación lo mantiene tal como él lo define.

Adaptación al español: Diego, AI with Diego (<https://aiwithdiego.com>), 2026. Se tradujeron las instrucciones y se adaptaron para que el texto de entrada y las anotaciones escritas a mano funcionen en español. No se incluyen las imágenes de ejemplo de Ian. Esta adaptación no está afiliada a Ian ni cuenta con su respaldo.

Si redistribuyes o adaptas esta versión, mantén este aviso y el crédito a Ian.

=== LICENSE ===
MIT License

Copyright (c) 2026 Ian

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Claude Code no genera imágenes por sí solo: te entrega el plan y un prompt por dibujo para usar en ChatGPT, salvo que tengas conectada una herramienta de imágenes.

MIT License

Copyright (c) 2026 Ian

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.