01

PROJEKT-IDENTITÄT

Name, Zweck, Zielgruppe

LEER ▶

PROJEKTNAME *

DOMAIN / URL

WEBSEITEN-TYP *

KURZBESCHREIBUNG DES PROJEKTS *

ZIELGRUPPE

SPRACHEN DER SEITE

ZEITRAHMEN

BUDGET (OPTIONAL)

02

SERVER & DEPLOYMENT

Hosting, CI/CD, Domains

LEER ▶

HOSTING-ANBIETER

DEPLOYMENT-METHODE

// DEPLOYMENT-FEATURES

[ ALLES AUSWÄHLEN ]

SSL/HTTPS erzwingen

www-Redirect einrichten

.env Variablen verwenden

Git-Versionierung

CDN für Assets

Staging-Umgebung

Automatische Backups

Subdomain-Struktur

03

DESIGN-SYSTEM

Layout, Farben, Typografie

LEER ▶

DESIGN-STIL

FARBPALETTE

SCHRIFTARTEN

DESIGN-REFERENZEN / INSPIRATIONEN

// LAYOUT-FEATURES

[ ALLES AUSWÄHLEN ]

Vollständig Responsive (Mobile-first)

Dark / Light Mode Toggle

CSS Grid Layout

Flexbox Layout

CSS Custom Properties (Variables)

Druckfreundliches CSS

04

UX & ANIMATIONEN

Interaktion, Scroll, Transitions

LEER ▶

// SCROLL & NAVIGATION

[ ALLES AUSWÄHLEN ]

Soft-Scroll (smooth scrolling)

Scroll-to-Top Button

Scroll-Progress-Indikator

Sticky Navigation

ScrollSpy (aktiver Nav-Link)

Parallax-Effekte

Anchor-Links / One-Page-Scroll

Hamburger-Menü (Mobile)

05a

KONTAKTFORMULAR

E-Mail, DSGVO, Felder

LEER ▶

Kontaktformular aktivieren

// KONTAKTFORMULAR-KONFIGURATION

EMPFÄNGER-E-MAIL

SMTP-SERVER

GEWÜNSCHTE FELDER

// FORMULAR-FEATURES

[ ALLES AUSWÄHLEN ]

DSGVO-Checkbox (Pflicht)

CAPTCHA / Honeypot-Spamschutz

Bestätigungs-E-Mail an Absender

Client-seitige Validierung

Server-seitige Validierung

Datei-Upload im Formular

Multi-Step Formular

AJAX-Submit (ohne Seitenreload)

05b

MEDIEN & PERFORMANCE

Bilder, Video, Lazy Loading

LEER ▶

// BILD-OPTIMIERUNG

[ ALLES AUSWÄHLEN ]

Lazy Loading (Bilder/Videos)

WebP-Format verwenden

Responsive Images (srcset)

Automatische Bildkomprimierung

SVG-Icons / Illustrationen

CSS/SVG Sprite-Sheet

// VIDEO & AUDIO

[ ALLES AUSWÄHLEN ]

Hero-Video (Hintergrund)

Custom Video-Player

YouTube / Vimeo Einbettung (DSGVO-konform)

Audio-Element

05c

NAVIGATION & SUCHE

Menü, Breadcrumbs, Suchfunktion

LEER ▶

// NAVIGATION

[ ALLES AUSWÄHLEN ]

Mega-Menü (mehrstufig)

Breadcrumb-Navigation

Sitemap-Seite (HTML)

Footer-Navigation

Skip-to-Content Link (Barrierefreiheit)

Sprachumschalter

Suchfunktion aktivieren

// SUCH-KONFIGURATION

Live-Suche (Echtzeit)

Eigene Suchergebnis-Seite

Lokaler Suchindex (JSON)

Externe Suchintegration (Algolia o.ä.)

05d

DSGVO & COOKIES

Cookie-Banner, Datenschutz, Consent

LEER ▶

Cookie-Consent-Banner aktivieren

// RECHTLICHE SEITEN

[ ALLES AUSWÄHLEN ]

Impressum

Datenschutzerklärung

AGB

Barrierefreiheitserklärung (WCAG 2.1)

05e

AUTHENTIFIZIERUNG

Login, Benutzerbereich, Rollen

LEER ▶

Authentifizierung / Login aktivieren

// AUTH-KONFIGURATION

[ ALLES AUSWÄHLEN ]

Lokales Login (Username/Passwort)

OAuth (Google, GitHub, etc.)

2-Faktor-Authentifizierung (2FA)

Session-Management / JWT

Rollen & Berechtigungen (Admin/User)

Passwort-Reset per E-Mail

Geschützte Seiten / Protected Routes

Registrierung mit E-Mail-Bestätigung

06

SEO-OPTIMIERUNG

Meta-Tags, Schema, Sitemap

LEER ▶

PRIMÄRE KEYWORDS

META-DESCRIPTION (MUSTER)

07

PERFORMANCE-OPTIMIERUNG

Core Web Vitals, Caching, Minify

LEER ▶

ZIEL-LIGHTHOUSE-SCORE

// CORE WEB VITALS ZIELE

[ ALLES AUSWÄHLEN ]

LCP < 2,5s (Largest Contentful Paint)

CLS < 0,1 (Layout Shift vermeiden)

INP < 200ms (Interaction to Next Paint)

TTFB < 600ms (Server Response)

08

SICHERHEIT

Headers, XSS, CSRF, CSP

LEER ▶

// HTTP-SECURITY-HEADERS

[ ALLES AUSWÄHLEN ]

Content-Security-Policy (CSP)

HSTS (HTTP Strict Transport Security)

X-Frame-Options (Clickjacking-Schutz)

X-Content-Type-Options

Referrer-Policy

Permissions-Policy

// ANGRIFFSVEKTOREN ABSICHERN

[ ALLES AUSWÄHLEN ]

XSS-Schutz (Input-Sanitization)

CSRF-Token bei Formularen

SQL-Injection verhindern (Prepared Statements)

Rate-Limiting (Brute-Force-Schutz)

Directory-Listing deaktivieren

.env / .git Zugriff sperren

Subresource Integrity (SRI) für CDN-Assets

Dependency-Audit (npm audit)

09

ANALYTICS

Tracking, Monitoring, Fehlerlog

LEER ▶

Analytics aktivieren

10

ACCESSIBILITY & QA

WCAG, Testing, Validierung

LEER ▶

// BARRIEREFREIHEIT (WCAG 2.1)

[ ALLES AUSWÄHLEN ]

ARIA-Labels & Rollen

Sichtbarer Fokus-Indikator

Kontrastverhältnis ≥ 4,5:1 (AA)

Vollständige Tastaturnavigation

Screenreader-kompatibel

lang-Attribut im HTML gesetzt

prefers-reduced-motion beachten

Text bis 200% skalierbar

// TESTING & QUALITÄTSSICHERUNG

[ ALLES AUSWÄHLEN ]

HTML W3C-Validierung

Cross-Browser-Testing (Chrome, FF, Safari)

Mobile Device Testing

Lighthouse-Audit durchführen

Accessibility Audit (axe / WAVE)

Unit-Tests (Jest o.ä.)

End-to-End Tests (Playwright / Cypress)

11

ARBEITSWEISE DER KI

Ton, Stil, Rückfragen, Verbote

LEER ▶

ERFAHRUNGSLEVEL DES NUTZERS *

CODE-STIL

VERBOTE / WAS DIE KI NICHT TUN SOLL

// SCHNELLAUSWAHL: Kein jQuery Keine externen Frameworks ohne Rückfrage Immer Rückfragen bei Unklarheiten Kein Inline-CSS Keine deprecated HTML-Tags

BEVORZUGTE TOOLS / BIBLIOTHEKEN

// BEISPIELE: Vanilla JS — kein Framework GSAP für Animationen Alpine.js für Interaktionen Vite als Build-Tool Tailwind CSS