Del PDF a la web publicada: 22 minutos usando Claude Design (con tropiezos incluidos)
Ya teníamos la guía de programación en Python lista en PDF, la que hicimos a partir del capítulo 7 de "Mastering Claude AI". En este vídeo la llevo un paso más allá: la convierto en una entrada de blog de verdad, publicada, con Claude Design de por medio. Y como siempre que grabo estas cosas en directo, salen imprevistos que también merece la pena contar, porque es ahí donde de verdad se aprende a usar la herramienta.
Primer paso: ponerle "más bonito" el PDF
Le subí el PDF a Design y le pedí, literalmente, que me lo pusiera "más bonico" para alumnado de Bachillerato, destacando lo importante: definiciones y ejercicios. Le pedí también índice, numeración y glosario, y una condición que para mí es innegociable: que no me cambiara ni una palabra del texto. Esto es clave, y quiero que quede claro para quien vea el vídeo: usar una IA para el diseño no significa darle barra libre para que reescriba tu contenido. Una cosa es maquetar, otra muy distinta es que te cambien lo que has escrito.
El resultado del primer PDF ya estaba muy bien: 12 páginas, con índice, definiciones destacadas y un glosario final con los términos clave (algoritmo, variable, función, bucle, bug...). Perfecto para quien prefiera leerlo en papel o descargarlo.
Segundo paso: pedir también el HTML
Como el objetivo final era publicarlo en WordPress, le pedí a Design que me generara además una versión en HTML. Aquí es donde empiezan los tropiezos interesantes. La primera versión que me dio se veía genial al abrirla en el navegador por su cuenta, pero al copiarla y pegarla directamente en el editor de WordPress, se quedaba convertida en una especie de imagen o documento incrustado, sin mostrar la página de verdad -algo así como un "no se puede previsualizar", en vez del contenido real.
Le expliqué el problema: necesitaba un HTML que pudiera copiar y pegar en WordPress y que funcionara de verdad, no una página web completa aparte. Y aquí viene la parte técnica que quiero destacar para quien le pase lo mismo: en WordPress, si pegáis un HTML completo (con sus etiquetas de página entera) en un bloque de texto normal, el editor no sabe qué hacer con él y lo tira o lo muestra roto. La solución fue eliminar ese bloque y usar en su lugar un bloque de HTML personalizado (a veces llamado bloque "HTML a medida" o similar), que sí traga el código tal cual. En cuanto hice ese cambio, la página se veía perfecta.
Tercer paso: la imagen destacada
Para la imagen de portada tengo un truco que ya uso siempre en clase: cojo el enlace de la entrada ya publicada y se lo paso a una IA generadora de imágenes pidiéndole que me haga una portada con nuestro estilo, manteniendo al Lince (nuestro personaje recurrente) pero esta vez disfrazado de diseñador web, con el fondo algo más claro. En este vídeo probé tanto con ChatGPT como con Design para ver cuál me convencía más, y terminé quedándome con una combinación de ambas, ajustando hasta que me gustó el resultado. Esta imagen destacada es importante por dos motivos: es la que aparece si la entrada sale en una búsqueda de Google, y es la que se ve como miniatura si comparto el enlace en redes.
Último paso: el extracto generado con permiso
Para el extracto -ese resumen corto que aparece en el listado de entradas del blog- hice algo que también quiero destacar: le pedí a Claude que generara un extracto de la entrada ya publicada, y como tenía conectado el navegador con permiso mío, fue él mismo a la página real, la analizó, y me devolvió un resumen sin que yo tuviera que copiarle el texto a mano. Con eso, la entrada quedó completa: contenido, imagen destacada, extracto, categoría y palabras clave.
Lo que me llevo de estos 22 minutos
El proceso completo -PDF más cuidado, HTML corregido para WordPress, imagen destacada e incluso el extracto- se puede hacer en poco más de veinte minutos, pero los minutos que se van no son en generar cosas, son en corregir lo que no sale bien a la primera: el HTML que WordPress no traga, la imagen que no convence, el bloque que hay que cambiar. Esa es la parte del proceso que normalmente no se ve en un tutorial pulido, y que he preferido dejar tal cual en el vídeo, con los tropiezos incluidos, porque es donde de verdad se aprende a usar estas herramientas en condiciones reales, no en condiciones de laboratorio.
