# Design Taste

> Protocole d'exécution anti-slop pour tout livrable web de {{COMPANY_NAME}} — landing pages, pages statiques, portfolios, sections marketing. Trois curseurs paramétriques (DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY), inférence du langage design depuis le brief, squelettes GSAP canoniques, bans typographiques et pre-flight check strict. Utiliser en complément de design-system (tokens) et l…

- **Type:** Skill
- **Install:** `agentstack add skill-littlpinguin-marketing-cockpit-template-design-taste`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Littlpinguin](https://agentstack.voostack.com/s/littlpinguin)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Littlpinguin](https://github.com/Littlpinguin)
- **Source:** https://github.com/Littlpinguin/marketing-cockpit-template/tree/main/.claude/skills/design-taste

## Install

```sh
agentstack add skill-littlpinguin-marketing-cockpit-template-design-taste
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# design-taste — protocole d'exécution anti-slop

Cette skill ne choisit pas un style : elle empêche l'exécution de ressembler à du design généré. Elle s'applique aux landing pages, pages marketing, portfolios et redesigns. Pas aux dashboards denses, tables de données ou product UI multi-étapes (utiliser un design system officiel pour ça).

## Complémentarité avec les skills design du template

| Skill | Rôle | Quand |
|---|---|---|
| `ui-ux-pro-max` (plugin) | **Base de données de choix** : 161 palettes, 57 paires de fontes, 50+ styles | « Quel style/palette/fonte pour ce produit ? » |
| `design-system` | Génère les tokens sémantiques sous contrainte de marque | Avant de coder un livrable web |
| `design-direction` | Choix de la direction visuelle d'un livrable | En amont, phase de cadrage |
| **`design-taste`** (cette skill) | **Protocole d'exécution** : curseurs, hard rules, anti-tells, pre-flight | Pendant et après l'écriture du code |
| `design-redesign` | Audit + modernisation d'un existant | Refonte d'une page/site déjà en ligne |

Ordre type : `design-direction` → `design-system` → production (landing-page, slides…) **avec cette skill comme garde-fou** → pre-flight check.

## Étape 0 — Charger les tokens de marque (OBLIGATOIRE)

**Charger `01-brand/style-guide.md` — la marque PRIME sur les curseurs et sur toute règle esthétique de cette skill.**

1. Lire `01-brand/style-guide.md` : couleurs, police, radius, gradient, style d'illustration, interdits visuels.
2. Lire `01-brand/checklist-pre-composition.md` : règles anti-style-IA et typographiques de la marque — en cas de conflit avec les bans de cette skill, **la checklist de marque fait foi** (ex. : la checklist autorise le demi-cadratin `–` ; le ban absolu de cette skill ne porte alors que sur le cadratin `—`).
   Lire aussi `01-brand/design-anti-generique.md` : la doctrine design anti-générique du template — même logique de préséance (marque > doctrine > bans de cette skill).
3. Classer : dimension **verrouillée par la marque** (couleur primaire, police, radius fournis par le style-guide → interdiction d'y déroger, même si un ban ci-dessous suggère autre chose) vs **libre** (le style-guide est muet → cette skill s'applique pleinement).
4. Si `01-brand/style-guide.md` manque ou contient des `{{...}}` : s'arrêter et proposer `/start-cockpit`.

Exemple de préséance : la règle « LILA » ci-dessous décourage le violet par défaut — mais si la marque est violette, elle reste violette (c'est l'override prévu).

---

## 1. Lecture du brief (avant tout code)

Ne jamais sauter vers une esthétique par défaut. Lire d'abord :

1. **Type de page** — landing (SaaS / consumer / agence / événement), portfolio, redesign (préserver vs refondre), éditorial.
2. **Mots d'ambiance** du brief — « minimaliste », « Linear-style », « premium », « brutaliste », « éditorial », « B2B sérieux »…
3. **Signaux de référence** — URLs, screenshots, concurrents nommés.
4. **Audience** — c'est elle qui choisit l'esthétique, pas votre goût.
5. **Contraintes silencieuses** — accessibilité renforcée, secteur régulé, confiance d'abord. Elles PRIMENT sur la préférence esthétique.

**Déclarer une « lecture design » en une ligne avant de générer** : *« Je lis ceci comme : \ pour \, langage \, penchant vers \. »*

Si le brief est ambigu : poser **une seule** question de clarification (jamais une rafale). Si l'inférence est confiante, déclarer la lecture et avancer.

**Discipline anti-défaut** : jamais de gradient violet-IA, de hero centré sur mesh sombre, de trois cartes features identiques, de glassmorphism générique partout, de micro-animations en boucle sur tout, de Inter + slate-900 par réflexe. Ce sont les défauts du modèle — s'en écarter délibérément selon la lecture.

## 2. Les trois curseurs

Après la lecture design, fixer trois valeurs. Toute décision de layout, motion et densité en découle.

- **`DESIGN_VARIANCE`** — 1 = symétrie parfaite, 10 = chaos artistique
- **`MOTION_INTENSITY`** — 1 = statique, 10 = cinématique / physique
- **`VISUAL_DENSITY`** — 1 = galerie d'art / aéré, 10 = cockpit / données denses

Baseline : `8 / 6 / 4`. Overrides conversationnels, jamais silencieux.

### Inférence lecture → curseurs

| Signal du brief | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| minimaliste / calme / éditorial / Linear-style | 5-6 | 3-4 | 2-3 |
| premium consumer / luxe / Apple-y | 7-8 | 5-7 | 3-4 |
| joueur / expérimental / Awwwards / agence | 9-10 | 8-10 | 3-4 |
| landing / portfolio / site marketing (défaut) | 7-9 | 6-8 | 3-5 |
| confiance d'abord / secteur public / régulé / a11y critique | 3-4 | 2-3 | 4-5 |
| redesign — préserver | = existant | +1 | = existant |
| redesign — refondre | +2 | +2 | = existant |

### Définitions techniques

- **VARIANCE 1-3** : grille symétrique 12 colonnes, paddings égaux, centré. **4-7** : chevauchements (`margin-top: -2rem`), ratios d'image variés, titres alignés à gauche. **8-10** : masonry, colonnes fractionnaires (`2fr 1fr 1fr`), grandes zones vides (`padding-left: 20vw`). **Override mobile obligatoire** : niveaux 4-10 collapsent en une colonne stricte sous 768px.
- **MOTION 1-3** : `:hover`/`:active` seulement. **4-7** : transitions fluides (`cubic-bezier(0.16,1,0.3,1)`), cascades d'entrée, uniquement `transform`/`opacity`. **8-10** : chorégraphie scroll (GSAP ScrollTrigger ou CSS `animation-timeline`). `window.addEventListener('scroll')` est un ban dur.
- **DENSITY 1-3** : `py-32` à `py-48`, très aéré. **4-7** : `py-16` à `py-24`. **8-10** : paddings serrés, filets 1px au lieu de cartes, `font-mono` obligatoire pour les chiffres.

## 3. Brief → design system

Si le brief correspond à un système officiel, installer le **paquet officiel**, ne pas recréer son CSS : Material (`@material/web`), Fluent (`@fluentui/react-components`), Carbon (`@carbon/react`), Polaris (Shopify), Atlaskit, Primer (GitHub), `govuk-frontend`/`uswds` (secteur public), Bootstrap 5.3 (MVP rapide), Radix Themes, shadcn/ui (jamais en état par défaut), Tailwind v4 (défaut indé/SaaS moderne). **Un seul système par projet.**

Si le brief est une **esthétique** sans paquet officiel (glassmorphism, bento, brutalisme, éditorial, dark tech, aurora, typographie cinétique) : CSS natif + Tailwind, en étant honnête en commentaire sur ce qui est approximation (ex. « Liquid Glass » web = approximation glassmorphism, il n'existe pas de `liquid-glass.css` officiel Apple).

## 4. Stack et conventions par défaut

- **Framework** : React/Next.js, Server Components par défaut. Tout composant avec motion/scroll/pointer = feuille isolée `'use client'`.
- **Styling** : Tailwind v4 (plugin `@tailwindcss/postcss`, pas `tailwindcss` dans postcss.config).
- **Animation** : Motion (`import { motion } from "motion/react"`). Jamais `useState` pour des valeurs continues (souris, scroll) → `useMotionValue` / `useTransform` / `useScroll`.
- **Fontes** : `next/font` ou `@font-face` auto-hébergé + `font-display: swap`. Jamais de `` Google Fonts en production.
- **Icônes** : Phosphor > HugeIcons > Radix > Tabler. Lucide sur demande explicite seulement. **Jamais de SVG d'icône dessiné à la main.** Une famille par projet, `strokeWidth` global.
- **Emoji** : découragés dans le code et le texte visible (cohérent avec la checklist de marque §3).
- **Layout** : conteneur `max-w-[1400px] mx-auto` ; `min-h-[100dvh]` jamais `h-screen` ; CSS Grid plutôt que calculs flexbox en pourcentages.
- **Dépendances** : vérifier `package.json` avant tout import ; sortir la commande d'installation d'abord.

## 5. Directives d'exécution (correction de biais)

### 5.1 Typographie
- Display : `text-4xl md:text-6xl tracking-tighter leading-none`. Body : `text-base leading-relaxed max-w-[65ch]`.
- Sans par défaut : Geist, Outfit, Cabinet Grotesk, Satoshi (Inter seulement si demandé ou brief neutre/a11y). **Si la marque impose une police, elle s'impose.**
- **Discipline serif** : le réflexe « brief créatif = serif » est le tell IA le plus testé. Serif acceptable uniquement si la marque la nomme, ou si l'univers est authentiquement éditorial/luxe/patrimoine ET justifiable. `Fraunces` et `Instrument Serif` bannis comme défauts. Emphase dans un titre = italique/gras de la MÊME fonte, jamais un mot serif injecté dans un titre sans-serif.
- **Dégagement des descendantes en italique** : mot italique avec `y g j p q` en display → `leading-[1.1]` minimum + réserve `pb-1`.

### 5.2 Couleur
- Max 1 couleur d'accent, saturation  4` (split 50/50, asymétrie, structures scrollées). OK pour brief manifeste/éditorial.
- **Navigation** : une seule ligne desktop, hauteur ≤ 80px.
- **Retenue des eyebrows** (règle la plus violée en test) : maximum 1 eyebrow (label uppercase tracking au-dessus d'un titre de section) pour 3 sections, hero compris. Check mécanique : compter les `uppercase tracking` ; si count > ceil(nbSections / 3), échec. À la place : rien — le titre suffit.
- **Ban split-header** : « gros titre à gauche + petit paragraphe explicatif flottant à droite » comme en-tête de section = banni par défaut. Empiler verticalement (titre puis body max-w 65ch).
- **Cap zigzag** : max 2 sections consécutives en alternance image/texte. La 3e = échec pre-flight. Casser avec une pleine largeur, un bento, une marquee.
- **Répétition de famille de layout** : une famille (3 cartes, citation pleine largeur, split texte/image…) apparaît au plus UNE fois par page ; ≥ 4 familles différentes pour 8 sections.
- **Bento** : exactement autant de cellules que de contenus (jamais de tuile vide) ; 2-3 cellules minimum avec vraie variation visuelle (image, gradient de marque, motif) — pas 6 cartes blanc-sur-blanc.
- Collapse mobile explicite par section pour tout multi-colonnes.

### 5.4 Surfaces, états, formulaires
- Cartes uniquement quand l'élévation exprime une vraie hiérarchie ; sinon `border-t`, `divide-y`, espace négatif. Ombres teintées de la couleur de fond, jamais noir pur.
- **Verrou de forme** : UNE échelle de border-radius par page (tout-carré, tout-doux 12-16px, ou tout-pilule), ou une règle documentée appliquée partout.
- États complets obligatoires : loading (skeletons épousant le layout final, pas de spinner), empty (composé, indique comment remplir), erreur (inline pour formulaires), feedback tactile (`:active` → `scale-[0.98]`).
- **Contraste CTA obligatoire** : chaque bouton lisible sur son fond (WCAG AA 4,5:1 ; 3:1 pour ≥ 18px). Boutons fantômes sur photo → scrim ou bordure. **Le libellé d'un CTA tient sur une ligne** (3 mots max). **Un seul libellé par intention** sur la page (pas « Contactez-nous » + « Parlons-en » + « Écrivez-nous »).
- Formulaires : label AU-DESSUS de l'input, erreur dessous, jamais de placeholder-comme-label. Contraste AA sur placeholders, focus rings, helpers.

### 5.5 Images et assets visuels
Priorité : **1)** outil de génération d'images s'il existe (dans ce template : skill `image-generation`, après consultation de `01-brand/assets/index.md` — un asset existant se réutilise, il ne se régénère pas) ; **2)** vraies photos (`https://picsum.photos/seed/{seed-descriptif}/{w}/{h}`, sources de marque) ; **3)** en dernier recours, slots placeholder étiquetés (``) et le dire à l'utilisateur.
- Même un site minimaliste a besoin de 2-3 vraies images. Une page 100 % texte n'est pas du minimalisme, c'est un travail incomplet.
- **Fake screenshots en `` bannis** (faux dashboard, fausse task-list, faux terminal) : vraie capture, image générée, vrai mini-composant, ou rien.
- Mur de logos : vrais SVG (Simple Icons : `https://cdn.simpleicons.org/{slug}`) ou monogramme SVG généré pour une marque inventée — jamais de wordmarks en texte brut. **Logo wall = logos et rien d'autre** (pas de label de catégorie sous chaque logo).
- SVG décoratifs dessinés à la main : fortement découragés hors demande explicite.

### 5.6 Densité de contenu et copie
- Forme par défaut d'une section : titre court (≤ 8 mots) + sous-paragraphe (≤ 25 mots) + un visuel OU un CTA.
- Pas de sections data-dump (table de 20 lignes sur une page marketing) : top 3-5 + lien « tout voir », carrousel, ou autre page. Liste > 5 items = autre composant (grille de cartes, tabs, pills scroll-snap, chunks groupés), pas un `` plus long avec un filet sous chaque ligne.
- **Auto-audit de copie obligatoire avant livraison** : relire chaque chaîne visible ; réécrire tout ce qui est grammaticalement cassé, à référent flou, ou qui « sonne LLM profond ». Une phrase plate vaut mieux qu'une phrase mignonne-mais-fausse. (La checklist de marque §2 et la skill `copy-editing` complètent ce point.)
- **Chiffres faussement précis bannis** : `92 %`, `4,1×` inventés pour l'esthétique = non. Soit une vraie donnée sourcée (`_sources/reports/`, messaging-framework), soit explicitement étiqueté mock.
- Citations : ≤ 3 lignes, attribution nom + rôle (+ entreprise), vrais guillemets typographiques.
- **Verrou de thème** : la page a UN thème (clair, sombre ou auto). Aucune section n'inverse le mode en plein scroll (exception : un « color block story » délibéré, une fois par page).

## 6. Motion — squelettes canoniques GSAP

**Motion motivée obligatoire** : chaque animation se justifie en une phrase (hiérarchie, narration, feedback, transition d'état). « Ça faisait joli » = suppression. **Marquee : max une par page.** « Motion annoncée = motion livrée » : si `MOTION_INTENSITY > 4` la page bouge vraiment, sinon baisser le curseur à 3 et livrer un statique propre.

### 6.A Sticky-stack (pile de cartes au scroll)

Échec classique : le trigger part à mi-scroll au lieu de s'épingler en haut. Correctif : `start: "top top"`.

```tsx
"use client";
import { useRef, useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useReducedMotion } from "motion/react";

gsap.registerPlugin(ScrollTrigger);

export function StickyStack({ cards }: { cards: React.ReactNode[] }) {
  const ref = useRef(null);
  const reduce = useReducedMotion();

  useEffect(() => {
    if (reduce || !ref.current) return;
    const ctx = gsap.context(() => {
      const cardEls = gsap.utils.toArray(".stack-card");
      cardEls.forEach((card, i) => {
        if (i === cardEls.length - 1) return;
        ScrollTrigger.create({
          trigger: card,
          start: "top top",                              // épingler en haut du viewport
          endTrigger: cardEls[cardEls.length - 1],
          end: "top top",
          pin: true,
          pinSpacing: false,
        });
        gsap.to(card, {
          scale: 0.92,
          opacity: 0.55,
          ease: "none",
          scrollTrigger: {
            trigger: cardEls[i + 1],
            start: "top bottom",
            end: "top top",
            scrub: true,
          },
        });
      });
    }, ref);
    return () => ctx.revert();
  }, [reduce]);

  return (
    
      {cards.map((card, i) => (
        
          {card}
        
      ))}
    
  );
}
```

Points critiques : `start: "top top"`, `pin: true`, chaque carte sauf la dernière est épinglée, le scale/opacity est piloté par le trigger de la carte SUIVANTE.

### 6.B Pan horizontal (scroll-hijack)

Échec classique : l'animation démarre avant l'épinglage, l'utilisateur voit une demi-slide. Même correctif : `start: "top top"`, épingler le wrapper, scruber la piste interne.

```tsx
"use client";
import { useRef, useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useReducedMotion } from "motion/react";

gsap.registerPlugin(ScrollTrigger);

export function HorizontalPan({ children }: { children: React.ReactNode }) {
  const wrap = useRef(null);
  const track = useRef(null);
  const reduce = useReducedMotion();

  useEffect(() => {
    if (reduce || !wrap.current || !track.current) return;
    const ctx = gsap.context(() => {
      const distance = track.current!.scrollWidth - window.innerWidth;
      gsap.to(track.current, {
        x: -distance,
        ease: "none",
        scrollTrigger: {
          t

…

## Source & license

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

- **Author:** [Littlpinguin](https://github.com/Littlpinguin)
- **Source:** [Littlpinguin/marketing-cockpit-template](https://github.com/Littlpinguin/marketing-cockpit-template)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-littlpinguin-marketing-cockpit-template-design-taste
- Seller: https://agentstack.voostack.com/s/littlpinguin
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.