UMKM Landing Page Master Skill

Was macht UMKM Landing Page Master Skill?

0. Mission

Erstelle eine unverwechselbare, vertrauenswürdige, mobile-optimierte Landing Page, die einem echten Unternehmen hilft, Besucher in Kunden zu verwandeln.

Dieses Skill koordiniert sechs spezialisierte Aufgabenbereiche:

1. Projektkoordination und Recherche – Verstehe das Briefing, inspiziere das bestehende Projekt, extrahiere Inhalte und Assets, plane den Bau und halte einen klaren Lieferweg ein.
2. Conversion-Strategie – Definiere die Zielgruppe, das Angebot, Einwände, die Nachrichtenhierarchie, die Seitenstruktur und die primäre Aktion.
3. Kreative Leitung – Entwickle ein originelles visuelles Konzept, das auf der Marke, dem Produkt, der Zielgruppe und realen Referenzen basiert.
4. Frontend-Implementierung – Baue wartbare, semantische, responsive HTML/CSS/JavaScript mit verifizierten Assets.
5. Design-Geschmack und Anti-Slop-Prüfung – Verhindere generische KI-Visualmuster und mache jede Designentscheidung zielgerichtet.
6. Browser-QA und Deployment-Bereitschaft – Überprüfe die gerenderte Seite, teste Interaktionen und responsive Zustände, behebe Fehler und bereite sie für Vercel vor.

Primäres Ergebnis: Eine funktionierende HTML/CSS/JavaScript-Webseite, bereit für Vercel. Bewahre ein vorhandenes Framework oder eine Projektarchitektur, wenn vorhanden; migriere kein funktionierendes Projekt ohne klaren Grund.

1. Nicht verhandelbare Prinzipien

1.1 Fakten vor Dekoration

• Behandle das PRD des Benutzers, Geschäftsdokumente, Speisekarten, Preislisten, Banner und genehmigte Webseiteninhalte als Quelle der Wahrheit.
• Erfinde niemals Preise, Zutaten, Produktverfügbarkeit, Öffnungszeiten, Adressen, Liefergebiete, Zertifizierungen, Auszeichnungen, Testimonials, Bewertungen, Kundenzahlen oder Geschäftsbehauptungen.
• Wenn Informationen fehlen, lasse sie weg, markiere sie als BENÖTIGT DATEN oder stelle eine gezielte Frage, wenn dies den Bau wesentlich behindert.
• Unterscheide verifizierte Fakten, vernünftige Designannahmen und Inhalte, die eine Bestätigung des Kunden benötigen.

1.2 Assets sind Inhalt

• Überprüfe bereitgestellte Banner, Fotos, Logos, PDFs, Speisekarten und Broschüren, bevor du mit dem Design beginnst.
• Bewahre Markenlogos und Produktfotografien genau auf. Ersetze kein bereitgestelltes Logo durch eine KI-Interpretation.
• Erstelle ein Asset-Inventar: Dateiname, Abmessungen, Format, Motiv, wahrscheinliche Platzierung, Quelle und Verifizierungsstatus.
• Bevorzuge originale Geschäftsfotografien. Verwende generierte oder Stock-Bilder nur, wenn erlaubt, und unterscheide sie klar von echten Kunden-/Produktnachweisen.
• Erfinde keine Testimonials oder verwende illustrative Personen als echte Kunden.

1.3 Eine Zielgruppe, ein Angebot, eine primäre Aktion

• Definiere die primäre Zielgruppe und das wichtigste Geschäftsergebnis.
• Wähle eine dominante Conversion-Aktion, z. B. Bestellung via WhatsApp, Anruf, Ladenbesuch, Angebot anfordern, Termin buchen oder Kauf.
• Sekundäre Aktionen dürfen nicht mit dem primären CTA über der Falz konkurrieren.
• Mache den CTA-Text spezifisch für die Aktion und das Ziel, nicht generisch „Mehr erfahren".

1.4 Markengeführt, nicht vorlagengeführt

• Jedes Unternehmen braucht eine eigene, bewusste visuelle Richtung.
• Verwende nicht dieselbe Heldenkomposition, Palette, Typografie, Kartenlayout, Icon-Stil und Abschnittsreihenfolge für nicht verwandte Marken.
• Referenzen dienen dazu, Prinzipien und Interaktionsideen zu extrahieren, nicht um die Identität einer anderen Marke zu kopieren.
• Verwende Asymmetrie, übergroße Typografie, Parallaxe, Verläufe, Glas-Morphismus oder Animationen nicht nur, um kreativ zu wirken. Verwende sie nur, wenn sie zur Marke passen und die Kommunikation verbessern.

1.5 Mobile-First und schnell

• Gestalte zuerst für schmale Bildschirme und erweitere dann auf Tablet und Desktop.
• Priorisiere lesbaren Text, erreichbare CTA, schnell ladende Bilder, klare Navigation und reibungslose Bestellvorgänge.
• Respektiere die Präferenz für reduzierte Bewegung und vermeide Bewegungen, die das Lesen oder Kaufen beeinträchtigen.

2. Unterstützte Geschäftskontexte

Passe die Struktur und die visuelle Sprache an das tatsächliche Unternehmen an:

• Lebensmittel und Getränke: Kebab, Dimsum, Bäckerei, Coffeeshop, Restaurant, Catering, Snack- und Getränkemarken.
• Einzelhandel und Mode: Bekleidung, Accessoires, Kosmetik, Geschenke, lokale Produktmarken.
• Dienstleistungen: Salon, Schönheit, Reparatur, Bildung, Veranstaltungsservice und andere lokale Dienstleistungen.

Erzwinge nicht für alle Geschäftskategorien die gleiche Seitenstruktur. Menügeführte Unternehmen brauchen Menüentdeckung und Bestellung; terminbasierte Dienstleistungen brauchen Vertrauen, Erklärung der Dienstleistung, Verfügbarkeit und Buchung; Mode benötigt möglicherweise Kollektionen, Größeninformationen, Materialien und einen Kaufprozess.

3. Workflow-Übersicht

Befolge diese Phasen in der Reihenfolge. Du kannst Schritte kombinieren, wenn das Projekt klein ist, aber überspringe nicht die Quelleninspektion, die kreative Leitung, die responsive Implementierung oder die Qualitätssicherung.

1. Projektaufnahme und Repository-Erkundung.
2. Extraktion der Quelle der Wahrheit, des Inhalts und der Assets.
3. Zielgruppe, Angebot, Einwände und Conversion-Strategie.
4. Markenspezifische Vibe-Erkundung und kreative Leitung.
5. Informationsarchitektur, Abschnittsplan und Text.
6. HTML/CSS/JavaScript-Implementierung.
7. Design-Geschmacks- und Anti-KI-Schrott-Prüfung.
8. Browser-QA, responsives und Interaktionstesten.
9. SEO, Barrierefreiheit, Leistung und Vercel-Bereitschaft.
10. Lieferbericht mit verifiziertem Status und bekannten Einschränkungen.

4. Phase 1 — Projektaufnahme und Recherche

4.1 Vor dem Ändern inspizieren

• Überprüfe das Repository, das vorhandene Framework, die Paketdateien, Routen, Komponenten, CSS-Konventionen und die Deployment-Konfiguration.
• Identifiziere, ob es sich um einen Neubau, ein Redesign oder eine Verbesserung handelt.
• Bewahre die funktionierende Architektur und von der Marke genehmigte Elemente, sofern der Benutzer nicht explizit eine Änderung wünscht.
• Überschreibe keine vorhandene Arbeit, bevor du sie verstanden hast.
• Identifiziere verfügbare Browser-, Screenshot-, Bild- und Deployment-Tools. Behaupte nicht, dass ein Tool verwendet wurde, wenn es nicht tatsächlich aufgerufen wurde.

4.2 Alle bereitgestellten Eingaben lesen

Überprüfe relevante Dateien und Referenzen, die Folgendes umfassen können:

• PRD, Briefing, Markenrichtlinie, Produktkatalog, Speisekarte, Preisliste, Werbeaktionen, Broschüren, PDFs, Word-Dateien, Tabellenkalkulationen.
• Bannerdesigns, Logos, Produktfotografien, Verpackungen, Ladenfotos, Social-Media-Visuals.
• Bestehende Website-URLs, Social-Profile, Referenz-Websites, Screenshot-Referenzen.
• Benutzeranweisungen, Revisionsverlauf, genehmigter Text, Einschränkungen und Ausschlüsse.

4.3 Erstelle ein Projekt-Faktenblatt

Notiere:

• Geschäftsname und -kategorie.
• Standort und Servicebereich, nur wenn angegeben oder verifiziert.
• Zielgruppe und Kaufkontext.
• Produkte/Dienstleistungen und verifizierte Preise.
• Einzigartige Verkaufsargumente, die durch Beweise gestützt werden.
• Bestell-, Buchungs-, Zahlungs-, Liefer- und Kontaktmethoden.
• Öffnungszeiten, Richtlinien und Einschränkungen.
• Primäres Conversion-Ereignis.
• Vorhandene Markenidentität und Assets.
• Unbekannte und Annahmen.

Ausgabe: Eine prägnante PROJECT-FACTS.md oder eine gleichwertige Arbeitsnotiz, wenn der Projektumfang dies rechtfertigt.

5. Phase 2 — Inhalts- und Asset-Extraktion

5.1 Textextraktion

• Extrahiere faktenbasierten Text aus bereitgestellten Dokumenten und Bildern.
• Gleiche doppelte oder widersprüchliche Daten ab, indem du die neueste explizit genehmigte Quelle verwendest.
• Behalte die ursprünglichen Produktnamen und die Schreibweise bei, es sei denn, der Benutzer wünscht eine Bearbeitung.
• Bewahre Preise, Varianten, Größen, Zutaten, Abmessungen und Bedingungen genau so.
• Markiere widersprüchliche Fakten, anstatt stillschweigend eine auszuwählen.

5.2 Bild- und Asset-Katalog

Notiere für jedes bereitgestellte Bild:

• Asset-Pfad/-Name.
• Abmessungen und Dateityp.
• Sichtbares Motiv und Inhalt.
• Marken-/Produktrelevanz.
• Vorgeschlagener Abschnitt und Zuschnitt.
• Ob das Asset original, Stock, generiert oder unbekannt ist.
• Verifizierungsstatus.

5.3 Bildnutzungsregeln

• Verwende tatsächliche Produktbilder für Produktkarten und Menüpunkte, wann immer verfügbar.
• Ersetze das echte Logo nicht durch Text, ein Symbol oder ein erfundenes Logo.
• Schneide keine wichtigen Texte, Produktdetails, Verpackungen oder Markenelemente ab.
• Verwende object-fit und object-position bewusst; verschiedene Quellbilder können unterschiedliche Zuschnitte benötigen.
• Optimiere große Dateien in geeignete responsive Formate, wenn die Werkzeuge dies zulassen.
• Füge aussagekräftige Alt-Texte hinzu; verwende leere Alt-Texte für rein dekorative Bilder.
• Überprüfe jede endgültige Bild-URL oder den lokalen Pfad im Browser.

Ausgabe: Eine Asset-Karte und eine Liste fehlender Assets.

6. Phase 3 — Conversion-Strategie

6.1 Conversion-Briefing

Definiere:

• Zielgruppe: Wer kauft oder erkundigt sich am wahrscheinlichsten?
• Kontext: Woher kommen die Besucher und was wissen sie bereits?
• Angebot: Was wird verkauft oder angefragt?
• Wert: Welchen greifbaren Nutzen erhält der Kunde?
• Reibung: Welche Zweifel verhindern die Aktion?
• Beweis: Welche echten Beweise können diese Zweifel reduzieren?
• Aktion: Was genau soll der Besucher als Nächstes tun?

6.2 Einwandsermittlung

Berücksichtige relevante Einwände, wie zum Beispiel:

• Preis und Wert.
• Produktqualität und Frische.
• Portion, Größe, Zutaten oder Materialien.
• Vertrauen, Hygiene, Zuverlässigkeit und Servicequalität.
• Standort, Lieferung und Verfügbarkeit.
• Buchungs-, Zahlungs- oder Bestellschritte.
• Rückgabe-, Stornierungs- oder Garantiebedingungen.

Gehe nur auf Einwände mit unterstützten Informationen ein. Erfinde keine Beweise.

6.3 Nachrichtenhierarchie

• Helden-Headline: Kommuniziere das Angebot oder Ergebnis, nicht nur den Firmennamen.
• Untertitel: Kläre, was angeboten wird, für wen und warum es wichtig ist.
• Primärer CTA: Spezifisches Verb plus klare Aktion.
• Vorteile: Verbinde Funktionen mit Kundenergebnissen.
• Beweis: Platziere echte unterstützende Beweise in der Nähe der Behauptungen, die sie stützen.
• FAQ: Löse verbleibende Kaufreibung auf.
• Abschließender CTA: Wiederhole den nächsten Schritt deutlich.

6.4 CTA-Beispiele

• Essen: "Pesan Dimsum via WhatsApp", "Lihat Menu", "Pesan untuk Acara".
• Coffeeshop: "Lihat Menu Kopi", "Pesan untuk Pickup", "Lihat Lokasi".
• Mode: "Belanja Koleksi", "Lihat Panduan Ukuran".
• Dienstleistungen: "Booking Jadwal", "Minta Estimasi Harga", "Konsultasi via WhatsApp".

Überprüfe Ziel-URLs, Nummern, Nachrichtenvorlagen und Tracking-Parameter vor der Auslieferung.

7. Phase 4 — Vibe-Erkundung und markenspezifische kreative Leitung

7.1 Lies die Marke, bevor du einen Stil auswählst

Leite aus dem Unternehmen ab:

• Markenpersönlichkeit und Positionierung.
• Produkttextur, Material, Herkunft, Kontext oder Handwerk.
• Zielgruppenerwartungen und Kaufmentalität.
• Lokaler/kultureller Kontext, nur wo unterstützt.
• Wettbewerbskonventionen, von denen es sich zu unterscheiden lohnt.
• Das Gefühl, das die Website hervorrufen soll.
• Wofür die Website niemals gehalten werden sollte.

7.2 Erstelle eine einzigartige Richtung

Schreibe eine kurze visuelle These, die Folgendes angibt:

• Richtungsname und Konzept.
• Stimmung und beabsichtigte emotionale Reaktion.
• Typografierollen und Begründung.
• Farbpalette mit semantischen Rollen.
• Layout-/Kompositionsansatz.
• Bildregie und Zuschnittsprinzipien.
• Oberflächen-, Rahmen- und Tiefenbehandlung.
• Charakteristisches Designelement.
• Bewegungsprinzipien.
• Mobile Anpassung.

Bilde nicht einfach jedes Projekt auf einen voreingestellten Stil ab. Kombiniere visuelle Einflüsse durchdacht, aber mache die Kombination kohärent und angemessen.

7.3 Frische- und Anti-Konvergenz-Check

Frage vor dem Coden:

• Könnte dieses Layout zu einer nicht verwandten Marke gehören?
• Ist die Heldenkomposition einfach der häufigste KI-Standard?
• Sind Farb- und Schriftwahl durch die Marke gerechtfertigt?
• Gibt es eine erkennbare visuelle Idee?
• Sind die Abschnitte für diese Zielgruppe und dieses Conversion-Ziel angeordnet?
• Hat das mobile Erlebnis seine eigene Komposition, anstatt nur den Desktop zu verkleinern?

Wenn das Konzept generisch wirkt, überarbeite die Bildregie vor der Implementierung.

7.4 Designsystem

Definiere Tokens vor dem Komponenten-Styling:

• Farben: Hintergrund, Oberfläche, Text, gedämpfter Text, Rahmen, Primärfarbe, Akzentfarbe, semantische Zustände.
• Typografie: Display, Überschrift, Fließtext, Label, Metadaten.
• Schriftgrößen und Zeilenhöhen.
• Abstandsskala.
• Containerbreiten und Breakpoints.
• Radius- und Rahmenregeln.
• Höhe/Tiefe.
• Bewegungsdauer und Beschleunigung.

Verwende ein zurückhaltendes, markenspezifisches System. Verbiete keine Schriftart, Farbe, kein Layout oder keinen Effekt universell; vermeide sie, wenn sie ein ungerechtfertigter Standard ist.

Ausgabe: DESIGN.md oder eine gleichwertige dokumentierte Designspezifikation.

8. Phase 5 — Informationsarchitektur und Abschnittszusammensetzung

8.1 Wähle Abschnitte basierend auf den Geschäftsanforderungen

Mögliche Abschnitte sind:

• Ankündigungsleiste.
• Kopfzeile/Navigation.
• Held.
• Produkt- oder Dienstleistungsübersicht.
• Menü/Katalog/Kollektion.
• Vorteile und Unterscheidungsmerkmale.
• Zutaten/Materialien/Prozess.
• So bestellen oder buchen.
• Galerie.
• Testimonials/Bewertungen (nur echt).
• Standort und Öffnungszeiten (nur verifiziert).
• Preise/Pakete (nur verifiziert).
• FAQ.
• Kontakt und abschließender CTA.
• Fußzeile.

Dies ist eine Komponentenbibliothek, keine verbindliche Reihenfolge. Wähle, benenne um, kombiniere, entferne und ordne Abschnitte nach dem Briefing und der Besucherreise neu.

8.2 Abschnittszweck-Test

Jeder Abschnitt muss mindestens eine Frage beantworten:

• Was muss der Kunde verstehen?
• Bei welcher Entscheidung oder welchem Einwand hilft er?
• Welche Beweise liefert er?
• Welche Aktion erleichtert er?

Entferne Abschnitte, die keinen sinnvollen Mehrwert bieten.

8.3 Helden-Anforderungen

Der erste Bildschirm sollte klarstellen:

• Um welches Unternehmen/Produkt/Dienstleistung es sich handelt.
• Für wen es ist oder was es bietet.
• Warum der Besucher sich dafür interessieren sollte.
• Was der nächste Schritt ist.

Verwende das beste verfügbare Marken-/Produkt-Asset. Erzwinge keinen zweispaltigen Helden, keine zentrierte Überschrift, kein schwebendes Dashboard-Mockup oder keinen dekorativen Verlauf.

9. Phase 6 — HTML/CSS/JavaScript-Implementierung

9.1 Stack-Auswahl

• Wenn ein vorhandenes Projekt bereitgestellt wird, behalte dessen Stack bei, es sei denn, die Migration wird ausdrücklich angefordert.
• Für eine neue statische Landing Page verwende standardmäßig semantisches HTML5, externes CSS und minimales Vanilla JavaScript.
• Verwende React/Vite/Next.js nur, wenn es angefordert oder durch das Projekt gerechtfertigt ist.
• Füge kein Framework oder keine Abhängigkeit hinzu, nur um ein kleines Element zu animieren.
• Pinne oder dokumentiere Abhängigkeiten; vermeide unnötige Skripte und entfernte Bibliotheken.

9.2 Vorgeschlagene statische Struktur

project/
├── index.html
├── styles.css
├── script.js
├── assets/
│   ├── images/
│   ├── icons/
│   └── fonts/
├── README.md
└── vercel.json        # nur wenn nötig

9.3 HTML-Anforderungen

• Verwende semantische Landmarks: header, nav, main, section, article, aside, footer.
• Jede Seite hat genau eine h1, die den eindeutigen Seitenzweck darstellt.
• Verwende alt auf allen img-Elementen; leeres Alt für dekorative Bilder.
• Verwende relative Pfade, es sei denn, ein CDN ist gerechtfertigt.
• Stelle sicher, dass alle interaktiven Elemente über die Tastatur erreichbar sind.
• Füge Meta-Viewport und Titel-Tag hinzu.
• Verlinke die externe CSS-Datei und die JS-Datei.
• Schreibe das HTML vollständig; verwende JavaScript nicht, um Hauptinhalte zu rendern.
• Lazy-Lade Nicht-Helden-Bilder.
• Unterstütze reduzierte Bewegung (prefers-reduced-motion).

9.4 CSS-Anforderungen

• Verwende eine einzelne styles.css für Landing Pages. Rechtfertige mehrere Stylesheets oder CSS-in-JS.
• Wende das in DESIGN.md definierte Designtoken-System an.
• Gestalte zuerst für Mobilgeräte; verwende min-width Media Queries.
• Verwende moderne Layouts: Flexbox, Grid und relative Einheiten.
• Definiere Breakpoints basierend auf dem Inhalt, nicht auf bestimmten Geräten.
• Überschreibe Browser-Stile mit einer minimalen Grundlage oder und einem CSS-Reset.
• Schreibe alle Stile selbst; kopiere kein ganzes Design-Framework.

9.5 JavaScript-Anforderungen

• Verwende minimales JavaScript. Verwende Bibliotheken nur für Interaktionen, die nicht einfach nativ erstellt werden können.
• Halte jede JavaScript-Datei unter 50 Zeilen, es sei denn, das Projekt erfordert mehr.
• Keine schweren Bibliotheken für einfache Aufgaben.
• Verwende defer oder type="module".
• Stelle sicher, dass der Kerninhalt ohne JavaScript zugänglich ist.

9.6 Asset-Einbindung

• Verwende den relativen Assets-Ordner; komprimiere und optimiere Bilder.
• Verwende moderne Formate (WebP, AVIF), wenn die Werkzeuge dies zulassen.
• Verwende eine Schriftarten-Strategie: Hoste Schriften lokal oder verwende Google Fonts mit display=swap.

9.7 Linting und Formatierung

• Validiere HTML mit dem W3C-Validator, falls verfügbar.
• CSS: Keine unbekannten Eigenschaften oder Browser-spezifischen Hacks.
• JavaScript: Keine Syntaxfehler und keine ungenutzten Variablen.

10. Phase 7 — Design-Geschmacks- und Anti-KI-Schrott-Prüfung

Überprüfe vor der Qualitätssicherung, ob die Seite:

• Einen Helden hat, der eine bestimmte Branche oder Zielgruppe anspricht.
• Ein klares, einprägsames visuelles Thema hat.
• Drei verschiedene Farbschemata auf verschiedenen Seiten pro Präsentation vermeidet.
• Keine generischen KI-Halluzinationen wie „Erfahre mehr"-Held mit abstraktem geometrischem Hintergrund hat.
• Keine Stock-Aufnahmen von lächelnden Menschen mit Laptop oder Kaffee in Meetings verwendet.
• Keine SVG-Icons von Weltkugeln, Raketen, Händen auf Glühbirnen oder Händchenhaltenden Figuren hat.
• Keinen „großen obskuren Schriftzug zur Schau stellt, der mit dem Markennamen verwechselt werden könnte".
• Keine sich wiederholenden Generika-Layouts: Held links/rechts, drei Spalten darunter, dann symmetrische Karten, dann wieder drei Spalten.
• Keine Gradienten in der Heldenüberschrift oder Untertitel hat.
• Keine dekorativen Rahmen, die keine semantische Funktion haben.
• Keinen Text auf dunklen Bildern hat, der nicht lesbar ist.
• Keine Animationen hat, die keinen Zweck erfüllen oder ablenken.
• Keine Asymmetrie oder übergroße Typografie zur Show hat.

Bevorzugt:

• Mutige, markenspezifische Farben.
• Echte Produktbilder.
• Mutiger, direkter, handlungsorientierter Text, der zum Kunden spricht.
• Abschnittsübergänge: Ein- und Auszoomen, seitliches Schieben, Hinzufügen und Entfernen.

11. Phase 8 — Browser-QA, responsives und Interaktionstesten

11.1 Browser-Test

• Öffne die Seite in einem Chromium-basierten Browser und einem Browser auf WebKit/Gecko-Basis.
• Verwende die Entwicklertools, um das Rendering zu überprüfen. Verwende keine Vorschau-Bildschirme, die nicht das tatsächliche Browser-Rendering anzeigen.

11.2 Responsive Test

• Teste auf 320px, 375px, 768px, 1024px und 1440px Breite.
• Stelle sicher, dass Texte lesbar sind, CTAs tippbar sind und das Layout nicht bricht.
• Teste horizontalen Bildlauf, Überlauf, versteckten Inhalt und falsche Leerräume.

11.3 Interaktionstest

• Klicke auf jeden Link, jede Schaltfläche und jeden CTA.
• Teste die mobile Navigation, Akkordeons, Registerkarten und Slider.
• Überprüfe Hover-Zustände, Fokus-Zustände und aktive Zustände.
• Teste das Formular: Absenden, Validierung, Fehler- und Erfolgsmeldungen.
• Teste auf schmalen und breiten Viewports.

11.4 Inhalts- und Verifizierungsprüfung

• Überprüfe den Text visuell mit der Quelle der Wahrheit.
• Überprüfe Asset-URLs, Pfade und Alt-Texte.
• Überprüfe CTA-Links, Telefonnummern, WhatsApp-Links, Google Maps.
• Überprüfe die Rechtschreibung.

11.5 Problemverfolgung

• Liste alle gefundenen Probleme auf.
• Weisen Sie jedem Problem einen Schweregrad zu (hoch/mittel/niedrig).
• Behebe alle Probleme mit hohem Schweregrad.

12. Phase 9 — SEO, Barrierefreiheit, Leistung und Vercel-Bereitschaft

12.1 SEO-Grundlagen

• Einzigartiger Seitentitel und Meta-Beschreibung.
• Semantische HTML-Struktur (h1-h6).
• Saubere, beschreibende URLs.
• Meta-Tags für soziale Medien (Open Graph, Twitter Cards).
• robots.txt und sitemap.xml, wenn das Projekt dies rechtfertigt.
• Strukturierte Daten (JSON-LD) für das Unternehmen: Typ, Name, Adresse, Telefon, Öffnungszeiten.

12.2 Barrierefreiheit

• Angemessener Farbkontrast.
• Semantische Überschriftenreihenfolge.
• ARIA-Labels, wo nötig, wo native HTML-Elemente nicht ausreichen.
• Tastaturnavigation und Fokusverwaltung.
• Sinnvolle Alt-Texte.
• Vermeide blinkende Inhalte.

12.3 Leistung

• Ladezeit der Seite: Optimiere Bilder, kodiere sie ordnungsgemäß.
• Reduziere HTTP-Anfragen.
• Verwende asynchrones/deferiertes Laden für Skripte.
• Minimiere CSS und JS.
• Verwende Caching-Header (wenn möglich).

12.4 Vercel-Bereitschaft

• Root-Index.html in einem öffentlichen Ordner.
• vercel.json Konfiguration (wenn benötigt).
• Funktioniert in der Vercel-Vorschau und Produktion; überprüfe Pfade.
• Füge eine README.md mit Bereitstellungsanweisungen hinzu.
• Markiere fehlende Assets oder nicht überprüfte Inhalte deutlich.

13. Phase 10 — Lieferbericht

Nach Abschluss gib eine Zusammenfassung aus:

• Projektname und -typ.
• Erstellungs-/Änderungsdatum.
• Verwendete Browser-Tools.
• Zusammenfassung der Arbeit.
• Verifizierungsstatus: bestanden/nicht bestanden für jeden Abschnitt.
• Bekannte Probleme und Einschränkungen.
• Nächste Schritte.

14. Abschließende Anweisung

Behandle diesen Skill als vollständige Anleitung. Überspringe keine Schritte. Erfinde keine Beweise. Verwende echte Inhalte. Respektiere die Marke. Mache Conversions. Liefere eine funktionierende, überprüfte Seite aus.