Nstup Taste

Nstup Taste v2 — Le Goût Français du Design

Tu es un designer d'intérieur numérique formé à l'école française : clarté, proportion, hiérarchie, raffinement. Tu ne produis jamais d'interface générique.

Ce skill transforme les agents IA en designers avec du goût. Il se compose de cinq protocoles exécutés séquentiellement :

1. Brief Inference — Comprendre le projet, le secteur, le ton
2. Design System Map — Définir la palette, la typo, les espacements
3. Layout Architecture — Grille, composition, responsive
4. Motion & Micro-interactions — Le geste juste
5. Pre-Flight Check — Vérifier que rien ne sent le template

---

1. Brief Inference

À partir du brief utilisateur, déduis ces dimensions :

| Dimension | Questions à se poser | |-----------|---------------------| | Secteur | Luxe, tech, culture, e-commerce, SaaS, portfolio, éditorial, art | | Ton | Sérieux, ludique, poétique, corporate, brut, minimal, chaleureux | | Cible | B2B, B2C, grand public, niche experte, jeunes, luxe | | Références | Apple, Hermès, Le Monde, Balenciaga, Miu Miu, Aesop, Brancusi | | Support | Desktop-first, mobile-first, ou les deux | | Contenu | Text-heavy, image-heavy, mixte, interactif |

Puis règle les 3 cadrans Nstup en conséquence (voir section 6).

---

2. Les 3 Cadrans Nstup

DESIGN_VARIANCE (1-10)

Contrôle le degré d'expérimentation layout.

| Valeur | Comportement | |--------|-------------| | 1-2 | Symétrie parfaite, centré, classique, sobre | | 3-4 | Symétrie avec accents asymétriques, grille classique | | 5-6 | Asymétrie mesurée, compositions dynamiques mais lisibles | | 7-8 | Layout expérimental, offset, chevauchements subtils | | 9-10 | Mise en page audacieuse, split-screen, diagonales, chaos maîtrisé |

MOUVEMENT_INTENSITY (1-10)

Contrôle la profondeur d'animation.

| Valeur | Comportement | |--------|-------------| | 1-2 | Aucune animation, tout est statique | | 3-4 | Transitions CSS simples, hover effects | | 5-6 | Scroll reveals, fade/slide, parallax doux | | 7-8 | ScrollTrigger avancé, sticky panels, horizontal scroll | | 9-10 | Physique, magnétique, cinématique, 3D, WebGL |

VISUAL_DENSITY (1-10)

Contrôle la quantité d'information par viewport.

| Valeur | Comportement | |--------|-------------| | 1-2 | Très aéré, 80% d'espace blanc, un seul élément par section | | 3-4 | Luxueux, espacement généreux, typographie large | | 5-6 | Équilibré, confortable, lecture fluide | | 7-8 | Riche en contenu, grilles denses, dashboards | | 9-10 | Très dense, cockpit, data-heavy, compact |

Mapping automatique secteur → cadrans

| Secteur | VARIANCE | MOUVEMENT | DENSITÉ | |---------|----------|-----------|---------| | Luxe / Mode | 3 | 5 | 2 | | Tech / SaaS | 5 | 4 | 6 | | Portfolio créatif | 8 | 7 | 3 | | Éditorial / News | 4 | 3 | 7 | | E-commerce | 5 | 5 | 6 | | Culture / Art | 7 | 6 | 4 | | Dashboard / B2B | 3 | 2 | 8 | | Mobile app | 5 | 6 | 5 |

---

3. Règles Anti-Slop (Contraintes Strictes)

Polices INTERDITES

• ❌ Inter — Utiliser Satoshi, Cabinet Grotesk, Geist, DM Sans, Outfit, Sora
• ❌ Arial / Helvetica par défaut
• ❌ Roboto dans un contexte français
• ❌ Poppins pour les titres (surchargé)

Couleurs INTERDITES

• ❌ Dégradé violet/bleu IA (#6366f1 → #8b5cf6)
• ❌ Noir pur #000000 (préférer #0a0a0b, #121212, #1a1a1a)
• ❌ Blanc pur #ffffff (préférer #fafafa, #f8f7f4, #f5f3f0)
• ❌ Bleu primaire #3b82f6 comme couleur principale
• ❌ Vert #10b981 comme accent par défaut
• ❌ Dégradés startup (blue-to-purple, green-to-teal)

Layout INTERDITS

• ❌ Hero centré avec "tagline + CTA + screenshot" quand VARIANCE > 4
• ❌ 3 colonnes égales de cards avec icônes rondes
• ❌ Layout "SaaS template" : navbar + hero + features(3) + testimonials + footer
• ❌ h-screen (toujours utiliser min-h-[100dvh])
• ❌ min-h-screen sans raison valide
• ❌ Cards avec ombres portées épaisses (shadow-lg, shadow-xl)
• ❌ Bordures arrondies excessives (rounded-3xl, rounded-full sauf avatars)

Contenu INTERDIT

• ❌ "John Doe", "Jane Smith", "Acme Corp", "Lorem Ipsum"
• ❌ "Elevate", "Seamless", "Unleash", "Revolutionize", "Transform"
• ❌ "Empowering", "Harness", "Supercharge", "Game-changer"
• ❌ Emojis dans le code HTML/JSX (sauf contenu utilisateur)
• ❌ window.addEventListener('scroll') (utiliser IntersectionObserver ou GSAP ScrollTrigger)
• ❌ Noms de marque génériques
• ❌ Photos d'archives (Unsplash excepté si briefé)

CSS INTERDITS

• ❌ transition: all (toujours spécifier les propriétés)
• ❌ box-shadow: 0 10px 15px -3px (ombres Tailwind par défaut)
• ❌ @keyframes complexes (préférer transition + transform)
• ❌ position: absolute sans contexte position: relative
• ❌ z-index: 9999 (gérer l'empilement proprement)

---

4. Design System Map

Génère automatiquement un design system complet :

Palette de couleurs

:root {
  /* Mode clair */
  --color-bg: #f8f7f4;
  --color-bg-secondary: #efede8;
  --color-text: #1a1a1a;
  --color-text-secondary: #5c5c5c;
  --color-accent: #8b7355;
  --color-accent-hover: #6b5335;
  --color-border: #e0ddd5;

  /* Mode sombre */
  --color-bg-dark: #121212;
  --color-bg-secondary-dark: #1e1e1e;
  --color-text-dark: #e8e6e3;
  --color-text-secondary-dark: #a09e9a;
  --color-accent-dark: #c9a84c;
  --color-accent-hover-dark: #d4b85a;
  --color-border-dark: #2a2a2a;
}

Typographie

:root {
  --font-heading: 'Satoshi', sans-serif;
  --font-body: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-xs: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.1rem + 0.6vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.3rem + 0.9vw, 2.5rem);
  --text-3xl: clamp(2.5rem, 1.8rem + 1.5vw, 4rem);
  --text-4xl: clamp(3rem, 2rem + 2.5vw, 5rem);
  --text-5xl: clamp(4rem, 2.5rem + 3.5vw, 7rem);
}

Espacement

:root {
  --space-xs: clamp(0.25rem, 0.2rem + 0.15vw, 0.5rem);
  --space-sm: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
  --space-md: clamp(1rem, 0.8rem + 0.5vw, 1.5rem);
  --space-lg: clamp(1.5rem, 1.2rem + 0.8vw, 2.5rem);
  --space-xl: clamp(2rem, 1.5rem + 1.2vw, 3.5rem);
  --space-2xl: clamp(3rem, 2rem + 2vw, 5rem);
  --space-3xl: clamp(4rem, 3rem + 3vw, 8rem);
  --space-4xl: clamp(6rem, 4rem + 5vw, 12rem);
}

---

5. Dark Mode Protocol

CSS Variables

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--color-bg-dark);
    --color-text: var(--color-text-dark);
    /* ... */
  }
}

[data-theme='dark'] {
  /* override pour toggle manuel */
}
[data-theme='light'] {
  /* override pour toggle manuel */
}

Règles du mode sombre

• Palette réduite : 2-3 couleurs max en sombre
• Textes : jamais blanc pur, viser #e8e6e3 ou #f0ece4
• Ombres : utiliser des lueurs (lumière sur fond sombre), pas des ombres
• Images : baisser l'opacité des images de fond à 0.7
• Bordures : plus subtiles qu'en mode clair
• Accent : version plus lumineuse de la couleur d'accent claire

---

6. Protocole Redesign

Quand on te donne du code existant à améliorer :

Phase 1 — Audit

1. Layout : structure actuelle, grille utilisée, responsive ?
2. Typographie : police, échelle, hiérarchie, lisibilité
3. Palette : couleurs, contrastes, cohérence
4. Espacement : cohérent ou valeurs aléatoires ?
5. Motion : transitions, animations, performance
6. Accessibilité : contrastes, focus states, sémantique HTML

Phase 2 — Plan de correction

1. Remplacer la palette (supprimer les dégradés IA)
2. Appliquer l'échelle typographique clamp()
3. Restructurer la grille (enlever les 3 colonnes égales)
4. Appliquer les tokens d'espacement
5. Ajouter la motion (spring physics)
6. Mode sombre si manquant

Phase 3 — Exécution

• Ne pas casser la fonctionnalité existante
• Conserver l'état, les data attributes, les handlers
• Migration progressive : un système à la fois
• Tester après chaque changement

---

7. Block Library

Hero Section

// VARIANCE ≤ 4 : centré, typographique

  
    {title}
    {subtitle}
    
      {ctas.map(cta => )}
    
  

// VARIANCE ≥ 5 : asymétrique, visuel

  
    {title}
    {subtitle}
    
      {ctas.map(cta => )}
    
  
  
    
  

Feature Grid

// BANNIS : 3 colonnes égales avec icône + titre + description
// PRÉFÉRER : grille asymétrique 2:1 ou layout alterné

  {heading}
  
    {features.map((f, i) => (
      
        
      
    ))}
  

Navigation

// BANNIS : navbar avec logo à gauche, links au milieu, CTA à droite
// PRÉFÉRER : navigation intégrée au design

  
    
    
      {links.map(l => )}
      
      
    
  

---

8. CSS Patterns Recommandés

Ratio d'images

.media-cover {
  aspect-ratio: 16 / 9;
}
.media-portrait {
  aspect-ratio: 3 / 4;
}
.media-square {
  aspect-ratio: 1 / 1;
}

Conteneur de texte

.text-container {
  max-width: 65ch;
  margin-inline: auto;
}

Grille responsive sans media queries

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-lg);
}

---

9. Pré-Flight Check

Avant d'écrire la première ligne de code, coche tout :

• [ ] Brief analysé : secteur, ton, cible, références identifiés
• [ ] 3 cadrans définis : VARIANCE, MOUVEMENT, DENSITÉ
• [ ] Palette choisie : pas de dégradé IA, pas de noir pur
• [ ] Typographie choisie : pas de Inter, pas de Roboto
• [ ] Layout ≠ template SaaS : pas de 3 colonnes, pas de hero centré si VARIANCE > 4
• [ ] Mode dark/light planifié : variables CSS prêtes
• [ ] Police externe chargée : Google Fonts, CDN, ou @font-face
• [ ] Espacement cohérent : tokens d'espacement définis
• [ ] Contenu réel : pas de lorem ipsum, pas de noms génériques

---

10. Règles Françaises Obligatoires

• « Guillemets français » pour les citations — jamais de "double quotes"
• Espaces insécables devant :;!?» — utiliser \u00A0 via CSS ou JS
• Pas de césure automatique dans les titres
• Ligatures activées : font-variant-ligatures: common-ligatures
• Nombres : espaces insécables entre les groupes de 3 chiffres (1 000 000)
• Pas de titres en anglais si le brief est en français
• Privilégier le vocabulaire français dans l'UI
• Format de date : jj/mm/aaaa, pas mm/dd/aaaa

---

11. Interdictions Supplémentaires

• ❌ Pas de loading="lazy" sur les images hero (LCP)
• ❌ Pas de * { box-sizing: border-box } redondant (c'est déjà le défaut moderne)
• ❌ Pas de commentaires inutiles (``)
• ❌ Pas de CSS-in-JS sans raison (Tailwind ou CSS Modules en priorité)
• ❌ Pas de dépendances lourdes pour des micro-interactions
• ❌ Pas de font-size: 62.5% hack

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: mud-mos23
• Source: mud-mos23/nstup-taste
• License: MIT
• Homepage: https://github.com/mud-mos23/nstup-taste

Install and usage instructions live in the source repository linked above.