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