SuperDesign

• Du benötigst einen KI-Agenten, der UI-Code (HTML/CSS/Tailwind) generiert, der poliert und modern wirkt – nicht wie eine Vorlage.
• Du erstellst Landing Pages, Dashboards oder komponentenreiche Oberflächen und möchtest, dass ein strukturierter Designprozess automatisch befolgt wird.
• Du möchtest ein konsistentes Theming über Light/Dark-Modi hinweg mit modernen Farbtechniken wie oklch().
• Du benötigst barrierefreie, mobile-first, responsive Layouts mit korrektem semantischen HTML – direkt out of the box.

• Du arbeitest in einer nativen mobilen Umgebung (iOS/Android) — diese Richtlinien sind auf Web ausgerichtet.
• Dein Projekt verwendet ein starres Design-System (z. B. strikte Einhaltung von Material Design), das mit den hier bereitgestellten meinungsstarken Theme-Mustern kollidiert.

Jedes UI wird der Reihe nach durch Layout-Design, Theme-Design, Animations-Design und Implementierung erarbeitet. Dies verhindert, dass direkt mit dem Code begonnen wird, bevor Struktur und Ästhetik berücksichtigt wurden, und führt zu kohärenteren Ergebnissen.

Der Skill vermeidet bewusst veraltete generische Farbpaletten (wie Bootstrap-Blau) und setzt auf oklch() für wahrnehmungsgleichmäßige, moderne Farbdefinitionen. Vorgefertigte Theme-Muster für Dark Mode (Vercel/Linear-Stil), Neo-Brutalismus und Glassmorphismus sind mit einsatzbereiten CSS-Variablen enthalten.

Eine handverlesene Liste von Google Fonts aus den Kategorien Sans-Serif, Monospace, Serif und Display wird bereitgestellt, zusammen mit CDN-fähiger Integration für Lucide-Icons und Flowbite-Komponenten – damit entfällt jedes Rätselraten bei typografischen Entscheidungen.

Ein kompaktes Notationssystem zur Planung von Micro-Interactions (z. B. button: 150ms [S1→0.95→1] press) sorgt dafür, dass Animationen gezielt eingesetzt werden. Empfohlene Zeitspannen für Einblend-Animationen, Hover-Zustände, Button-Klicks und Seitenübergänge werden definiert.

Die Richtlinien erzwingen semantisches HTML, eine korrekte Überschriftenhierarchie, ARIA-Labels, ein Mindestfarbkontrastverhältnis von 4,5:1 sowie Unterstützung für die Tastaturnavigation – und stellen so sicher, dass die Ausgaben grundlegende Barrierefreiheitsstandards ohne zusätzliche Aufforderungen erfüllen.

Meinungsstarke Best Practices für Karten, Schaltflächen, Formulare und Navigation sind integriert – einschließlich Schattentiefe, Touch-Zielgröße, Fokuszustände, Lade-/Deaktivierungszustände und Sticky-Header-Verhalten.

Bitten Sie Ihren Agenten, eine SaaS-Landingpage zu erstellen, und SuperDesign sorgt dafür, dass diese einem strukturierten Layout folgt (Header → Hero → Features → Footer), ein modernes Schriftarten-Pairing gewählt wird, ein kohärentes Farbschema angewendet wird und Mobile-first responsives CSS generiert wird – alles ohne manuelle Design-Vorgaben.

Beim Prototyping eines Analyse- oder Admin-Dashboards führt SuperDesign den Agenten dazu, zunächst das Layout zu skizzieren, einheitliche Abstände und dezente Kartenschatten anzuwenden sowie Hover- und Animationszustände einzubinden – so entsteht ein Prototyp, der produktionsreif wirkt.

Verwende diese Skill, um einen zusammenhängenden Satz aus Schaltflächen, Formularfeldern und Navigationskomponenten zu generieren, die dieselben Design-Tokens (CSS-Variablen für Farbe, Radius und Schatten) teilen und Barrierefreiheitsprüfungen bestehen.

Wenn eine Oberfläche entwickelt wird, die sowohl den Hell- als auch den Dunkelmodus unterstützen muss, helfen der CSS-Variablen-Ansatz von SuperDesign und die oklch()-Farbrichtlinien dem Agenten dabei, von Anfang an ein themenbewusstes System zu erstellen, anstatt den Dunkelmodus nachträglich einzufügen.