Générateur de Code UI Web — Générateur de Code UI Premium

Générez du code UI qui ressemble à un projet vedette de Dribbble ou Behance — PAS à une sortie générique d'IA. L'objectif est de produire un code impossible à distinguer de celui d'un designer produit senior travaillant dans les meilleurs studios.

Problème Fondamental Que Cette Compétence Résout

L'UI générée par IA est typiquement « techniquement correcte mais sans âme » :

Mises en page plates, sans vie et sans émotion visuelle
Grille mécanique sans rythme ni espace pour respirer
Couleurs génériques qui ne créent pas d'atmosphère
Aucune profondeur, aucune lumière, aucune dimension
Texte qui « reste là » sans attirer l'attention

Cette compétence transforme le rendu en expériences visuelles de qualité design.

Quand L'utiliser

Cette compétence DOIT être invoquée lorsque :

Vous construisez une page Web, une application ou une page d'atterrissage
Vous créez des composants UI qui nécessitent du polissage
L'utilisateur s'attend à un rendu beau et moderne
Toute tâche HTML/CSS/JS, React ou Vue avec des attentes de qualité visuelle

LE SYSTÈME DE DESIGN

1. Fond : Atmosphère avec Dégradé Diffusé

N'utilisez JAMAIS de couleurs pleines plates. Les fonds doivent créer une atmosphère et une émotion.

Technique — Dégradés Diffusés en Couches :

/* Couche de fond 1 : dégradé de base */
body {
  background: #0a0a0f;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(120, 119, 198, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(255, 107, 107, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(78, 205, 196, 0.06) 0%, transparent 50%);
}

/* Version thème clair : */
body.light {
  background: #f8f6f4;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(167, 139, 250, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 90% 60%, rgba(251, 191, 146, 0.1) 0%, transparent 40%),
    radial-gradient(ellipse 50% 50% at 10% 90%, rgba(147, 197, 253, 0.08) 0%, transparent 40%);
}

Règles :

Utilisez 2 à 4 couches radial-gradient avec différentes positions et couleurs
Gardez l'opacité FAIBLE (0.06-0.15 sur foncé, 0.08-0.15 sur clair)
Les couleurs doivent être complémentaires ou analogues — PAS aléatoires
Positionnez les dégradés décentrés et sur les bords pour un rendu naturel
Utilisez la forme ellipse, pas circle — plus organique

Palettes d'ambiance colorée pour les fonds :

Calme/Tech : violet-bleu + sarcelle (rgba(120,119,198) + rgba(78,205,196))
Chaud/Créatif : orange-rose + or (rgba(255,107,107) + rgba(255,193,68))
Frais/Nature : vert + bleu (rgba(52,211,153) + rgba(96,165,250))
Premium/Luxe : violet profond + rose (rgba(139,92,246) + rgba(244,114,182))
Neutre/Corporate : bleu ardoise + argent (rgba(100,116,139) + rgba(148,163,184))

2. Typographie : Hiérarchie Cinématographique

La différence #1 entre une UI amateur et professionnelle : un contraste typographique extrême.

/* Titre héro — domine l'écran */
.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

/* Titre de section — ancre le contenu */
.section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Sous-titre / titre de carte */
.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Corps de texte — délibérément léger */
.body-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 540px; /* mesure de lecture */
}

/* Petit libellé / tag */
.label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

Règles :

Ratio de taille titre/corps : minimum 3:1 (ex. 48px titre / 16px corps)
Texte héro : TOUJOURS utiliser clamp() pour une mise à l'échelle fluide
Interlettrage : NÉGATIF pour les titres (-0.02 à -0.04em), POSITIF pour les libellés (+0.03 à +0.06em)
Hauteur de ligne : 1.0-1.1 pour les titres, 1.5-1.6 pour le corps
Au maximum, un écran doit avoir 2-3 tailles de police, pas plus
Contraste de poids : 700 pour les titres / 400 pour le corps — n'utilisez jamais 500 pour tout

3. Mise en Page : Respirez & Bento

La Règle de la Respiration : 60% de l'écran doit être de l'ESPACE VIDE. Le contenu est précieux — entourez-le d'air.

Échelle d'espacement :

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --space-section: clamp(80px, 12vw, 160px);
}

Grille Bento (pour les sections de fonctionnalités, tableaux de bord) :

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
}

/* La carte de fonctionnalité s'étend sur 2 colonnes */
.bento-item-wide { grid-column: span 2; }
/* La carte héro s'étend sur 2 colonnes + 2 rangées */
.bento-item-hero { grid-column: span 2; grid-row: span 2; }
/* Carte haute */
.bento-item-tall { grid-row: span 2; }

Règles :

Padding vertical des sections : 80-160px (utilisez --space-section)
Largeur max du contenu : 1120px (pas 1200 — légèrement plus serré donne une impression plus design)
Padding latéral de la page : 48-80px desktop, 20-24px mobile
Padding des cartes : 32-48px (généreux, pas à l'étroit)
Entre le titre et le corps du texte : 16-24px
Entre les sections de cartes : espacement de 16-20px
Section héro : contenu centré verticalement, hauteur minimum 80vh
NE remplissez JAMAIS toute la largeur — laissez des marges généreuses

4. Cartes & Surfaces : Verre avec Âme

/* === Carte en verre thème sombre === */
.card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reflet lumineux du bord supérieur */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1) 50%, transparent);
}

/* Survol : soulèvement + lueur */
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* === Carte en verre thème clair === */
.card-light {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 
    0 4px 24px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.card-light:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

Règles :

Border-radius : 20-32px pour les cartes (GRAND — c'est le look moderne)
Bordure : toujours rgba, jamais de couleurs pleines — opacité max 0.06-0.1
Ajoutez toujours un reflet sur le bord supérieur (astuce ::before avec linear-gradient)
Le survol doit inclure translateY (soulèvement) ET une ombre renforcée
Les cartes claires utilisent une ombre inset pour la lueur intérieure
Padding des cartes : minimum 32px, jamais moins

5. Boutons : Pilule + Émotion

/* CTA principal — pilule avec présence */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.4);
}

.btn-primary:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

/* Fantôme / secondaire — pilule avec contour subtil */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid rgba(var(--text-rgb), 0.15);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-ghost:hover {
  background: rgba(var(--text-rgb), 0.05);
  border-color: rgba(var(--text-rgb), 0.3);
}

Règles :

TOUS les boutons utilisent border-radius: 50px (forme de pilule)
Bouton principal : remplissage plein + lueur d'ombre de couleur assortie
Bouton secondaire : transparent/fantôme avec bordure fine
Padding : 14-16px vertical, 28-36px horizontal (généreux)
Survol : TOUJOURS translateY + boost d'échelle + augmentation de la lueur
Actif : scale(0.97) avec transition rapide (100ms)
N'utilisez jamais de boutons carrés/légèrement arrondis — toujours une pilule complète

6. Icônes : SVG Uniquement — JAMAIS d'Émoji

RÈGLE ABSOLUE : N'utilisez jamais d'émoji (🎬🎮💼🎵) comme icônes d'interface. C'est le signe #1 d'un code amateur généré par IA.

Option A : Icônes Lucide via CDN (PRÉFÉRÉE)

Lucide est la bibliothèque d'icônes open source la plus moderne et légère (1000+ icônes).

<!-- Ajouter dans <head> -->
<script src="https://unpkg.com/lucide@latest"></script>

<!-- Utiliser dans le HTML avec l'attribut data-lucide -->
<i data-lucide="music" class="icon"></i>
<i data-lucide="play" class="icon"></i>
<i data-lucide="search" class="icon"></i>
<i data-lucide="heart" class="icon"></i>

<!-- Initialiser à la fin du body -->
<script>lucide.createIcons();</script>

/* Styliser les icônes avec CSS */
.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.75;
}

Noms d'icônes courants : home, search, settings, user, heart, play, pause, skip-forward, skip-back, volume-2, music, headphones, mic, star, bookmark, share-2, download, arrow-left, arrow-right, chevron-down, plus, x, check, bell, mail, calendar, clock, globe, camera, image, film, book-open, briefcase, code, terminal, zap, trending-up, bar-chart-2, pie-chart, layers, grid, list, filter, edit-3, trash-2, eye, eye-off, lock, unlock, sun, moon, menu, more-horizontal, more-vertical, external-link, link, send, message-circle, phone, map-pin

Option B : SVG Inline (lorsque le CDN n'est pas disponible)

Écrivez des chemins SVG minimaux directement. Gardez les icônes simples (un seul chemin, viewBox 24x24) :

<!-- Icône de lecture -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
  <polygon points="5 3 19 12 5 21 5 3"/>
</svg>

<!-- Icône de recherche -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>

<!-- Icône d'accueil -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
</svg>

Règles de style des icônes :

Taille : 18-24px pour standard, 16px pour compact, 28-32px pour les icônes de fonctionnalités
Stroke-width : 1.5-2 (plus fin = plus raffiné)
Couleur : utilisez currentColor pour que les icônes héritent de la couleur du texte
Conteneur d'icône : enveloppez dans un div arrondi avec un fond subtil pour mettre en valeur

/* Conteneur d'icône — donne un « écrin » aux icônes */
.icon-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

7. Tokens de Couleurs

:root {
  /* Thème sombre (par défaut) */
  --bg: #0a0a0f;
  --text-primary: #f0f0f3;
  --text-secondary: #8b8b99;
  --text-muted: #4a4a58;
  --accent: #6366f1;        /* indigo — changer selon le projet */
  --accent-rgb: 99, 102, 241;
  --accent-glow: rgba(99, 102, 241, 0.3);
  --surface: rgba(255, 255, 255, 0.03);
  --surface-border: rgba(255, 255, 255, 0.06);
  --text-rgb: 240, 240, 243;
}

/* Thème clair */
:root.light {
  --bg: #f8f6f4;
  --text-primary: #1a1a2e;
  --text-secondary: #6b6b80;
  --text-muted: #a0a0b0;
  --accent: #6366f1;
  --accent-rgb: 99, 102, 241;
  --surface: rgba(255, 255, 255, 0.6);
  --surface-border: rgba(255, 255, 255, 0.7);
  --text-rgb: 26, 26, 46;
}

Options de couleur d'accentuation (choisissez UNE par projet) :

Indigo : #6366f1 — tech, IA, SaaS
Bleu : #3b82f6 — confiance, corporate, finance
Violet : #8b5cf6 — créatif, premium
Rose : #f43f5e — audacieux, énergie, social
Ambre : #f59e0b — chaleureux, crypto, fintech
Émeraude : #10b981 — santé, nature, croissance
Cyan : #06b6d4 — frais, moderne, voyage

7. Micro-interactions & Mouvement

/* Préréglages de transition */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

/* Survol de carte — flottement vers le haut */
.card { transition: all 0.4s var(--ease-out-expo); }
.card:hover { transform: translateY(-4px); }

/* Survol de bouton — échelle rebondissante */
.btn { transition: all 0.25s var(--ease-bounce); }
.btn:hover { transform: translateY(-2px) scale(1.03); }

/* Animation d'entrée subtile */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-in {
  animation: fadeUp 0.6s var(--ease-out-expo) forwards;
}

Règles :

Cartes : 0.4s ease-out-expo, translateY(-4px) au survol
Boutons : 0.25s bounce, translateY(-2px) + scale(1.03)
Champs de saisie : 0.2s smooth, changement de couleur de bordure + lueur subtile
N'utilisez JAMAIS transition: all 0.3s ease — c'est le signe distinctif de l'IA
Actif/enfoncé : scale(0.97), durée 0.1s
Chargement de page : animation fadeUp décalée (délai de 0.1s par élément)

8. Éléments de Profondeur Visuelle

Ajoutez ces éléments pour créer la sensation « design » :

/* Orbe de dégradé flottant (décoratif) */
.orb {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Superposition de texture de bruit (subtile) */
.noise-overlay::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1000;
}

Éléments de profondeur :

Orbes floues positionnées derrière le contenu
Superposition de bruit subtile (opacité 0.02-0.04)
Reflet lumineux sur le bord supérieur des cartes
Ombres portées avec flou et profondeur
Dégradés dans les arrière-plans des boîtes d'icônes

CODE DE SORTIE — STRUCTURE

Structure minimale d'une page simple :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nom du Projet</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <script src="https://unpkg.com/lucide@latest"></script>
  <style>
    /* ... CSS complet du système de design ... */
  </style>
</head>
<body>
  <!-- Contenu -->
  <script>lucide.createIcons();</script>
</body>
</html>

Pour les composants React :

import { Music, Play, Heart } from 'lucide-react';

function MusicPlayer() {
  return (
    <div className="card">
      <div className="icon-box">
        <Music size={20} />
      </div>
      <h3 className="card-title">Titre de la Chanson</h3>
      <p className="body-text">Nom de l'Artiste</p>
      <button className="btn-primary">
        <Play size={16} />
        Lire
      </button>
    </div>
  );
}

Pour les composants Vue :

<template>
  <div class="card">
    <div class="icon-box">
      <i data-lucide="music" class="icon"></i>
    </div>
    <h3 class="card-title">Titre de la Chanson</h3>
    <p class="body-text">Nom de l'Artiste</p>
    <button class="btn-primary" @click="play">
      <i data-lucide="play" class="icon"></i>
      Lire
    </button>
  </div>
</template>

<script>
import { createIcons } from 'lucide';
export default {
  mounted() { createIcons(); },
  methods: { play() { /* logique de lecture */ } }
}
</script>

LISTE DE VÉRIFICATION DE LA QUALITÉ

Avant de terminer, CONFIRMEZ que TOUS les éléments suivants sont vrais :

EXEMPLE DE SORTIE

Voir exemple.html pour un exemple de page complète mettant en œuvre tout le système de design ci-dessus.

Cette compétence est optimisée pour être utilisée avec ui-ux-pro-max pour une recherche d'intelligence design et un référencement de composants.

MLiang0920/mliang-ui-design-skill

Qu'est-ce que mliang-ui-design-skill ?

Demander à votre IA préférée

Documentation

Générateur de Code UI Web — Générateur de Code UI Premium

Problème Fondamental Que Cette Compétence Résout

Quand L'utiliser

LE SYSTÈME DE DESIGN

1. Fond : Atmosphère avec Dégradé Diffusé

2. Typographie : Hiérarchie Cinématographique

3. Mise en Page : Respirez & Bento

4. Cartes & Surfaces : Verre avec Âme

5. Boutons : Pilule + Émotion

6. Icônes : SVG Uniquement — JAMAIS d'Émoji

7. Tokens de Couleurs

7. Micro-interactions & Mouvement

8. Éléments de Profondeur Visuelle

CODE DE SORTIE — STRUCTURE

Structure minimale d'une page simple :

Pour les composants React :

Pour les composants Vue :

LISTE DE VÉRIFICATION DE LA QUALITÉ

EXEMPLE DE SORTIE

Skills associés

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me