Design for AIStil Minimalismus: UI-Design-Prompt
Palette, Schriftregeln und ein einfügbarer Prompt für minimalismus. Auch bekannt als minimales Webdesign, weniger ist mehr, Clean UI, Weißraum-Design. zeitlos; Web-Wellen 2008 (Apple), 2013 (Flat), 2019 (Linear/Notion), anhaltend.
Merkmale
- sehr wenige Elemente; jedes hat eine Aufgabe
- eine Schrift, zwei Größen, zwei Schnitte, eine Akzentfarbe
- Weißraum trägt die Hierarchie; keine Boxen, keine Trennlinien, außer unverzichtbar
- meist Schwarz auf Weiß oder Fast-Weiß, dünne Haarlinien
- kleiner, präziser Radius (4-8px) oder keiner; Schatten fast unsichtbar
- Bilder sind spärlich und groß, wenn sie vorkommen
- Motion ist dezent: Opacity und 4px translate, 150-250ms
Palette
#ffffff Seite, #111111 Text, #6b7280 Sekundär, #e5e7eb Haarlinie, #2563eb einziger Akzent
Schrift
Geist, Helvetica Neue oder system-ui; Überschriften 600 bei 32-56px mit -0.02em, Fließtext 400 bei 16-17px, line-height 1.6; nicht mehr als 4 Größen auf der ganzen Seite
Do
- lösche alles, was nichts daran ändert, was die Nutzerin als Nächstes tut
- richte an einem 8px-Raster und einer Lesebreite von 640-720px aus
- lass Schriftgröße und Abstand die Hierarchie machen statt Farbe und Boxen
Don't
- setze keine Icons neben jede Überschrift
- nutze keine Karten oder Ränder zum Gruppieren; nutze Raum
- nutze nicht mehr als eine Akzentfarbe oder einen Verlauf
Bekannt dafür: Apple.com, Notion, Linear (Light Mode), Muji
CSS-Seed
:root {
--bg: #ffffff;
--fg: #111111;
--muted: #6b7280;
--accent: #2563eb;
--line: #e5e7eb;
--radius: 6px;
--shadow: none;
--font: 'Geist',system-ui,sans-serif
}
Prompt
Baue die Seite in strengem Minimalismus. Hintergrund #ffffff, Text #111111, Sekundär #6b7280, Haarlinie #e5e7eb, ein Akzent #2563eb nur für Links und den Primärbutton. Schrift Geist: genau vier Größen - 48px 600 (h1, -0.02em), 24px 600 (h2), 16px 400 (Fließtext, line-height 1.6), 13px 400 (Meta). Inhaltsspalte 680px, Seitenpadding 24px, Abschnitte durch 96px Abstand getrennt und sonst nichts (keine Linien, keine Hintergründe). Keine Karten, keine Icons, keine Schatten, keine Verläufe. Buttons: 40px hoch, Radius 6px, solides #111111 mit weißem Text; Sekundärbuttons sind reine Textlinks. Bilder, wenn genutzt, in voller Spaltenbreite mit 8px Radius und ohne Rand. Die Nav ist Logo links und drei Textlinks rechts. Motion: 150ms Opacity bei Hover; nichts animiert beim Scrollen.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite in strengem Minimalismus. Hintergrund #ffffff, Text #111111, Sekundär #6b7280, Haarlinie #e5e7eb, ein Akzent #2563eb nur für Links und den Primärbutton. Schrift Geist: genau vier Größen - 48px 600 (h1, -0.02em), 24px 600 (h2), 16px 400 (Fließtext, line-height 1.6), 13px 400 (Meta). Inhaltsspalte 680px, Seitenpadding 24px, Abschnitte durch 96px Abstand getrennt und sonst nichts (keine Linien, keine Hintergründe). Keine Karten, keine Icons, keine Schatten, keine Verläufe. Buttons: 40px hoch, Radius 6px, solides #111111 mit weißem Text; Sekundärbuttons sind reine Textlinks. Bilder, wenn genutzt, in voller Spaltenbreite mit 8px Radius und ohne Rand. Die Nav ist Logo links und drei Textlinks rechts. Motion: 150ms Opacity bei Hover; nichts animiert beim Scrollen.
## Tokens
:root { --bg:#ffffff; --fg:#111111; --muted:#6b7280; --accent:#2563eb; --line:#e5e7eb; --radius:6px; --shadow:none; --font:'Geist',system-ui,sans-serif }
Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.