Client-Webdesign

Client-Webdesign (kein AI-Schrott)

Diesen Skill automatisch auf JEDE Webdesign-Anfrage anwenden (Website, Seite, Landingpage, Homepage, Mockup, Redesign, Neubau, Pitch-Seite) – der Benutzer muss ihn nicht nennen.

Baue Kunden-Websites, die aussehen, als hätte sie eine echte Agentur gemacht: eigenwilliges Design, echter Text, sauberer Code, vor der Übergabe in einem echten Browser geprüft.

Schritt 0 – Fragen, niemals annehmen

Bevor du Code schreibst, bestätige (frage nur nach dem, was fehlt):

• Stack: einfaches HTML/CSS/JS, Angular, React/Next.js oder WordPress/Elementor.
• Unternehmen: Name (exakte Schreibweise), Branche, Stadt, Dienstleistungen/Produkte, Zielkunde.
• Echte Assets: Logo, Fotos, Projektliste, Kontaktnummern, WhatsApp, Adresse, Google Maps Link, Google-Bewertung, Social Links.
• Sprachen (z.B. Englisch + Tamil/Kannada) – niemals raten.
• Hauptziel der Website: Anrufe, WhatsApp-Anfragen, Angebotsanfragen, Buchungen oder Online-Bestellungen. Wenn Assets fehlen, verwende klar markierte TODO-Plätze – niemals Stockfotos von Menschen oder erfundene Fakten.

Schritt 1 – Design-Spezifikation zuerst (noch keine Komponenten)

Schreibe eine kurze Spezifikation und hole eine Genehmigung:

1. Ästhetische Richtung – lege dich auf EINE fest: editorial, luxuriös, industriell, warm-lokal, brutalistisch, minimal-premium. Ein Satz, warum sie zu diesem Unternehmen passt.
2. Typografie – eine markante Display-Schriftart + eine saubere Grundschriftart. Fließende Größen mit clamp() auf einer strengen modularen Skala (z.B. 1.25). Niemals Standard-Schriften wie Inter/Roboto/Arial als Display-Schriftart.
3. Farbe (60-30-10) – 60% Basis (z.B. warmes Off-White #F7F6F2 oder anthrazit #111214), 30% strukturelle Oberfläche, 10% ein starker Markenakzent. Als CSS-Variablen / Design-Token definieren.
4. Raster & Layout – 12-Spalten-Raster, mindestens ein asymmetrischer/editorialer Split-Bereich, 1px feine Linien, großzügige Weißräume.
5. Seitenliste + echter Text – Überschrift und Fließtext für jeden Bereich, geschrieben für diese Branche und Stadt.

Richtungsvoreinstellungen (Startpunkte, an den Kunden anpassen)

• Schmuck / Gold: luxuriös-editorial; Serifen-Display (z.B. Cormorant, Instrument Serif); Elfenbein + tiefes Bordeaux/Grün + goldener Akzent sparsam eingesetzt; große Produktfotografie; Goldpreis-Block mit Datum/Uhrzeit; Sparplan-Bereich; BIS-Hallsiegel-Vertrauensstreifen.
• Industrie / Fertigung / B2B: industriell-präzise; Grotesk-Display (z.B. Space Grotesk, Archivo); anthrazit + stahlgrau + ein Sicherheitsakzent (orange/gelb); Spezifikationstabellen, Projekt-Case-Studien (Kunde, Ort, Fläche, Zeitplan), Broschüren-Download, detailliertes Angebotsformular.
• Hotel / Gastgewerbe: warm-editorial; Zimmerkarten mit echten Fotos, Preisen/Ausstattung, Lage & nahegelegene Attraktionen, Buchungs-/WhatsApp-CTA.
• Fotografie / kreativ: minimal galeriezentriert; bildgesteuertes asymmetrisches Masonry, minimale Chromatik, starke Typografie für Namen/Kategorien.

Schritt 2 – Harte Verbote (KI-Klischees)

NIE:

• Lila/Indigo/blau-violette Verläufe, Glassmorphismus-Blobs, schwebende Farbverlaufs-Orbs.
• Generische Symbole in farbigen Kreisen in einem 3-spaltigen, zentrierten Feature-Raster.
• Platzhaltertexte: „Transformieren Sie Ihren Workflow“, „Unternehmen stärken“, „Ihr Potenzial entfalten“, „Verbessern Sie Ihr Erlebnis“, Lorem Ipsum, „Beispieltitel“.
• Stockfotos von lächelnden Menschen, die nichts mit dem Unternehmen zu tun haben.
• Fake-Statistiken, gefälschte Testimonials oder animierte Zähler, die „0+“ anzeigen können.
• Emojis als Symbole, alles zentriert, identische Kartenhöhen überall.
• Links zu „#“ in der fertigen Website.

Schritt 3 – Build-Regeln

• Komponenten sind klein und zusammensetzbar (z.B. Card mit Header/Body/Footer-Teilen), nicht eine riesige prop-lastige Komponente.
• Mobile-First; testen bei 390px und 1440px.
• Bilder: echter Alt-Text, Breite/Höhe gesetzt (kein Layout-Shift), Lazy-Load unterhalb des Falzes, WebP/AVIF wo möglich.
• Bewegung: subtil und zielgerichtet (Fade/Slide beim Scrollen, echte Hover-Zustände); prefers-reduced-motion respektieren.
• Barrierefreiheit: WCAG AA-Kontrast, sichtbare Focus-Zustände, semantische Überschriften (eine H1 pro Seite), beschreibender Link-Text (nicht nur „Mehr erfahren“).
• Angular + TranslateModule: immer i18n-Key-Dateien für jede Projektsprache generieren.
• Wenn die Ausgabe lang sein wird, zuerst einen Batch-Plan vorschlagen und jeden Batch vollständig generieren – niemals eine Datei abschneiden.

Lokale Geschäftselemente (indische SMB-Kunden)

• Sticky WhatsApp-Button und Klick-zum-Anruf (tel:) Link.
• Adresse + eingebettete Google Maps + Öffnungszeiten.
• Google-Bewertung/Rezensionen (echt, mit dem Profil verlinkt).
• Kontakt-/Angebotsformular, das tatsächlich sendet (E-Mail und/oder WhatsApp-Benachrichtigung) mit Spam-Schutz.
• SEO: Seitentitel = „Dienstleistung in Stadt | Marke“; Meta-Beschreibung pro Seite; LocalBusiness JSON-LD Schema; Open Graph Bild; sitemap.xml; robots.txt.
• Datenschutzerklärungsseite; korrektes aktuelles Copyright-Jahr.

Schritt 4 – In einem echten Browser überprüfen

Verwende Playwright (Headless Chromium):

1. Screenshot von jeder Seite bei 1440px und 390px; schau dir die Screenshots an.
2. Prüfe auf horizontalen Overflow, überlappenden Text, kaputte Bilder, zu kleine Touch-Ziele (<44px).
3. Prüfe auf Konsolenfehler und fehlgeschlagene Netzwerkanfragen.
4. Korrigiere und mache erneut Screenshots, bis es sauber ist.

Schritt 5 – Checkliste vor der Übergabe (alles muss bestanden sein)

• Kein Lorem Ipsum / „Beispiel“ / TODO-Text mehr sichtbar.
• Keine href=“#“ oder toten Links; alle Social-Links führen zu echten Profilen.
• Keine Admin/Login-Links auf öffentlichen Seiten; keine Entwickler-E-Mails oder internen Pfade in Meta-Tags oder Quellcode.
• Firmenname, Kundennamen und Adressen korrekt und konsistent geschrieben.
• Zähler, Slider, Raten-Ticker und Formulare zeigen echte Werte und funktionieren.
• Jedes Bild hat aussagekräftigen Alt-Text; Titel und Meta-Beschreibungen sind pro Seite einzigartig.
• Mobile und Desktop Screenshots überprüft.
• Lighthouse: Performance, Barrierefreiheit, SEO jeweils 90+ (oder erklären, warum nicht).

Beende mit einer kurzen Zusammenfassung: gewählte Designrichtung, erstellte Seiten, Checklisten-Ergebnisse und alles, was noch auf den Kunden wartet (Fotos, Inhalt, Zugangsdaten).