Inicio rápido con Claude Code

00:00 / 00:00

Primeros pasos con Claude

Imagina que trabajas en el departamento de IT de una universidad de nueva creación. Tu jefe te llama: por fin hay luz verde para crear el sitio web público con toda la oferta de estudios. Y viene con tres condiciones:

Que esté listo para ayer.
Que el equipo de contenido pueda cambiar textos e imágenes sin tocar código.
Que respete la imagen corporativa.

En esta guía vamos a construir el portal de la Universidad Valvera con Content Island, Claude Code y Astro, partiendo del material que ya nos han entregado:

El equipo de diseño nos ha pasado un PDF con la guía de marca.
El equipo de contenido nos ha devuelto varios ficheros Markdown: uno con el contenido de la página principal y una ficha por cada titulación, siguiendo una plantilla que les preparamos. Ellos mismos han elegido las fotos y han definido el temario de cada estudio en PDF.

El resultado: una página principal, un catálogo de estudios y ocho fichas con su temario en PDF, todo editable desde Content Island sin tocar una línea de código.

Qué es Content Island

Content Island es un headless CMS: el equipo edita allí los textos y las imágenes, y la web los consume por API desde el framework que quieras. En este caso, Astro.

Y aquí viene lo interesante: gracias a su servidor MCP, la IA también puede crear la estructura de contenidos y cargar el contenido a partir de los Markdown.

Requisitos previos

Una cuenta de Content Island con un plan que incluya el token de escritura (Solo Developer, Team o Enterprise). Es el que permite a la IA crear modelos y contenido.
Claude Code instalado y con la sesión iniciada.
Node.js y npm actualizados.

Estructura de carpetas

Partimos de una carpeta raíz con el material de contenido, la guía de marca y una carpeta vacía donde crearemos el proyecto Astro. Al estar todo dentro de la misma raíz, podremos referenciarlo desde los prompts:

campus-valvera/
├── content/                 # lo que ha entregado el equipo de contenido
│   ├── root.md
│   ├── titulaciones/        # 8 fichas + _template.md
│   └── assets/              # 12 imágenes .webp + 8 temarios .pdf
├── guia-de-marca.pdf
└── front/                   # vacía: aquí se crea el proyecto Astro

content/root.md: el hero, las cifras y las tres áreas de conocimiento de la página principal.
content/titulaciones/_template.md: la plantilla vacía que le dimos al equipo de contenido.
content/titulaciones/*.md: una ficha por titulación, con su imagen y su temario.

1. Crea el proyecto en Content Island

Desde el panel de Content Island, crea un proyecto nuevo y llámalo Universidad Valvera. El proyecto queda vacío: tiene una sección Model, donde se definen las estructuras de datos, y otra Content, donde se crean las entradas de cada modelo.

Podríamos crear los modelos a mano, campo a campo, y después cargar las ocho titulaciones una por una. Se puede, claro, pero nos llevaría bastante más tiempo. En su lugar, vamos a darle a Claude el token de escritura para que haga el trabajo pesado.

En la pestaña General del proyecto genera el token de escritura y ten a mano también el token de solo lectura: usaremos los dos.

2. Crea el proyecto Astro

Vamos a empezar desde cero, con un proyecto de Astro completamente vacío. Dentro de la carpeta front/, crea el proyecto e instala las dependencias:

cd front
npm create astro@latest .
npm install

3. Conecta Claude con Content Island (MCP)

Ahora vamos a darle a Claude acceso a Content Island a través de su servidor MCP. Para conectarlo necesitamos el token de escritura del proyecto, que es el que permite crear modelos y cargar contenido.

Ejecuta este comando desde la raíz del proyecto Astro y comprueba que la conexión se ha guardado correctamente:

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

claude mcp get content-island

Al añadirlo, Claude guarda la configuración de los servidores MCP en un archivo local llamado .mcp.json, y ahí dentro está nuestro token de escritura. Así que añade este archivo al .gitignore para no subirlo al repositorio de forma accidental:

# macOS-specific files
.DS_Store

# jetbrains setting folder
.idea/

+ # configuración de servicios mediante MCP ligados a Claude
+ .mcp.json

Importante: el token de escritura puede crear, modificar y borrar contenido y modelos. Trátalo como cualquier otro secreto: no lo subas nunca a Git ni lo uses en el frontend de la web.

4. Instala las skills

Claude ya sabe cómo escribir en Content Island. El siguiente paso es explicarle cómo consumir el contenido, cómo estructurar el proyecto Astro y qué buenas prácticas de diseño frontend debe seguir. Para ello vamos a instalar tres skills.

Las dos primeras son las skills de Content Island, que se instalan con npx:

npx @content-island/ai-skills

En el selector, marca:

content-island-client-api: cómo consultar el contenido.
content-island-astro-pods-architecture: cómo estructurar el proyecto Astro.

Por último, entra en Claude e instala el plugin oficial de diseño frontend, para que el resultado quede pulido ya desde la primera pasada:

/plugin install frontend-design@claude-plugins-official

5. Primer prompt: modela y sube el contenido

Como primer paso vamos a pedirle a Claude que analice la documentación del equipo de contenido (las titulaciones y la información de la página principal), cree el modelo en Content Island y suba todo el contenido.

En el prompt le indicamos que use el MCP de Content Island, dónde está el material del equipo de contenido y unas pautas a tener en cuenta a la hora de modelar:

Tienes acceso a Content Island por MCP, con permisos de escritura, sobre el proyecto "Universidad Valvera", que ahora mismo está vacío.

En la carpeta ../content tienes el material que ha entregado el equipo de contenido de una universidad:

- root.md: contenido de la página principal (hero, cifras y las tres áreas de conocimiento).
- titulaciones/*.md: una ficha por estudio, siguiendo siempre la estructura de titulaciones/_template.md.
- assets/: las imágenes .webp y los temarios en PDF que referencian esas fichas.

Quiero que hagas dos cosas:

1. Diseña el modelo de contenido y créalo en Content Island:
   - Una entrada única para la home.
   - Un modelo "Área" (nombre, slug, descripción, imagen).
   - Un modelo "Titulación" con, al menos: título, slug, área (relación con Área), tipo,
     duración, créditos ECTS, destacado, descripción corta, descripción larga,
     qué aprenderás, imagen de cabecera con su texto alternativo y temario en PDF.
   - Usa el tipo de campo que corresponda en cada caso (texto, texto enriquecido, número,
     booleano, imagen, archivo y relación). No metas todo como texto plano.

2. Carga todo el contenido: las tres áreas, las ocho titulaciones y la home,
   subiendo también las imágenes y los PDF de assets/ y enlazándolos donde toca.

Antes de crear nada, enséñame el modelo que propones y espera mi confirmación.

Claude te enseñará el modelo que propone y esperará tu confirmación antes de crear nada. Cuando termine, vuelve a Content Island, refresca y recorre el resultado: los modelos creados, la relación entre titulación y área, y las ocho fichas cargadas, cada una con su imagen y su PDF.

Consejo: aquí hemos ido rápido para que veas el flujo completo. En un proyecto real usaríamos el modo plan de Claude Code (Shift + Tab) para revisar con calma el modelo y afinar el resultado antes de crear nada.

6. Segundo prompt: el sitio en Astro

Ya tenemos los datos; ahora vamos a implementar el frontend.

Esta web solo va a mostrar la información, así que aquí usamos el token de solo lectura. Añádelo como variable de entorno:

# en front/.env
CONTENT_ISLAND_ACCESS_TOKEN=TOKEN_DE_SOLO_LECTURA

En este prompt le indicamos a Claude que:

Queremos crear el portal web de la universidad, con el contenido del proyecto de Content Island.
Debe seguir la guía de imagen corporativa que está en el PDF.
Tiene que crear la home, el listado de estudios, la ficha de cada estudio y las páginas de área.
Debe seguir una serie de directrices, como la arquitectura de pods de la skill que hemos instalado.

Vas a crear el portal web de la Universidad Valvera en este proyecto Astro,
leyendo el contenido de Content Island con @content-island/api-client
y el token que está en .env.

Sigue la guía de marca de ../guia-de-marca.pdf: colores, tipografías (Fraunces e Inter),
tono, botones, tarjetas, espaciados y radios. Convierte la paleta en variables CSS.

Páginas:

- /                    Home: hero, cifras, las tres áreas y las titulaciones destacadas.
- /estudios            Listado de todas las titulaciones, con filtro por área.
- /estudios/[slug]     Ficha: cabecera con imagen, descripción, qué aprenderás,
                       bloque resumen (área, duración, créditos) y botón de descarga del temario.
- /areas/[slug]        Titulaciones de un área.

Requisitos:

- Genera las rutas dinámicas en tiempo de build con getStaticPaths.
- Tipa el contenido que llega de Content Island.
- Sigue la arquitectura de pods de la skill de Content Island.
- Diseño responsive y accesible (contraste AA, textos alternativos de las imágenes).

Tras unos minutos de procesado, arranca el proyecto y abre el navegador:

npm run dev

El aspecto visual cumple con la imagen corporativa y el sitio está 100 % operativo.

7. Revisa el código

No es código de usar y tirar: está bien estructurado, con su modelo, APIs, mappers y componentes. Echa un vistazo a estas tres piezas:

El cliente y los tipos: la llamada a getContentList con el tipo de la titulación, con autocompletado en el editor.
Una página con getStaticPaths: las fichas de cada titulación se generan en tiempo de build.
Los tokens de marca: las variables CSS con los colores y las tipografías de la guía de marca.

8. El equipo de contenido toma el control

Y ahora lo que más le interesa a quien te ha encargado el portal. Abre Content Island al lado del navegador:

Cambia el titular del hero (o la descripción corta de una titulación).
Publica.
Recarga el sitio y verás el cambio.

El equipo de contenido puede añadir nuevas titulaciones, actualizar textos e imágenes y publicar sin tocar código y sin pedirte nada a ti.

En producción: como las páginas se generan en tiempo de build, despliega la web y conecta un webhook para que cada publicación en Content Island lance un nuevo build. Consulta las guías de despliegue para Vercel, Netlify, GitHub Pages y Cloudflare Pages.

En unos minutos hemos pasado de unos documentos a una web completa conectada a un headless CMS, donde el equipo de contenido gestiona la información sin tocar código.

Siguientes pasos

Servidor MCP: referencia completa de las herramientas que puede usar el agente.
Token de escritura: cómo funciona y cómo mantenerlo seguro.
Skill de la Client API y skill de arquitectura Pods.