Integrando Content Island en el flujo de Claude Code.

Intro

Claude Code se ha convertido en una de las herramientas de IA más potentes para la generación de código.

Puedes seguir el paso a paso de esta guía en este vídeo para aprender a integrar Claude Code + Headless CMS.

Portal inmobiliario.

Como ejemplo, imaginemos que queremos desarrollar un portal sencillo para una inmobiliaria local. Vamos a implementar:

• Una barra de navegación con enlaces a las diferentes secciones del portal.
• Una sección Hero donde añadimos el nombre de la inmobiliaria y acciones principales.
• Una sección de propiedades destacadas, donde se muestran las propiedades más relevantes.
• Y, cuando pinchamos en una propiedad destacada, se muestra una página con los detalles de la propiedad, incluyendo imágenes, descripción, precio y un formulario de contacto.

Esto lo tenemos modelado en Content Island.

Si vamos al tab Model, podemos ver todas las entidades que forman el proyecto:

• Si vamos a Property, podemos ver todos los campos que forman una propiedad en venta o alquiler.
• Hemos modelado la sección Hero:
  • Tenemos los call to actions.
  • La imagen de fondo.

En cuanto a datos, podemos ir al tab Content, cambiar a vista de árbol (Tree) y en Property ver los detalles de una propiedad:

• Título.
• Slug para la URL.
• Referencia interna.
• Descripción.
• Descripción larga.
• Zona de la ciudad.
• Tipo de propiedad.
• Metros.

Setup del proyecto

Antes de empezar con Claude, vamos a partir de una plantilla en blanco. Para ello, podemos usar la plantilla de Content Island desde Add Project.

Le damos un nombre al proyecto (test-real-state), partimos de un template y pulsamos Next.

Elegimos la plantilla Minimal Astro.

Y pulsamos sobre el botón de Complete.

En la sección Quick start, copiamos el comando.

Nos movemos a Visual Studio Code, a una carpeta vacía, pegamos y ejecutamos el comando.

Ahora el CLI de Content Island nos hará varias preguntas:

La primera de ella es donde quiero crear el proyecto.

El segundo paso será preguntarnos si queremos instalar las dependencias, es decir que haga un npm install por nosotros.

Y ya lo tenemos listo para arrancar el proyecto. Tecleamos el comando npm run dev y copiamos la dirección.

Nos vamos a un navegador pegamos la url, y vemos que funciona.

Ahora eliminamos el código de ejemplo y cambiamos el token por el del proyecto de inmobiliaria.

y vamos a cambiar el token por el del proyecto de inmobiliaria.

71e67ac275e9c9645715f2f67979003f

Si volvemos al navegador, veremos que sigue en blanco porque aún no hemos añadido datos.

Configurando el proyecto para Claude Code

Siguiente paso, vamos a configurar el proyecto para que Claude tenga herramientas y MCP's para trabajar mejor.

MCPs

Content Island expone un MCP que permite a Claude Code acceder a los datos del proyecto.

Para configurarlo, ejecutamos:

claude mcp add content-island \
  --transport stdio \
  --scope project \
  -e CONTENT_ISLAND_ACCESS_TOKEN=YOUR_PROJECT_CONTENT_ISLAND_ACCESS_TOKEN \
  -- npx -y @content-island/mcp

Ojo cambia YOUR_PROJECT_CONTENT_ISLAND_ACCESS_TOKEN por el valor del access token de Content Island. Puedes encontrar este valor o en la variable de entorno que hemos creado unos pasos atrás o copiando el valor de Token de la sección General de Content Island

Podemos verlo configurado en:

.mcp.json

Para comprobar que se ha añadido correctamente, ejecutamos:

claude mcp get content-island

Skills

Los skills permiten indicar a Claude instrucciones especializadas.

Vamos a definir:

• Un skills para que aprenda a interactuar contra la Client API de Content Island, este skill lo podemos copiar y pegar de la documentación de Content Island.

• Otro skill interesante, es el que le explica a Claude cómo trabajar siguiendo la arquitectura de Pods, para poder estructurar mejor el proyecto, este también lo tenemos disponible en la documentación de Content Island.

Para poder hacerlo, solo tenemos que ir al link con la documentación de la skill, seleccionamos sobre la opción Raw, copiamos el contenido y creamos la siguientes carpetas, y pegamos el contenido correspondiente.

skills/content-island/SKILL.md

skills/astro-pods/SKILL.md

La estructura de las carpetas quedaría algo tal así:

• Por último vamos a añadir un skill para que Claude mejore sus capacidades en diseño frontend, este lo vamos a instalar desde el marketplace de skills de Claude, es el skill de "Frontend Design" de Anthropic.

¿Cómo se instala?

Primero tenemos que añadir del marketplace el repositorio de skills de Anthropic:

/plugin marketplace add anthropics/skills

Y ahora instalamos el frontend-design de anthropics (le indicamos que Intall for all collaborators on this repository (project scope)).

/plugin install frontend-design@anthropics/skills --scope project

Ojo si tienes Claude Code arrancado, es buena idea reiniciar la sesión de Claude Code, para que el nuevo skill esté disponible.

Si nos vamos a la carpeta .claude en el fichero settings.json vemos que tenemos el pluggin habilitado.

Claude md

Vamos tambíen a definir un archivo de configuración de Claude.md, aquí indicamos una serie de instrucciones generales para que Claude las tenga en cuenta a la hora de generar código, por ejemplo, indicarle que use TypeScript, o que use Tailwind para los estilos.

Aquí iremos incorporando lo más importante, tampoco conviene escribir la biblia, porque si no cargaríamos demasiado el contexto de Claude, y puede consumir demasiados tokens.

Creamos un fichero llamado Claude.md y pegamos el siguiente contenido.

## General guidelines

- Use Tailwind CSS v4 and DaisyUI for all styling needs.
- Use semantic HTML5 elements and follow accessibility best practices.
- Design for mobile-first, ensuring a responsive experience across all devices.
- Use the astro-pods skill to structure the codebase and define responsibilities by layer.
- Use the content-island skill to fetch and render content, strictly following its security rules and allowed API surface.
- Use colors and theming like a professional designer, ensuring good contrast and a visually appealing palette, do not use IA like apporach.
---

Nos arrancamos.

Para esta demo, seguimos la aproximación de "Human in the loop", explicaremos un paso para después revisar y definirle a Claude los siguientes pasos.

Inicializamos un repositorio:

git init

Y añadimos el código actual. Le pedimos a Claude:

El proyecto en el que estás está creado con Astro y tiene acceso a la API de Content Island, donde tienes modelado una inmobiliaria de barrio, con información sobre el menú de navegación, el hero section y una lista de propiedades entre otros.

Vamos a empezar por la estructura inicial:

- Vas a crear un layout un con header y un footer.

- En el header, Vas a crear una barra de navegación superior con los enlaces que se indican en el proyecto de Content Island en concreto el type `Header` y aqui tienes una seríe de enlaces (utiliza el flag `includeRelatedContent`para sacar toda la información relacionada con cada enlace).

- Debajo del header ya en la página principal vas a añadir una Hero Section, los datos los leeras del type de content Island `Hero` que sólo tiene una entrada, de ahí puedes sacar hasta la imagen de background, y tiene unas acciones principales que son Buy y Rent que puedes poner como botones.

Para el diseño utiliza el skill de diseño frontend, para acceder a los datos de Content Island utiliza el skill que has definido para la Client API de Content Island, y para estructurar el proyecto utiliza el skill de Content Island Astro Pods.

Antes de ejecutarlo le damos al atajo de teclado shift + tab y cambiamos a plan mode ya que queremos ver que va a hacer.

Una vez que el paso está completado, podemos revisar y ejecutamos.

npm run dev

Te puede generar una estructura de ficheros parecida a esta.

Aqui podemos ver el header de la página que estamos generando.

Vamos a por el siguiente paso, ejecutamos el siguiente prompt para generar la sección de propiedades destacadas:

Ahora quiero mostrar justo debajo de la Hero Section, una sección de propiedades destacadas, para ello tienes que leer la lista de propiedades del proyecto de Content Island, y mostrar sólo las que tienen el flag de destacada, para cada propiedad destacada muestra su imagen principal, título, precio, si es compra o venta y un enlace a la página de detalles de la propiedad (sobre la página de detalle de la propiedad, puedes de momento poner un texto que diga "aquí irá el detalle de la propiedad", que luego lo implementaremos).

Te puede generar una estructura de ficheros parecida a esta.

Aquí tenemos el listado de propiedades que nos genera:

Oye, ni tan mal. Si pulsamos sobre una de las propiedades, navegará a la vista de detalle que por ahora solo tenemos el property detail.

Y finalmente:

Generame la página de detalle de la propiedad, donde le indicamos que muestre toda la información de la propiedad, incluyendo un carrusel de imágenes, descripción, precio y un formulario de contacto.

Te puede generar una estructura de ficheros parecida a esta.

Vamos al navegador, pulsamos sobre una de las propiedades y aquí podemos ver que ha generado un carrusel, un formulario de contacto (tendríamos que comprobar si funciona o no). El tipo de propiedad, la ubicación etc.

Conclusión

Y con esto hemos visto que integrar un proyecto que hayas creado en Content Island con Claude Code es realmente sencillo.