
[Actualizado: 24 de abril de 2026]
Hemos optimizado el proceso empleando NotebookLM y Claude Cowork, a través de MCP: Cómo conectar NotebookLM con Claude Desktop mediante MCP
[Ver todas las ediciones de Noticias de IA]
Aprende un flujo de trabajo de IA simple de dos pasos para la creación de contenido. Lo haremos todo desde Claude Cowork (escritorio), ya que tiene acceso a NotebookLM mediante MCP (ver artículo Cómo conectar NotebookLM con Claude Desktop mediante MCP). NotebookLM nos servirá para tener un cuaderno con las noticias de la semana.
Necesitaremos pues dos pasos:
Paso 1: Darle a NotebookLM el vídeo con las noticias
Simplemente agrega en el cuaderno «Noticias de IA» el vídeo con las noticias semanales como fuente.
Paso 2: Creación de la página HTML con un skill de Claude Cowork
Lee antes Cómo conectar NotebookLM con Claude Desktop mediante MCP) y haz lo siguiente:
Entra en NotebookLM desde tu terminal local:
notebooklm-mcp-auth
Entra en Claude Cowork en tu escritorio y escribe el prompt:
Consulta mi notebook [Noticias de IA] en NotebookLM y extrae la lista completa de noticias de IA mencionadas en el vídeo. Para cada noticia, busca su URL oficial en la web. Luego genera el HTML de la revista ‘Noticias IA’ edición Nº [Número de la edición] de Blogpocket.es con estilo magazine moderno, incluyendo titulares, resúmenes breves y la fecha de hoy.
Previamente a eso, crea la siguiente Habilidad (personalización > Habilidades) noticias-ia.skill
Descripción:
Genera la revista digital "Noticias IA" de Blogpocket.es
a partir de un notebook de NotebookLM que contiene un
video de noticias de inteligencia artificial como fuente.
Produce dos archivos HTML: uno con CSS moderno para
insertar en WordPress y otro con tablas y estilos
inline optimizado para campanas de email
(Brevo/Sendinblue, Gmail, Outlook).
Usa esta skill siempre que el usuario pida generar
una edicion de "Noticias IA", mencione el boletin
o newsletter de Blogpocket, o quiera crear una revista
de noticias de IA a partir de un video en NotebookLM.
Tambien si dice cosas como "genera la edicion 14",
"crea el noticiero de esta semana",
"prepara el boletin de noticias IA", o similar.
Contenido del skill
---
name: noticias-ia
description: >
Genera la revista digital "Noticias IA" de Blogpocket.es a partir de un notebook de NotebookLM que contiene un video de noticias de inteligencia artificial como fuente.
Produce dos archivos HTML: uno con CSS moderno para insertar en WordPress y otro con tablas y estilos inline optimizado para campanas de email (Brevo/Sendinblue, Gmail, Outlook).
Usa esta skill siempre que el usuario pida generar una edicion de "Noticias IA", mencione el boletin o newsletter de Blogpocket, o quiera crear una revista de noticias de IA a partir de un video en NotebookLM. Tambien si dice cosas como "genera la edicion 14", "crea el noticiero de esta semana", "prepara el boletin de noticias IA", o similar.
---
# Noticias IA — Skill de generacion de revista
Esta skill automatiza la creacion de la revista digital "Noticias IA" de Blogpocket.es. El flujo completo parte de un notebook de NotebookLM con un video de noticias de IA y produce dos archivos HTML listos para publicar.
## Datos que proporciona el usuario
El usuario indicara:
- **Nombre o ID del notebook** de NotebookLM que contiene el video fuente
- **Numero de edicion** (ej. "edicion 13", "numero 14")
La fecha se toma automaticamente del dia actual.
## Flujo de trabajo
### Paso 1: Extraer noticias del notebook
Consulta el notebook de NotebookLM con un query exhaustivo para extraer TODAS las noticias individuales mencionadas en el video. El query debe pedir:
- Titulo descriptivo corto para cada noticia
- Resumen detallado de 2-3 frases explicando que ocurrio, por que importa y datos clave
- Todos los identificadores: nombres de modelos, empresas, investigadores, herramientas, funciones
Usa `notebook_query` con un prompt como:
```
Act as an expert technology documentarian. List EVERY individual news item, announcement,
product launch, or milestone mentioned in this video. For each one provide:
1) A short descriptive title
2) A detailed summary of 2-3 sentences explaining what happened, why it matters, and key details
3) All specific identifiers: model names, company names, researcher names, tool/feature names.
Be exhaustive - do not skip any news item even if minor.
```
### Paso 2: Buscar URLs oficiales
Para cada noticia, busca con WebSearch la URL oficial o una fuente gratuita (no de pago). Prioriza:
1. Paginas oficiales del producto/empresa (ej. anthropic.com, blog.google)
2. Articulos de TechCrunch, VentureBeat, The Verge, 9to5Google, etc.
3. Evita Bloomberg, WSJ, Financial Times u otros con paywall
Lanza multiples busquedas en paralelo para agilizar.
### Paso 3: Agrupar en secciones tematicas
Analiza las noticias y crealas dinamicamente en 4-7 secciones tematicas. Cada seccion necesita:
- Un emoji representativo como icono
- Un titulo de seccion (ej. "Modelos de frontera y ciberseguridad")
- Un subtitulo breve
Elige la noticia mas impactante de la semana como "featured" (tarjeta de ancho completo con fondo destacado). Las demas van en filas de dos tarjetas.
### Paso 4: Generar los dos HTML
Genera ambos archivos siguiendo los templates de referencia:
1. **`noticias-ia-edicion-{N}.html`** — Version WordPress (CSS moderno)
2. **`noticias-ia-edicion-{N}-email.html`** — Version email/Brevo (tablas + inline)
Lee los templates de referencia ANTES de escribir:
- `references/template-wordpress.md` — Estructura CSS y HTML para WordPress
- `references/template-email.md` — Estructura de tablas e inline styles para email
### Paso 5: Verificar y entregar
- Verifica que el HTML es valido (sin errores de parseo)
- Confirma que la version email NO contiene: `display:grid`, `display:flex`, `backdrop-filter`, `@keyframes`, `fit-content`
- Presenta ambos archivos al usuario con `present_files`
- Proporciona enlaces `computer://` para descargar
## Estructura de cada tarjeta de noticia
Cada tarjeta contiene estos elementos en orden:
1. **Etiqueta de categoria** — Pastilla de color (ej. "Ciberseguridad" en rojo, "Modelo" en verde, "Video IA" en purpura)
2. **Titular** — Titulo conciso y atractivo de la noticia
3. **Resumen** — 2-4 frases con los datos clave, usando `<strong>` para nombres de productos/empresas
4. **Identificadores** — Linea gris con los IDs clave separados por comas
5. **Enlace** — "Leer mas →" apuntando a la URL oficial
## Paleta de etiquetas de categoria
Usa estas combinaciones de fondo/texto para las etiquetas segun el tipo de noticia:
| Categoria | Fondo | Texto |
|-----------|-------|-------|
| Ciberseguridad | #fef2f2 | #dc2626 |
| Modelo / Open Source | #f0fdf4 | #16a34a |
| Producto / Plataforma | #eff6ff | #2563eb |
| Negocio / Suscripcion | #fffbeb | #d97706 |
| Video IA / Imagenes / Avatares | #fdf4ff | #a855f7 |
| Finanzas | #ecfdf5 | #059669 |
| Herramienta / Dev Tools | #f1f5f9 | #475569 |
| Audio / Podcasts | #fff7ed | #ea580c |
| Contexto / Historico | #f0fdf4 | #16a34a |
Puedes crear categorias nuevas si las noticias lo requieren, manteniendo el mismo patron visual.
## Cabecera y pie
La cabecera siempre contiene:
- Titulo principal: **"Noticias IA"** (con gradiente purpura-cyan en WordPress, color solido #c084fc en email)
- Subtitulo: **"Blogpocket.es"** en mayusculas con letter-spacing
- Pastilla: **"Edicion N.o {N}"** + fecha del dia actual
El pie siempre contiene:
- "Noticias IA — Edicion N.o {N} · {fecha}"
- "Publicado por Blogpocket.es" (enlace a https://blogpocket.es)
- "Generado con inteligencia artificial · Fuentes verificadas mediante busqueda web"
## Diferencias clave entre las dos versiones
### WordPress (CSS moderno)
- Usa CSS Grid para layout de 2 columnas
- Animaciones CSS en la cabecera (gradiente, pulse)
- Hover effects en tarjetas
- Media queries para responsive
- Clases CSS con prefijo `.nia-` para evitar conflictos con temas WordPress
- Todo el CSS va en un bloque `<style>` al inicio
### Email/Brevo (tablas + inline)
- Layout 100% con `<table role="presentation">` anidadas
- TODOS los estilos son inline (atributo `style=""` en cada elemento)
- Ancho fijo de 600px con `max-width`
- Columnas con `width="49%"` y espaciador `width="2%"`
- Clase `nia-col-2` con `@media` para apilar en movil
- Sin animaciones, sin grid, sin flex, sin backdrop-filter
- Namespaces MSO para compatibilidad con Outlook
- DOCTYPE completo con `<html>`, `<head>`, `<body>`
## Tono del texto introductorio
El parrafo de introduccion debe:
- Dar la bienvenida a la edicion
- Mencionar 2-3 temas destacados de la semana a modo de gancho
- Indicar cuantas noticias se cubren
- Ser conciso (3-4 lineas maximo)
Finalmente, comprueba si todas las URLs son válidas y se abren desde los titulares incluidos en la página creada. Sin hay algún fallo, dile a Gemini que lo corrija y si es necesario corrige el prompt para evitarlo.
