---
title: "Tutorial — PageWeave Academy"
---

# Deine erste Website mit einem KI-Agenten

Website anlegen, Agent verbinden, Startseite bauen und veröffentlichen – in einem Durchlauf.

> Lege eine Website an, verbinde deinen Agenten mit dem PageWeave-MCP-Server und gib ihm einen kurzen Brief mit Ziel, Struktur, Inhalt und Grenzen. Baue Section für Section, prüfe die Vorschau und veröffentliche erst nach dem QA-Durchlauf.

Du brauchst für diese Anleitung keine Zeile HTML. Du brauchst einen PageWeave-Zugang, einen Agenten mit MCP-Unterstützung und einen klaren Brief.

Am Ende hast du eine veröffentlichte Startseite auf einer PageWeave-Subdomain – und einen Ablauf, den du für jede weitere Seite wiederholen kannst.

> **Hinweis:** PageWeave ist zugangsbeschränkt. Wenn du noch keinen Zugang hast, stelle eine Anfrage über [Frühzugang](https://pageweave.dev/de/fruehzugang). Die Academy bleibt auch ohne Zugang lesbar; die praktischen Schritte brauchen ihn.

## Was du brauchst

- Einen PageWeave-Account.
- Einen MCP-fähigen Agenten: OpenCode, Claude Code, Codex, Cursor oder vergleichbar.
- Einen Text für die Startseite: Angebot, Zielgruppe, ein Satz zum Nutzen.
- Optional: ein Logo und ein Bild.

## Schritt 1 — Website anlegen

Im PageWeave-Dashboard erstellst du eine Website. Für den Anfang reicht eine Subdomain, zum Beispiel `mein-projekt`. Du kannst später eine eigene Domain verbinden.

Wichtig für den Start:

- **Sprache** auf Deutsch setzen.
- **Indexierbar** zunächst ausschalten. Du willst testen, nicht gefunden werden.
- Die **Live-URL** und die **Dev-URL** notieren. Die Dev-Umgebung zeigt Änderungen sofort; die Live-Umgebung erst nach dem Veröffentlichen.

Wenn dein Agent bereits verbunden ist, kann er die Website auch selbst anlegen:

```
Lege eine neue PageWeave-Website mit der Subdomain "mein-projekt" an.
Sprache: de. Indexierbar: false.
```

## Schritt 2 — Agent verbinden

Der PageWeave-MCP-Server läuft unter:

```
https://pageweave.dev/mcp
```

Trage die URL in deinem MCP-Client ein und bestätige die Anmeldung im Browser. Du autorisierst den Client für dein Konto; ein Passwort wird nicht in der Konfiguration gespeichert.

Nach dem Verbinden solltest du die PageWeave-Werkzeuge sehen. Ein guter erster Test:

```
Liste meine PageWeave-Websites auf.
```

Wenn die Liste kommt, ist die Verbindung da. Wenn nicht, prüfe:

- Ist die URL exakt `https://pageweave.dev/mcp`?
- Hast du die OAuth-Anfrage im Browser abgeschlossen?
- Hat der Client Netzwerkzugriff?
- Ist die Website für deinen Account sichtbar?

> **Achtung:** Ein MCP-Server ist kein Freifahrtschein. Der Agent handelt mit deinen Rechten. Gib ihm nur Zugriff auf die Websites, an denen er arbeiten soll.

## Schritt 3 — Den Brief schreiben

Ein guter Brief ist kürzer, als du denkst. Er beantwortet fünf Fragen:

1. **Was** wird gebaut?
2. **Für wen**?
3. **Welche Struktur**?
4. **Welche Inhalte**?
5. **Welche Grenzen**?

Beispiel:

```
Baue die Startseite für "Malwerk", ein Atelier für Wandgestaltung in Graz.

Ziel: Anfragen für Wandbilder in Büros und Praxen.
Zielgruppe: Innenarchitektur, Praxisinhaber, Büroleiter.
Struktur:
1. Hero mit Angebot und CTA
2. Drei Referenzen
3. Ablauf in drei Schritten
4. Über die Künstlerin
5. Kontakt-CTA
6. Footer

Inhalte: nutze den Text in /inhalte/startseite.md. Erfinde nichts.
Stil: ruhig, warm, viel Weißraum. Keine Stockfotos.
Grenzen: keine Preise nennen, keine Kundenlogos ohne Freigabe.
```

Lege den Text als Datei ab. Der Agent liest sie, statt ihn aus dem Chat zu rekonstruieren.

## Schritt 4 — Section für Section bauen

Lass den Agenten nicht die ganze Seite auf einmal schreiben. Ein besserer Ablauf:

1. **Struktur bestätigen.** Der Agent fasst Sections und Inhalte zusammen. Du sagst ja oder korrigierst.
2. **Header und Footer** als Komponenten.
3. **Hero** bauen, Vorschau ansehen.
4. **Jede weitere Section** einzeln.
5. **Inhalte** einsetzen, Platzhalter entfernen.
6. **Metadaten** setzen.

Nach jeder Section: Vorschau bei 375, 768 und 1440 px. Das klingt langsam. Es ist schneller, als acht Sections gleichzeitig zu korrigieren.

> **Tipp:** Frage den Agenten nach jeder Section: „Was hast du entschieden, das nicht im Brief stand?“ Die Antwort zeigt dir die stillen Annahmen.

## Schritt 5 — Prüfen

Vor dem Veröffentlichen:

- [ ] Alle Texte sind echt, keine Platzhalter.
- [ ] Links funktionieren.
- [ ] Bilder haben Alt-Text.
- [ ] Die Seite funktioniert bei 375 px ohne horizontalen Scroll.
- [ ] Tastatur: alles erreichbar, Fokus sichtbar.
- [ ] Titel und Beschreibung sind gesetzt.
- [ ] Impressum und Datenschutz sind verlinkt.
- [ ] Formulare sind getestet.

Die ausführliche Version steht in [Responsive QA: 375, 768, 1440](/tutorials/responsive-qa).

## Schritt 6 — Veröffentlichen

PageWeave trennt **Entwurf**, **Vorschau** und **Live**. Eine Änderung ist nicht automatisch live.

- Prüfe die Seite in der Dev-Umgebung.
- Veröffentliche die Seite.
- Prüfe die Live-URL in einem privaten Fenster.
- Setze `indexierbar` erst, wenn die Seite wirklich fertig ist.

Wenn du eine eigene Domain willst, verbinde sie später. Für den ersten Durchlauf reicht die Subdomain.

## Was du nicht brauchst

- Kein Theme-Setup, wenn du mit einer einfachen Seite startest.
- Keine Datenbank, keine Tabellen, keine Formulare – solange der Inhalt statisch ist.
- Keine englische Version, bevor die deutsche steht.
- Keine Analytics, bevor du weißt, was du messen willst.

> **Checkpoint:** Eine Seite mit sechs Sections, echten Texten und einer funktionierenden Live-URL ist mehr wert als zehn angefangene Seiten.

## Häufige Fehler

| Fehler | Folge | Fix |
| --- | --- | --- |
| Zu großer Brief | Agent erfindet Details | Fünf Fragen, eine Seite |
| Alles auf einmal | Fehler multiplizieren sich | Section für Section |
| Keine echten Texte | Layout bricht | Inhalte vorher schreiben |
| Sofort indexieren | Unfertige Seite in Suche | `indexierbar` erst am Ende |
| Keine Vorschau | Live-Seite ist der Test | Dev-Umgebung nutzen |

## Weiterlesen

- [PageWeave in 5 Minuten: Seiten, Versionen, Releases](/tutorials/pageweave-in-5-minuten)
- [Responsive QA: 375, 768, 1440](/tutorials/responsive-qa)
- [Figma zu PageWeave: Vom Screendesign zur Website](/tutorials/figma-zu-pageweave)