Phase 1 — Briefing
Discovery & Requirements / Anforderungserhebung
Kunde füllt aus
1 / 5
📋 Briefing
👁 Kunden-Vorschau
Kundendaten / Client Info
Firma / Company
Ansprechperson / Contact
E-Mail
Telefon
Branche / Industry
Standort / Location
Projektziel & Hintergrund / Goal & Background
Was ist das Hauptziel der Website? / What is the main goal?
Zielgruppe / Target Audience
Bestehende Website? / Existing site?
URL (falls vorhanden)
Inhalt & Seitenstruktur / Content & Pages
Benötigte Seiten / Sektionen / Required pages
Sprachen / Languages
Spezialfunktionen / Special features
Texte vorhanden? / Texts available?
Bilder / Fotos? / Images?
Logo / Brand Assets?
Design & Technik / Design & Technology
Stilrichtung / Visual Style
Referenz-Websites (Inspiration)
Domain vorhanden? / Domain?
Domain-Name
Hosting? / Hosting?
Budget / Budget (CHF)
Gewünschtes Go-Live / Target date
Weitere Anmerkungen / Additional notes
Phase 2 — Kick-off
Erstgespräch / Discovery Meeting
Intern + Kunde
2 / 5
Kick-off Checkliste
Gesprächsprotokoll / Meeting Protocol
Datum / Date
Teilnehmer / Participants
Gesprächsnotizen / Meeting notes
Offene Punkte / Open items (Kunde muss liefern)
Vereinbarte nächste Schritte / Agreed next steps
Phase 3 — Umsetzung
Build mit Claude / Implementation
Intern · mit Claude
3 / 5
Meilensteine
Claude Workflow
📓 Bautagebuch
Setup: CMS & Technologie
Kein CMS
Statisches HTML — du pflegst alles. Schnellste Variante.
Für: einfache Sites, kleines Budget
WordPress
Kunde bearbeitet Texte/Bilder selbst. Standard für KMU.
Für: Kunden die selbst ändern wollen
Netlify + CMS
Statische Site, kostenlos gehostet, Web-Editor.
Für: schnelle Sites, kostenbewusst
Technologie
Hosting
CMS-Entscheidung & Begründung
Claude Prompt-Vorlagen
P1
P2
P3
= Datenquelle
🚀 Projekt-Start Prompt
P1: Firma, Ziel, Seiten, Design
P2: Brand, Meeting-Notizen
P3: CMS, Technologie
Direkt editierbar
🎨 Design-Anpassung
P1: Stil
+Kontext
Bitte passe das Design dieser Website an: [Änderung beschreiben].
Wichtig:
• Behalte Struktur und Funktionalität vollständig bei
• Zeige nur die geänderten CSS-Abschnitte, nicht die ganze Datei
• Kommentiere jede Änderung kurz
Direkt editierbar
📱 Mobile-Fix
manuell ausfüllen
Die Website sieht auf dem Smartphone nicht gut aus.
Problem: [konkret beschreiben — z.B. «Navigation überlappt», «Bilder abgeschnitten»]
• Zeige nur den relevanten CSS-Code
• Teste gedanklich auf 375px (iPhone) und 768px (iPad)
Direkt editierbar
➕ Neue Sektion
P1: Stil
manuell
Füge dieser Website eine neue Sektion hinzu:
Sektion: [beschreiben — z.B. «Galerie mit 6 Bildern», «FAQ-Akkordeon»]
• Optisch passend zum bestehenden Design
• Responsive (Mobile: 1 Spalte, Desktop: Grid)
• Zeige vollständigen HTML+CSS-Block + wo einfügen
Direkt editierbar
🔄 Feedback einarbeiten
manuell ausfüllen
Ich habe Feedback vom Kunden erhalten:
1. [Punkt 1]
2. [Punkt 2]
• Ändere nur was im Feedback steht
• Zeige für jede Änderung den geänderten Code-Abschnitt
Direkt editierbar
Bautagebuch
Technische Referenz
Code-Stand, Konventionen und Session-Links — wird automatisch in Folge-Prompts eingefügt.
Aktueller HTML-Code
→ Folge-Prompts
Projekt-Gedächtnis
→ alle Folge-Prompts
Claude Session-Links
Code-Entscheidungen
Für manuelles Einfügen am Prompt-Anfang
Phase 4 — Abnahme
Sign-off Checklist — vor Go-Live
Mit Kunde
4 / 5
Technische Prüfung / Technical Review
Inhaltliche Prüfung / Content Review
Rechtliche Prüfung / Legal Review
Abnahme-Bestätigung / Sign-off
Abnahme erteilt von
Datum Abnahme
Anmerkungen / Notes
Phase 5 — Übergabe
Launch & Handover
🚀 Go-Live
5 / 5
Übergabe-Checkliste / Handover Checklist
Zugangsdaten & Deliverables
Hosting / FTP
CMS / Admin-Zugang
Domain-Verwaltung
Gelieferte Dateien
Support & Abschluss
Support-Modell
Go-Live Datum
Abschlussnotizen / Lessons Learned