Bibliothek für visuelle Designreferenzen

Stil sehen. Merkmale erkennen. Klar prompten.

Eine fokussierte Bibliothek etablierter Interface- und Grafikrichtungen. Jeder Eintrag verbindet eine eigene HTML/CSS-Referenz mit Merkmalen und einem anpassbaren Prompt.

Visuelle Stile entdecken

Detaillierte Referenzen

Visuelle Stile entdecken

Nutze die Referenzen zur Orientierung – nicht als Beleg für ein generiertes Ergebnis.

14 styles
  1. Illustratives Finanz-Dashboard mit weich erhabenen Karten und eingelassenen Controls im neomorphen Stil.
    Surface & depth Illustrative Referenz

    Weiche, extrudierte Bedienelemente wirken durch helle und dunkle Schatten wie aus derselben Fläche geformt.

    • Geringer Kontrast
    • Doppelte Schatten
    • Runde Controls
    • Haptische Tiefe
    Original HTML/CSS illustration
    Diesen Stil entdecken
  2. Illustratives Projekt-Dashboard mit strukturierten Flächen, Elevation und rollenbasierten Farben nach Material-Design-Prinzipien.
    Interface systems Illustrative Referenz

    Eine systematische UI-Sprache mit Flächen, Elevation, kräftigen Farben, klarer Hierarchie und gezielter Bewegung.

    • Elevation
    • Farbrollen
    • Strukturiertes Raster
    • Klare Zustände
    Original HTML/CSS illustration; no Google assets
    Diesen Stil entdecken
  3. Illustrative redaktionelle Planungswebsite aus warmen Papierflächen, Tintenschrift, Tabs und Linien.
    Surface & depth Illustrative Referenz

    Geschichtete Blätter, tintenartige Typografie, Linien und Papeterie-Details strukturieren digitale Inhalte.

    • Warmes Papier
    • Gestapelte Blätter
    • Tintendetails
    • Editorialer Rhythmus
    Original HTML/CSS illustration
    Diesen Stil entdecken
  4. Illustrative Reiseplanungswebsite mit generischen Desktop-Fenstern der 1990er, abgeschrägten Controls und begrenzter Türkis-Grau-Palette.
    Graphic directions Illustrative Referenz

    Abgeschrägte Fensterrahmen, pixelbewusste Schrift, kompakte Toolbars und frühe Desktop-Konventionen erzeugen Nostalgie.

    • Abgeschrägte Rahmen
    • Hohe Dichte
    • Fenstermetaphern
    • Begrenzte Palette
    Original HTML/CSS illustration; no proprietary OS assets
    Diesen Stil entdecken
  5. Eigenes Projekt-Dashboard als Bento-Raster mit Prioritäts-, Fortschritts-, Aktivitäts- und Teamkacheln.
    Interface systems Illustrative Referenz

    Unterschiedlich große, ausgerichtete Kacheln bündeln Inhalte, Status und Aktionen in einer modularen Übersicht.

    • Modulare Kacheln
    • Variable Größen
    • Klare Ausrichtung
    • Kompakte Zusammenfassungen
    Original HTML/CSS illustration
    Diesen Stil entdecken
  6. Eigene dunkle Terminal-Release-Konsole mit Prozessprotokollen, Statuswerten und Befehlsfeld.
    Interface systems Illustrative Referenz

    Monospace-Hierarchie, Befehlsmuster und semantische Statusfarben erzeugen eine tastaturorientierte Textoberfläche.

    • Monospace-Hierarchie
    • Befehlsmuster
    • Statusfarben
    • Tastaturfluss
    Original HTML/CSS illustration; no operating-system assets
    Diesen Stil entdecken
  7. Eigene Field-Recorder-Oberfläche mit Holztisch, Metallkonsole, Display, Reglern, Schaltern und Anzeige.
    Surface & depth Illustrative Referenz

    Vertraute physische Metaphern, glaubwürdige Materialien und räumliche Controls machen digitale Aktionen greifbar.

    • Physische Metaphern
    • Materialtextur
    • Räumliche Controls
    • Realistisches Feedback
    Original HTML/CSS illustration; no hardware assets
    Diesen Stil entdecken
  8. Eigener pastellfarbener Projektplaner mit aufgeblasenen Karten, weichem Volumen und haptischen Buttons.
    Surface & depth Illustrative Referenz

    Weiche aufgeblasene Formen, satte Pastelltöne und gerichtete Schatten erzeugen verspielte räumliche Komponenten.

    • Aufgeblasene Formen
    • Satte Pastelle
    • Weiches Volumen
    • Verspielte Tiefe
    Original HTML/CSS illustration
    Diesen Stil entdecken
  9. Eigene Designprogramm-Seite mit kräftiger schwarzer Schrift, rotem Kreis, blauem Feld und gelbem Quadrat.
    Graphic directions Illustrative Referenz

    Funktionale Komposition gewinnt durch Primärgeometrie, markante Schrift und dynamische Asymmetrie an Energie.

    • Primärgeometrie
    • Funktionale Komposition
    • Kräftige Schrift
    • Dynamische Asymmetrie
    Original HTML/CSS illustration
    Diesen Stil entdecken
  10. Eigene Mitternachts-Eventseite mit symmetrischen Bögen, goldenen Linien, Fächergeometrie und Serifenschrift.
    Graphic directions Illustrative Referenz

    Symmetrie, gestufte Geometrie, metallische Akzente und elegante Displayschrift schaffen einen feierlichen Charakter.

    • Gestufte Geometrie
    • Starke Symmetrie
    • Metallische Akzente
    • Elegante Displayschrift
    Original HTML/CSS illustration
    Diesen Stil entdecken
  11. Eigene Workshop-Seite mit heller Geometrie, Punkt- und Wellenmustern, kräftiger Schrift und Farbflächen.
    Graphic directions Illustrative Referenz

    Verspielte postmoderne Geometrie, gemischte Muster und helle Akzente beleben ein diszipliniertes Layout.

    • Verspielte Geometrie
    • Mustermix
    • Helle Akzente
    • Bewusste Unwucht
    Original HTML/CSS illustration
    Diesen Stil entdecken
  12. Eigene dunkle Netzwerkkonsole mit Cyan- und Magenta-Akzenten, eckigen Panels, Knoten und Statuslabels.
    Graphic directions Illustrative Referenz

    Dunkle kontrastreiche Flächen, leuchtende Akzente, eckige Rahmen und technische Labels vermitteln Zukunftstechnik.

    • Dunkler Kontrast
    • Leuchtende Akzente
    • Eckige Rahmen
    • Technische Mikrokopie
    Original HTML/CSS illustration; no franchise assets
    Diesen Stil entdecken
  13. Eigene Gartenplanungsseite mit fließenden organischen Formen, Blattmotiven, Naturfarben und sanfter Asymmetrie.
    Graphic directions Illustrative Referenz

    Unregelmäßige organische Formen, fließende Grenzen und Naturfarben mildern das digitale Raster.

    • Organische Silhouetten
    • Fließende Grenzen
    • Naturfarben
    • Sanfte Asymmetrie
    Original HTML/CSS illustration
    Diesen Stil entdecken
  14. Eigene Kulturmagazin-Seite mit übergroßen Headlines, geschichteter Schrift, Farbblöcken und dichten Sektionen.
    Graphic directions Illustrative Referenz

    Dramatische Größenwechsel, geschichtete Typografie, dichter Rhythmus und lebhafter Kontrast machen Hierarchie erlebbar.

    • Dramatische Größe
    • Geschichtete Typografie
    • Dichter Rhythmus
    • Lebhafter Kontrast
    Original HTML/CSS illustration
    Diesen Stil entdecken

Eigene illustrative Nachbildung – kein generiertes Ergebnis oder proprietärer Produktscreenshot.

Website Prompts

Brauchst du das vollständige Website-Briefing?

Wähle hier eine visuelle Richtung und übertrage sie dann in einen seitenspezifischen Website-Prompt.

Website-Prompts durchsuchen