Projekt modelowy · Strona WWW z diagnozą online
Strona kliniki kosmetologii z diagnozą skóry i rezerwacją do specjalistki
Vellum · Instytut Kosmetologii to projekt modelowy Primessio: trzyjęzyczna strona gabinetu kosmetologii, która zaczyna od diagnozy skóry online, pokazuje plan zabiegów z ceną serii i przekazuje go wprost do rezerwacji u wybranej specjalistki. Marka, osoby i dane są fikcyjne; technologia, projekt i procesy są takie, jakie wdrażamy u klientów.
Pokazowa realizacja Primessio dla branży beauty i kosmetologii: projekt graficzny, treści w trzech językach, diagnoza skóry, rezerwacja z kosztorysem, karnety w abonamencie i hero w WebGL — zbudowane w Astro i sprawdzone automatycznymi testami na prawdziwych kliknięciach, także na żywej stronie.
Primessio (ACTIVE IT) to software house z Warszawy: strony i sklepy internetowe, oprogramowanie dedykowane i systemy IT, SEO i AI SEO, social media i content, branding oraz zarządzanie projektami — dla klientów w Polsce i w DACH. Poniżej jeden z projektów.
Strona na żywo
Działająca wersja demo pod vellum.primessio.com — diagnoza, rezerwacja, karnety i przejście portretów w WebGL są interaktywne; dane są fikcyjne i nigdzie nie są wysyłane. · Otwórz stronę w nowym oknie ↗
Wyzwanie
Klientka gabinetu kosmetologii rzadko wie, którego zabiegu potrzebuje — wie, co chce poprawić. Typowa strona pokazuje jednak cennik nazw technologii, a o tym, ile wizyt potrzeba i ile kosztuje cała seria, klientka dowiaduje się dopiero na miejscu. To zniechęca do pierwszej wizyty i utrudnia sprzedaż serii oraz abonamentów.
Do tego dochodzą wymagania branży: zabiegi muszą mieścić się w zakresie kompetencji kosmetologa, efekty nie mogą być obiecywane, a zdjęcia przed/po wymagają uczciwego oznaczenia. Strona ma przy tym wyglądać nowocześnie i działać płynnie na telefonie.
Rozwiązanie
Strona zbudowana wokół pytania „co chcesz poprawić?”. Wybór problemu skóry filtruje zabiegi, a każdy zabieg ma opis „czym jest, przebieg, po zabiegu”, czas, liczbę wizyt i cenę serii. Diagnoza skóry online (7 pytań) układa plan: zabieg główny, wsparcie, odstępy i koszt — z jasnym zastrzeżeniem, że to wstępna konsultacja, nie diagnoza medyczna.
Plan przechodzi jednym kliknięciem do rezerwacji w czterech krokach: specjalistka (z jej kompetencjami i dniami pracy), zabieg lub seria z rabatem, termin zgodny z godzinami otwarcia i dane z walidacją — z kosztorysem na żywo i plikiem do kalendarza. Karnety w abonamencie mają przełącznik płatności miesięcznej i rocznej oraz porównanie planów.
Zakres — co dostarczyliśmy
Projekt graficzny
Kierunek „clinical chic” po audycie UX: typografia Instrument Serif + Geist, makiety na płótnie projektowym i poprawki przed kodem.
Treści PL · DE · EN
Transkreacja pod rynek, z lokalizowanymi adresami (diagnoza / hautanalyse / skin-consultation) i opisem każdego zabiegu.
Diagnoza skóry
Siedem pytań, plan liczony w przeglądarce (nic nie jest wysyłane), logika pokryta testami jednostkowymi.
Rezerwacja do specjalistki
Cztery kroki, terminy zgodne z godzinami pracy, seria z rabatem, walidacja przy polach i plik .ics.
Karnety
Trzy plany, płatność miesięczna lub roczna, tabela porównania i podsumowanie w trybie demo.
WebGL w hero
Jedwabne przejście między dwoma portretami (OGL, 16 KB gzip) z obrazem zastępczym przy braku WebGL i ograniczeniu ruchu.
SEO / AEO i dostępność
hreflang, dane strukturalne BeautySalon i FAQPage, llms.txt; kontrast WCAG AA i cele dotykowe ≥ 44 px sprawdzane automatycznie.
Testy i wdrożenie
Testy na prawdziwych kliknięciach, test WebGL, audyt jakości i skrypt wdrożenia sprawdzający stronę na żywo.
Asystent na stronie
Rozmowa z podpowiedziami i własnymi pytaniami w PL/DE/EN: odpowiada treścią strony, odsyła pytania medyczne na konsultację i prowadzi rezerwację krok po kroku — bez modelu AI i bez wysyłania danych.
W liczbach
Projekt modelowy nie ma wyników sprzedaży — podajemy fakty z repozytorium i testów na żywej stronie, które da się sprawdzić.
Jak pracowaliśmy
Od audytu projektu do strony na żywo — z akceptacją wyglądu przed kodem, niezależnym przeglądem kodu i testami, które mierzą to, co widzi klientka.
Kierunek
Analiza branży, wybór stylu i audyt projektu pod kątem atrakcyjności i dostępności.
Projekt
Makiety czterech ekranów na płótnie projektowym, wymiana zdjęć na naturalne portrety — przed kodem.
Budowa
Astro, wyspy Preact, scena WebGL, treści w trzech językach i zabiegi zgodne z zakresem kosmetologa.
Testy i przegląd
Testy na klikach, WebGL i audyt jakości; niezależny przegląd kodu i poprawki z testami regresyjnymi.
Wdrożenie
Wgranie przez FTPS i automatyczne sprawdzenie adresów oraz pełnych testów na żywej stronie.
Technologia
Statyczna strona w Astro z małymi wyspami interaktywnymi i jedną lekką sceną WebGL: szybkie ładowanie, prosty hosting i brak bazy danych. Diagnoza liczy plan w przeglądarce, animacje szanują ograniczenie ruchu, a bez WebGL portrety przenikają się zwykłym CSS.
- Astro 7
- Preact
- TypeScript
- WebGL (OGL)
- Asystent regułowy
- GSAP
- Lenis
- View Transitions
- WebP
- Schema.org
- hreflang
- WCAG AA
- Playwright
- PL · DE · EN
Najczęstsze pytania
Czy to strona prawdziwego gabinetu?
Nie. Vellum · Instytut Kosmetologii to projekt modelowy Primessio — marka, specjalistki, ceny, adres i opinie są fikcyjne, a formularze niczego nie wysyłają. Technologia, projekt i sposób pracy są takie same jak w projektach dla klientów.
Czy diagnoza online to diagnoza medyczna?
Nie i strona mówi to wprost: to wstępna konsultacja, która porządkuje potrzeby i pokazuje orientacyjny plan. Na pierwszej wizycie kosmetolog ogląda skórę i potwierdza lub zmienia plan. Wynik jest liczony w przeglądarce — dane nie są nigdzie wysyłane.
Czy rezerwację można podłączyć do systemu gabinetu?
Tak. Kreator jest interfejsem: w realnym wdrożeniu terminy pobiera z systemu rezerwacji gabinetu, a płatność za karnety obsługuje bramka płatnicza. Logika specjalistek, serii i cen zostaje bez zmian.
Czy asystent na stronie to AI?
Nie. To asystent oparty na regułach: rozpoznaje pytania po słowach kluczowych w trzech językach, odpowiada wyłącznie treścią strony i prowadzi rezerwację według tych samych reguł co formularz. Nie wysyła danych i nie udziela porad medycznych. W realnym wdrożeniu tę samą rozmowę można połączyć z modelem językowym.
Czy WebGL nie spowalnia strony?
Scena ładuje się dopiero, gdy hero jest widoczne, waży 16 KB po kompresji i zatrzymuje się poza ekranem. Zdjęcie widać od pierwszej klatki, a przy ograniczeniu ruchu lub braku WebGL strona pokazuje zwykłe zdjęcia.
Jak dbacie o uczciwość treści w branży beauty?
Zabiegi mieszczą się w zakresie kompetencji kosmetologa, opisy nie obiecują efektów, porównanie przed/po jest oznaczone jako symulacja, a opinie — jako przykładowe. To te same zasady, które stosujemy u klientów z branży zdrowia i urody.
Usługi i realizacje powiązane
Prowadzisz gabinet kosmetologii, salon beauty albo klinikę?
Zaprojektujemy i zbudujemy stronę, która prowadzi klientkę od problemu do planu zabiegów i rezerwacji — w kilku językach, z cenami widocznymi od początku.
Porozmawiajmy