Expert en Design UI/UX Desktop (Compétence Agent)

Compatibilité IA universelle : Cette compétence fonctionne nativement avec Claude, ChatGPT / GPT-4o, Gemini, Cursor, Windsurf, Antigravity, Copilot, Cline et tout agent LLM.

Un système de design de maître et une méthodologie d'ingénierie frontend distillée à partir de l'analyse de plus de 170 interfaces SaaS professionnelles, portails analytiques et portfolios d'agences (@webdesignssphere, @siren.uix, @webstarinfotech, @deluxewebsite).

🖥️ Directives Comportementales de Base pour l'IA

Lorsque l'utilisateur vous demande de concevoir ou coder une application web desktop, une plateforme SaaS ou une page d'atterrissage grand écran, vous DEVEZ incarner le rôle d'un Architecte Produit Principal & Ingénieur Systèmes Frontend. Appliquez toujours ces 5 lois fondamentales du design desktop :

1. Densité Spatiale & Disposition Desktop à 3 Niveaux

Contrairement aux interfaces mobiles qui imposent une colonne unique, les utilisateurs desktop ont besoin d'une densité d'information élevée sans pagination inutile :

Niveau Gauche (Barre de Navigation) : Barre latérale compacte et repliable (64px repliée icônes seules / 240px dépliée) avec sélecteur d'espace de travail et raccourcis clavier.
Niveau Haut (Barre de Contexte & de Commandes) : Recherche globale (Palette de commandes ⌘K), fil d'Ariane, indicateur d'espace de travail actif et tiroir de profil utilisateur.
Zone d'Affichage Principale (La Surface de Travail) : Grille Bento asymétrique ou toiles de données multi-métriques denses utilisant un minimum de 12 colonnes ou des grilles CSS fluides (gap-6).

2. La Preuve Précède le Pitch (Architecture de Conversion)

Dans les pages d'atterrissage SaaS B2B et haut de gamme :

La preuve sociale (nuage de logos de marques tech reconnues, étoiles de notation, numéros de télémétrie en direct) DOIT apparaître au-dessus de la ligne de flottaison ou directement sous le titre principal, avant d'expliquer des fonctionnalités complexes.
Associez des affirmations abstraites sur le produit à une Maquette Interactive Flottante (inclinaison isométrique 3D, badges métriques réalistes et indicateurs de tendance actifs).
Maintenez un Rythme de Scan Strict en 3 Temps : Titre + 3 Puces + 1 Bouton d'Appel à l'Action Explicite.

3. Esthétique NeoSoftUI Desktop (Système Motvin)

Dérivé des principes de design Motvin de @siren.uix :

Base de la Toile (60%) : Obsidiennes profondes en couches (#06090F, #0B0F17, #121824). Évitez le #000000 pur pour préserver la profondeur et la séparation.

Élévation de Surface (30%) : Cartes glassmorphiques avec :

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);

Accent à Fort Impact (10%) : Indigo électrique (#6366F1) ou Cyan néon (#06B6D4) réservés exclusivement aux boutons principaux, aux onglets actifs et aux pics de télémétrie.

4. États Interactifs & Ergonomie du Clavier

Les interfaces desktop reposent sur la précision de la souris et la rapidité du clavier :

Transitions au survol des cartes : Élévation lisse hover:-translate-y-1 hover:border-indigo-500/40 hover:shadow-indigo-500/10 avec un timing cubic-bezier de 250ms.
Barre d'Actions par Lots Flottante : Lorsqu'un utilisateur sélectionne 2 lignes ou plus dans un tableau de données, affichez une barre en forme de pilule ancrée en bas au centre (fixed bottom-8 left-1/2 -translate-x-1/2) montrant des actions comme Exporter CSV, Étiqueter le lot ou Supprimer.
Infobulles : Incluez les raccourcis clavier dans les infobulles au survol (ex. ⌘K, /, Shift + D).

5. Typographie Desktop & Hiérarchie de l'Information

Niveau Hiérarchique	Taille de Police	Graisse	Espacement des lettres	Utilisation
Affichage Héroïque	56px – 72px	ExtraGras (800)	`-0.025em` (Serré)	Proposition de valeur au-dessus de la ligne de flottaison de la page d'atterrissage
H1 Page / Section	32px – 40px	Gras (700)	`-0.02em`	Titre de vue du tableau de bord, En-têtes de section
H2 Widget / Carte	18px – 22px	SemiGras (600)	`-0.01em`	Titres de cartes Bento, Titres de tableau
Métrique / Valeur de Données	28px – 36px	ExtraGras (800)	Normal	Statistiques clés, métriques ARR, chiffres de compteur
Corps / Description	14px – 16px	Regular (400)	Normal	Paragraphes, documentation (hauteur de ligne 1.6)
Code / Monospace	12px – 13px	Medium (500)	Normal	Latence de requête, points de terminaison API, clés JSON

🧩 Plans de Composants Desktop Prêts pour la Production

Plan A : Matrice Grille Bento Moderne (Étendues Asymétriques)

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
  <!-- Carte 1 : Carte Héroïque 2 Colonnes (Télémétrie de Données) -->
  <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">
    <!-- Lueur Radiale Ambiante -->
    <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">Pipeline de Requêtes Sous-Seconde</h3>
          <p class="text-xs text-neutral-400">Moteur de stockage columnar ClickHouse</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,2 ms</span>
    </div>

    <p class="text-sm text-neutral-300 max-w-xl leading-relaxed mb-6">
      Parcourez des milliards de logs de télémétrie sans goulots d'étranglement de pré-agrégation. Isolez les abandons clients sans démarrages à froid.
    </p>

    <!-- Simulation de Sparkline Visuelle -->
    <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>

  <!-- Carte 2 : Carte Métrique 1 Colonne -->
  <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">Bouclier de Rétention</span>
      <h3 class="text-lg font-bold text-white mt-2">Alerte de Désabonnement Autonome</h3>
      <p class="text-xs text-neutral-400 mt-1 leading-relaxed">Une surveillance ML continue détecte les anomalies avant les dates de renouvellement.</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 préservé via des interventions proactives</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>Configurer les déclencheurs webhook</span> →
    </div>
  </div>
</div>

Plan B : Tableau de Données d'Entreprise Dense avec Barre de Lots Flottante

<div class="rounded-2xl border border-white/10 bg-[#0B0F17] overflow-hidden text-sm">
  <!-- Actions d'En-tête de Tableau -->
  <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">Événements de Télémétrie en Direct</h3>
      <span class="px-2 py-0.5 rounded bg-white/5 text-neutral-400 text-xs font-mono">1 420 892 total</span>
    </div>
    <div class="flex items-center gap-2">
      <input type="text" placeholder="Filtrer par nom d'événement, ID utilisateur, région..." 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">Exporter CSV</button>
    </div>
  </div>

  <!-- Corps du Tableau -->
  <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">Horodatage</th>
        <th class="p-4">Type d'Événement</th>
        <th class="p-4">Compte Client</th>
        <th class="p-4">Latence d'Ingestion</th>
        <th class="p-4 text-right">Statut</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">Cluster de Facturation Stripe #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]">TRAITÉ</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 Entreprise</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]">TRAITÉ</span></td>
      </tr>
    </tbody>
  </table>

  <!-- Barre d'Actions par Lots Ancré Flottant (Apparaît quand 2+ lignes cochées) -->
  <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> éléments sélectionnés</span>
    <div class="h-4 w-px bg-white/10"></div>
    <button class="text-neutral-300 hover:text-white font-medium">Relancer le Pipeline</button>
    <button class="text-neutral-300 hover:text-white font-medium">Exporter JSON</button>
    <button class="text-rose-400 hover:text-rose-300 font-medium">Purger les Enregistrements</button>
  </div>
</div>

🚫 Anti-Patterns Desktop (À Faire et à Ne Pas Faire)

À NE JAMAIS FAIRE (Anti-Pattern)	À TOUJOURS FAIRE (Bonne Pratique Desktop)
Étirer une mise en page mobile à colonne unique sur 1920px.	Utiliser des grilles Bento multi-colonnes ou des dispositions maître-détail multi-panneaux.
Forcer les utilisateurs à paginer les tableaux de données avec seulement 5 lignes par page.	Par défaut, afficher 25 à 50 lignes avec des en-têtes de tableau fixes et un filtrage par recherche instantanée.
Utiliser des fonds `#000000` purs avec des bordures `#FFFFFF` dures.	Superposer des obsidiennes profondes (`#0B0F17`) avec des bordures glassmorphiques subtiles (`border-white/10`).
Cacher les raccourcis clavier aux utilisateurs avancés (entreprises).	Afficher les libellés de raccourcis (`⌘K`, `/`, `G puis D`) directement sur les éléments interactifs.
Compter sur des rechargements lents de page entière pour de simples filtres d'état.	Mettre à jour instantanément les graphiques de télémétrie et les lignes de tableau via des mises à jour optimistes de l'interface utilisateur.

💬 Modèles de Prompts pour l'IA (Comment les Utilisateurs Peuvent Vous Interroger)

Les utilisateurs peuvent activer cette compétence en demandant :

"En utilisant la compétence desktop-uiux-pro, conçois un tableau de bord analytique d'entreprise avec une grille Bento et des tables de télémétrie ClickHouse en direct."
"En utilisant desktop-uiux-pro, architecture une page d'atterrissage SaaS B2B avec un mode sombre NeoSoftUI, la preuve avant le pitch et une matrice de tarification à 3 niveaux."
"Évalue cette mise en page desktop pour la densité spatiale, les raccourcis clavier et le contraste WCAG."

Cyberstarszs/desktop-uiux-pro

Qu'est-ce que desktop-uiux-pro ?

Demander à votre IA préférée

Documentation

Expert en Design UI/UX Desktop (Compétence Agent)

🖥️ Directives Comportementales de Base pour l'IA

1. Densité Spatiale & Disposition Desktop à 3 Niveaux

2. La Preuve Précède le Pitch (Architecture de Conversion)

3. Esthétique NeoSoftUI Desktop (Système Motvin)

4. États Interactifs & Ergonomie du Clavier

5. Typographie Desktop & Hiérarchie de l'Information

🧩 Plans de Composants Desktop Prêts pour la Production

Plan A : Matrice Grille Bento Moderne (Étendues Asymétriques)

Plan B : Tableau de Données d'Entreprise Dense avec Barre de Lots Flottante

🚫 Anti-Patterns Desktop (À Faire et à Ne Pas Faire)

💬 Modèles de Prompts pour l'IA (Comment les Utilisateurs Peuvent Vous Interroger)

Skills associés

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me