AndrewTaras/profpak-landing

Generierung des HTML-Moduls

Wann anwenden

Der Benutzer bittet um die Erstellung eines neuen Landingpage-Moduls: Header, Hero, Problems, Products, Offer, Stats, Process, About, FAQ, ContactForm, Footer oder ChatWidget.

Ablauf

1. Erhalte den Modulvertrag vom Benutzer (Block „Data In → HTML Out“).
2. Überprüfe, ob alle Tailwind-Klassen aus dem Vertrag im Design-System existieren (siehe AGENTS.md).
3. Falls der Vertrag Farben referenziert, verwende ausschließlich Klassen aus dem Design-System:
   • bg-industrial-blue, bg-industrial-orange, bg-stretch-cyan, bg-polymer-silver
   • Keine bg-blue-500, bg-orange-500 oder andere Standard-Tailwind-Paletten.
4. Generiere den HTML-Code streng nach Vertrag.
5. Gib nur HTML zurück – ohne Markdown-Umhüllung, ohne Erklärungen.

Generierungsregeln

Platzhalter-Bilder

Falls im Vertrag „Platzhalter-Hintergrundbild“ angegeben ist, verwende:

• Für Hero-Hintergrund: https://placehold.co/1920x1080/0B3C5D/FFFFFF?text=Hero+Image
• Für Produktkarten: https://placehold.co/800x600/328CC1/FFFFFF?text=Product
• Für Galerie „Über den Hersteller“: https://placehold.co/800x800/0B3C5D/FFFFFF?text=Factory

Symbole

Alle Symbole via Lucide:

<i data-lucide="shield" class="h-5 w-5 text-stretch-cyan"></i>

Gängige Symbole für das Projekt: shield, truck, package, droplet, zap, check-circle-2, phone, message-circle, map-pin, factory, microscope, globe-2, leaf, apple, pill, settings-2, hand.

CTA-Buttons (primär)

<a href="#" class="inline-flex items-center gap-2 rounded-lg bg-industrial-orange px-7 py-3.5 text-sm font-bold text-white shadow-cta transition hover:bg-orange-600 hover:-translate-y-0.5">
  Text <i data-lucide="arrow-right" class="h-4 w-4"></i>
</a>

Sekundäre Buttons

<a href="#" class="inline-flex items-center gap-2 rounded-lg border border-white/30 bg-white/5 px-7 py-3.5 text-sm font-bold text-white backdrop-blur-sm transition hover:bg-white/10">
  Text
</a>

Produktkarten

<article class="group overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-100 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
  <div class="h-48 overflow-hidden">
    <img src="..." alt="..." class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy" />
  </div>
  <div class="p-7">
    <p class="text-xs font-bold text-stretch-cyan mb-1">01 / CATEGORY</p>
    <h3 class="text-xl font-extrabold text-slate-900">Name</h3>
    <p class="mt-2 text-sm leading-6 text-slate-500">Beschreibung</p>
  </div>
</article>

Sektionen (Wrapper)

<section id="name" class="px-6 py-20 lg:px-8 lg:py-24 bg-polymer-silver">
  <div class="mx-auto max-w-7xl">
    <!-- Inhalt -->
  </div>
</section>

Grids

• Produkte: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8
• Stats: grid grid-cols-2 md:grid-cols-4 gap-6
• Prozess: grid grid-cols-1 md:grid-cols-5 gap-6
• FAQ: grid grid-cols-1 md:grid-cols-2 gap-4
• Probleme: grid grid-cols-1 md:grid-cols-3 gap-8

Checkliste vor Ausgabe

• Alle Klassen aus dem Vertrag verwendet
• Nur Design-System-Klassen verwendet (kein bg-blue-500)
• Responsive Präfixe vorhanden (sm:, md:, lg:)
• Bilder mit alt und loading="lazy"
• Interaktive Elemente mit aria-label oder aussagekräftigem Text
• Keine Inline-Stile
• Keine Markdown-Umhüllung um HTML
• Keine Erklärungen vor oder nach dem Code

Beispielaufruf

Benutzer:

Generiere die Hero-Komponente gemäß Vertrag: bgImage – Platzhalter, headline – „Stretchfolie – zuverlässiger Schutz Ihrer Ladung“, bullets – [shield: Zuverlässige Fixierung, droplet: Schutz vor Feuchtigkeit, zap: Hohe Festigkeit, package: Sparsamer Verbrauch], ctaPrimary – „Partie berechnen“ → https://wa.me/79064680377

Du:

<section id="home" class="relative min-h-screen flex items-center overflow-hidden bg-slate-950">
  ...
</section>

(nur HTML, ohne Erklärungen)