Design et thème

L’agent ne produit pas des modèles génériques : il vise un résultat soigné, avec une vraie direction artistique, comme le ferait un studio de design. Toutes les couleurs et les polices de ton app sont rangées dans un thème central, ce qui te permet ensuite de changer tout le look en quelques clics, sans l’agent. Cette page explique ce que l’agent applique par défaut, et comment l’orienter.

Les standards de design de l’agent

Une direction artistique claire

Avant d’écrire les écrans, l’agent choisit une direction qui va avec ta marque et son public (éditoriale et raffinée, graphique et audacieuse, douce et organique, technique et précise, luxueuse et minimale…) et s’y tient dans la palette, les polices, la mise en page et les détails.

La typographie d'abord

Une police de titre avec du caractère associée à une police de texte lisible, de grands titres affirmés, un fort contraste de graisses. Les titres restent droits (pas de mots en italique) sauf si ta marque le demande. Les associations de polices changent d’une app à l’autre.

Des mises en page variées

Pas de page faite d’un grand titre centré et de trois cartes identiques. L’agent varie : grilles asymétriques, mise en page en « bento », écrans partagés, bandeaux pleine largeur, éléments qui se chevauchent, chiffres géants, défilement de logos ou de témoignages.

Des animations sobres

Une entrée en cascade sur le haut de page, des sections qui apparaissent au défilement, un état au survol sur chaque élément cliquable, des transitions douces. Les animations respectent le réglage « réduire les animations » de tes visiteurs.

L’agent applique aussi ces règles à chaque app :

• Profondeur et détails : ombres douces superposées, bordures fines, dégradés ou halos subtils tirés des couleurs du thème, une texture de grain ou de grille quand elle s’y prête, des arrondis cohérents.
• Responsive par défaut, pensé d’abord pour le mobile, avec un contraste lisible, des états de focus visibles et du HTML sémantique.
• Du vrai contenu adapté à ta demande (noms, chiffres, textes), jamais de faux texte.
• Des pages complètes : une landing page raconte une histoire en 6 à 9 sections environ, chacune avec sa propre mise en page (haut de page, problème ou histoire, fonctionnalités clés, galerie, fonctionnement, témoignages, FAQ, appel à l’action final, vrai pied de page).
• Des images quand le design en a besoin, créées dans le style du thème : voir Images générées.
• Des icônes lucide-react, jamais d’emoji à la place des icônes, ni de dégradé violet-bleu par défaut. Les logos de marques (Instagram, GitHub…) sont dessinés en SVG.
• Des éléments qui fonctionnent : navigation, formulaires avec validation, états interactifs, avec des données locales tant que tu n’en demandes pas d’autres.

Les directions artistiques des nouvelles apps

Sans aide, un modèle d’IA produit presque le même site pour la même demande : mêmes polices, même palette, même haut de page. Pour l’éviter, Highwind tire 3 directions artistiques pour chaque nouveau projet, parmi un catalogue de 48 (éditorial magazine, suisse international, néo-brutaliste, luxe discret, tech sombre et précise, rétro imprimé, minimal japonais, art déco, synthwave, scandinave, gastronomie, bien-être…).

• Le tirage est propre à chaque projet : deux projets ont des propositions différentes, et un même projet garde toujours les siennes.
• L’agent garde celle qui va le mieux à ton sujet et à son public, puis l’adapte (il garde ce qui convient, change ce qui détonne) sans perdre son caractère.
• Les directions ne sont proposées que tant que l’app n’a pas encore de design : dès que les premiers écrans existent, l’agent suit le style déjà en place.
• L’agent ne t’annonce pas la direction choisie : tu la découvres dans l’aperçu.

Ton style passe toujours en premier

Tes demandes de style, tes couleurs ou polices de marque, tes images de référence, tes maquettes Figma et tes consignes de projet sur le look l’emportent toujours sur les directions tirées. Elles ne servent que quand tu ne dis rien du style.

Le thème par rôles

Les couleurs et les polices de ton app vivent dans le bloc @theme du fichier src/index.css, sous forme de rôles : le fond, le texte, la couleur principale… Les composants n’utilisent que ces rôles (bg-background, text-muted, bg-primary text-primary-foreground, border-border, font-display), avec de l’opacité pour les nuances (bg-primary/10).

Rôle	Dans le panneau Thème	Sert à
background	Fond	Le fond des pages
foreground	Texte	Le texte principal
muted	Texte secondaire	Légendes, textes d’appoint
surface	Cartes et blocs	Le fond des cartes et des blocs
border	Bordures	Les traits et séparateurs
primary	Principale	Boutons principaux, liens, éléments forts
primary-foreground	Texte sur la principale	Le texte posé sur la couleur principale
accent	Accent	Mises en avant secondaires
accent-foreground	Texte sur l’accent	Le texte posé sur l’accent

L’agent ajoute un rôle quand le design en a besoin (--color-success, --color-highlight), mais garde un thème court : 8 à 12 rôles environ, jamais un rôle par nuance. Une variante qui doit rester séparée (une couleur au survol) est calculée à partir de son rôle, pour le suivre quand tu le changes. Les polices Google sont importées en tête du fichier et déclarées dans --font-sans (texte) et --font-display (titres).

src/index.css (extrait)

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Manrope:wght@400;600&display=swap");
@import "tailwindcss";

@theme {
  --color-background: #faf6f0;
  --color-foreground: #1f1a17;
  --color-muted: #6f655d;
  --color-surface: #ffffff;
  --color-border: #e8dfd4;
  --color-primary: #7a2e1f;
  --color-primary-foreground: #ffffff;
  --color-accent: #e9d8b4;
  --color-accent-foreground: #1f1a17;
  --color-accent-hover: color-mix(in oklab, var(--color-accent) 85%, black);
  --font-sans: "Manrope", sans-serif;
  --font-display: "Fraunces", serif;
}

Pourquoi c’est important : le panneau Thème

Le panneau Thème du mode Design ne modifie que ces rôles. Comme aucun composant n’a de couleur en dur, changer la couleur Principale ou la police des titres change tout le site d’un coup, gratuitement et sans l’agent. Le panneau propose aussi des Palettes toutes prêtes et signale un contraste trop faible. Voir Le mode Design.

C’est pour cela que l’agent n’écrit jamais de couleur en dur (bg-[#a96749], text-blue-600) : l’outil de vérification check les signale et l’agent les remplace par des rôles.

Attention

Si tu modifies le code toi-même, garde la même règle : une couleur écrite en dur dans un composant ne suivra plus le panneau Thème.

Le mode sombre

L’agent n’ajoute un mode sombre que si tu le demandes (ou s’il existe déjà). Il redéfinit alors les mêmes rôles dans un bloc géré de src/index.css, délimité par /* highwind:dark */ et /* /highwind:dark */, jamais avec des classes dark: dans les composants.

src/index.css (bloc du mode sombre, exemple)

/* highwind:dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: #14110f;
    --color-foreground: #f3ece4;
  }
}
:root[data-theme="dark"] {
  --color-background: #14110f;
  --color-foreground: #f3ece4;
}
/* /highwind:dark */

Tu règles ensuite les couleurs claires et sombres, et le mode affiché par défaut, dans la section Clair et sombre du panneau Thème. Quand le bloc existe, l’agent garde la forme de ses sélecteurs (elle traduit le mode par défaut choisi dans le panneau) et n’en change que les valeurs.

Ajoute un mode sombre qui suit le réglage de l'appareil, avec un bouton dans
l'en-tête pour basculer entre clair et sombre.

Orienter le style dans ta demande

1. Donne une ambiance et un public. « Élégant et rassurant, pour une clientèle de plus de 50 ans » oriente mieux que « joli ».

2. Nomme une direction. Les noms de style sont compris : « style éditorial magazine », « néo-brutaliste », « minimal japonais », « tech sombre avec un accent vert citron », « luxe discret », « rétro imprimé ».

3. Donne tes couleurs et tes polices de marque. Des codes hexadécimaux et des noms de polices Google : l’agent les place directement dans le thème.

4. Montre des exemples. Joins une capture d’un site que tu aimes comme image de référence, ou colle un lien Figma si tu as connecté Figma (voir Figma).

5. Fixe tes règles pour tout le projet. Écris-les dans Consignes pour l’agent (Paramètres du projet) : l’agent les suit à chaque message. Voir Paramètres du projet.

Nouvelle app

Crée le site d'un torréfacteur artisanal à Lyon. Style rétro imprimé : tons crème,
moutarde et brique, une texture de grain, des étiquettes et des tampons.
Polices : DM Serif Display pour les titres, Space Mono pour les détails.

Changer le look

Rends le design plus premium : plus d'espace entre les sections, des titres plus
grands, une palette plus sobre (noir, ivoire et un accent or), et supprime les
dégradés.

Consignes de projet

Couleurs de marque : vert sapin #1f4d3a et crème #f6f1e7. Police des titres :
Fraunces, texte : Inter. Ton chaleureux, tutoiement. Pas de dégradés.

Astuce

Pour une petite retouche de couleur ou de police, pas besoin de l’agent : le panneau Thème du mode Design le fait gratuitement. Garde l’agent pour les changements de mise en page ou de direction.

Voir aussi

Le mode DesignRetoucher textes, couleurs et polices sans l'agent.

Images généréesLes photos et illustrations créées par l'agent.

Bien écrire ses demandesLes formulations qui donnent les meilleurs résultats.

Comment travaille l'agentLa stack, le déroulé d'une demande et les conventions.