Quick Start with Claude Code

00:00 / 00:00

1x

0.25x 0.5x 0.75x 1x 1.25x 1.5x 1.75x 2x

Getting Started with Claude

Imagine you work in the IT department of a newly founded university. Your boss calls: the public website with the full range of programmes has finally been green-lit. And it comes with three conditions:

• It has to be ready yesterday.
• The content team must be able to change texts and images without touching the code.
• It has to follow the corporate identity.

In this guide we will build the Valvera University portal with Content Island, Claude Code and Astro, starting from the material we have already been given:

• The design team has sent us a PDF with the brand guidelines.
• The content team has sent back several Markdown files: one with the content of the home page and one page per programme, following a template we prepared for them. They chose the photos themselves and wrote the syllabus of each programme as a PDF.

The result: a home page, a programme catalogue and eight programme pages with their PDF syllabus, all editable from Content Island without touching a single line of code.

What is Content Island

Content Island is a headless CMS: the team edits the texts and images there, and the website consumes them through an API from the framework of your choice. In this case, Astro.

And here comes the interesting part: thanks to its MCP server, the AI can also create the content structure and load the content from the Markdown files.

Prerequisites

• A Content Island account on a plan that includes the write token (Solo Developer, Team or Enterprise). It is what allows the AI to create models and content.
• Claude Code installed and logged in.
• Up-to-date Node.js and npm.

Folder structure

We start from a root folder with the content material, the brand guidelines and an empty folder where we will create the Astro project. Since everything lives under the same root, we can reference it from the prompts:

campus-valvera/
├── content/                 # what the content team delivered
│   ├── root.md
│   ├── programmes/          # 8 programme pages + _template.md
│   └── assets/              # 12 .webp images + 8 .pdf syllabi
├── brand-guidelines.pdf
└── front/                   # empty: the Astro project goes here

• content/root.md: the hero, the key figures and the three areas of study of the home page.
• content/programmes/_template.md: the empty template we gave the content team.
• content/programmes/*.md: one page per programme, with its image and its syllabus.

1. Create the project in Content Island

From the Content Island dashboard, create a new project and name it Valvera University. The project starts empty: it has a Model section, where the data structures are defined, and a Content section, where the entries of each model are created.

We could create the models by hand, field by field, and then load the eight programmes one by one. It can be done, of course, but it would take much longer. Instead, we are going to give Claude the write token so it does the heavy lifting.

In the project's General tab, generate the write token and also keep the read-only token at hand: we will use both.

2. Create the Astro project

We are going to start from scratch, with a completely empty Astro project. Inside the front/ folder, create the project and install the dependencies:

cd front
npm create astro@latest .
npm install

3. Connect Claude to Content Island (MCP)

Now we are going to give Claude access to Content Island through its MCP server. To connect it we need the project's write token, which is the one that allows creating models and loading content.

Run this command from the root of the Astro project and check that the connection has been saved correctly:

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

claude mcp get content-island

When you add it, Claude saves the MCP server configuration in a local file called .mcp.json, and our write token is inside it. So add this file to .gitignore to avoid pushing it to the repository by accident:

# macOS-specific files
.DS_Store

# jetbrains setting folder
.idea/

+ # MCP server configuration used by Claude
+ .mcp.json

Important: the write token can create, modify and delete content and models. Treat it like any other secret: never commit it to Git and never use it in the website's frontend.

4. Install the skills

Claude already knows how to write to Content Island. The next step is to teach it how to consume the content, how to structure the Astro project and which frontend design best practices to follow. To do so, we are going to install three skills.

The first two are the Content Island skills, installed with npx:

npx @content-island/ai-skills

In the selector, check:

• content-island-client-api: how to query the content.
• content-island-astro-pods-architecture: how to structure the Astro project.

Finally, open Claude and install the official frontend design plugin, so the result looks polished from the very first pass:

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

5. First prompt: model and upload the content

As a first step, we are going to ask Claude to analyse the content team's material (the programmes and the home page information), create the model in Content Island and upload all the content.

In the prompt we tell it to use the Content Island MCP, where the content team's material is, and a few guidelines to keep in mind when modelling:

You have access to Content Island via MCP, with write permissions, on the "Valvera University" project, which is currently empty.

In the ../content folder you'll find the material delivered by a university's content team:

- root.md: home page content (hero, key figures and the three areas of study).
- programmes/*.md: one page per programme, always following the structure of programmes/_template.md.
- assets/: the .webp images and the PDF syllabi referenced by those pages.

I want you to do two things:

1. Design the content model and create it in Content Island:
   - A single entry for the home page.
   - An "Area" model (name, slug, description, image).
   - A "Programme" model with, at least: title, slug, area (relation to Area), type,
     duration, ECTS credits, featured, short description, long description,
     what you'll learn, header image with its alt text, and PDF syllabus.
   - Use the appropriate field type in each case (text, rich text, number,
     boolean, image, file and relation). Don't put everything in as plain text.

2. Load all the content: the three areas, the eight programmes and the home page,
   also uploading the images and PDFs from assets/ and linking them where they belong.

Before creating anything, show me the model you propose and wait for my confirmation.

Claude will show you the model it proposes and wait for your confirmation before creating anything. When it finishes, go back to Content Island, refresh and go through the result: the models created, the relation between programme and area, and the eight programmes loaded, each with its image and its PDF.

Tip: we went fast here so you can see the whole workflow. In a real project we would use Claude Code's plan mode (Shift + Tab) to review the model carefully and fine-tune the result before creating anything.

6. Second prompt: the Astro website

We have the data; now we are going to build the frontend.

This website will only display the information, so here we use the read-only token. Add it as an environment variable:

# in front/.env
CONTENT_ISLAND_ACCESS_TOKEN=READ_ONLY_TOKEN

In this prompt we tell Claude that:

• We want to build the university's web portal, with the content from the Content Island project.
• It must follow the corporate identity guidelines in the PDF.
• It has to create the home page, the programme list, the page of each programme and the area pages.
• It must follow a set of guidelines, such as the pods architecture from the skill we installed.

You're going to build the Valvera University website in this Astro project, reading the content from Content Island with @content-island/api-client and the token in .env.

Follow the brand guidelines in ../brand-guidelines.pdf: colours, typefaces (Fraunces and Inter), tone, buttons, cards, spacing and border radii. Turn the palette into CSS variables.

Pages:

- /                     Home: hero, key figures, the three areas and the featured programmes.
- /programmes           List of all programmes, with a filter by area.
- /programmes/[slug]    Programme page: header with image, description, what you'll learn,
                        summary block (area, duration, credits) and a button to download the syllabus.
- /areas/[slug]         Programmes in an area.

Requirements:

- Generate the dynamic routes at build time with getStaticPaths.
- Type the content coming from Content Island.
- Follow the pods architecture from the Content Island skill.
- Responsive and accessible design (AA contrast, alt text on images).

After a few minutes of processing, start the project and open the browser:

npm run dev

The look and feel follows the corporate identity and the website is 100% functional.

7. Review the code

This is not throwaway code: it is well structured, with its model, APIs, mappers and components. Take a look at these three pieces:

• The client and the types: the getContentList call with the programme type, with autocompletion in the editor.
• A page with getStaticPaths: each programme page is generated at build time.
• The brand tokens: the CSS variables with the colours and typefaces from the brand guidelines.

8. The content team takes over

And now, what matters most to whoever asked you for the portal. Open Content Island next to the browser:

1. Change the hero headline (or the short description of a programme).
2. Publish.
3. Reload the website and you will see the change.

The content team can add new programmes, update texts and images and publish without touching the code, and without asking you for anything.

In production: since the pages are generated at build time, deploy the website and connect a webhook so that every publication in Content Island triggers a new build. Check the deployment guides for Vercel, Netlify, GitHub Pages and Cloudflare Pages.

In a few minutes we have gone from a set of documents to a complete website connected to a headless CMS, where the content team manages the information without touching the code.

Next steps

• MCP Server: full reference of the tools the agent can use.
• Write token: how it works and how to keep it safe.
• Client API skill and Pods Architecture skill.