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

Vstup: Používateľ odpovedá na otázky -> JSON objekt.
Spracovanie: Backend obohatí JSON o kontextové prompty.
AI Generovanie: LLM vygeneruje textový obsah a štruktúru stránok.
Templating: Systém vyberie základnú šablónu a aplikuje vygenerovaný obsah a štýly.
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)

{
  "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):

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}."
Structure Prompt: "Navrhni poradie sekcií na domovskej stránke pre {business_type} tak, aby bol konverzný pomer čo najvyšší."
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)

AI Image Generation: Integrácia s DALL-E 3 / Midjourney pre generovanie tematických fotiek na mieru.
SEO Autopilot: AI automaticky vygeneruje meta tagy a alt texty k obrázkom.
Booking Integrácia: Jednoduchý rezervačný systém pre služby (kaderníctva, reštaurácie).
Multi-language: Automatický preklad celého webu jedným klikom.

5.0 KiB Raw Blame History