Workflow Codex para imágenes de blog

Workflow Codex para imágenes de blog: skills, thumbnails y lotes

Este documento explica cómo trabajar con los skills de Codex en este proyecto para crear imágenes de blog, añadirlas a artículos Markdown y procesar muchos posts en una sola sesión sin perder control de archivos, rutas ni calidad.

La regla base del sistema es sencilla: imágenes editoriales sin texto visible, guardadas como WebP en public/blog y conectadas desde el frontmatter thumbnail o desde imágenes Markdown dentro del artículo.

Skills disponibles

article-image-pack

Skill del proyecto. Vive en .codex/skills/article-image-pack y también está instalado en la carpeta global de skills de Codex para que pueda invocarse en sesiones futuras.

Sirve para:

• Leer un artículo Markdown o MDX.
• Entender título, slug, descripción, tags, categoría, headings y SEO intent.
• Crear un thumbnail/OG sin texto.
• Crear imágenes dentro del artículo cuando haga falta.
• Guardar assets en public/blog.
• Convertir copias públicas a WebP.
• Actualizar thumbnail en frontmatter.
• Insertar imágenes Markdown con alt text útil.
• Procesar muchos blogs por lotes.

Prompt típico:

Use $article-image-pack to create no-text WebP thumbnail and in-article images for src/content/blog/2026/nombre-del-articulo.md.

Prompt para muchos artículos:

Use $article-image-pack to generate no-text WebP thumbnails for all blog articles in src/content/blog/2026, processing in batches of 10. Save assets in public/blog, update thumbnail frontmatter, and validate paths after each batch.

imagegen

Skill del sistema para generar o editar imágenes raster. Es el que se usa cuando hay que crear thumbnails, imágenes editoriales, assets de artículo o variaciones visuales.

En este proyecto debe usarse con estas restricciones:

• No incluir texto visible en la imagen.
• No incluir letras, números, logos, marcas de agua, captions, labels, señalética ni UI legible.
• Si aparece una interfaz, debe ser abstracta: bloques, tarjetas, gráficos y formas sin copy legible.
• Mantener los originales generados en la carpeta de Codex.
• Copiar o convertir solo las versiones finales a public/blog.

skill-creator

Skill del sistema para crear o actualizar skills. Se usa cuando hay que cambiar article-image-pack, añadir nuevas reglas, documentar mejores prompts o validar la estructura del skill.

Después de editar un skill hay que validar:

python C:/Users/OliSR/.codex/skills/.system/skill-creator/scripts/quick_validate.py .codex/skills/article-image-pack

skill-installer

Skill del sistema para instalar skills en Codex. Útil si hay que mover un skill desde otro repo o instalar uno nuevo desde una fuente externa.

plugin-creator

Skill del sistema para crear plugins de Codex. No es necesario para imágenes de blog, pero queda documentado porque forma parte del set disponible cuando el trabajo pide extender Codex con un plugin.

openai-docs

Skill del sistema para consultar documentación oficial de OpenAI. Se usa cuando el trabajo depende de API, modelos, parámetros o comportamiento actualizado de productos OpenAI.

Convenciones de este proyecto

Los artículos viven en:

src/content/blog/**/*.md

Los assets públicos de blog viven en:

public/blog

La ruta pública de una imagen de blog tiene este formato:

/blog/nombre-del-archivo.webp

El thumbnail del artículo se declara así:

thumbnail: /blog/slug-del-articulo-thumbnail.webp

La URL del artículo es:

/blog/<slug>

Si el servidor local está levantado en 3000, la URL completa queda así:

http://localhost:3000/blog/<slug>

Si 3000 está ocupado, Next puede usar 3001 u otro puerto. Hay que mirar el puerto real que imprime next dev.

Estilo visual por defecto

El estilo por defecto se llama Nebular No-Text Editorial System.

Combina:

• Realismo editorial premium.
• Luz mediterránea cuando el artículo sea local o regional.
• Escenas reales con herramientas de trabajo, cámaras, pantallas, mesas, propiedades, producto o contexto.
• UI abstracta cuando el artículo trate de paid media, funnels, CRM, analytics o campañas.
• Composiciones limpias, fáciles de leer en thumbnail.

No debe generar:

• Texto visible.
• Letras o números.
• Logos.
• Señales.
• Mapas con labels.
• Formularios con campos legibles.
• Gráficos con cifras.
• Watermarks.
• Nombres falsos de marcas o plataformas.

Presets de estilo

El skill incluye estos presets:

• Nebular No-Text Editorial System: preset base del proyecto.
• Premium Editorial Photo: realismo editorial, luz natural y contexto profesional.
• Mediterranean Market Visual: blanco, piedra cálida, costa, azul mediterráneo y señales locales sin texto.
• Productized Dashboard: pantallas y flujos abstractos para marketing, SaaS, CRM y paid media.
• Cinematic Workspace: mesa de trabajo, herramientas reales, cámara, estrategia y producción.
• Clean Infographic: iconos, formas, flechas y diagramas sin labels.
• Isometric System Map: sistema, ecosistema o funnel con piezas conectadas.
• Bold Social Thumbnail: imagen fuerte y directa para hero o thumbnail, sin texto.
• Documentary Realism: escenas naturales, menos publicitarias y más observadas.

Workflow para un artículo

1. Leer el Markdown completo.
2. Extraer title, slug, description, category, tags, headings e imágenes existentes.
3. Decidir el plan:
   • 1 thumbnail por defecto.
   • 2-4 imágenes internas si el artículo es largo y el usuario lo pide.
4. Elegir estilo:
   • Por defecto, Nebular No-Text Editorial System.
   • Ajustar con presets según tema.
5. Generar un prompt por imagen.
6. Generar las imágenes con imagegen.
7. Copiar las versiones útiles desde la carpeta generada de Codex.
8. Convertir a WebP si se generaron PNG.
9. Guardar en public/blog.
10. Actualizar thumbnail y/o insertar imágenes Markdown.
11. Validar rutas.
12. Dar la URL real para revisar.

Prompt base para thumbnail

Use case: article-image-pack
Asset type: no-text thumbnail / OG image
Article: "<title>"
Section/topic: article hero thumbnail
Style preset: Nebular No-Text Editorial System
Primary request: communicate the article topic visually without using any text.
Scene/subject: <specific scene based on article>
Composition: landscape 16:9, strong central subject, clean negative space, readable at thumbnail size.
Lighting/mood: premium editorial, professional, modern.
Color palette: project-aware, restrained, coherent with article.
Text: none; no visible words, letters, numbers, logos, captions, labels, signage, UI copy, or watermark.
Constraints: no brand logos, no fake platform names, no readable interface copy, no random typography.
Avoid: generic stock image, clutter, text overlays, watermarks.

Prompt base para imagen interna

Use case: article-image-pack
Asset type: no-text inline section image
Article: "<title>"
Section/topic: "<heading>"
Style preset: Nebular No-Text Editorial System
Primary request: explain this section visually without using text.
Scene/subject: <specific section idea>
Composition: 16:9 or the article's existing image ratio, clear focal point.
Lighting/mood: coherent with article.
Color palette: coherent with article and project.
Text: none; no visible words, letters, numbers, logos, captions, labels, signage, UI copy, or watermark.
Constraints: no readable UI, no fake brands, no misleading visual claims.
Avoid: clutter, random characters, generic stock photo.

Naming

Thumbnail:

public/blog/<slug>-thumbnail.webp

Inline images:

public/blog/<slug>-<topic>.webp

Examples:

public/blog/video-paid-social-para-captacion-inmobiliaria-en-murcia-y-mar-menor-2026-thumbnail.webp
public/blog/video-paid-social-para-captacion-inmobiliaria-en-murcia-y-mar-menor-2026-embudo.webp
public/blog/video-paid-social-para-captacion-inmobiliaria-en-murcia-y-mar-menor-2026-cualificacion.webp

Conversión a WebP

Si sharp está disponible, convertir las copias públicas con calidad aproximada 82:

node -e "const sharp=require('sharp'); sharp('public/blog/input.png').webp({quality:82}).toFile('public/blog/output.webp')"

Después de confirmar que el WebP existe y el Markdown lo referencia, se pueden borrar las copias temporales PNG dentro del proyecto. No borrar los originales de Codex salvo petición explícita.

Actualizar frontmatter

Antes:

category: Murcia
---

Después:

category: Murcia
thumbnail: /blog/slug-del-articulo-thumbnail.webp
---

Si ya existe thumbnail, reemplazarlo manteniendo el estilo de YAML cercano cuando sea práctico.

Insertar imágenes internas

Insertar la imagen justo después del heading que explica:

## Estructura de paid social para inmobiliaria

![Mesa de estrategia con vídeos inmobiliarios, embudo visual y tarjetas de campaña sin texto](/blog/slug-del-articulo-embudo.webp)

El alt text debe estar en español si el artículo está en español. Debe describir la imagen, no repetir keywords sin sentido.

Validación

Comprobar que las rutas del artículo existen bajo public:

node -e "const fs=require('fs'); const matter=require('gray-matter'); const file='src/content/blog/2026/articulo.md'; const parsed=matter(fs.readFileSync(file,'utf8')); const inline=[...parsed.content.matchAll(/!\[[^\]]*\]\(([^)]+)\)/g)].map(m=>m[1]); const imgs=[parsed.data.thumbnail,...inline].filter(Boolean); const missing=imgs.filter(p=>!fs.existsSync('public/'+p.replace(/^\//,''))); console.log({imageCount: imgs.length, missing});"

Validar SEO cuando sea práctico:

npm.cmd run blog:lint

Si falla por artículos no tocados, reportar esos fallos como ruido existente y no arreglarlos salvo que se pida.

Validar el skill después de tocarlo:

python C:/Users/OliSR/.codex/skills/.system/skill-creator/scripts/quick_validate.py .codex/skills/article-image-pack

Workflow para todos los blogs en una sesión

Para procesar todos los blogs, no conviene generar todo a ciegas. El flujo recomendado es:

1. Inventario:
   • Listar todos los .md.
   • Extraer slug, title, category, tags, thumbnail actual e imágenes internas.
   • Separar artículos sin thumbnail, con /og.jpg, con thumbnail antiguo y con thumbnail bueno.
2. Primera pasada:
   • Generar solo thumbnails.
   • Procesar en lotes de 5-10 artículos.
   • Mantener una lista de artículo, prompt, archivo generado, archivo WebP final y estado.
3. Validación de cada lote:
   • Confirmar que todos los WebP existen.
   • Confirmar que cada thumbnail apunta al archivo correcto.
   • Abrir 2-3 URLs de muestra.
4. Segunda pasada opcional:
   • Añadir imágenes internas solo a artículos largos o prioritarios.
   • Usar 1-3 imágenes internas por artículo, no más, salvo guías muy largas.
5. Cierre:
   • Ejecutar validación.
   • Revisar git status.
   • Reportar archivos creados, artículos modificados y fallos existentes.

Prompt recomendado:

Use $article-image-pack to generate no-text WebP thumbnails for all blog articles in src/content/blog/2026, processing in batches of 10. Save assets in public/blog, update thumbnail frontmatter, validate paths after each batch, and stop after the first batch for visual review.

Cuando el primer lote esté aprobado:

Continue $article-image-pack for the next batch of 10 blog articles using the same no-text style and WebP workflow.

Si las imágenes no se ven

Revisar en este orden:

1. El archivo existe en public/blog.
2. El artículo referencia /blog/<archivo>.webp, no public/blog/<archivo>.webp.
3. El navegador está abierto en el puerto correcto de Next.
4. El servidor dev se reinició o refrescó después de crear archivos nuevos.
5. El HTML renderizado contiene la URL de la imagen.
6. No hay un error de compilación o caché en .next.

Comprobar si el asset responde:

Invoke-WebRequest -Uri 'http://localhost:3000/blog/archivo.webp' -UseBasicParsing

Si Next está en 3001, cambiar el puerto:

Invoke-WebRequest -Uri 'http://localhost:3001/blog/archivo.webp' -UseBasicParsing

Buenas prácticas

• No generar texto dentro de imágenes si el texto puede vivir en HTML.
• No usar logos ni UI real de plataformas.
• No meter claims visuales que el artículo no sostenga.
• No tocar cambios ajenos del working tree.
• No borrar assets existentes sin comprobar referencias.
• No procesar todos los artículos con un único prompt genérico.
• Revisar visualmente el primer lote antes de escalar a todo el blog.