Visual Page Builder

Generiere eine ausgefeilte, in sich geschlossene HTML-Seite, die jedes Konzept mithilfe visueller Komponenten erklärt. Keine Frameworks, keine Abhängigkeiten, kein Build-Schritt. Eine Datei, die aussieht wie eine echte Produktseite.

Seitentypen

Typ	Am besten geeignet für	Wichtige Komponenten
Architekturübersicht	Systeme, Tech-Stacks, Infrastruktur	Flussdiagramm, Verbindungslinien, Komponentenkarten
Vergleichstabelle	Tool vs. Tool, Plan vs. Plan, Vorher vs. Nachher	Nebeneinander-Raster, Häkchen, Gewinner hervorheben
Prozessablauf	Tutorials, Onboarding, Anleitungen	Nummerierte Schritte, Pfeile, Statusanzeigen
Timeline	Roadmaps, Projekthistorie, Changelogs	Vertikale Zeitleiste, Datumsmarker, Meilenstein-Karten
Dashboard	Metriken, KPIs, Leistungsübersichten	Statistik-Karten, Balkendiagramme, Fortschrittsringe
Konzepterklärung	Abstrakte Ideen, Frameworks, Denkmodelle	Analogie-Visuals, geschichtete Diagramme, Hervorhebungsboxen
Projekt-Rückblick	Projektabschluss-Zusammenfassungen, Fallstudien	Vorher/Nachher, Statistiken, Testimonial-Karten, Galerie

Frage den Nutzer, welcher Typ zu seinem Inhalt passt, oder erkenne dies automatisch anhand seiner Beschreibung.

Ablauf

Schritt 1: Inhalte sammeln

Frage den Nutzer nach:

• Titel der Seite
• 3-6 Abschnitten, die abgedeckt werden sollen (oder lass Dir Vorschläge zum Thema machen)
• Wichtigen Datenpunkten (Zahlen, Statistiken, Vergleiche)
• Beziehungen zwischen Konzepten (was mit was verbunden ist)
• Hierarchie (was am wichtigsten ist, was ergänzendes Detail ist)

Wenn der Nutzer ein Dokument, ein Transkript oder Notizen bereitstellt, extrahiere diese Elemente automatisch und bestätige sie.

Schritt 2: Layout planen

Ordne jeden Abschnitt einer visuellen Komponente zu (siehe Verfügbare visuelle Komponenten unten). Präsentiere den Plan:

Abschnitt 1: "Was ist X" -> Konzeptkarte mit Icon + 3 Kernpunkten
Abschnitt 2: "Wie es funktioniert" -> 4-Schritte-Prozessablauf mit Pfeilen
Abschnitt 3: "Leistung" -> Statistik-Karten (3 nebeneinander) + Vergleichsraster
Abschnitt 4: "Loslegen" -> Hervorhebungsbox mit CTA

Hole vor dem Bau die Freigabe des Nutzers ein.

Schritt 3: HTML erstellen

Generiere eine einzelne, in sich geschlossene HTML-Datei.

Designsystem:

Token	Wert
Hintergrund	#0f0f10
Fläche	#1a1a1d
Flächenrand	#2a2a2d
Primärtext	#ffffff
Sekundärtext	#a0a0a0
Akzent	#D97757 (oder vom Nutzer gewählt)
Akzent gedämpft	rgba(217, 119, 87, 0.15)
Schrift	Inter über Google Fonts, Fallback system-ui, sans-serif
Maximalbreite	1000px
Kartenradius	12px
Abschnittsabstand	80px vertikal

Verfügbare visuelle Komponenten:

Komponente	Wann verwenden	Struktur
Statistik-Karten	Wichtige Zahlen	Horizontale Reihe, grosse Zahl + Beschriftung + optionaler Trendpfeil
Abschnittskarten	Feature-Listen, gruppierte Informationen	Kartenraster mit Icon/Emoji, Titel, Beschreibung
Vergleichsraster	Nebeneinander-Analyse	2-3 Spalten, Zeilen mit Häkchen oder Werten
Ablaufschritte	Sequentielle Prozesse	Nummerierte, durch Linien verbundene Kreise, Titel + Beschreibung
Status-Badges	Tags, Kategorien, Zustände	Farbige Pillen-Badges (grün/gelb/rot/blau)
Codeblöcke	Technische Inhalte, Konfigurationen	Dunkler Hintergrund, Monospace-Schrift, falls anwendbar Syntax-Highlighting
Hervorhebungsboxen	Wichtige Hinweise, Warnungen, Tipps	Akzent-Rand links, Icon, hervorgehobener Hintergrund
Fortschrittsbalken	Fertigstellung, Kapazität, Bewertungen	Horizontaler Balken mit Füllprozentsatz und Beschriftung
Tabellen	Strukturierte Daten, Spezifikationen	Gestreifte Zeilen, fixierte Kopfzeile, responsives Scrollen
Timelines	Chronologische Ereignisse	Vertikale Linie mit Punkten, abwechselnd links/rechts platzierte Karten
Zitatblöcke	Testimonials, Kernaussagen	Grosses Anführungszeichen, kursiver Text, Zuordnung
Icon-Raster	Feature-Übersichten, Tool-Listen	2-3-Spalten-Raster mit Emoji + Titel + einzeiliger Beschreibung

Schritt 4: Speichern und Vorschau

Speichere die Datei als [thema-slug]-visual.html im aktuellen Arbeitsverzeichnis.

Öffne sie im Standardbrowser:

open [thema-slug]-visual.html

Schritt 5: Iterieren

Frage: "Wie sieht es aus? Ich kann Farben anpassen, Komponenten austauschen, Abschnitte hinzufügen oder beliebige Texte ändern."

Häufige Anpassungen:

• Akzentfarbe ändern
• Abschnitte hinzufügen oder entfernen
• Einen Komponententyp austauschen (z. B. Tabelle gegen Vergleichsraster)
• Textinhalte anpassen
• Logo oder Kopfbild hinzufügen (base64 inline)

Regeln

• Jeder Abschnitt braucht eine visuelle Komponente. Kein Abschnitt sollte nur eine Textwand sein. Wenn es kein offensichtliches Visual gibt, verwende eine Hervorhebungsbox oder ein Icon-Raster.
• Maximal 50 Wörter vor einem Visual. Einleitungstext für einen Abschnitt muss kurz sein. Lass das Visual die Hauptarbeit leisten.
• Alles CSS und JS inline. Keine externen Abhängigkeiten. Die Datei muss funktionieren, wenn sie ohne Server vom Desktop aus per Doppelklick geöffnet wird.
• Keine externen Abfragen erforderlich. Google Fonts ist die einzige erlaubte Ausnahme (mit System-Schrift-Fallback). Alles andere ist inline.
• Responsiv. Muss auf Mobilgeräten gut aussehen (Raster in eine Spalte stapeln, Statistik-Karten skalieren, scrollbare Tabellen).
• Kein JavaScript für Inhalte erforderlich. JS dient nur optionalen Verbesserungen (sanftes Scrollen, Einblend-Animationen). Die Seite muss bei deaktiviertem JS vollständig lesbar sein.
• Konsistente Abstände. Verwende die Design-System-Tokens. Schätze Padding oder Margins nicht nach Gefühl.
• Nur Dark Theme. Biete keinen Light Mode an. Die dunkle Palette ist Teil der Marke.
• Barrierefreiheit. Ausreichender Farbkontrast (mindestens WCAG AA), semantisches HTML, Alt-Texte bei Bildern.
• Halte die Gesamtdateigrösse unter 500 KB. Komprimiere Bilder vor dem Einbetten.
• Der Seitentitel soll im Browser-Tab erscheinen (title-Tag).

---

Zuletzt aktualisiert: 01.08.2026 · Version 1.0.0 · skills.fragroger.ai

Lizenz: CC BY-NC-ND 4.0 (Namensnennung – nicht kommerziell – keine Bearbeitungen). Nutzung nur für den Eigengebrauch. https://creativecommons.org/licenses/by-nc-nd/4.0/deed.de