Initialize client project from skeleton
Client: Sportbox-Reutte Generated: 2026-01-30T10:35:33.399Z
This commit is contained in:
Prototype Generator
48
READ_FIRST.md
Normal file
48
READ_FIRST.md
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
# READ_FIRST.md
|
||||||
|
|
||||||
|
> Projekt: **Sportbox-Reutte**
|
||||||
|
> Generiert am: 2026-01-30
|
||||||
|
|
||||||
|
## Über dieses Repository
|
||||||
|
|
||||||
|
Dieses Repository wurde automatisch aus dem **WebsiteSkeleton** generiert.
|
||||||
|
Es enthält alle Konfigurationen, Design-Tokens und Prompts, die für den Website-Build benötigt werden.
|
||||||
|
|
||||||
|
## Regeln
|
||||||
|
|
||||||
|
1. **Lies zuerst den Masterprompt:** `prompts/master_prompt.md`
|
||||||
|
2. **Skill-Hierarchie beachten:** SYSTEM_SKILLS > UI_GUIDELINES > DEFINITION_OF_DONE > CLIENT_OVERRIDES
|
||||||
|
3. **Design nur aus Tokens:** Alle Farben, Abstände, Schriftgrößen kommen aus `theme/globals.css`.
|
||||||
|
4. **Keine Templates:** Jede Seite wird individuell gebaut – keine vorgefertigten Layouts.
|
||||||
|
5. **TypeScript strict:** Kein `any`, keine impliziten Typen.
|
||||||
|
6. **Keine Secrets:** API-Keys, Tokens etc. gehören in `.env`, NIEMALS ins Repository.
|
||||||
|
|
||||||
|
## Dateistruktur
|
||||||
|
|
||||||
|
```
|
||||||
|
├── app/ # Next.js App Router
|
||||||
|
├── skills/ # Globale + Client Skills
|
||||||
|
│ ├── SYSTEM_SKILLS.md
|
||||||
|
│ ├── UI_GUIDELINES.md
|
||||||
|
│ ├── DEFINITION_OF_DONE.md
|
||||||
|
│ └── CLIENT_OVERRIDES.md
|
||||||
|
├── spec/ # Projektspezifikation
|
||||||
|
│ ├── ProjectSpec.json
|
||||||
|
│ └── design_tokens.json
|
||||||
|
├── theme/ # CSS (Single Source of Truth)
|
||||||
|
│ ├── globals.css
|
||||||
|
│ └── stylesheet.css
|
||||||
|
├── prompts/ # AI Build Prompts
|
||||||
|
│ └── master_prompt.md
|
||||||
|
└── docker/ # Docker Setup
|
||||||
|
```
|
||||||
|
|
||||||
|
## Nächste Schritte
|
||||||
|
|
||||||
|
1. Öffne `prompts/master_prompt.md`
|
||||||
|
2. Folge der Lesereihenfolge
|
||||||
|
3. Baue die Website gemäß Spec und Design-Tokens
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Generiert von website-prototype-generator.*
|
||||||
@@ -1,4 +1,18 @@
|
|||||||
{
|
[
|
||||||
"version": "1.0.0",
|
{
|
||||||
"entries": []
|
"projectId": "6c1a11a7-0542-4b56-94de-9db673dc3dac",
|
||||||
}
|
"generatedAt": "2026-01-30T10:35:33.399Z",
|
||||||
|
"generator": "website-prototype-generator",
|
||||||
|
"specVersion": "1.0",
|
||||||
|
"llmUsed": true,
|
||||||
|
"artifacts": [
|
||||||
|
"design_tokens.json",
|
||||||
|
"CLIENT_OVERRIDES.md",
|
||||||
|
"master_prompt.md",
|
||||||
|
"globals.css",
|
||||||
|
"stylesheet.css",
|
||||||
|
"READ_FIRST.md",
|
||||||
|
"ProjectSpec.json"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
@@ -1,107 +1,245 @@
|
|||||||
# Master Prompt
|
# Website-Build Masterprompt v2
|
||||||
|
|
||||||
Anweisungen für die KI zur Website-Generierung.
|
> Projekt: **Sportbox-Reutte** | Branche: Sport / Fitness | Sprache: de
|
||||||
|
|
||||||
|
## 0. Research & Kontext
|
||||||
|
|
||||||
|
### Branchen-Insights
|
||||||
|
Zunehmende Integration von Technologie, wie Fitness-Apps und Wearables, die Nutzererfahrung personalisieren.,Wachsender Trend zu Online-Training und virtuellen Fitnessangeboten, insbesondere nach der Pandemie.,Steigende Nachfrage nach nachhaltigen und umweltfreundlichen Fitnesslösungen und Produkten.,Fokus auf ganzheitliches Wohlbefinden, das körperliche Fitness, mentale Gesundheit und Ernährung umfasst.,Zunahme von Community-basierten Fitnessangeboten, die soziale Interaktion und Unterstützung fördern.
|
||||||
|
|
||||||
|
### Wettbewerbsanalyse
|
||||||
|
Wettbewerber in der Sport- und Fitnessbranche nutzen oft ein minimalistisches Design mit klaren Call-to-Action-Elementen. Häufige Features sind Buchungssysteme für Kurse, Mitgliederbereiche und Blogs mit Fitness-Tipps. Gute Wettbewerber bieten ansprechende visuelle Inhalte und Testimonials. Eine Lücke besteht oft in der Personalisierung der Nutzererfahrung und der Integration von Community-Elementen.
|
||||||
|
|
||||||
|
### SEO-Keywords
|
||||||
|
Fitnessstudio Reutte, Sportangebote Reutte, Personal Training Reutte, Gruppenkurse Fitness, Gesundheit und Fitness, Online Fitnesskurse, Fitness für Anfänger, Yoga Reutte, Krafttraining Reutte, Ernährungsberatung Reutte, Fitness Community, Sportevents Reutte, Wellness und Fitness, Fitness Trends 2023
|
||||||
|
|
||||||
|
### Content-Richtlinien
|
||||||
|
Die Website sollte eine professionelle, aber auch nahbare Tonalität haben. Die Botschaften sollten motivierend und inspirierend sein, mit einem klaren Fokus auf die Vorteile der Mitgliedschaft und der angebotenen Dienstleistungen. Wertversprechen sollten die individuelle Betreuung, die Vielfalt der Angebote und die Community-Atmosphäre hervorheben.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Kontext
|
## 1. Lesereihenfolge (PFLICHT)
|
||||||
|
|
||||||
Du arbeitest mit einem minimalistischen Website-Skeleton. Dieses Repository enthält:
|
**Du MUSST die folgenden Dateien in dieser EXAKTEN Reihenfolge lesen**, bevor du irgendeine Zeile Code schreibst:
|
||||||
|
|
||||||
- Keine fertigen Layouts
|
1. `READ_FIRST.md` (Projektübersicht & Regeln)
|
||||||
- Keine UI-Komponenten
|
2. `skills/SYSTEM_SKILLS.md` (globale System-Skills – **nicht überschreibbar**)
|
||||||
- Keine Design-Vorgaben
|
3. `skills/UI_GUIDELINES.md` (UI-Richtlinien – **nicht überschreibbar**)
|
||||||
|
4. `skills/DEFINITION_OF_DONE.md` (Definition of Done – **nicht überschreibbar**)
|
||||||
|
5. `skills/CLIENT_OVERRIDES.md` (kundenspezifische Ergänzungen)
|
||||||
|
6. `spec/ProjectSpec.json` (Projektspezifikation)
|
||||||
|
7. `spec/design_tokens.json` (Design-Token – **Single Source of Truth**)
|
||||||
|
8. `theme/globals.css` (CSS Custom Properties – **Single Source of Truth**)
|
||||||
|
9. `theme/stylesheet.css` (Strukturelles CSS-Framework)
|
||||||
|
|
||||||
Alles muss von Grund auf neu erstellt werden.
|
**Erst nach dem Lesen aller Dateien darfst du mit der Implementierung beginnen.**
|
||||||
|
|
||||||
|
## 2. Strikte Regeln (Non-Negotiable)
|
||||||
|
|
||||||
|
### Design & Styling
|
||||||
|
- **Keine Templates:** Verwende KEINE vorgefertigten UI-Templates, Themes oder Section-Bibliotheken (kein shadcn, kein tailwindui, keine Copy-Paste-Sections).
|
||||||
|
- **Design nur aus Tokens:** Jede Farbe, jedes Spacing, jede Schriftgröße MUSS aus `globals.css` Custom Properties kommen. KEINE Hardcoded-Werte im Code.
|
||||||
|
- **Keine UI-Libraries:** Kein shadcn/ui, kein Material UI, kein Chakra UI, kein daisyUI. Nur native Tailwind CSS v4 + Custom Components.
|
||||||
|
- **Tailwind v4:** Nutze die neuen v4 Features (CSS-first config, `@theme` directive).
|
||||||
|
|
||||||
|
### Architecture
|
||||||
|
- **Skill-Hierarchie:** `SYSTEM_SKILLS > UI_GUIDELINES > DEFINITION_OF_DONE > CLIENT_OVERRIDES`
|
||||||
|
- CLIENT_OVERRIDES dürfen globale Regeln NICHT brechen, nur ergänzen.
|
||||||
|
- **TypeScript strict:** Alle Dateien in TypeScript. `strict: true` in tsconfig. Keine `any` Types (außer bei externen Libraries ohne Types).
|
||||||
|
- **Stack:** Next.js 16 App Router, React 19, TypeScript 5+, Tailwind CSS v4, framer-motion (sparsam), lucide-react.
|
||||||
|
- **File Structure:** Folge der Next.js 16 App Router Convention. Routes in `app/`, Components in `components/`.
|
||||||
|
- **No New Dependencies:** Füge KEINE neuen npm packages ohne explizite Begründung hinzu. Nutze den vorhandenen Stack.
|
||||||
|
|
||||||
|
### Performance & Accessibility
|
||||||
|
- **framer-motion sparsam:** Nur für key interactions. Keine Animationen auf jedem Element.
|
||||||
|
- **Lenis:** NICHT aktivieren, es sei denn CLIENT_OVERRIDES fordert es explizit.
|
||||||
|
- **Accessibility:** Semantisches HTML5, ARIA-Labels wo nötig, Keyboard-Navigation, WCAG AA minimum.
|
||||||
|
- **Performance:** Keine unnötigen Client Components. Nutze Server Components wo möglich. Next.js Image für alle Bilder.
|
||||||
|
|
||||||
|
## 3. Markenidentität
|
||||||
|
|
||||||
|
- **Kunde:** Sportbox-Reutte
|
||||||
|
- **Branche:** Sport / Fitness
|
||||||
|
- **Tonalität:** Professionell aber auch nahbar
|
||||||
|
- **Sprache:** de (Alle Texte in dieser Sprache!)
|
||||||
|
- **Locale:** de-AT
|
||||||
|
- **Primärfarbe:** #000000
|
||||||
|
- **Sekundärfarbe:** #FFFFFF
|
||||||
|
- **Akzentfarbe:** #d6d6d6
|
||||||
|
- **CTA Primary:** "Jetzt Termin buchen"
|
||||||
|
- **CTA Secondary:** "Mehr über uns erfahren"
|
||||||
|
|
||||||
|
## 4. Seitenstruktur & Anforderungen
|
||||||
|
|
||||||
|
### Startseite (`/`)
|
||||||
|
|
||||||
|
**Beschreibung:** Willkommen bei Sportbox Reutte – Ihr Fitnessstudio für individuelle Trainingspläne und persönliche Betreuung.
|
||||||
|
|
||||||
|
**Route:** `app/page.tsx`
|
||||||
|
|
||||||
|
**Mindestanforderungen:**
|
||||||
|
- Responsive (Mobile-first)
|
||||||
|
- Semantisches HTML (header, main, section, footer)
|
||||||
|
- SEO Meta Tags (title, description, og:tags)
|
||||||
|
- Call-to-Actions mit "Jetzt Termin buchen" und "Mehr über uns erfahren"
|
||||||
|
- Accessibility (ARIA labels, alt texts, keyboard nav)
|
||||||
|
|
||||||
|
### Über Uns (`/über-uns`)
|
||||||
|
|
||||||
|
**Beschreibung:** Erfahren Sie mehr über unsere Philosophie, unser Team und unsere Community bei Sportbox Reutte.
|
||||||
|
|
||||||
|
**Route:** `app/über-uns/page.tsx`
|
||||||
|
|
||||||
|
**Mindestanforderungen:**
|
||||||
|
- Responsive (Mobile-first)
|
||||||
|
- Semantisches HTML (header, main, section, footer)
|
||||||
|
- SEO Meta Tags (title, description, og:tags)
|
||||||
|
- Call-to-Actions mit "Jetzt Termin buchen" und "Mehr über uns erfahren"
|
||||||
|
- Accessibility (ARIA labels, alt texts, keyboard nav)
|
||||||
|
|
||||||
|
### Aktuelles (`/aktuelles`)
|
||||||
|
|
||||||
|
**Beschreibung:** Bleiben Sie auf dem Laufenden über Neuigkeiten, Events und Angebote in unserem Fitnessstudio.
|
||||||
|
|
||||||
|
**Route:** `app/aktuelles/page.tsx`
|
||||||
|
|
||||||
|
**Mindestanforderungen:**
|
||||||
|
- Responsive (Mobile-first)
|
||||||
|
- Semantisches HTML (header, main, section, footer)
|
||||||
|
- SEO Meta Tags (title, description, og:tags)
|
||||||
|
- Call-to-Actions mit "Jetzt Termin buchen" und "Mehr über uns erfahren"
|
||||||
|
- Accessibility (ARIA labels, alt texts, keyboard nav)
|
||||||
|
|
||||||
|
### Studio (`/studio`)
|
||||||
|
|
||||||
|
**Beschreibung:** Entdecken Sie unsere modernen Räumlichkeiten und hochwertigen Fitnessgeräte bei Sportbox Reutte.
|
||||||
|
|
||||||
|
**Route:** `app/studio/page.tsx`
|
||||||
|
|
||||||
|
**Mindestanforderungen:**
|
||||||
|
- Responsive (Mobile-first)
|
||||||
|
- Semantisches HTML (header, main, section, footer)
|
||||||
|
- SEO Meta Tags (title, description, og:tags)
|
||||||
|
- Call-to-Actions mit "Jetzt Termin buchen" und "Mehr über uns erfahren"
|
||||||
|
- Accessibility (ARIA labels, alt texts, keyboard nav)
|
||||||
|
|
||||||
|
### Leistungen (`/leistungen`)
|
||||||
|
|
||||||
|
**Beschreibung:** Informieren Sie sich über unser vielfältiges Kursangebot und individuelle Trainingsmöglichkeiten.
|
||||||
|
|
||||||
|
**Route:** `app/leistungen/page.tsx`
|
||||||
|
|
||||||
|
**Mindestanforderungen:**
|
||||||
|
- Responsive (Mobile-first)
|
||||||
|
- Semantisches HTML (header, main, section, footer)
|
||||||
|
- SEO Meta Tags (title, description, og:tags)
|
||||||
|
- Call-to-Actions mit "Jetzt Termin buchen" und "Mehr über uns erfahren"
|
||||||
|
- Accessibility (ARIA labels, alt texts, keyboard nav)
|
||||||
|
|
||||||
|
## 5. Technische Anforderungen
|
||||||
|
|
||||||
|
**Features:**
|
||||||
|
- Kontaktformular
|
||||||
|
- Blog
|
||||||
|
- FAQ
|
||||||
|
- Team-Seite
|
||||||
|
- SEO Optimierung
|
||||||
|
|
||||||
|
**Domain:** sportbox-reutte.at
|
||||||
|
**Analytics:** Nicht angegeben
|
||||||
|
**Hosting:** Nicht angegeben
|
||||||
|
|
||||||
|
## 6. Implementierungs-Reihenfolge
|
||||||
|
|
||||||
|
Befolge diese Schritte in exakter Reihenfolge:
|
||||||
|
|
||||||
|
1. **Plan erstellen:** Kurzer Plan (3-5 Bullet Points) mit deinem Implementierungsansatz.
|
||||||
|
2. **Layout-Components:** Header, Footer, Navigation (in `components/layout/`).
|
||||||
|
3. **Shared Components:** Buttons, Cards, Forms (in `components/ui/`).
|
||||||
|
4. **Seiten implementieren:** In der Reihenfolge der Seitenstruktur (Abschnitt 4).
|
||||||
|
5. **SEO & Metadata:** Für jede Seite `metadata` export mit title, description, og:tags.
|
||||||
|
6. **Accessibility Check:** Semantisches HTML, ARIA, Keyboard-Navigation prüfen.
|
||||||
|
7. **Performance Check:** Unnötige Client Components zu Server Components refactoren.
|
||||||
|
8. **Build & Lint:** `npm run build && npm run lint` fehlerfrei.
|
||||||
|
|
||||||
|
## 7. Offene Fragen (mit Client klären)
|
||||||
|
|
||||||
|
**Die folgenden Informationen fehlen und müssen mit dem Client geklärt werden:**
|
||||||
|
|
||||||
|
- **technical.hosting** (technical): Welcher Hosting-Anbieter wird verwendet?
|
||||||
|
- **technical.analytics** (technical): Welche Analytics-Lösung soll implementiert werden?
|
||||||
|
|
||||||
|
**WICHTIG:** Für diese Felder darfst du NICHT raten. Frage den Client oder nutze Platzhalter-Werte mit klarer Kennzeichnung (z.B. "PLACEHOLDER: ...").
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Vor dem Start
|
## 8. Definition of Done (Abnahme-Checkliste)
|
||||||
|
|
||||||
**Pflichtlektüre** (in dieser Reihenfolge):
|
**Bevor du die Implementierung als fertig markierst, MÜSSEN alle diese Punkte erfüllt sein:**
|
||||||
|
|
||||||
1. `/skills/SYSTEM_SKILLS.md` - Grundregeln
|
### Build & Code Quality
|
||||||
2. `/skills/UI_GUIDELINES.md` - Qualitätsstandards
|
- [ ] `npm run build` läuft fehlerfrei durch (0 Errors, 0 Warnings)
|
||||||
3. `/skills/DEFINITION_OF_DONE.md` - Abnahmekriterien
|
- [ ] `npm run lint` meldet keine Fehler (0 Errors, Warnings OK)
|
||||||
4. `/spec/ProjectSpec.json` - Projektanforderungen
|
- [ ] TypeScript strict mode aktiv, keine `any` types
|
||||||
5. `/spec/design_tokens.json` - Design-System
|
- [ ] Alle Imports funktionieren, keine broken imports
|
||||||
|
|
||||||
|
### Funktionalität
|
||||||
|
- [ ] Alle Seiten aus Seitenstruktur (Abschnitt 4) existieren und sind erreichbar
|
||||||
|
- [ ] Navigation funktioniert zwischen allen Seiten
|
||||||
|
- [ ] Alle CTAs ("Jetzt Termin buchen", "Mehr über uns erfahren") funktional
|
||||||
|
- [ ] Kontaktformular (falls vorhanden) validiert Eingaben
|
||||||
|
|
||||||
|
### Design & Styling
|
||||||
|
- [ ] Alle Farben kommen aus `globals.css` Custom Properties (keine Hardcoded Colors)
|
||||||
|
- [ ] Alle Spacings nutzen Design Tokens (keine Magic Numbers)
|
||||||
|
- [ ] Typography nutzt Design Token Scales
|
||||||
|
- [ ] Brand-konform (Farben, Fonts, Tonalität)
|
||||||
|
|
||||||
|
### Responsive & Cross-Browser
|
||||||
|
- [ ] Mobile (320px - 767px): Layout funktioniert, Navigation collapsed
|
||||||
|
- [ ] Tablet (768px - 1023px): Layout angepasst
|
||||||
|
- [ ] Desktop (1024px+): Volle Breite, optimales Layout
|
||||||
|
- [ ] Touch-Targets mindestens 44x44px (Mobile)
|
||||||
|
|
||||||
|
### Accessibility (WCAG AA)
|
||||||
|
- [ ] Semantisches HTML5 (header, nav, main, section, article, footer)
|
||||||
|
- [ ] Alle Bilder haben alt-Texte
|
||||||
|
- [ ] Farbkontraste min. 4.5:1 für Text, 3:1 für UI (automatisch geprüft)
|
||||||
|
- [ ] Keyboard-Navigation funktioniert (Tab, Enter, Escape)
|
||||||
|
- [ ] Focus-States sichtbar
|
||||||
|
- [ ] ARIA-Labels wo semantisches HTML nicht ausreicht
|
||||||
|
|
||||||
|
### Performance
|
||||||
|
- [ ] Unnötige Client Components zu Server Components refactored
|
||||||
|
- [ ] Bilder nutzen Next.js `<Image>` Component
|
||||||
|
- [ ] Keine blocking Scripts in `<head>`
|
||||||
|
- [ ] framer-motion nur sparsam eingesetzt (nicht überall)
|
||||||
|
|
||||||
|
### SEO
|
||||||
|
- [ ] Jede Seite hat `metadata` export (title, description)
|
||||||
|
- [ ] Open Graph Tags gesetzt (og:title, og:description, og:image)
|
||||||
|
- [ ] Strukturierte Daten (JSON-LD) für Organisation (Homepage)
|
||||||
|
|
||||||
|
### Legal & Content
|
||||||
|
- [ ] Impressum-Seite vorhanden (falls in Seitenstruktur)
|
||||||
|
- [ ] Datenschutz-Seite vorhanden (falls in Seitenstruktur)
|
||||||
|
- [ ] Alle Texte auf de
|
||||||
|
|
||||||
|
## 9. Stop Conditions
|
||||||
|
|
||||||
|
**In folgenden Situationen MUSST du stoppen und NICHT weitermachen:**
|
||||||
|
|
||||||
|
1. **Unklare Anforderungen:** Wenn Spec-Felder "Nicht angegeben" enthalten oder unklar sind → Frage den Client (siehe Abschnitt 7).
|
||||||
|
2. **Widersprüche:** Wenn CLIENT_OVERRIDES gegen SYSTEM_SKILLS/UI_GUIDELINES verstoßen → Melde das Problem.
|
||||||
|
3. **Fehlende Assets:** Wenn Logo, Bilder oder andere Assets fehlen → Nutze Platzhalter mit klarer Kennzeichnung.
|
||||||
|
4. **Build Errors:** Wenn `npm run build` fehlschlägt und du es nicht beheben kannst → Melde den Fehler mit Stack Trace.
|
||||||
|
|
||||||
|
**NIEMALS:**
|
||||||
|
- Raten bei unklaren Requirements
|
||||||
|
- Globale Skills (SYSTEM_SKILLS/UI_GUIDELINES/DEFINITION_OF_DONE) ignorieren
|
||||||
|
- Neue Dependencies ohne Begründung hinzufügen
|
||||||
|
- UI-Templates oder Copy-Paste-Code nutzen
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Workflow
|
*Generiert von website-prototype-generator v2 am 2026-01-30.*
|
||||||
|
|
||||||
### 1. Analyse
|
|
||||||
|
|
||||||
- ProjectSpec.json vollständig lesen und verstehen
|
|
||||||
- Design Tokens studieren
|
|
||||||
- Zielgruppe und Ziele identifizieren
|
|
||||||
- Technische Anforderungen erfassen
|
|
||||||
|
|
||||||
### 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
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Beispiel-Prompt für neue Website
|
|
||||||
|
|
||||||
```
|
|
||||||
Erstelle eine Website für [Kunde] basierend auf:
|
|
||||||
|
|
||||||
1. ProjectSpec.json wurde aktualisiert mit:
|
|
||||||
- Firmenname: [Name]
|
|
||||||
- Branche: [Branche]
|
|
||||||
- Zielgruppe: [Zielgruppe]
|
|
||||||
- Gewünschte Seiten: [Liste]
|
|
||||||
|
|
||||||
2. design_tokens.json wurde aktualisiert mit:
|
|
||||||
- Primärfarbe: [Farbe]
|
|
||||||
- Schriftart: [Font]
|
|
||||||
- [weitere Anpassungen]
|
|
||||||
|
|
||||||
Bitte lies zuerst /skills und /spec vollständig.
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Verbote (Wiederholung)
|
|
||||||
|
|
||||||
- KEINE UI-Libraries
|
|
||||||
- KEINE Templates kopieren
|
|
||||||
- KEINE eigenmächtigen Design-Entscheidungen
|
|
||||||
- KEINE hardcodierten Werte
|
|
||||||
- KEIN Over-Engineering
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Ausgabe-Erwartung
|
|
||||||
|
|
||||||
Nach erfolgreicher Generierung:
|
|
||||||
|
|
||||||
- Lauffähige Website unter `npm run dev`
|
|
||||||
- Build erfolgreich unter `npm run build`
|
|
||||||
- Alle DoD-Kriterien erfüllt
|
|
||||||
- generation_log.json aktualisiert
|
|
||||||
|
|||||||
@@ -1,152 +1,63 @@
|
|||||||
# CLIENT_OVERRIDES (Project-Specific)
|
# CLIENT_OVERRIDES.md
|
||||||
|
|
||||||
Kundenspezifische Ergänzungen. Diese Datei darf globale Skills nicht überschreiben.
|
> **WICHTIG:** Diese Overrides ergänzen die globalen Skills.
|
||||||
|
> Sie dürfen SYSTEM_SKILLS, UI_GUIDELINES und DEFINITION_OF_DONE **nicht** überschreiben.
|
||||||
|
> Hierarchie: SYSTEM_SKILLS > UI_GUIDELINES > DEFINITION_OF_DONE > CLIENT_OVERRIDES
|
||||||
|
|
||||||
|
## Kunde
|
||||||
|
|
||||||
|
- **Name:** Sportbox-Reutte
|
||||||
|
- **Branche:** Sport / Fitness
|
||||||
|
- **Locale:** de-AT
|
||||||
|
- **Sprache:** de
|
||||||
|
- **Kontakt:** Max Mustermann (kontakt@sportbox-reutte.at, +43 123 456 789)
|
||||||
|
|
||||||
|
## Markenidentität
|
||||||
|
|
||||||
|
- **Tonalität:** Professionell aber auch nahbar
|
||||||
|
- **Primärfarbe:** #000000
|
||||||
|
- **Sekundärfarbe:** #FFFFFF
|
||||||
|
- **Akzentfarbe:** #d6d6d6
|
||||||
|
- **Hintergrund:** #FFFFFF
|
||||||
|
- **Vordergrund:** #000000
|
||||||
|
- **Schrift Heading:** Inter (700)
|
||||||
|
- **Schrift Body:** Inter (400)
|
||||||
|
- **Logo:** https://sportbox-reutte.at/logo.png
|
||||||
|
|
||||||
|
## Inhaltsanforderungen
|
||||||
|
|
||||||
|
- **CTA primär:** Jetzt Termin buchen
|
||||||
|
- **CTA sekundär:** Mehr über uns erfahren
|
||||||
|
|
||||||
|
### SEO & Content-Strategie
|
||||||
|
|
||||||
|
- **SEO-Keywords:** Fitnessstudio Reutte, Sportangebote Reutte, Personal Training Reutte, Gruppenkurse Fitness, Gesundheit und Fitness, Online Fitnesskurse, Fitness für Anfänger, Yoga Reutte, Krafttraining Reutte, Ernährungsberatung Reutte, Fitness Community, Sportevents Reutte, Wellness und Fitness, Fitness Trends 2023
|
||||||
|
- **Content-Richtlinien:** Die Website sollte eine professionelle, aber auch nahbare Tonalität haben. Die Botschaften sollten motivierend und inspirierend sein, mit einem klaren Fokus auf die Vorteile der Mitgliedschaft und der angebotenen Dienstleistungen. Wertversprechen sollten die individuelle Betreuung, die Vielfalt der Angebote und die Community-Atmosphäre hervorheben.
|
||||||
|
|
||||||
|
### Seitenstruktur
|
||||||
|
|
||||||
|
- **Startseite** (`/`): Willkommen bei Sportbox Reutte – Ihr Fitnessstudio für individuelle Trainingspläne und persönliche Betreuung.
|
||||||
|
- **Über Uns** (`/über-uns`): Erfahren Sie mehr über unsere Philosophie, unser Team und unsere Community bei Sportbox Reutte.
|
||||||
|
- **Aktuelles** (`/aktuelles`): Bleiben Sie auf dem Laufenden über Neuigkeiten, Events und Angebote in unserem Fitnessstudio.
|
||||||
|
- **Studio** (`/studio`): Entdecken Sie unsere modernen Räumlichkeiten und hochwertigen Fitnessgeräte bei Sportbox Reutte.
|
||||||
|
- **Leistungen** (`/leistungen`): Informieren Sie sich über unser vielfältiges Kursangebot und individuelle Trainingsmöglichkeiten.
|
||||||
|
|
||||||
|
## Technische Anforderungen
|
||||||
|
|
||||||
|
- **Domain:** sportbox-reutte.at
|
||||||
|
- **Hosting:** Nicht angegeben
|
||||||
|
- **Analytics:** Nicht angegeben
|
||||||
|
- **Features:** Kontaktformular, Blog, FAQ, Team-Seite, SEO Optimierung
|
||||||
|
|
||||||
|
## Offene Fragen
|
||||||
|
|
||||||
|
- **technical.hosting** (technical): Welcher Hosting-Anbieter wird verwendet?
|
||||||
|
- **technical.analytics** (technical): Welche Analytics-Lösung soll implementiert werden?
|
||||||
|
|
||||||
|
## Sonstige Hinweise
|
||||||
|
|
||||||
|
Es soll eine schöne, simple, moderne dynamische Website sein, mit sauberen Animationen und im Schwarz-Weiß-Stil.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Scope
|
*Generiert von website-prototype-generator v2 am 2026-01-30.*
|
||||||
|
|
||||||
**Kunde:** TBD
|
|
||||||
**Marke:** TBD
|
|
||||||
**Branche:** TBD
|
|
||||||
**Geschäftsmodell:** TBD
|
|
||||||
**Kernleistung:** TBD
|
|
||||||
**Zielgruppe (primär):** TBD
|
|
||||||
**Zielgruppe (sekundär):** TBD
|
|
||||||
**Kundentyp:** TBD
|
|
||||||
**Region:** TBD
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Read Order
|
|
||||||
|
|
||||||
1. `skills/SYSTEM_SKILLS.md`
|
|
||||||
2. `skills/UI_GUIDELINES.md`
|
|
||||||
3. `skills/DEFINITION_OF_DONE.md`
|
|
||||||
4. `skills/CLIENT_OVERRIDES.md` ← diese Datei
|
|
||||||
5. `spec/project_spec.json`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Non-Goals
|
|
||||||
|
|
||||||
Diese Datei definiert **NICHT**:
|
|
||||||
- Globale Arbeitsweisen (siehe SYSTEM_SKILLS.md)
|
|
||||||
- UI-Qualitätsstandards (siehe UI_GUIDELINES.md)
|
|
||||||
- Abnahmekriterien (siehe DEFINITION_OF_DONE.md)
|
|
||||||
- Konkrete Farbwerte, Layouts, Komponenten (kommen aus design_tokens.json)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Brand Voice (Deutsch)
|
|
||||||
|
|
||||||
| Eigenschaft | Wert |
|
|
||||||
|-------------|------|
|
|
||||||
| Sprache | Deutsch |
|
|
||||||
| Ansprache | TBD |
|
|
||||||
| Formalität | TBD |
|
|
||||||
| Markenpersönlichkeit | TBD |
|
|
||||||
|
|
||||||
**USPs:**
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Must-Haves
|
|
||||||
|
|
||||||
### Pflichtseiten
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
### Pflichtinhalte
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
### Pflicht-CTAs
|
|
||||||
| Label | Ziel | Priorität |
|
|
||||||
|-------|------|-----------|
|
|
||||||
| TBD | TBD | TBD |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Must-Not-Haves
|
|
||||||
|
|
||||||
### Verbotene Inhalte
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
### Verbotene Stilmittel
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
### Verbotene Technologien
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Content & SEO Notes
|
|
||||||
|
|
||||||
### SEO-Fokus-Keywords
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
### GEO-Fokus
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
### Content-Richtung
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Legal (DACH)
|
|
||||||
|
|
||||||
### Impressum
|
|
||||||
- **Erforderlich:** Ja
|
|
||||||
- **Details:** TBD
|
|
||||||
|
|
||||||
### Datenschutzerklärung
|
|
||||||
- **Erforderlich:** Ja
|
|
||||||
- **Details:** TBD
|
|
||||||
|
|
||||||
### Zusätzliche rechtliche Hinweise
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Assets & Links
|
|
||||||
|
|
||||||
### Logo
|
|
||||||
- **Verfügbar:** TBD
|
|
||||||
- **Pfad:** TBD
|
|
||||||
- **Format:** TBD
|
|
||||||
|
|
||||||
### Brand Guidelines
|
|
||||||
- **Verfügbar:** TBD
|
|
||||||
- **Pfad:** TBD
|
|
||||||
|
|
||||||
### Weitere Assets
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## References (Liked / Disliked)
|
|
||||||
|
|
||||||
### Gefällt (Inspiration)
|
|
||||||
| URL | Grund |
|
|
||||||
|-----|-------|
|
|
||||||
| TBD | TBD |
|
|
||||||
|
|
||||||
### Gefällt nicht (Abgrenzung)
|
|
||||||
| URL | Grund |
|
|
||||||
|-----|-------|
|
|
||||||
| TBD | TBD |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Open Questions (TBD)
|
|
||||||
|
|
||||||
- TBD
|
|
||||||
- Kundenname und Kontaktperson klären
|
|
||||||
- Branche und Geschäftsmodell definieren
|
|
||||||
- Zielgruppe spezifizieren
|
|
||||||
- Tonalität festlegen (Du/Sie, formal/locker)
|
|
||||||
- Seitenstruktur und Prioritäten bestimmen
|
|
||||||
- CTAs und Conversion-Ziele definieren
|
|
||||||
- Rechtliche Daten für Impressum sammeln
|
|
||||||
- Assets (Logo, CI) bereitstellen
|
|
||||||
- Referenz-Websites sammeln
|
|
||||||
|
|||||||
@@ -1,50 +1,151 @@
|
|||||||
{
|
{
|
||||||
"$schema": "./ProjectSpec.schema.json",
|
|
||||||
"meta": {
|
"meta": {
|
||||||
"projectName": "",
|
"specVersion": "1.0",
|
||||||
"client": "",
|
"status": "final",
|
||||||
"version": "1.0.0",
|
"projectId": "6c1a11a7-0542-4b56-94de-9db673dc3dac",
|
||||||
"createdAt": "",
|
"createdAt": "2026-01-30T10:35:28.826Z",
|
||||||
"updatedAt": ""
|
"updatedAt": "2026-01-30T10:35:33.400Z"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"name": "Sportbox-Reutte",
|
||||||
|
"slug": "sportbox-reutte",
|
||||||
|
"industry": "Sport / Fitness",
|
||||||
|
"locale": "de-AT",
|
||||||
|
"contact": {
|
||||||
|
"name": "Max Mustermann",
|
||||||
|
"email": "kontakt@sportbox-reutte.at",
|
||||||
|
"phone": "+43 123 456 789"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"brand": {
|
"brand": {
|
||||||
"name": "",
|
"colors": {
|
||||||
"tagline": "",
|
"primary": "#000000",
|
||||||
"description": "",
|
"secondary": "#FFFFFF",
|
||||||
"tone": [],
|
"accent": "#d6d6d6",
|
||||||
"values": []
|
"neutral": "#F5F5F5",
|
||||||
|
"background": "#FFFFFF",
|
||||||
|
"foreground": "#000000",
|
||||||
|
"muted": "#B0B0B0",
|
||||||
|
"mutedForeground": "#FFFFFF",
|
||||||
|
"border": "#E0E0E0",
|
||||||
|
"success": "#4CAF50",
|
||||||
|
"warning": "#FF9800",
|
||||||
|
"error": "#F44336"
|
||||||
},
|
},
|
||||||
"target": {
|
"fonts": {
|
||||||
"audience": [],
|
"heading": {
|
||||||
"goals": [],
|
"family": "Inter",
|
||||||
"competitors": []
|
"fallback": "sans-serif",
|
||||||
|
"weight": "700"
|
||||||
},
|
},
|
||||||
"pages": [],
|
"body": {
|
||||||
"features": [],
|
"family": "Inter",
|
||||||
"integrations": [],
|
"fallback": "sans-serif",
|
||||||
"seo": {
|
"weight": "400"
|
||||||
"primaryKeywords": [],
|
}
|
||||||
"secondaryKeywords": [],
|
},
|
||||||
"localSeo": {
|
"logo": {
|
||||||
"enabled": false,
|
"url": "https://sportbox-reutte.at/logo.png",
|
||||||
"regions": []
|
"alt": "Sportbox Reutte Logo"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"slug": "/",
|
||||||
|
"title": "Startseite",
|
||||||
|
"description": "Willkommen bei Sportbox Reutte – Ihr Fitnessstudio für individuelle Trainingspläne und persönliche Betreuung.",
|
||||||
|
"sections": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "/über-uns",
|
||||||
|
"title": "Über Uns",
|
||||||
|
"description": "Erfahren Sie mehr über unsere Philosophie, unser Team und unsere Community bei Sportbox Reutte.",
|
||||||
|
"sections": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "/aktuelles",
|
||||||
|
"title": "Aktuelles",
|
||||||
|
"description": "Bleiben Sie auf dem Laufenden über Neuigkeiten, Events und Angebote in unserem Fitnessstudio.",
|
||||||
|
"sections": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "/studio",
|
||||||
|
"title": "Studio",
|
||||||
|
"description": "Entdecken Sie unsere modernen Räumlichkeiten und hochwertigen Fitnessgeräte bei Sportbox Reutte.",
|
||||||
|
"sections": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "/leistungen",
|
||||||
|
"title": "Leistungen",
|
||||||
|
"description": "Informieren Sie sich über unser vielfältiges Kursangebot und individuelle Trainingsmöglichkeiten.",
|
||||||
|
"sections": []
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"tone": "Professionell aber auch nahbar",
|
||||||
|
"language": "de",
|
||||||
|
"cta": {
|
||||||
|
"primary": "Jetzt Termin buchen",
|
||||||
|
"secondary": "Mehr über uns erfahren"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"technical": {
|
"technical": {
|
||||||
"hosting": "",
|
"domain": "sportbox-reutte.at",
|
||||||
"domain": "",
|
"hosting": "Nicht angegeben",
|
||||||
"analytics": [],
|
"analytics": "Nicht angegeben",
|
||||||
"thirdParty": []
|
"features": [
|
||||||
|
"Kontaktformular",
|
||||||
|
"Blog",
|
||||||
|
"FAQ",
|
||||||
|
"Team-Seite",
|
||||||
|
"SEO Optimierung"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"content": {
|
"notes": {
|
||||||
"languages": ["de"],
|
"userNotes": "Es soll eine schöne, simple, moderne dynamische Website sein, mit sauberen Animationen und im Schwarz-Weiß-Stil.",
|
||||||
"defaultLanguage": "de",
|
"openQuestions": [
|
||||||
"contentSources": []
|
{
|
||||||
|
"field": "technical.hosting",
|
||||||
|
"question": "Welcher Hosting-Anbieter wird verwendet?",
|
||||||
|
"category": "technical"
|
||||||
},
|
},
|
||||||
"timeline": {
|
{
|
||||||
"kickoff": "",
|
"field": "technical.analytics",
|
||||||
"milestones": [],
|
"question": "Welche Analytics-Lösung soll implementiert werden?",
|
||||||
"launch": ""
|
"category": "technical"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"llmResearch": {
|
||||||
|
"industryInsights": [
|
||||||
|
"Zunehmende Integration von Technologie, wie Fitness-Apps und Wearables, die Nutzererfahrung personalisieren.",
|
||||||
|
"Wachsender Trend zu Online-Training und virtuellen Fitnessangeboten, insbesondere nach der Pandemie.",
|
||||||
|
"Steigende Nachfrage nach nachhaltigen und umweltfreundlichen Fitnesslösungen und Produkten.",
|
||||||
|
"Fokus auf ganzheitliches Wohlbefinden, das körperliche Fitness, mentale Gesundheit und Ernährung umfasst.",
|
||||||
|
"Zunahme von Community-basierten Fitnessangeboten, die soziale Interaktion und Unterstützung fördern."
|
||||||
|
],
|
||||||
|
"competitorAnalysis": "Wettbewerber in der Sport- und Fitnessbranche nutzen oft ein minimalistisches Design mit klaren Call-to-Action-Elementen. Häufige Features sind Buchungssysteme für Kurse, Mitgliederbereiche und Blogs mit Fitness-Tipps. Gute Wettbewerber bieten ansprechende visuelle Inhalte und Testimonials. Eine Lücke besteht oft in der Personalisierung der Nutzererfahrung und der Integration von Community-Elementen.",
|
||||||
|
"seoKeywords": [
|
||||||
|
"Fitnessstudio Reutte",
|
||||||
|
"Sportangebote Reutte",
|
||||||
|
"Personal Training Reutte",
|
||||||
|
"Gruppenkurse Fitness",
|
||||||
|
"Gesundheit und Fitness",
|
||||||
|
"Online Fitnesskurse",
|
||||||
|
"Fitness für Anfänger",
|
||||||
|
"Yoga Reutte",
|
||||||
|
"Krafttraining Reutte",
|
||||||
|
"Ernährungsberatung Reutte",
|
||||||
|
"Fitness Community",
|
||||||
|
"Sportevents Reutte",
|
||||||
|
"Wellness und Fitness",
|
||||||
|
"Fitness Trends 2023"
|
||||||
|
],
|
||||||
|
"contentGuidelines": "Die Website sollte eine professionelle, aber auch nahbare Tonalität haben. Die Botschaften sollten motivierend und inspirierend sein, mit einem klaren Fokus auf die Vorteile der Mitgliedschaft und der angebotenen Dienstleistungen. Wertversprechen sollten die individuelle Betreuung, die Vielfalt der Angebote und die Community-Atmosphäre hervorheben.",
|
||||||
|
"generatedAt": "2026-01-30T10:36:04.215Z"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"notes": ""
|
"repository": {
|
||||||
|
"visibility": "public",
|
||||||
|
"autoInit": false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -1,44 +1,29 @@
|
|||||||
{
|
{
|
||||||
"$schema": "./design_tokens.schema.json",
|
"specVersion": "1.0",
|
||||||
"colors": {
|
"colors": {
|
||||||
"primary": "#000000",
|
"primary": "#000000",
|
||||||
"secondary": "#666666",
|
"secondary": "#FFFFFF",
|
||||||
"accent": "#0066cc",
|
"accent": "#d6d6d6",
|
||||||
"background": "#ffffff",
|
"neutral": "#F5F5F5",
|
||||||
|
"background": "#FFFFFF",
|
||||||
"foreground": "#000000",
|
"foreground": "#000000",
|
||||||
"muted": "#f5f5f5",
|
"muted": "#B0B0B0",
|
||||||
"border": "#e5e5e5",
|
"mutedForeground": "#ffffff",
|
||||||
"error": "#dc2626",
|
"border": "#E0E0E0",
|
||||||
"success": "#16a34a",
|
"success": "#4CAF50",
|
||||||
"warning": "#ca8a04"
|
"warning": "#FF9800",
|
||||||
|
"error": "#F44336"
|
||||||
},
|
},
|
||||||
"typography": {
|
"fonts": {
|
||||||
"fontFamilies": {
|
"heading": {
|
||||||
"sans": "system-ui, -apple-system, sans-serif",
|
"family": "Inter",
|
||||||
"serif": "Georgia, serif",
|
"fallback": "sans-serif",
|
||||||
"mono": "ui-monospace, monospace"
|
"weight": "700"
|
||||||
},
|
},
|
||||||
"fontSizes": {
|
"body": {
|
||||||
"xs": "0.75rem",
|
"family": "Inter",
|
||||||
"sm": "0.875rem",
|
"fallback": "sans-serif",
|
||||||
"base": "1rem",
|
"weight": "400"
|
||||||
"lg": "1.125rem",
|
|
||||||
"xl": "1.25rem",
|
|
||||||
"2xl": "1.5rem",
|
|
||||||
"3xl": "1.875rem",
|
|
||||||
"4xl": "2.25rem",
|
|
||||||
"5xl": "3rem"
|
|
||||||
},
|
|
||||||
"fontWeights": {
|
|
||||||
"normal": 400,
|
|
||||||
"medium": 500,
|
|
||||||
"semibold": 600,
|
|
||||||
"bold": 700
|
|
||||||
},
|
|
||||||
"lineHeights": {
|
|
||||||
"tight": 1.25,
|
|
||||||
"normal": 1.5,
|
|
||||||
"relaxed": 1.75
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"spacing": {
|
"spacing": {
|
||||||
@@ -48,20 +33,79 @@
|
|||||||
"lg": "1.5rem",
|
"lg": "1.5rem",
|
||||||
"xl": "2rem",
|
"xl": "2rem",
|
||||||
"2xl": "3rem",
|
"2xl": "3rem",
|
||||||
"3xl": "4rem"
|
"3xl": "4rem",
|
||||||
|
"4xl": "6rem",
|
||||||
|
"5xl": "8rem",
|
||||||
|
"6xl": "12rem",
|
||||||
|
"section": "5rem",
|
||||||
|
"container": "1200px",
|
||||||
|
"containerPadding": "1.5rem"
|
||||||
},
|
},
|
||||||
"borderRadius": {
|
"borderRadius": {
|
||||||
"none": "0",
|
"none": "0",
|
||||||
"sm": "0.25rem",
|
"sm": "0.25rem",
|
||||||
"md": "0.5rem",
|
"md": "0.5rem",
|
||||||
"lg": "1rem",
|
"lg": "0.75rem",
|
||||||
|
"xl": "1rem",
|
||||||
"full": "9999px"
|
"full": "9999px"
|
||||||
},
|
},
|
||||||
"shadows": {
|
"shadows": {
|
||||||
"sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
"sm": "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
|
||||||
"md": "0 4px 6px -1px rgb(0 0 0 / 0.1)",
|
"md": "0 4px 8px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
|
||||||
"lg": "0 10px 15px -3px rgb(0 0 0 / 0.1)",
|
"lg": "0 10px 20px -3px rgba(0, 0, 0, 0.1), 0 4px 8px -4px rgba(0, 0, 0, 0.1)",
|
||||||
"xl": "0 20px 25px -5px rgb(0 0 0 / 0.1)"
|
"xl": "0 20px 30px -5px rgba(0, 0, 0, 0.1), 0 8px 15px -6px rgba(0, 0, 0, 0.1)"
|
||||||
|
},
|
||||||
|
"typography": {
|
||||||
|
"xs": {
|
||||||
|
"size": "0.75rem",
|
||||||
|
"lineHeight": "1rem",
|
||||||
|
"letterSpacing": "0"
|
||||||
|
},
|
||||||
|
"sm": {
|
||||||
|
"size": "0.875rem",
|
||||||
|
"lineHeight": "1.25rem",
|
||||||
|
"letterSpacing": "0"
|
||||||
|
},
|
||||||
|
"base": {
|
||||||
|
"size": "1rem",
|
||||||
|
"lineHeight": "1.5rem",
|
||||||
|
"letterSpacing": "0"
|
||||||
|
},
|
||||||
|
"lg": {
|
||||||
|
"size": "1.125rem",
|
||||||
|
"lineHeight": "1.75rem",
|
||||||
|
"letterSpacing": "0"
|
||||||
|
},
|
||||||
|
"xl": {
|
||||||
|
"size": "1.5rem",
|
||||||
|
"lineHeight": "2rem",
|
||||||
|
"letterSpacing": "-0.01em"
|
||||||
|
},
|
||||||
|
"2xl": {
|
||||||
|
"size": "1.75rem",
|
||||||
|
"lineHeight": "2.25rem",
|
||||||
|
"letterSpacing": "-0.015em"
|
||||||
|
},
|
||||||
|
"3xl": {
|
||||||
|
"size": "2rem",
|
||||||
|
"lineHeight": "2.5rem",
|
||||||
|
"letterSpacing": "-0.02em"
|
||||||
|
},
|
||||||
|
"4xl": {
|
||||||
|
"size": "2.5rem",
|
||||||
|
"lineHeight": "2.75rem",
|
||||||
|
"letterSpacing": "-0.025em"
|
||||||
|
},
|
||||||
|
"5xl": {
|
||||||
|
"size": "3rem",
|
||||||
|
"lineHeight": "1.1",
|
||||||
|
"letterSpacing": "-0.03em"
|
||||||
|
},
|
||||||
|
"6xl": {
|
||||||
|
"size": "3.75rem",
|
||||||
|
"lineHeight": "1.1",
|
||||||
|
"letterSpacing": "-0.03em"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"breakpoints": {
|
"breakpoints": {
|
||||||
"sm": "640px",
|
"sm": "640px",
|
||||||
@@ -69,27 +113,5 @@
|
|||||||
"lg": "1024px",
|
"lg": "1024px",
|
||||||
"xl": "1280px",
|
"xl": "1280px",
|
||||||
"2xl": "1536px"
|
"2xl": "1536px"
|
||||||
},
|
|
||||||
"transitions": {
|
|
||||||
"duration": {
|
|
||||||
"fast": "150ms",
|
|
||||||
"normal": "300ms",
|
|
||||||
"slow": "500ms"
|
|
||||||
},
|
|
||||||
"easing": {
|
|
||||||
"default": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
||||||
"in": "cubic-bezier(0.4, 0, 1, 1)",
|
|
||||||
"out": "cubic-bezier(0, 0, 0.2, 1)",
|
|
||||||
"inOut": "cubic-bezier(0.4, 0, 0.2, 1)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"zIndex": {
|
|
||||||
"base": 0,
|
|
||||||
"dropdown": 100,
|
|
||||||
"sticky": 200,
|
|
||||||
"fixed": 300,
|
|
||||||
"modal": 400,
|
|
||||||
"popover": 500,
|
|
||||||
"tooltip": 600
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,49 +1,63 @@
|
|||||||
@import "tailwindcss";
|
/* ═══════════════════════════════════════════════════════════ */
|
||||||
@import "./stylesheet.css";
|
/* globals.css – Single Source of Truth (CSS Custom Props) */
|
||||||
|
/* Generated by website-prototype-generator */
|
||||||
/*
|
/* DO NOT add layout or component styles here. */
|
||||||
* CSS Variables - Single Source of Truth
|
/* ═══════════════════════════════════════════════════════════ */
|
||||||
* These variables are placeholders. Override them per project via design_tokens.json
|
|
||||||
*/
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* Colors - Placeholders */
|
/* ── Colors ──────────────────────────────────────── */
|
||||||
--color-primary: #000000;
|
--color-primary: #000000;
|
||||||
--color-secondary: #666666;
|
--color-secondary: #FFFFFF;
|
||||||
--color-accent: #0066cc;
|
--color-accent: #d6d6d6;
|
||||||
--color-background: #ffffff;
|
--color-neutral: #F5F5F5;
|
||||||
|
--color-background: #FFFFFF;
|
||||||
--color-foreground: #000000;
|
--color-foreground: #000000;
|
||||||
--color-muted: #f5f5f5;
|
--color-muted: #B0B0B0;
|
||||||
--color-border: #e5e5e5;
|
--color-muted-foreground: #ffffff;
|
||||||
--color-error: #dc2626;
|
--color-border: #E0E0E0;
|
||||||
--color-success: #16a34a;
|
--color-success: #4CAF50;
|
||||||
--color-warning: #ca8a04;
|
--color-warning: #FF9800;
|
||||||
|
--color-error: #F44336;
|
||||||
|
|
||||||
/* Typography - Placeholders */
|
/* ── Typography – Families ────────────────────────── */
|
||||||
--font-sans: system-ui, -apple-system, sans-serif;
|
--font-heading: 'Inter', sans-serif;
|
||||||
--font-serif: Georgia, serif;
|
--font-body: 'Inter', sans-serif;
|
||||||
--font-mono: ui-monospace, monospace;
|
--font-heading-weight: 700;
|
||||||
|
--font-body-weight: 400;
|
||||||
|
|
||||||
--font-size-xs: 0.75rem;
|
/* ── Typography – Scale ───────────────────────────── */
|
||||||
--font-size-sm: 0.875rem;
|
--text-xs: 0.75rem;
|
||||||
--font-size-base: 1rem;
|
--text-xs-line-height: 1rem;
|
||||||
--font-size-lg: 1.125rem;
|
--text-xs-letter-spacing: 0;
|
||||||
--font-size-xl: 1.25rem;
|
--text-sm: 0.875rem;
|
||||||
--font-size-2xl: 1.5rem;
|
--text-sm-line-height: 1.25rem;
|
||||||
--font-size-3xl: 1.875rem;
|
--text-sm-letter-spacing: 0;
|
||||||
--font-size-4xl: 2.25rem;
|
--text-base: 1rem;
|
||||||
--font-size-5xl: 3rem;
|
--text-base-line-height: 1.5rem;
|
||||||
|
--text-base-letter-spacing: 0;
|
||||||
|
--text-lg: 1.125rem;
|
||||||
|
--text-lg-line-height: 1.75rem;
|
||||||
|
--text-lg-letter-spacing: 0;
|
||||||
|
--text-xl: 1.5rem;
|
||||||
|
--text-xl-line-height: 2rem;
|
||||||
|
--text-xl-letter-spacing: -0.01em;
|
||||||
|
--text-2xl: 1.75rem;
|
||||||
|
--text-2xl-line-height: 2.25rem;
|
||||||
|
--text-2xl-letter-spacing: -0.015em;
|
||||||
|
--text-3xl: 2rem;
|
||||||
|
--text-3xl-line-height: 2.5rem;
|
||||||
|
--text-3xl-letter-spacing: -0.02em;
|
||||||
|
--text-4xl: 2.5rem;
|
||||||
|
--text-4xl-line-height: 2.75rem;
|
||||||
|
--text-4xl-letter-spacing: -0.025em;
|
||||||
|
--text-5xl: 3rem;
|
||||||
|
--text-5xl-line-height: 1.1;
|
||||||
|
--text-5xl-letter-spacing: -0.03em;
|
||||||
|
--text-6xl: 3.75rem;
|
||||||
|
--text-6xl-line-height: 1.1;
|
||||||
|
--text-6xl-letter-spacing: -0.03em;
|
||||||
|
|
||||||
--font-weight-normal: 400;
|
/* ── Spacing ─────────────────────────────────────── */
|
||||||
--font-weight-medium: 500;
|
|
||||||
--font-weight-semibold: 600;
|
|
||||||
--font-weight-bold: 700;
|
|
||||||
|
|
||||||
--line-height-tight: 1.25;
|
|
||||||
--line-height-normal: 1.5;
|
|
||||||
--line-height-relaxed: 1.75;
|
|
||||||
|
|
||||||
/* Spacing - Placeholders */
|
|
||||||
--spacing-xs: 0.25rem;
|
--spacing-xs: 0.25rem;
|
||||||
--spacing-sm: 0.5rem;
|
--spacing-sm: 0.5rem;
|
||||||
--spacing-md: 1rem;
|
--spacing-md: 1rem;
|
||||||
@@ -51,75 +65,31 @@
|
|||||||
--spacing-xl: 2rem;
|
--spacing-xl: 2rem;
|
||||||
--spacing-2xl: 3rem;
|
--spacing-2xl: 3rem;
|
||||||
--spacing-3xl: 4rem;
|
--spacing-3xl: 4rem;
|
||||||
|
--spacing-4xl: 6rem;
|
||||||
|
--spacing-5xl: 8rem;
|
||||||
|
--spacing-6xl: 12rem;
|
||||||
|
--spacing-section: 5rem;
|
||||||
|
--spacing-container: 1200px;
|
||||||
|
--spacing-container-padding: 1.5rem;
|
||||||
|
|
||||||
/* Border Radius - Placeholders */
|
/* ── Border Radius ───────────────────────────────── */
|
||||||
--radius-none: 0;
|
--radius-none: 0;
|
||||||
--radius-sm: 0.25rem;
|
--radius-sm: 0.25rem;
|
||||||
--radius-md: 0.5rem;
|
--radius-md: 0.5rem;
|
||||||
--radius-lg: 1rem;
|
--radius-lg: 0.75rem;
|
||||||
|
--radius-xl: 1rem;
|
||||||
--radius-full: 9999px;
|
--radius-full: 9999px;
|
||||||
|
|
||||||
/* Shadows - Placeholders */
|
/* ── Shadows ─────────────────────────────────────── */
|
||||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
--shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
--shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.1), 0 4px 8px -4px rgba(0, 0, 0, 0.1);
|
||||||
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
--shadow-xl: 0 20px 30px -5px rgba(0, 0, 0, 0.1), 0 8px 15px -6px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
/* Transitions - Placeholders */
|
/* ── Breakpoints (reference) ─────────────────────── */
|
||||||
--duration-fast: 150ms;
|
--breakpoint-sm: 640px;
|
||||||
--duration-normal: 300ms;
|
--breakpoint-md: 768px;
|
||||||
--duration-slow: 500ms;
|
--breakpoint-lg: 1024px;
|
||||||
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
|
--breakpoint-xl: 1280px;
|
||||||
|
--breakpoint-2xl: 1536px;
|
||||||
/* Z-Index Scale */
|
|
||||||
--z-base: 0;
|
|
||||||
--z-dropdown: 100;
|
|
||||||
--z-sticky: 200;
|
|
||||||
--z-fixed: 300;
|
|
||||||
--z-modal: 400;
|
|
||||||
--z-popover: 500;
|
|
||||||
--z-tooltip: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Base Resets
|
|
||||||
*/
|
|
||||||
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
font-size: var(--font-size-base);
|
|
||||||
line-height: var(--line-height-normal);
|
|
||||||
color: var(--color-foreground);
|
|
||||||
background-color: var(--color-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
img,
|
|
||||||
video {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
font: inherit;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,53 +1,70 @@
|
|||||||
/*
|
/* ═══════════════════════════════════════════════════════════ */
|
||||||
* Stylesheet
|
/* stylesheet.css – Structural framework */
|
||||||
*
|
/* Uses variables from globals.css (Single Source of Truth) */
|
||||||
* Project-specific styles go here.
|
/* Generated by website-prototype-generator */
|
||||||
* This file is imported by globals.css.
|
/* ═══════════════════════════════════════════════════════════ */
|
||||||
*
|
|
||||||
* Structure:
|
|
||||||
* 1. Component Styles
|
|
||||||
* 2. Layout Styles
|
|
||||||
* 3. Page-specific Styles
|
|
||||||
* 4. Utility Classes
|
|
||||||
* 5. Animations
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* ==========================================================================
|
@import "tailwindcss";
|
||||||
1. Component Styles
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/* Components are added per project */
|
/* ── Base Resets ───────────────────────────────────── */
|
||||||
|
|
||||||
/* ==========================================================================
|
*, *::before, *::after {
|
||||||
2. Layout Styles
|
box-sizing: border-box;
|
||||||
========================================================================== */
|
margin: 0;
|
||||||
|
|
||||||
/* Layout styles are added per project */
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
3. Page-specific Styles
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/* Page styles are added per project */
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
4. Utility Classes
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.visually-hidden {
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
white-space: nowrap;
|
|
||||||
border: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==========================================================================
|
html {
|
||||||
5. Animations
|
scroll-behavior: smooth;
|
||||||
========================================================================== */
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
/* Animations are added per project */
|
body {
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-weight: var(--font-body-weight);
|
||||||
|
color: var(--color-foreground);
|
||||||
|
background-color: var(--color-background);
|
||||||
|
line-height: var(--text-base-line-height);
|
||||||
|
font-size: var(--text-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Headings ─────────────────────────────────────── */
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
font-weight: var(--font-heading-weight);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Links ───────────────────────────────────────── */
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--color-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Images ──────────────────────────────────────── */
|
||||||
|
|
||||||
|
img, video, svg {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Focus ───────────────────────────────────────── */
|
||||||
|
|
||||||
|
:focus-visible {
|
||||||
|
outline: 2px solid var(--color-primary);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Selection ──────────────────────────────────── */
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
color: var(--color-background);
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user