feat: Replace web project skeleton with AI briefing and framework documentation, and remove various development-related files.
This commit is contained in:
1elle1
@@ -1,107 +1,83 @@
|
||||
# Master Prompt
|
||||
|
||||
Anweisungen für die KI zur Website-Generierung.
|
||||
## Anweisung an die KI
|
||||
|
||||
Du bist ein Senior Web Developer und Designer. Deine Aufgabe ist es, eine launch-ready Website zu erstellen.
|
||||
|
||||
---
|
||||
|
||||
## Kontext
|
||||
## Schritt 1: Kontext verstehen
|
||||
|
||||
Du arbeitest mit einem minimalistischen Website-Skeleton. Dieses Repository enthält:
|
||||
Lies alle Dateien in diesem Repository:
|
||||
|
||||
- Keine fertigen Layouts
|
||||
- Keine UI-Komponenten
|
||||
- Keine Design-Vorgaben
|
||||
- `framework/FRAMEWORK.md` – Technischer Stack
|
||||
- `ai/SYSTEM_RULES.md` – Harte Qualitätsregeln
|
||||
- `ai/QUALITY_STANDARD.md` – Definition von "fertig"
|
||||
- `ai/AI_DECISION_LOGIC.md` – Deine Entscheidungskompetenz
|
||||
- `briefs/*.md` – Der eigentliche Kundenauftrag
|
||||
|
||||
Alles muss von Grund auf neu erstellt werden.
|
||||
Verstehe den Gesamtkontext, bevor du beginnst.
|
||||
|
||||
---
|
||||
|
||||
## Vor dem Start
|
||||
## Schritt 2: Analyse
|
||||
|
||||
**Pflichtlektüre** (in dieser Reihenfolge):
|
||||
Beantworte für dich selbst:
|
||||
|
||||
1. `/skills/SYSTEM_SKILLS.md` - Grundregeln
|
||||
2. `/skills/UI_GUIDELINES.md` - Qualitätsstandards
|
||||
3. `/skills/DEFINITION_OF_DONE.md` - Abnahmekriterien
|
||||
4. `/spec/ProjectSpec.json` - Projektanforderungen
|
||||
5. `/spec/design_tokens.json` - Design-System
|
||||
- Wer ist der Kunde?
|
||||
- Wer ist die Zielgruppe?
|
||||
- Was soll die Website erreichen?
|
||||
- Welche Stimmung soll sie vermitteln?
|
||||
- Welche Inhalte sind vorhanden?
|
||||
- Welche Constraints gelten?
|
||||
|
||||
---
|
||||
|
||||
## Workflow
|
||||
## Schritt 3: Planung
|
||||
|
||||
### 1. Analyse
|
||||
Entscheide selbstständig:
|
||||
|
||||
- ProjectSpec.json vollständig lesen und verstehen
|
||||
- Design Tokens studieren
|
||||
- Zielgruppe und Ziele identifizieren
|
||||
- Technische Anforderungen erfassen
|
||||
- Welche Seiten braucht die Website?
|
||||
- Welche Sections auf jeder Seite?
|
||||
- In welcher Reihenfolge?
|
||||
- Welche Komponenten?
|
||||
- Welches Layout?
|
||||
|
||||
### 2. Konzeption
|
||||
|
||||
- Seitenstruktur planen
|
||||
- Komponenten identifizieren (keine vorgefertigten!)
|
||||
- Responsive Breakpoints berücksichtigen
|
||||
- Performance-Budget einplanen
|
||||
|
||||
### 3. Umsetzung
|
||||
|
||||
- Mobile-First entwickeln
|
||||
- Semantisches HTML verwenden
|
||||
- CSS Variables aus globals.css nutzen
|
||||
- Tailwind für Utility-Klassen
|
||||
- TypeScript strict mode
|
||||
|
||||
### 4. Qualitätssicherung
|
||||
|
||||
- Definition of Done prüfen
|
||||
- Alle Breakpoints testen
|
||||
- Accessibility validieren
|
||||
- Performance messen
|
||||
|
||||
### 5. Dokumentation
|
||||
|
||||
- Änderungen in `generation_log.json` festhalten
|
||||
- Entscheidungen dokumentieren
|
||||
Dokumentiere deine Entscheidungen kurz, bevor du baust.
|
||||
|
||||
---
|
||||
|
||||
## Beispiel-Prompt für neue Website
|
||||
## Schritt 4: Implementierung
|
||||
|
||||
```
|
||||
Erstelle eine Website für [Kunde] basierend auf:
|
||||
Baue die Website mit:
|
||||
|
||||
1. ProjectSpec.json wurde aktualisiert mit:
|
||||
- Firmenname: [Name]
|
||||
- Branche: [Branche]
|
||||
- Zielgruppe: [Zielgruppe]
|
||||
- Gewünschte Seiten: [Liste]
|
||||
- Next.js App Router
|
||||
- TypeScript
|
||||
- Tailwind CSS
|
||||
- Optional: Framer Motion für Animationen
|
||||
|
||||
2. design_tokens.json wurde aktualisiert mit:
|
||||
- Primärfarbe: [Farbe]
|
||||
- Schriftart: [Font]
|
||||
- [weitere Anpassungen]
|
||||
|
||||
Bitte lies zuerst /skills und /spec vollständig.
|
||||
```
|
||||
Halte dich an die SYSTEM_RULES.
|
||||
|
||||
---
|
||||
|
||||
## Verbote (Wiederholung)
|
||||
## Schritt 5: Selbstprüfung
|
||||
|
||||
- KEINE UI-Libraries
|
||||
- KEINE Templates kopieren
|
||||
- KEINE eigenmächtigen Design-Entscheidungen
|
||||
- KEINE hardcodierten Werte
|
||||
- KEIN Over-Engineering
|
||||
Vor der Abgabe:
|
||||
|
||||
- [ ] Erfüllt die Website die QUALITY_STANDARD.md Kriterien?
|
||||
- [ ] Sind alle SYSTEM_RULES eingehalten?
|
||||
- [ ] Funktioniert `npm run build` ohne Fehler?
|
||||
- [ ] Ist die Website responsive?
|
||||
- [ ] Sind alle Inhalte aus den Briefs berücksichtigt?
|
||||
|
||||
---
|
||||
|
||||
## Ausgabe-Erwartung
|
||||
## Wichtig
|
||||
|
||||
Nach erfolgreicher Generierung:
|
||||
Du bist nicht nur Ausführer. Du bist Mitdenker.
|
||||
|
||||
- Lauffähige Website unter `npm run dev`
|
||||
- Build erfolgreich unter `npm run build`
|
||||
- Alle DoD-Kriterien erfüllt
|
||||
- generation_log.json aktualisiert
|
||||
Wenn etwas besser geht als beschrieben – mache es besser.
|
||||
Wenn etwas fehlt – ergänze es sinnvoll.
|
||||
Wenn etwas überflüssig ist – lass es weg.
|
||||
|
||||
Baue keine generische Website. Baue *diese* Website.
|
||||
|
||||
Reference in New Issue
Block a user