12 de agosto de 2026 | Lee Online

🧠 Infografías profesionales con Claude, sin diseñador

El método paso a paso para hacer infografías que se pueden editar en 5 segundos

¡Buenas! Esta semana algo muy útil, sobre todo si publicas contenido.

Tu cerebro está diseñado para procesar imágenes muchísimo mejor que texto. La gente olvida lo que lee, pero recuerda lo que ve. Por eso las infografías funcionan tan bien: transforman datos aburridos en algo que la gente comparte, guarda y vuelve a mirar.

El problema, hasta ahora, era el proceso. Para una infografía decente necesitabas Canva, tiempo, cierto ojo de diseñador, y encima cada vez que querías actualizar un dato tocaba abrir la plantilla, cambiar el número, revisar que no se descuadraba nada... Y así con cada nueva versión.

Hoy te enseñamos un método que hace todo eso en Claude, sin diseñador, sin Canva, y con una ventaja brutal: son totalmente editables con una sola frase. ¿Cambiaste un dato? Le dices "actualiza el 45% por 52%" y listo. ¿Nueva paleta de colores? "Cámbiala a estos hex" y hecho.

El truco: no vamos a generar una imagen. Vamos a codificar la infografía en HTML y exportarla como imagen al final. Suena técnico pero no lo es: no tienes que tocar ni una línea de código.

Vamos.

🎯 Por qué HTML y no una imagen generada

Antes de meterte en el método, entiende la diferencia. Es importante.

Cuando le pides una infografía a un generador de imágenes tradicional (ChatGPT, Midjourney), lo que hace es dibujar píxeles. Interpreta lo que le pides y pinta algo aproximado. El problema: los números salen mal escritos, los textos se distorsionan, y si quieres cambiar un dato, tienes que regenerar todo desde cero. Cada vez sale distinta.

Con el método HTML, Claude no dibuja: estructura. Los datos son datos reales, no dibujados. Los textos son textos, no manchas de píxeles con forma de letra. Y editarla es tan simple como decir "cambia el título por X". La estructura se mantiene, el diseño no se rompe.

Es la diferencia entre dibujar una tabla en papel y hacerla en Excel. Ambas se ven parecidas, pero solo una la puedes editar sin empezar de cero.

🎨 Paso 1: Extraer un sistema de diseño de una infografía que te guste

El método arranca con una referencia visual. Sin referencia, tu infografía saldrá con la estética por defecto de Claude, que se parece a la de todo el mundo. Con referencia, sale con la estética que tú eliges.

Dónde encontrar referencias buenas:

Pinterest → busca "infographic 2026" o "data visualization". Empieza a explorar. Cuanto más cliques, mejor te muestra.
Dribbble, Awwwards, Godly → si buscas algo más de estilo web.
Cualquier post de LinkedIn que te haya gustado visualmente. Hazle captura.

Elige 1 o 2 imágenes que representen el estilo que quieres.

Ahora, en Claude:

Abre Claude en la pestaña principal (no en Code, complica sin motivo).
Selecciona Opus como modelo (Fable-5 vale, pero es caro y para esto Opus rinde igual).
Sube las 1-2 imágenes de referencia arrastrándolas al chat.
Pega este prompt:

Eres el director de diseño de este proyecto. Yo no soy diseñador, 
y las decisiones finales las tomo yo, así que háblame en lenguaje 
llano.

Las imágenes que te adjunto son la estética que quiero. Estúdialas 
juntas y extrae el sistema de diseño que comparten.

- Analiza las referencias. Identifica: la paleta como 4-6 valores 
  hex con nombres y roles (fondo, superficie, tinta, acento, 
  apagado); tipografía para 2-3 usos (título, cuerpo, etiqueta) — 
  si no es una fuente gratuita, dime la Google Font más parecida; 
  ritmo del espaciado; radio de las esquinas; tratamiento de 
  bordes y sombras; densidad; la lógica del layout; y el elemento 
  distintivo que hace este estilo reconocible.

- Devuélveme el informe en menos de 200 palabras, sin jerga. Para 
  cada elección, dime qué es y qué aporta al lector ("negro sobre 
  crema — se lee tranquilo, sensación de impreso"). Marca lo que 
  estés infiriendo y no viendo directamente.

- Donde las referencias no coincidan, o donde haya una decisión 
  real abierta, pregúntame. Usa la herramienta AskUserQuestion, 
  entre 2 y 4 preguntas máximo, opciones en lenguaje llano con la 
  ventaja/desventaja de cada una. No me preguntes nada que puedas 
  contestar mirando las imágenes.

- Después guarda el sistema de diseño en un archivo llamado 
  DESIGN_SYSTEM.md: un bloque de variables CSS con los colores, 
  las escalas de tipografía con tamaños y pesos concretos, los 
  valores de espaciado y radio, el enlace a Google Fonts, un 
  párrafo sobre la lógica del layout, el elemento distintivo, y 
  una lista corta de "cosas que este diseño nunca hace".

- Genera también tokens-preview.html — una página que muestre los 
  colores, la escala tipográfica y una tarjeta de ejemplo — para 
  que pueda ver el sistema antes de usarlo.

- No diseñes nada más todavía. La fidelidad a mis referencias 
  importa más que tu propio gusto aquí. Si normalmente harías una 
  elección más atrevida, apúntala al final como opción alternativa 
  en vez de aplicarla.

Claude te va a hacer 2-4 preguntas con opciones para clicar, y al final te devuelve un archivo DESIGN_SYSTEM.md con toda la estética capturada. Y encima te lo previsualiza para que puedas verla antes de aplicarla.

Si la previsualización te gusta, adelante. Si no, dile qué falta o sobra y ajústala. Este paso es el 80% del resultado final.

📊 Paso 2: Generar la infografía con tus datos

Ahora que tienes el sistema de diseño listo, toca meter los datos.

Para este ejemplo vamos a crear una infografía sobre adopción de IA en empresas españolas. Un tema con datos jugosos que hemos ido investigando en las últimas semanas y que a nuestra audiencia le encanta.

En la misma conversación, escribe:

Perfecto, me gusta el sistema de diseño. Ahora genera una 
infografía siguiendo ese sistema al pie de la letra.

Tema: "Adopción de la IA en las empresas españolas en 2026"

Estructura que quiero:

1. Título grande arriba: "La IA en las empresas españolas: 
   dónde estamos"
2. Un dato principal enorme y destacado (el más impactante)
3. Cuatro bloques con datos clave sobre:
   - % de empresas que ya usan IA generativa
   - % que la usan de forma "estratégica" (no solo puntual)
   - Diferencia entre grandes empresas (500+ empleados) y pymes
   - Los tres usos más comunes actualmente
4. Un pequeño gráfico de barras comparando España con la media 
   europea
5. Un pie con fuente y fecha

Antes de generar, investiga los datos actualizados. Cita las 
fuentes al pie de la infografía. Si algún dato no lo encuentras 
con seguridad, dímelo antes de inventarlo.

Formato final: HTML puro que pueda descargar y convertir a imagen. 
Optimizado para verse bien en LinkedIn (formato vertical, 1080x1350 
aproximadamente).

Claude investiga los datos reales, los mete en la infografía respetando el sistema de diseño que creaste, y te devuelve un artifact visual con todo montado. En el panel derecho lo ves como quedaría al publicarlo.

✏️ Paso 3: Iterar (aquí está la magia)

Aquí es donde el método brilla. Miras la infografía y hay algo que no te encaja. Dile a Claude qué quieres cambiar. Ejemplos reales:

"El fondo está demasiado oscuro para LinkedIn, súbelo dos tonos."
"El dato de las pymes no me suena bien, verifícalo con otra fuente."
"Cambia el gráfico de barras por uno de dona, se ve mejor en móvil."
"El título es muy largo, resúmelo a 4 palabras."
"Los colores demasiado corporativos, dale un toque más humano."

Cada cambio se aplica en segundos y no rompe el resto del diseño. Puedes iterar 20 veces sin miedo. Y no te vas a quedar sin "créditos de generación" porque no estás generando imágenes desde cero, estás modificando código.

💾 Paso 4: Descargar como imagen

Cuando tengas la versión final, tienes dos opciones:

Opción A: captura de pantalla (rápida, para publicaciones sueltas). Abre el artifact a pantalla completa, ajusta el zoom del navegador para que se vea al 100%, y haz captura. Listo para subir a LinkedIn.

Opción B: exportar HTML y convertir (si necesitas mejor calidad). Dile a Claude "dame el HTML completo para descargarlo". Cópialo, guárdalo como .html, ábrelo en el navegador, y usa una extensión como GoFullPage para capturar la página entera en alta resolución.

🔁 Bonus: reutilizar el sistema para infografías nuevas

Aquí está el atajo que ahorra tiempo de verdad a largo plazo.

Una vez tienes el sistema de diseño (el archivo DESIGN_SYSTEM.md del paso 1), puedes usarlo para todas tus infografías futuras. En vez de repetir el paso 1 cada vez, arrancas nuevas conversaciones con:

"Voy a hacer una infografía nueva. Usa el sistema de diseño de este archivo adjunto para todo el estilo. Tema: [X]. Datos: [Y]."

Y sale la nueva infografía con la misma estética que la anterior. Consistencia total en tu feed de LinkedIn sin esfuerzo. Y si algún día quieres refrescar tu identidad visual, cambias el archivo una vez y todas las siguientes salen actualizadas.

💡 Si quieres afinar aún más, puedes convertir el sistema en una skill de Claude con el comando /skill-creator. Le dices que cree una skill llamada /infografia que use tu DESIGN_SYSTEM. A partir de ese momento, escribes /infografia sobre [tema] y sale directamente. Cero configuración, cero explicaciones. Ya lo cubrimos en ediciones anteriores.

⚠️ Ojo con esto

Cuatro avisos honestos:

Verifica siempre los datos. Le pediste a Claude que investigase y cita fuentes. Genial, es un buen punto de partida. Pero antes de publicar una infografía con datos, pulsa en las fuentes, comprueba que existen y que dicen lo que Claude dice que dicen. No es paranoia: es que a veces los datos se le mezclan.
Este método es para infografías con datos. Para ilustraciones estilo cómic, imágenes fotorrealistas o portadas artísticas, este método no es el adecuado. Ahí necesitas un generador de imágenes de verdad (Midjourney, DALL-E). Cada herramienta para lo suyo.
La estética por defecto delata. Si te saltas el paso 1 (extraer el sistema de diseño de una referencia), la infografía saldrá genérica. Se nota. Invierte 5 minutos en encontrar una buena referencia. Es lo que separa "hecha con IA" de "hecha con criterio".
No abuses de la infografía. Si publicas una infografía cada tres días en LinkedIn, tu audiencia se satura. Alterna formatos: texto puro, carrusel, foto real, vídeo. Las infografías impactan cuando aparecen entre otras cosas.