Skill🧩 Web-Entwicklung

Designstudien erstellen (Webseiten- & UI-Varianten)

Version 1.0·Stand 2026-07-28·Markdown · kostenlos

Aus einem Angebots- oder Copy-Konzept mehrere vollständige, klickbare Designstudien erzeugen (Standard: 3): gleiche Copy bzw. gleiches Daten-Skelett, klar unterschiedliche Designrichtungen, als selbständige HTML-Dateien mit Vorschau-Links. Funktioniert für ganze Webseiten ebenso wie für Produkt-UI (Popups, Wizards, Editor-Mocks) und lässt sich mit KI-Bildern und Video-Hero zur präsentationsreifen Gewinner-Studie vertiefen.

🧭Worum es geht

Vom Brief (Stimmung, Zielgruppe, Sprachregeln) über ein gemeinsames Copy-/Daten-Skelett und einen Design-Plan je Studie bis zu N selbständigen HTML-Dateien mit Vorschau-Links; Ausbaustufen für Bild-Varianten (KI-Bilder als base64-WebP, rahmenloser Video-Hero) und UI-/Feature-Studien mit geernteter CI der Zielseite (Elementor-Tokens, base64-Fonts).

📄Was die Datei enthält

5-Schritte-Vorgehen: Brief fixieren, EIN Copy-Skelett, Design-Plan je Studie, selbständige HTML-Dateien, Publizieren mit Vorschau-Links
Bewährte Direct-Response-Sektionsfolge als Copy-Skelett (Hero bis finaler CTA)
Ausbaustufe Bild-Varianten: Bild-Slots, Bildbriefing, Authentizitäts-Prompts, KI-Generator-Praxis, base64-WebP-Einbau, rahmenlose Video-Hero-Einbettung
Ausbaustufe UI-/Feature-Studien: echt klickbare Demos (Quiz-Logik, Branching, Editor-Tabs) und Differenzierung über Interaktionsparadigmen
CI-Ernte von Elementor-Seiten: Design-Tokens auslesen, Original-Fonts als base64-@font-face einbetten
Gotchas: charset-Falle bei lokalen Dateien, CSP in Vorschau-Umgebungen, Windows-Systemfonts als Differenzierer

🎯Welche Probleme sie löst

Designrichtung anhand echter, klickbarer Studien entscheiden statt anhand abstrakter Moodboards
Studien unterscheiden sich in Typografie UND Layoutprinzip, nicht nur in der Akzentfarbe
Ein Copy-/Daten-Skelett für alle Studien: verglichen wird das Design, nicht der Text
Produkt-UI (Popup, Wizard, Editor) als erlebbare Demo präsentieren statt als Standbild
Studien in der echten CI der Zielseite statt in geratenen Farben und Fonts

⚠️Welche Fehler ohne diesen Skill auftreten

N Studien, die sich nur in der Farbe unterscheiden und keine echte Richtungs-Entscheidung ermöglichen
Externe CDN-Fonts und Assets, die die Vorschau-Umgebung per CSP blockt: die Studie sieht kaputt aus
Umlaut-Mojibake, weil lokale HTML-Dateien ohne meta charset per Doppelklick geöffnet werden
KI-Bilder mit erfundenen Logos, Schildern und verstümmeltem Text direkt im Motiv
Megabyte-große base64-Blöcke durch ein Editor-Tool geschoben statt per Skript injiziert

🏷️Themen

designdesignstudienlandingpageuiprototypinghtmlwebdesignki-bildermockupwordpresselementor

Skill = eine einzelne Fähigkeit bzw. ein Schritt – fokussiert und sofort einsetzbar.

Workflow = ein kompletter Prozess, der mehrere Skills zu einem Ergebnis verkettet.