Skill Designsystem – Professionelle UI/UX, Abstände und Multi-Seiten-Architektur
Dieses Skill erzwingt professionelle Designstandards: korrekte Farbpaletten, Typografie, Abschnittsabstände, Navigationslimits, detaillierte Service-/Produktseiten, keine Emojis und eine mehrseitige Website-Architektur. Empfohlener Stack: Astro für statische/Content-Sites, bereitgestellt auf Cloudflare Pages.
⚠️ VERPFLICHTEND: Multi-Seiten-Website-Regel
Erstelle NIEMALS eine einzelne Landingpage, wenn der Benutzer nach einer Website fragt.
Wenn der Benutzer eine Website anfordert (z.B. „Marketingagentur-Seite“, „Restaurant-Website“, „Firmenseite“), MUSST du eine KOMPLETTE mehrseitige Website mit mindestens den folgenden Seiten erstellen:
Standard-Webseiten (VERPFLICHTEND)
| Seite | Zweck | Priorität |
|---|---|---|
| Startseite | Hero, Wertversprechen, Schlüsselabschnitte, CTA | Erforderlich |
| Über uns | Unternehmensgeschichte, Team, Mission, Werte | Erforderlich |
| Dienstleistungen | Service-AUFLISTUNG mit Links zu Detailseiten | Erforderlich |
| Service-Detail | Einzelne Seite pro Service (z.B. /services/webdesign) | Erforderlich |
| Kontakt | Kontaktformular, Karte, Telefon, E-Mail, Öffnungszeiten | Erforderlich |
| Produkte/Portfolio | Produkt-AUFLISTUNG mit Links zu Detailseiten | Erforderlich |
Service-Seiten – DETAILLIERT (NICHT generisch)
Jeder Dienst MUSS eine EIGENE dedizierte Seite haben. Die Service-Übersichtsseite zeigt Karten/Zusammenfassungen, die zu den einzelnen Detailseiten verlinken.
❌ VERBOTEN:
- /services-Seite mit allen Services aufgelistet, aber KEINEN einzelnen Seiten
- Eine generische /services-Seite mit kurzen Beschreibungen
- Services, die nur in 2-3 Textzeilen beschrieben werden
- Keine Preise, kein Prozess oder keine Leistungen pro Service
✅ ERFORDERLICHE STRUKTUR:
/services → Übersichtsseite (Karten mit Bild + Titel + Auszug + CTA)
/services/webdesign → Detailseite (Beschreibung, Prozess, Leistungen, Preise, FAQ, CTA)
/services/seo → Detailseite (Beschreibung, Prozess, Leistungen, Preise, FAQ, CTA)
/services/social-media → Detailseite (Beschreibung, Prozess, Leistungen, Preise, FAQ, CTA)
Jede Service-Detailseite MUSS enthalten:
- Beschreibung: 3-5 Absätze, die den Service erklären
- Prozess: Schritt-für-Schritt (1. Ermittlung → 2. Design → 3. Entwicklung → 4. Launch)
- Leistungen: Was der Kunde erhält
- Preisstufen oder „Ab X €“ (oder CTA für individuelles Angebot)
- FAQ-Bereich: 3-5 häufige Fragen
- CTA: „Angebot anfordern“, „Beratung buchen“, „Projekt starten“
- Referenzen oder Fallstudien (falls vorhanden)
Produktseiten – DETAILLIERT (NICHT generisch)
Jedes Produkt MUSS eine EIGENE dedizierte Seite haben. Die Produktübersichtsseite zeigt Karten, die zu den einzelnen Detailseiten verlinken.
❌ VERBOTEN:
- /products-Seite mit einer einfachen Liste oder einem Raster und KEINEN Detailseiten
- Produkte, die in einer einzelnen Karte ohne Spezifikationen beschrieben werden
- Keine Preise, Funktionen oder Bilder pro Produkt
✅ ERFORDERLICHE STRUKTUR:
/products → Übersichtsseite (Karten mit Bild + Name + Preisauszug + CTA)
/products/produkt-a → Detailseite (Galerie, vollständige Beschreibung, Spezifikationen, Preise, Bewertungen, Ähnliche)
/products/produkt-b → Detailseite (Galerie, vollständige Beschreibung, Spezifikationen, Preise, Bewertungen, Ähnliche)
Jede Produkt-Detailseite MUSS enthalten:
- Bildergalerie: 3-5 Produktbilder
- Vollständige Beschreibung: Funktionen, Spezifikationen, Materialien
- Preis: Klare Preisangabe
- CTA: „In den Warenkorb“, „Angebot anfordern“, „Jetzt kaufen“
- Ähnliche Produkte-Bereich
- Bewertungen/Referenzen (falls vorhanden)
Zusätzliche Seiten (Basierend auf Geschäftsart)
| Geschäftsart | Zusätzliche Seiten |
|---|---|
| Agentur | Portfolio, Fallstudien, Team, Prozess, Preise |
| Restaurant | Speisekarte, Reservierungen, Galerie, Chef/Geschichte, Privatveranstaltungen |
| E-Commerce | Shop, Produktdetail, Warenkorb, Kasse, Konto, Wunschliste |
| SaaS | Funktionen, Preise, Doku, Blog, Changelog, Status |
| Portfolio | Projekte, Über mich, Lebenslauf, Referenzen, Kontakt |
| Immobilien | Angebote, Immobiliendetail, Makler, Nachbarschaften, Hypothekenrechner |
| Gesundheitswesen | Dienstleistungen, Ärzte/Team, Termine, Patientenportal, Standorte |
| Bildung | Programme, Kurse, Fakultät, Zulassung, Campusleben, Kalender |
| Recht | Tätigkeitsbereiche, Anwälte, Referenzen, Ressourcen, kostenlose Beratung |
| Non-Profit | Mission, Programme, Wirkung, Mitmachen, Spenden, Veranstaltungen |
Wann nach den Seiten gefragt werden soll
Verwende AskUserQuestion, um die Seitenstruktur zu bestätigen:
AskUserQuestion({
questions: [
{
question: "Welche Seiten soll die Website enthalten?",
header: "Seiten",
options: [
{ label: "Komplette Seite", description: "Startseite + Über uns + Dienstleistungen + Produkte + Kontakt (empfohlen)" },
{ label: "Standard", description: "Startseite + Über uns + Dienstleistungen + Kontakt" },
{ label: "Erweitert", description: "Komplette Seite + Blog + FAQ + Portfolio + Preise" }
]
}
]
})
Anti-Muster: Einzelne Landingpage
❌ VERBOTEN (wenn der Benutzer nach „einer Website“ fragt):
- Erstellen von index.html als EINZIGE Seite
- Den gesamten Inhalt auf einer scrollbaren Seite unterbringen
- Es als „Website“ bezeichnen, wenn es sich um eine einzelne HTML-Datei handelt
- Abschnitte, die vorgeben, Seiten zu sein (z.B. #about, #services, #contact)
✅ ERFORDERLICH:
- Separater Pfad/Seite pro Abschnitt (z.B. /about, /services, /contact)
- Jede Seite hat ihr eigenes Layout, Meta-Tags und SEO-Optimierung
- Navigationsmenü, das alle Seiten verlinkt
- Gemeinsame Header/Footer-Komponenten
- Einheitliches Designsystem auf allen Seiten
- EINZELNE Detailseiten für jeden Service und jedes Produkt
Die EINZIGE Ausnahme: Der Benutzer sagt AUSDRÜCKLICH „Landingpage“ oder „One-Page-Seite“.
⚠️ VERPFLICHTEND: No-Emoji-Richtlinie
Professionelle Websites verwenden KEINE Emojis. Punkt.
❌ VERBOTEN:
- 🚀 🎯 💡 ✨ 🏆 📱 💻 🛒 📧 📞 ✅ ❌ 🔥 ⭐ 💪 🎨 📊 🔒 🌍 Emojis irgendwo auf der Website
- Emojis als Abschnittssymbole
- Emojis in Überschriften, Schaltflächen oder CTAs
- Emojis in Navigationsbezeichnungen
- Emojis in Meta-Titeln oder -Beschreibungen
✅ ERFORDERLICH:
- Verwende SVG-Icons aus Icon-Bibliotheken (Lucide, Heroicons, Phosphor, Tabler)
- Verwende CSS-Formen oder dekorative Elemente für visuelles Interesse
- Verwende ordnungsgemäße Icon-Komponenten (<svg> oder Icon-Schriftart)
- Normaler Text für alle Überschriften, Schaltflächen und Bezeichnungen
Icon-Bibliotheken (eine verwenden, konsistent bleiben):
| Bibliothek | Installation | Stil | Am besten für |
|---|---|---|---|
| Lucide | npm install lucide-react | Sauber, modern | Die meisten Websites |
| Heroicons | npm install @heroicons/react | Fett, klar | Dashboards, SaaS |
| Phosphor | npm install @phosphor-icons/react | Flexibel, 6 Stärken | Vielseitige Projekte |
| Tabler | npm install @tabler/icons-react | Umrandet | Admin-Panels |
⚠️ VERPFLICHTEND: Abschnittsabstände
Abschnitte dürfen sich NIEMALS berühren. Jeder Abschnitt benötigt Atemraum.
Minimale Abstandsregeln
| Element | Minimale Polsterung (oben/unten) | CSS-Variable |
|---|---|---|
| Seitenabschnitte | var(--space-20) (80px) | --section-padding |
| Hero-Bereich | var(--space-32) (128px) | --hero-padding |
| Footer obere Polsterung | var(--space-32) (128px) | --footer-padding |
| Header-Höhe | var(--space-16) (64px) | --header-height |
| Zwischen Inhaltsblöcken | var(--space-12) (48px) | --block-gap |
| CTA-Bereich | var(--space-20) (80px) | --cta-padding |
CSS für Abschnittsabstände
:root {
--section-padding: clamp(4rem, 8vw, 6rem); /* 64-96px */
--hero-padding: clamp(6rem, 12vw, 10rem); /* 96-160px */
--footer-padding: clamp(5rem, 10vw, 8rem); /* 80-128px */
--header-height: 4rem; /* 64px */
--block-gap: clamp(2rem, 4vw, 3rem); /* 32-48px */
}
section {
padding-top: var(--section-padding);
padding-bottom: var(--section-padding);
}
.hero {
padding-top: var(--hero-padding);
padding-bottom: var(--hero-padding);
min-height: 70vh;
}
footer {
padding-top: var(--footer-padding);
padding-bottom: var(--space-12);
margin-top: 0; /* NIEMALS Footer-Abstand kollabieren */
}
/* Abwechselnde Abschnitte erhalten unterschiedliche Hintergründe */
section:nth-of-type(even) {
background-color: var(--color-surface);
}
section:nth-of-type(odd) {
background-color: var(--color-bg);
}
Anti-Muster für Abstände
❌ VERBOTEN:
- Footer, der direkt den darüberliegenden Abschnitt berührt (kein Abstand)
- Abschnitte mit Polsterung < 64px (fühlt sich beengt an)
- Hero-Bereich mit < 96px Polsterung (schwache visuelle Wirkung)
- Verwendung von margin: 0 bei Hauptabschnitten
- Alle Abschnitte haben dieselbe Hintergrundfarbe (keine visuelle Trennung)
- Enge Abstände auf Mobilgeräten (< 48px Abschnittspolsterung)
✅ ERFORDERLICH:
- Footer hat IMMER großzügige obere Polsterung (128px+)
- Jeder Abschnitt hat eine klare visuelle Trennung (Abstand + abwechselnder Hintergrund)
- Hero nimmt mindestens 70vh mit ausreichender Polsterung ein
- Mobile Abschnitte verwenden clamp() für adaptive Abstände
- CTA-Bereich vor dem Footer hat einen eigenen, deutlichen Hintergrund
⚠️ VERPFLICHTEND: Navigationslimits
Navigationsmenüs dürfen nicht überladen sein. Maximal 7 Einträge der obersten Ebene.
Navigationsregeln
- Maximal 7 Einträge in der Hauptnavigationsleiste
- Gruppiere verwandte Seiten unter Dropdown-Menüs
- Verwende die Fußzeilennavigation für sekundäre Links (Datenschutz, AGB, Sitemap)
- Mobilgeräte: Hamburger-Menü mit einklappbaren Abschnitten
- NIEMALS alle Seiten in die Hauptnavigation setzen
Empfohlene Navigationsstruktur
HAUPTNAVIGATION (max. 5-7 Einträge):
Startseite | Über uns | Dienstleistungen ▼ | Produkte | Portfolio | Kontakt | CTA-Button
DROPDOWN für Dienstleistungen:
Dienstleistungen Übersicht
─────────────────
Webdesign
SEO-Optimierung
Social Media
Markenstrategie
FUSSZEILENNAVIGATION (sekundäre Links):
Datenschutzerklärung | AGB | Sitemap | FAQ | Karriere
Anti-Muster für Navigation
❌ VERBOTEN:
- Mehr als 7 Einträge in der Hauptnav (überladen, überwältigend)
- Jede einzelne Seite in der oberen Navigation
- Kein Dropdown/Mega-Menü für gruppierte Inhalte
- Hamburger-Menü, das einfach ALLE Links flach auflistet
- Nav-Einträge mit Emojis (z.B. „🏠 Startseite“ „📧 Kontakt“)
- Nur-Text-Navigation ohne visuelle Hierarchie
✅ ERFORDERLICH:
- Maximal 7 Einträge der obersten Ebene, gruppiere zusätzliche unter Dropdowns
- Primärer CTA-Button (andere Farbe/Stil als Nav-Links)
- Fußzeile enthält sekundäre Links (rechtliches, Zusätzliches)
- Mobilgeräte: Hamburger-Menü mit gruppierten Abschnitten
- Aktiver Zustand beim aktuellen Seitenlink
- Hover-Zustände bei allen Navigationselementen
⚠️ VERPFLICHTEND: Empfohlenes Framework – Astro
Für statische Websites, Marketing-Websites und contentlastige Websites Astro EMPFEHLEN.
Warum Astro statt Next.js für Marketing-Websites
| Faktor | Astro | Next.js |
|---|---|---|
| Standardausgabe | Null JS (nur HTML) | React-Laufzeit erforderlich |
| Leistung | Nahezu perfekte Lighthouse-Werte | Gut, aber Optimierung nötig |
| Inhaltsfokus | Für Content-Seiten konzipiert | Für Web-Apps konzipiert |
| Bundle-Größe | 0KB JS standardmäßig | ~80KB+ React-Laufzeit |
| Lernkurve | Einfach (HTML + Komponenten) | Mittel (React + SSR-Konzepte) |
| Multi-Framework | Verwende React/Vue/Svelte in Inseln | Nur React |
| SEO | Perfekt (statisches HTML) | Gut (Konfiguration erforderlich) |
| Hosting | Cloudflare Pages, Vercel, Netlify | Vercel (optimiert), andere |
Wann was zu empfehlen ist
| Projekttyp | Empfohlenes Framework |
|---|---|
| Marketing-/Agenturseite | Astro + Tailwind |
| Restaurant/Lokalgeschäft | Astro + Tailwind |
| Portfolio/Lebenslauf | Astro + Tailwind |
| Blog/Content-Seite | Astro + Tailwind |
| Landingpage | Astro oder HTML/Tailwind |
| SaaS-Web-App | Next.js + React |
| E-Commerce | Next.js + React |
| Dashboard/Admin | React + Vite |
| Mobile App | Flutter oder React Native |
Astro-Projekt-Setup
npm create astro@latest my-site
cd my-site
npx astro add tailwind
Astro-Seitenstruktur
src/
├── pages/
│ ├── index.astro # Startseite
│ ├── about.astro # Über uns
│ ├── services/
│ │ ├── index.astro # Dienstleistungen Übersicht
│ │ ├── web-design.astro # Service-Detail
│ │ ├── seo.astro # Service-Detail
│ │ └── social-media.astro
│ ├── products/
│ │ ├── index.astro # Produkte Übersicht
│ │ └── [slug].astro # Dynamisches Produktdetail
│ ├── contact.astro
│ ├── blog/
│ │ ├── index.astro # Blog-Übersicht
│ │ └── [slug].astro # Blog-Artikel
│ └── 404.astro
├── layouts/
│ └── BaseLayout.astro # Gemeinsames HTML-Gerüst
├── components/
│ ├── Header.astro
│ ├── Footer.astro
│ ├── ServiceCard.astro
│ ├── ProductCard.astro
│ └── SEO.astro # Wiederverwendbare Meta/JSON-LD
└── styles/
└── global.css # Design-Tokens
⚠️ VERPFLICHTEND: Cloudflare Pages Bereitstellung
Für statische/Astro-Seiten auf Cloudflare Pages bereitstellen (kostenlos, schnell, globales CDN).
Bereitstellungs-Setup
# Wrangler CLI installieren
npm install -g wrangler
# Bei Cloudflare anmelden
wrangler login
# Projekt bauen
npm run bui
…
[gekürzt für die Übersetzung]