Modellprojekt · Website mit Online-Hautanalyse
Website für ein Kosmetikinstitut mit Hautanalyse und Buchung bei der Wunsch-Kosmetikerin
Vellum · Institut für Kosmetologie ist ein Modellprojekt von Primessio: eine dreisprachige Website für ein Kosmetikinstitut, die mit einer Online-Hautanalyse beginnt, einen Behandlungsplan mit Serienpreis zeigt und ihn direkt an die Buchung bei der gewählten Kosmetikerin übergibt. Marke, Personen und Daten sind fiktiv; Technik, Design und Prozesse entsprechen dem, was wir für Kunden umsetzen.
Referenzprojekt von Primessio für Beauty und Kosmetik: Design, Inhalte in drei Sprachen, Hautanalyse, Buchung mit Live-Kosten, Pflege-Abos und ein Hero in WebGL — gebaut mit Astro und geprüft durch automatisierte Tests mit echten Klicks, auch auf der Live-Website.
Primessio (ACTIVE IT) ist ein Software-House aus Warschau: Websites und Onlineshops, Individualsoftware und IT-Systeme, SEO und KI-SEO, Social Media und Content, Branding sowie Projektmanagement — für Kunden in Polen und im DACH-Raum. Unten eines unserer Projekte.
Live-Website
Funktionierende Demo unter vellum.primessio.com — Hautanalyse, Buchung, Abos und der WebGL-Übergang der Porträts sind interaktiv; die Daten sind fiktiv und werden nirgends gesendet. · Website in neuem Fenster öffnen ↗
Herausforderung
Kundinnen eines Kosmetikinstituts wissen selten, welche Behandlung sie brauchen — sie wissen, was sie verbessern möchten. Typische Websites zeigen dagegen eine Preisliste mit Technologienamen; wie viele Termine nötig sind und was die ganze Serie kostet, erfährt die Kundin erst vor Ort. Das bremst den ersten Termin und erschwert den Verkauf von Serien und Abos.
Dazu kommen die Anforderungen der Branche: Behandlungen müssen im Kompetenzbereich der Kosmetikerin liegen, Ergebnisse dürfen nicht versprochen werden, und Vorher-Nachher-Bilder brauchen eine ehrliche Kennzeichnung. Gleichzeitig soll die Seite modern wirken und auf dem Smartphone flüssig laufen.
Lösung
Eine Website rund um die Frage „Was möchten Sie verbessern?“. Die Wahl des Hautthemas filtert die Behandlungen, und jede Behandlung hat eine Beschreibung „worum es geht, Ablauf, danach“, Dauer, Anzahl der Termine und Serienpreis. Die Online-Hautanalyse (7 Fragen) erstellt einen Plan: Hauptbehandlung, Ergänzung, Abstände und Kosten — mit dem klaren Hinweis, dass es eine Vorab-Beratung und keine ärztliche Diagnose ist.
Der Plan geht mit einem Klick in die Buchung in vier Schritten: Kosmetikerin (mit Kompetenzen und Arbeitstagen), Behandlung oder Serie mit Rabatt, Termin innerhalb der Öffnungszeiten und Daten mit Validierung — mit Live-Kosten und Kalenderdatei. Die Pflege-Abos haben einen Schalter für monatliche oder jährliche Zahlung und einen Planvergleich.
Leistungsumfang
Design
Richtung „Clinical Chic“ nach UX-Audit: Typografie Instrument Serif + Geist, Entwürfe auf dem Design-Canvas und Korrekturen vor dem Code.
Inhalte DE · PL · EN
Transkreation mit lokalisierten URLs (hautanalyse / diagnoza / skin-consultation) und einer Beschreibung jeder Behandlung.
Hautanalyse
Sieben Fragen, Plan im Browser berechnet (nichts wird gesendet), Logik durch Unit-Tests abgedeckt.
Buchung bei der Kosmetikerin
Vier Schritte, Termine innerhalb der Arbeitszeiten, Serie mit Rabatt, Validierung am Feld und .ics-Datei.
Pflege-Abos
Drei Pläne, monatliche oder jährliche Zahlung, Vergleichstabelle und Übersicht im Demo-Modus.
WebGL im Hero
Seidiger Übergang zwischen zwei Porträts (OGL, 16 KB gzip) mit Ersatzbild ohne WebGL und bei reduzierter Bewegung.
SEO / AEO und Barrierefreiheit
hreflang, strukturierte Daten BeautySalon und FAQPage, llms.txt; Kontrast nach WCAG AA und Touch-Ziele ≥ 44 px automatisch geprüft.
Tests und Go-live
Tests mit echten Klicks, WebGL-Test, Qualitätsaudit und ein Deploy-Skript, das die Live-Seite prüft.
Assistent auf der Website
Gespräch mit Vorschlägen und eigenen Fragen in DE/PL/EN: antwortet mit Inhalten der Website, verweist medizinische Fragen an die Beratung und führt Schritt für Schritt durch die Buchung — ohne KI-Modell und ohne Datenversand.
In Zahlen
Ein Modellprojekt hat keine Verkaufszahlen — wir nennen überprüfbare Fakten aus dem Repository und den Tests auf der Live-Website.
So haben wir gearbeitet
Vom Design-Audit zur Live-Website — mit freigegebenem Design vor dem Code, unabhängigem Code-Review und Tests, die messen, was Kundinnen sehen.
Richtung
Branchenanalyse, Stilwahl und Audit des Entwurfs auf Attraktivität und Barrierefreiheit.
Design
Vier Screens auf dem Design-Canvas, Austausch der Fotos gegen natürliche Porträts — vor dem Code.
Umsetzung
Astro, Preact-Inseln, WebGL-Szene, Inhalte in drei Sprachen und Behandlungen im Kompetenzbereich der Kosmetik.
Tests und Review
Klick-Tests, WebGL-Test und Qualitätsaudit; unabhängiges Code-Review und Korrekturen mit Regressionstests.
Go-live
Upload per FTPS und automatische Prüfung der URLs sowie der vollständigen Tests auf der Live-Website.
Technologie
Eine statische Astro-Website mit kleinen interaktiven Inseln und einer leichten WebGL-Szene: schnelles Laden, einfaches Hosting und keine Datenbank. Die Hautanalyse rechnet im Browser, Animationen respektieren reduzierte Bewegung, und ohne WebGL blenden die Porträts per CSS über.
- Astro 7
- Preact
- TypeScript
- WebGL (OGL)
- Regelbasierter Assistent
- GSAP
- Lenis
- View Transitions
- WebP
- Schema.org
- hreflang
- WCAG AA
- Playwright
- DE · PL · EN
Häufige Fragen
Ist das die Website eines echten Instituts?
Nein. Vellum · Institut für Kosmetologie ist ein Modellprojekt von Primessio — Marke, Kosmetikerinnen, Preise, Adresse und Bewertungen sind fiktiv, die Formulare senden nichts. Technik, Design und Arbeitsweise sind dieselben wie in Kundenprojekten.
Ist die Online-Hautanalyse eine ärztliche Diagnose?
Nein, und die Website sagt das deutlich: Es ist eine Vorab-Beratung, die Wünsche ordnet und einen vorläufigen Plan zeigt. Beim ersten Termin sieht sich die Kosmetikerin die Haut an und bestätigt oder ändert den Plan. Das Ergebnis wird im Browser berechnet — es werden keine Daten gesendet.
Lässt sich die Buchung an das System des Instituts anbinden?
Ja. Der Assistent ist die Oberfläche: Im echten Projekt kommen die Termine aus dem Buchungssystem des Instituts, die Zahlung für Abos läuft über einen Zahlungsanbieter. Die Logik für Kosmetikerinnen, Serien und Preise bleibt unverändert.
Ist der Assistent auf der Website eine KI?
Nein. Es ist ein regelbasierter Assistent: Er erkennt Fragen anhand von Schlüsselwörtern in drei Sprachen, antwortet ausschließlich mit Inhalten der Website und führt die Buchung nach denselben Regeln wie das Formular. Er sendet keine Daten und gibt keine medizinischen Ratschläge. Im echten Projekt lässt sich dasselbe Gespräch mit einem Sprachmodell verbinden.
Macht WebGL die Seite nicht langsam?
Die Szene lädt erst, wenn der Hero sichtbar ist, wiegt komprimiert 16 KB und pausiert außerhalb des Bildschirms. Das Foto ist ab dem ersten Frame sichtbar; bei reduzierter Bewegung oder ohne WebGL zeigt die Seite normale Fotos.
Wie sichern Sie ehrliche Inhalte in der Beauty-Branche?
Die Behandlungen liegen im Kompetenzbereich der Kosmetik, die Beschreibungen versprechen keine Ergebnisse, der Vorher-Nachher-Vergleich ist als Simulation gekennzeichnet und die Bewertungen als Beispiele. Dieselben Regeln wenden wir bei Kunden aus Gesundheit und Beauty an.
Verwandte Leistungen und Projekte
Sie führen ein Kosmetikinstitut, einen Beauty-Salon oder eine Klinik?
Wir gestalten und bauen eine Website, die Kundinnen vom Hautthema zum Behandlungsplan und zur Buchung führt — in mehreren Sprachen und mit Preisen von Anfang an.
Lassen Sie uns sprechen