second specification based specification.md with Gemini
This commit is contained in:
122
docs/specification2.md
Normal file
122
docs/specification2.md
Normal file
@ -0,0 +1,122 @@
|
||||
# WebWizard - Rozšírená Technická Špecifikácia & Architektúra
|
||||
|
||||
Tento dokument nadväzuje na pôvodnú špecifikáciu a detailnejšie rozpracováva technické riešenie, architektúru a používateľskú cestu projektu WebWizard.
|
||||
|
||||
---
|
||||
|
||||
## 1. Architektúra Systému
|
||||
|
||||
WebWizard je navrhnutý ako **AI Website Concierge**, ktorý premieňa štruktúrované dáta od používateľa na funkčný web.
|
||||
|
||||
### 1.1 Komponenty
|
||||
* **Frontend (Wizard UI):** Jednostránková aplikácia (React/Next.js) s dôrazom na UX, ktorá sprevádza používateľa procesom.
|
||||
* **Backend (API Layer):** Node.js (Express) alebo Python (FastAPI). Spracováva odpovede, spravuje session a komunikuje s AI.
|
||||
* **AI Engine:** Integrácia s LLM (napr. GPT-4o) cez API. Používa špecifické system prompty pre rôzne segmenty biznisu.
|
||||
* **Generator Service:** Modul, ktorý transformuje AI výstup (JSON/Markdown) na finálny kód (HTML/CSS/JS).
|
||||
* **Storage:**
|
||||
* Dočasný (Redis) pre stav rozpracovaného wizardu.
|
||||
* Trvalý (S3-like) pre nahraté obrázky a vygenerované weby.
|
||||
|
||||
### 1.2 Tok dát
|
||||
1. **Vstup:** Používateľ odpovedá na otázky -> JSON objekt.
|
||||
2. **Spracovanie:** Backend obohatí JSON o kontextové prompty.
|
||||
3. **AI Generovanie:** LLM vygeneruje textový obsah a štruktúru stránok.
|
||||
4. **Templating:** Systém vyberie základnú šablónu a aplikuje vygenerovaný obsah a štýly.
|
||||
5. **Výstup:** Statické súbory pripravené na nasadenie.
|
||||
|
||||
---
|
||||
|
||||
## 2. Podrobný Pracovný Postup (Workflow)
|
||||
|
||||
### Krok 1: Segmentácia Biznisu (Context Discovery)
|
||||
* **Akcia:** Používateľ vyberie kategóriu (napr. Reštaurácia).
|
||||
* **AI logic:** Systém okamžite prispôsobuje nasledujúce otázky.
|
||||
* **Smart otázky (príklady):**
|
||||
* *Reštaurácia:* "Máte denné menu?", "Ponúkate donášku?"
|
||||
* *Advokát:* "Špecializujete sa na rodinné, trestné alebo obchodné právo?", "Ponúkate prvú konzultáciu zdarma?"
|
||||
|
||||
### Krok 2: Identita & Kontakt
|
||||
* **Otázky:** Názov, Slogan, Lokalita (integrácia s Google Maps API pre autocompletion), Kontaktné údaje.
|
||||
|
||||
### Krok 3: Služby a Hodnota (Content Mining)
|
||||
* **UI:** Dynamické checkboxy na základe segmentu + textové pole pre "Iné".
|
||||
* **Cieľ:** Získať surové dáta, ktoré AI premení na marketingovo presvedčivé texty.
|
||||
|
||||
### Krok 4: Vizuálny Štýl & Branding
|
||||
* **Vizuálne karty:** Minimalistický, Brutalist, Corporate, Soft/Organic.
|
||||
* **Farby:** Výber palety (Primary, Secondary, Accent) alebo extrakcia z loga.
|
||||
* **Logo:** Možnosť nahrať vlastné alebo vygenerovať dočasné textové logo.
|
||||
|
||||
### Krok 5: Štruktúra & Moduly
|
||||
* Výber modulov: FAQ, Galéria, Cenník, Kontaktný formulár, Testimonials (referencie).
|
||||
|
||||
### Krok 6: Generovanie (The Magic Phase)
|
||||
* Zobrazenie progress baru s vtipnými hláškami ("Trénujeme AI copywritera...", "Miešame farby...", "Staviame základy...").
|
||||
|
||||
---
|
||||
|
||||
## 3. Dátový Model (Input JSON)
|
||||
|
||||
```json
|
||||
{
|
||||
"context": {
|
||||
"business_type": "restaurant",
|
||||
"sub_type": "italian_pizzeria",
|
||||
"specific_features": ["daily_menu", "reservations", "outdoor_seating"]
|
||||
},
|
||||
"identity": {
|
||||
"name": "Bella Napoli",
|
||||
"tagline": "Pravá chuť Neapola v srdci Žiliny",
|
||||
"location": "Mariánske námestie 4, Žilina",
|
||||
"contact": {
|
||||
"phone": "+421 900 000 000",
|
||||
"email": "ciao@bellanapoli.sk",
|
||||
"socials": ["instagram.com/bellanapoli"]
|
||||
}
|
||||
},
|
||||
"visuals": {
|
||||
"theme": "modern_elegant",
|
||||
"color_scheme": {
|
||||
"primary": "#E31837",
|
||||
"background": "#FFFFFF",
|
||||
"text": "#1A1A1A"
|
||||
},
|
||||
"font_style": "serif"
|
||||
},
|
||||
"content_structure": {
|
||||
"pages": ["home", "menu", "gallery", "contact"],
|
||||
"modules": ["faq", "instagram_feed"]
|
||||
},
|
||||
"assets": {
|
||||
"logo_url": "s3://path/to/logo.png",
|
||||
"image_source": "ai_generated"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Stratégia Promptovania (AI Logic)
|
||||
|
||||
Namiesto jedného obrovského promptu použijeme **reťazenie (Chaining)**:
|
||||
|
||||
1. **Copywriting Prompt:** "Na základe týchto dát {JSON} vytvor texty pre sekcie: Hero, O nás, Služby. Použi tón hlasu: {style}. Jazyk: {lang}."
|
||||
2. **Structure Prompt:** "Navrhni poradie sekcií na domovskej stránke pre {business_type} tak, aby bol konverzný pomer čo najvyšší."
|
||||
3. **Styling Prompt:** "Vyber Google Fonts kombináciu, ktorá sa hodí k štýlu {visuals.theme}."
|
||||
|
||||
---
|
||||
|
||||
## 5. Technické Obmedzenia & MVP Scope
|
||||
|
||||
* **No-Edit Policy:** V prvej verzii (MVP) používateľ nemôže manuálne presúvať elementy. Môže len "Regenerovať sekciu" alebo "Zmeniť farby".
|
||||
* **Static Export:** Výstupom je čistý HTML/CSS s minimálnym JS (napatrený Vanilla JS pre formuláre a menu).
|
||||
* **Hosting:** Automatické nasadenie na subdoménu `meno-firmy.webwizard.sk`.
|
||||
|
||||
---
|
||||
|
||||
## 6. Budúce Rozšírenia (Phase 2)
|
||||
|
||||
1. **AI Image Generation:** Integrácia s DALL-E 3 / Midjourney pre generovanie tematických fotiek na mieru.
|
||||
2. **SEO Autopilot:** AI automaticky vygeneruje meta tagy a alt texty k obrázkom.
|
||||
3. **Booking Integrácia:** Jednoduchý rezervačný systém pre služby (kaderníctva, reštaurácie).
|
||||
4. **Multi-language:** Automatický preklad celého webu jedným klikom.
|
||||
Reference in New Issue
Block a user