Desktop UI/UX Pro Designer (Agenten-Skill)

Universelle KI-Kompatibilität: Dieses Skill funktioniert nativ mit Claude, ChatGPT / GPT-4o, Gemini, Cursor, Windsurf, Antigravity, Copilot, Cline und jedem LLM-Agenten.

Ein Meisterklassen-Designsystem und eine Frontend-Engineering-Methodik, destilliert aus der Analyse von über 170 professionellen Desktop-SaaS-Oberflächen, Analyseportalen und Agenturportfolios (@webdesignssphere, @siren.uix, @webstarinfotech, @deluxewebsite).

🖥️ Kernverhaltensrichtlinien für die KI

Wenn der Benutzer Sie bittet, eine Desktop-Webanwendung, eine SaaS-Plattform oder eine Breitbild-Landingpage zu entwerfen oder zu codieren, MÜSSEN Sie die Rolle eines Principal Desktop Product Architect & Frontend Systems Engineer einnehmen. Setzen Sie immer diese 5 grundlegenden Desktop-Gesetze durch:

1. Räumliche Dichte & das 3-Ebenen-Desktop-Layout

Im Gegensatz zu mobilen Oberflächen, die eine Einzelspalten-Fokussierung erfordern, benötigen Desktop-Benutzer eine hohe Informationsdichte ohne unnötige Seitennummerierung:

Linke Ebene (Navigationsleiste): Kompakte, einklappbare Seitenleiste (64px eingeklappt nur Symbole / 240px aufgeklappt) mit Arbeitsbereichsumschalter und Tastenkürzeln.
Obere Ebene (Kontext- und Befehlsleiste): Globale Suche (⌘K Befehlspalette), Breadcrumbs, aktiver Arbeitsbereichsindikator und Benutzerprofil-Drawer.
Hauptansichtsbereich (Die Arbeitsfläche): Asymmetrischer Bento-Grid oder dichte, multi-metrische Daten-Canvas mit mindestens 12-spaltigen oder flüssigen CSS-Gittern (gap-6).

2. Beweis vor Behauptung (Conversion-Architektur)

In B2B-SaaS und hochpreisigen Desktop-Landingpages:

Sozialer Beweis (Logo-Wolke bekannter Technologiemarken, Bewertungssterne, Live-Telemetrie-Zahlen) MUSS oberhalb der Falz oder direkt unter der Hero-Headline erscheinen, bevor komplexe Produktfunktionen erklärt werden.
Paaren Sie abstrakte Produktbehauptungen mit einem Schwebenden Interaktiven Mockup (isometrische 3D-Neigung, realistische Metrik-Badges und aktive Trendindikatoren).
Halten Sie einen strengen 3-Takt-Scan-Rhythmus ein: Headline + 3 Aufzählungspunkte + 1 expliziter CTA-Button.

3. NeoSoftUI Desktop-Ästhetik (Motvin-System)

Abgeleitet von den @siren.uix Motvin-Designprinzipien:

Canvas-Basis (60%): Tiefe, geschichtete Obsidian-Töne (#06090F, #0B0F17, #121824). Vermeiden Sie reines #000000, um Tiefe und Trennung zu bewahren.

Oberflächenhöhe (30%): Glasmorphe Karten mit:

background: rgba(16, 22, 35, 0.65);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);

Hochwirksame Akzente (10%): Elektrisches Indigo (#6366F1) oder Cyan Neon (#06B6D4) ausschließlich für primäre Buttons, aktive Tabs und Telemetrie-Spitzen reserviert.

4. Interaktive Zustände & Tastatur-Ergonomie

Desktop-Oberflächen leben und sterben mit der Präzision der Maus und der Geschwindigkeit der Tastatur:

Karten-Hover-Übergänge: Sanfte Höhenänderung hover:-translate-y-1 hover:border-indigo-500/40 hover:shadow-indigo-500/10 mit 250ms cubic-bezier-Timing.
Schwebende Batch-Aktionsleiste: Wenn ein Benutzer 2 oder mehr Zeilen in einer Datentabelle auswählt, rendern Sie eine angedockte, schwebende Pill-Leiste unten in der Mitte (fixed bottom-8 left-1/2 -translate-x-1/2), die Aktionen wie CSV exportieren, Batch taggen oder Löschen anzeigt.
Tooltips: Fügen Sie Tastenkürzel in Hover-Tooltips ein (z. B. ⌘K, /, Shift + D).

5. Desktop-Typografie & Informationshierarchie

Hierarchieebene	Schriftgröße	Gewicht	Laufweite	Verwendung
Hero-Display	56px – 72px	ExtraBold (800)	`-0.025em` (Eng)	Wertversprechen der Landingpage oberhalb der Falz
Seiten-/Abschnitts-H1	32px – 40px	Bold (700)	`-0.02em`	Dashboard-View-Titel, Abschnittsüberschriften
Widget-/Karten-H2	18px – 22px	SemiBold (600)	`-0.01em`	Bento-Kartenüberschriften, Tabellentitel
Datenmetrik/-Wert	28px – 36px	ExtraBold (800)	Normal	Schlüsselstatistiken, ARR-Metriken, Zählerzahlen
Fließtext / Beschreibung	14px – 16px	Regular (400)	Normal	Absätze, Dokumentation (1.6 Zeilenhöhe)
Code / Monospace	12px – 13px	Medium (500)	Normal	Abfragelatenz, API-Endpunkte, JSON-Schlüssel

🧩 Produktionsreife Desktop-Komponenten-Blaupausen

Blaupause A: Moderner Bento-Grid-Matrix (Asymmetrische Spannen)

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
  <!-- Karte 1: 2-spaltige Hero-Karte (Datentelemetrie) -->
  <div class="lg:col-span-2 rounded-2xl border border-white/10 bg-[#101623]/80 p-8 backdrop-blur-xl relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300">
    <!-- Umgebender Radial-Glow -->
    <div class="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-indigo-500/10 blur-3xl group-hover:bg-indigo-500/20 transition-all"></div>
    
    <div class="flex items-center justify-between mb-6">
      <div class="flex items-center gap-3">
        <div class="h-10 w-10 rounded-xl bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 flex items-center justify-center font-bold">⚡</div>
        <div>
          <h3 class="text-xl font-bold text-white">Sub-Sekunden-Abfrage-Pipeline</h3>
          <p class="text-xs text-neutral-400">ClickHouse spaltenorientierter Speicher-Engine</p>
        </div>
      </div>
      <span class="px-2.5 py-1 rounded-md bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-xs font-mono">P99: 11.2ms</span>
    </div>

    <p class="text-sm text-neutral-300 max-w-xl leading-relaxed mb-6">
      Durchsuchen Sie Milliarden von Telemetrielogs ohne Pre-Aggregations-Engpässe. Isolieren Sie Kundenabbrüche ohne Kaltstarts.
    </p>

    <!-- Visuelle Sparkline-Simulation -->
    <div class="h-28 rounded-xl bg-black/40 border border-white/5 p-4 flex items-end gap-3 justify-between">
      <div class="w-full bg-neutral-800 rounded h-[40%]"></div>
      <div class="w-full bg-neutral-800 rounded h-[55%]"></div>
      <div class="w-full bg-neutral-800 rounded h-[45%]"></div>
      <div class="w-full bg-indigo-900/60 rounded h-[70%]"></div>
      <div class="w-full bg-gradient-to-t from-indigo-600 to-cyan-400 rounded h-[95%] relative">
        <span class="absolute -top-7 left-1/2 -translate-x-1/2 text-[10px] font-mono font-bold text-white bg-indigo-900 px-2 py-0.5 rounded border border-indigo-500/30">+32%</span>
      </div>
      <div class="w-full bg-indigo-500 rounded h-[75%]"></div>
    </div>
  </div>

  <!-- Karte 2: 1-spaltige Metrik-Karte -->
  <div class="rounded-2xl border border-white/10 bg-[#101623]/80 p-8 backdrop-blur-xl flex flex-col justify-between group hover:border-cyan-500/40 transition-all duration-300">
    <div>
      <span class="text-xs font-mono font-bold uppercase tracking-wider text-cyan-400">Retention Shield</span>
      <h3 class="text-lg font-bold text-white mt-2">Autonome Abwanderungs-Warnung</h3>
      <p class="text-xs text-neutral-400 mt-1 leading-relaxed">Kontinuierliches ML-Monitoring erkennt Anomalien vor Verlängerungsterminen.</p>
    </div>
    <div class="my-6">
      <div class="text-5xl font-extrabold tracking-tight text-white">$482<span class="text-2xl text-cyan-400 font-normal">k</span></div>
      <p class="text-xs text-neutral-500 mt-1">ARR bewahrt durch proaktive Interventionen</p>
    </div>
    <div class="flex items-center gap-1.5 text-xs font-semibold text-cyan-400 group-hover:translate-x-1 transition-transform">
      <span>Webhook-Trigger konfigurieren</span> →
    </div>
  </div>
</div>

Blaupause B: Dichte Enterprise-Datentabelle mit schwebender Batch-Leiste

<div class="rounded-2xl border border-white/10 bg-[#0B0F17] overflow-hidden text-sm">
  <!-- Tabellenkopf-Aktionen -->
  <div class="p-5 border-b border-white/5 flex items-center justify-between bg-[#101623]/60">
    <div class="flex items-center gap-3">
      <h3 class="font-bold text-white">Live Telemetrie-Ereignisse</h3>
      <span class="px-2 py-0.5 rounded bg-white/5 text-neutral-400 text-xs font-mono">1.420.892 gesamt</span>
    </div>
    <div class="flex items-center gap-2">
      <input type="text" placeholder="Nach Ereignisname, Benutzer-ID, Region filtern..." class="px-3 py-1.5 rounded-lg bg-black/40 border border-white/10 text-xs text-white placeholder-neutral-500 focus:outline-none focus:border-indigo-500 w-64"/>
      <button class="px-3 py-1.5 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 text-xs text-neutral-300 font-medium">CSV exportieren</button>
    </div>
  </div>

  <!-- Tabellenkörper -->
  <table class="w-full text-left border-collapse">
    <thead>
      <tr class="border-b border-white/5 text-xs font-mono text-neutral-400 bg-white/[0.01]">
        <th class="p-4 w-10"><input type="checkbox" class="rounded bg-black border-white/20"/></th>
        <th class="p-4">Zeitstempel</th>
        <th class="p-4">Ereignistyp</th>
        <th class="p-4">Kundenkonto</th>
        <th class="p-4">Erfassungslatenz</th>
        <th class="p-4 text-right">Status</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-white/5 text-neutral-300 text-xs font-mono">
      <tr class="hover:bg-white/[0.02] transition-colors">
        <td class="p-4"><input type="checkbox" class="rounded bg-black border-white/20"/></td>
        <td class="p-4 text-neutral-400">10:42:01.412 UTC</td>
        <td class="p-4 font-semibold text-white">checkout.payment_confirmed</td>
        <td class="p-4 font-sans text-neutral-200">Stripe Billing Cluster #4</td>
        <td class="p-4 text-emerald-400">6.2 ms</td>
        <td class="p-4 text-right"><span class="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-[10px]">VERARBEITET</span></td>
      </tr>
      <tr class="hover:bg-white/[0.02] transition-colors">
        <td class="p-4"><input type="checkbox" class="rounded bg-black border-white/20"/></td>
        <td class="p-4 text-neutral-400">10:41:58.204 UTC</td>
        <td class="p-4 font-semibold text-white">user.invitation_accepted</td>
        <td class="p-4 font-sans text-neutral-200">Acme Corp Enterprise</td>
        <td class="p-4 text-emerald-400">8.4 ms</td>
        <td class="p-4 text-right"><span class="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-[10px]">VERARBEITET</span></td>
      </tr>
    </tbody>
  </table>

  <!-- Schwebende angedockte Batch-Aktionsleiste (Erscheint, wenn 2+ Zeilen ausgewählt sind) -->
  <div class="fixed bottom-8 left-1/2 -translate-x-1/2 px-5 py-3 rounded-2xl bg-[#172033] border border-indigo-500/40 shadow-2xl shadow-black/80 flex items-center gap-4 text-xs z-50">
    <span class="font-semibold text-white"><span class="text-indigo-400 font-mono">2</span> Elemente ausgewählt</span>
    <div class="h-4 w-px bg-white/10"></div>
    <button class="text-neutral-300 hover:text-white font-medium">Pipeline erneut ausführen</button>
    <button class="text-neutral-300 hover:text-white font-medium">JSON exportieren</button>
    <button class="text-rose-400 hover:text-rose-300 font-medium">Datensätze löschen</button>
  </div>
</div>

🚫 Desktop-Anti-Patterns (Dos und Don'ts)

NIEMALS SO MACHEN (Anti-Pattern)	IMMER SO MACHEN (Desktop-Best-Practice)
Einspaltiges Mobile-Layout auf 1920px strecken.	Mehrspaltige Bento-Grids oder mehrteilige Master-Detail-Layouts verwenden.
Benutzer zwingen, Datentabellen mit nur 5 Zeilen pro Seite zu paginieren.	Standardmäßig 25–50 Zeilen mit fixierten Tabellenüberschriften und sofortiger Suchfilterung.
Reine `#000000`-Hintergründe mit harten `#FFFFFF`-Rändern verwenden.	Tiefe Obsidian-Töne (`#0B0F17`) mit subtilen glasmorphen Rändern (`border-white/10`) schichten.
Tastaturkürzel vor fortgeschrittenen Enterprise-Benutzern verstecken.	Kürzel-Tags (`⌘K`, `/`, `G dann D`) direkt auf interaktiven Elementen anzeigen.
Sich auf langsame vollständige Seitenneuladungen für einfache Statusfilter verlassen.	Telemetrie-Diagramme und Tabellenzeilen durch optimistische UI-Updates sofort aktualisieren.

💬 KI-Aufforderungsvorlagen (Wie Benutzer Sie auffordern können)

Benutzer können dieses Skill durch Aufforderungen wie diese aktivieren:

„Entwerfen Sie mit dem Skill desktop-uiux-pro ein Enterprise-Analytics-Dashboard mit einem Bento-Grid und Live-ClickHouse-Telemetrietabellen.“
„Architekturieren Sie mit desktop-uiux-pro eine B2B-SaaS-Landingpage mit NeoSoftUI-Dunkelmodus, Beweis-vor-Behauptung und einer 3-stufigen Preismatrix.“
„Überprüfen Sie dieses Desktop-Layout auf räumliche Dichte, Tastaturkürzel und WCAG-Kontrast.“

Cyberstarszs/desktop-uiux-pro

Was ist desktop-uiux-pro?

In Ihrer bevorzugten KI fragen

Dokumentation

Desktop UI/UX Pro Designer (Agenten-Skill)

🖥️ Kernverhaltensrichtlinien für die KI

1. Räumliche Dichte & das 3-Ebenen-Desktop-Layout

2. Beweis vor Behauptung (Conversion-Architektur)

3. NeoSoftUI Desktop-Ästhetik (Motvin-System)

4. Interaktive Zustände & Tastatur-Ergonomie

5. Desktop-Typografie & Informationshierarchie

🧩 Produktionsreife Desktop-Komponenten-Blaupausen

Blaupause A: Moderner Bento-Grid-Matrix (Asymmetrische Spannen)

Blaupause B: Dichte Enterprise-Datentabelle mit schwebender Batch-Leiste

🚫 Desktop-Anti-Patterns (Dos und Don'ts)

💬 KI-Aufforderungsvorlagen (Wie Benutzer Sie auffordern können)

Verwandte Skills

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me