Conception UI Suisse

Ce skill transforme les principes de l'école suisse en décisions d'interface concrètes. L'idée fondatrice de l'école, d'Ernst Keller, est que la solution de design doit émerger du contenu du problème. Tout ce qui suit en découle : la grille est la logique, la typographie est l'image, la couleur est constituée d'aplats forts avec des rôles clairs, l'espace blanc est une structure, et rien n'est décoratif.

Le second objectif : le résultat ne doit pas ressembler à une génération d'IA. Les interfaces d'IA génériques partagent un même look (héro centré, dégradé violet, cartes arrondies avec ombres douces, trois fonctionnalités sous forme d'icônes, copie vague). Le style suisse est à l'opposé de ce look, donc l'appliquer avec discipline résout la majeure partie du problème ; la Partie 5 s'occupe du reste.

Le troisième objectif : le résultat doit avoir de la puissance. Une page soignée avec un fond crème et un bloc orange n'est suisse que par sa grille. Les affiches pour lesquelles ce style est connu sont couvertes de couleur : des aplats forts ou du noir remplissent 83 à 97 % de la feuille, ou une seule encre chromatique porte tout et un panneau teinté remplit le reste. Ainsi, l'Étape 4 choisit un Look (fond, schéma de couleurs, traitement de l'image) avant toute mise en page. references/looks.md contient cinq Looks échantillonnés sur des affiches réelles, avec du CSS testé ; scripts/color_power.py mesure le résultat.

Comment ce fichier est organisé

Flux de travail — les étapes, dans l'ordre
Grille, espacement, typographie et couleur — tokens, échelles, palettes, recettes de mise en page, CSS de base
Arabe et RTL
Composants
Ne pas ressembler à de l'IA — la liste de vérification
Source : l'école suisse en bref (extrait du livret L'École suisse de design)

Également dans ce skill : references/looks.md (Looks, paires de contraste, mécanismes CSS testés) et scripts/color_power.py (vérification de la puissance des couleurs pour les captures d'écran).

Partie 1 — Flux de travail

1. Partir du contenu

Écrivez la seule chose pour laquelle l'écran existe (un message, une action). Elle devient l'élément dominant.
Classez le reste en au plus 3–4 niveaux de hiérarchie.
Si l'utilisateur n'a pas fourni de contenu, rédigez un contenu réel et spécifique dans la langue cible : des noms locaux réalistes, des chiffres exacts, des dates, des prix, des lieux. Jamais de lorem ipsum, jamais de remplissage marketing ("Exploitez la puissance de…", ou son équivalent arabe "découvrez la puissance de…"). Un contenu spécifique est le signe le plus fort qu'un humain a créé la page. Indiquez à l'utilisateur les détails qui sont des hypothèses à remplacer.
Rédigez le texte à la manière suisse : objectif et factuel, sans les exagérations de la publicité et de la propagande (définition du style par Meggs). Le designer agit comme un canal clair pour l'information, non comme un vendeur. Les faits, les chiffres, les conditions et les verbes simples convainquent mieux ici que les adjectifs.
Décidez de la langue et de la direction. Arabe → dir="rtl" et appliquez la Partie 3, qui modifie l'alignement, les polices et la hauteur de ligne.

2. Choisir une direction — délibérément

L'école suisse n'a pas qu'un seul look. Choisissez l'une de ces directions, chacune basée sur les principes d'un pionnier ou d'une école (utilisez les principes ; ne copiez jamais leurs affiches) :

Direction	Caractère	Convient pour
Zurich — Müller-Brockmann	Grille rigoureuse, parfois visible ; ton objectif ; petite typographie précise à côté d'une grande photo ou d'une forme géométrique abstraite ; beaucoup de blanc.	Documentation, applications denses, tableaux de bord, institutions, finance
Bâle — Hofmann	Noir et blanc, contraste élevé, figure-fond, très peu de grandes formes, type comme forme.	Culture, portfolios, événements, architecture
Ballmer	Titres construits sur la grille, graisses épaisses, rouge + noir, mots empilés, structure rendue visible.	Marques, campagnes, lancements, pages d'atterrissage avec attitude
Keller	Aplats de couleur audacieux, formes géométriques simples, typographie surdimensionnée recadrée par le bord.	Produits de consommation, éducation, communauté, musées
Affiche-objet de Bâle (Sachplakat)	Un objet (le produit, un outil, un plat, un appareil) montré énorme, en gros plan et photographié avec netteté, avec presque rien d'autre qu'un nom.	Produits physiques, alimentation, commerce de détail, matériel
Photomontage (Herbert Matter)	Photographies combinées à des échelles radicalement différentes, découpées sur la grille, avec la typographie intégrée à l'intérieur.	Tourisme, lieux, événements, médias

Contexte utile pour le choix : la Bibliothèque nationale suisse décrit deux courants d'après-guerre, Zurich = Art concret (construction mathématique, plans géométriques purs ; Max Bill a construit la première véritable grille de mise en page à la fin des années 1930) et Bâle = Nouvelle objectivité (l'objet, la photographie, le contraste de forme). Keller lui-même n'a enseigné aucun style fixe : il croyait que la solution devait émerger du contenu, donc son propre travail est très diversifié. Le skill le suit : la direction vient du contenu, pas de l'habitude.

Zurich est le choix "sûr" et il est facile d'y tomber à chaque fois ; cela rend chaque sortie identique. Choisissez Zurich lorsque le contenu est dense et fonctionnel. Pour les pages d'atterrissage, les marques et les campagnes, préférez Ballmer, Keller ou Bâle — ils donnent à la page un moment fort (un champ entier de couleur vive, un mot géant recadré, une forme à fort contraste) qui manque à une page calme. Dites à l'utilisateur en une ligne quelle direction vous avez choisie et pourquoi. Ne l'écrivez pas à l'intérieur de l'interface.

La direction et le Look sont des choix distincts. La direction décide de la structure ; le Look (Étape 4) décide de la couleur. Une grille zurichoise peut porter le Look Soleil, et Ballmer peut porter Noir + spectre.

3. Trouver le concept dans le contenu

L'école de Bâle le formulait ainsi (Kenneth Hiebert, un étudiant de Hofmann) : une structure abstraite est le véhicule de la communication, et la trouver vous oblige à isoler l'essence du message avant tout style de surface. Faites cela par écrit avant de concevoir :

Listez 5 à 8 faits concrets du contenu : un nombre, un lieu, un objet physique, une heure, un processus, un nom, un contraste (avant/après, petit/grand).
Écrivez trois concepts différents, une phrase chacun, chacun basé sur un fait différent. Exemple pour un espace de coworking : (a) l'adresse du bâtiment et le plan d'étage comme image ; (b) les 15 heures de la journée comme une grille que vous réservez directement ; (c) les objets réels — un bureau, une clé, une chaise — montrés énormes (affiche-objet).
Choisissez celui qui est le plus spécifique à ce produit, celui qui ne pourrait pas être déplacé vers la page d'un concurrent en changeant le nom. Dites en une ligne lequel vous avez choisi.

L'élément géant doit venir du contenu, pas d'un appel à l'action. Un verbe impératif géant ("Réservez", "Commencez", ou leurs équivalents arabes) est une astuce : il convient à n'importe quel produit et devient rapidement le nouveau modèle. Utilisez un nom, un nombre ou un nom propre que seul ce produit possède : le lieu, le chiffre clé, l'objet, la date.

4. Choisir le Look, puis définir le système

D'abord le Look. Avant toute mise en page, choisissez un Look et ouvrez references/looks.md pour ses tokens, ses paires de polices, sa composition et le CSS testé. Le fond vient en premier : une couleur forte en aplat ou une encre couvre au moins 60 % du premier écran. Les deux Looks sur fond de papier sont l'exception : une seule encre chromatique porte toute la typographie et un panneau teinté remplit au moins 30 %. Choisissez en fonction du contenu, n'utilisez jamais deux fois le même Look consécutivement, et utilisez un Look par page (les sections varient la composition, pas la palette).

Look	Fond	Palette	Convient pour
1 Soleil	une teinte forte et son complément	jaune `#FFC611` · indigo `#3A3A9C` · marine `#16154A`	pages d'atterrissage, événements, culture, éducation
2 Encre violette	blanc ; une seule encre chromatique pour toute la typographie	violet `#4F2A7D` · pervenche `#CFDBF1` · orchidée `#BD9CBB`	éditorial, revues, rapports
3 Bandes primaires	3–4 bandes empilées à fond perdu	bleu `#2F7BFF` · vert `#0FA23A` · jaune `#EFB83E` · rouge `#E6040A` · encre	pages d'atterrissage factuelles, campagnes, institutions
4 Noir + spectre	noir d'encre	6–9 teintes pures, chacune au moins deux fois	catalogues, réservations, familles de produits, légendes de tableaux de bord
5 Affiche de concert	crème ou noir	encre + rouge, cyan, jaune, violet, avec surimpression	événements, musique, communauté, lancements

Orange + marine, cobalt + jaune, rose + vert foncé et d'autres fonds se trouvent dans le même fichier. Si le brief mentionne une couleur de marque, elle devient le fond ou un plan, et les couleurs associées sont choisies selon le schéma.

Ensuite les tokens (Partie 2) : la ligne de corps (taille et hauteur de ligne), une grille qui en dérive (12/8/4 colonnes par défaut, ou un autre nombre si le contenu le justifie), unité de base (8 px), une famille de polices (ou une arabe + une latine partenaire) avec une échelle abrupte, et la palette du Look avec une couleur de texte par surface, chaque paire vérifiée pour le contraste.

5. Composer avec asymétrie

La source décrit l'équilibre par la distribution des forces visuelles, pas par la symétrie.

Ne centrez pas le héros. Placez un élément lourd (titre géant, grande photo, champ de couleur) contre un côté, équilibré par de l'espace blanc et du petit texte de l'autre.
Utilisez des portées de colonnes inégales : 5+7, 4+8, 3+9, 2+6+4. Des tiers égaux partout est la valeur par défaut de l'IA.
Décalez délibérément : titre sur les colonnes 1–9, introduction sur 7–11 en dessous, métadonnées sur 1–3.
Donnez à chaque section une composition différente sur la même grille. Répéter "titre centré + grille de cartes" dans chaque section est un fort indicateur d'IA.
Avant de coder une section, écrivez ses portées en commentaire (/* hero : h1 1–10, meta 1–3, lead 6–11 */). Cela maintient l'honnêteté de la grille.

6. Ajouter la couche d'affiche — ce qui la rend suisse, pas seulement propre

Cette étape fait la différence entre un design suisse et un design soigné. La source elle-même note que les principes suisses sont devenus la base de l'UI moderne. Cela signifie que les seules règles fonctionnelles (grille, filets, texte à fleur, liste d'index, bande de statistiques, une accentuation) produisent désormais quelque chose que tout système de design ressemble déjà. C'est propre, mais ce n'est pas nouveau et ce n'est pas reconnaissable comme suisse. Ce qui rendait l'école suisse distinctive, c'étaient ses affiches : la typographie utilisée comme image, les aplats de couleur audacieux, la géométrie, la tension d'échelle et la structure visible. Apportez ce langage dans l'interface.

Les sources disent la même chose sous deux angles. Une étude sur le design plat (Aristova & Vasilieva) retrace le design web plat jusqu'au style international et prévient que sa propagation rend les sites web uniformes et affaiblit l'identité de chaque site et institution. Un manuel d'histoire du design note qu'une fois le style suisse devenu universel, son langage visuel est devenu moins innovant. Le remède n'est pas d'abandonner les principes. C'est de les utiliser comme les designers originaux l'ont fait, comme une méthode pour trouver une forme spécifique pour chaque élément de contenu.

Règle : une page d'atterrissage, un site marketing ou une page de marque a besoin d'au moins trois gestes signatures. L'un va dans le héros, et au moins deux autres vont dans d'autres sections. Une UI de produit (tableau de bord, application) reste fonctionnelle, mais elle obtient un moment d'affiche : l'en-tête de page, l'écran de connexion, un état vide ou un séparateur de section.

Gestes signatures (chacun vient d'un principe vu dans les exemples d'affiches de la source ; utilisez le principe et ne reproduisez jamais une affiche) :

#	Geste	Comment en UI	CSS
1	Les lettres comme architecture (Ballmer)	Un mot ou une initiale construit à partir de modules de grille : lettres géantes séparées par des lignes de colonnes, ou lettres assemblées à partir de carrés. En arabe, le coufique carré est l'équivalent naturel, car c'est une écriture basée sur une grille. Utilisez-le pour un mot-symbole ou un mot de héros, dessiné en SVG à partir de carrés et conservé lisible.	SVG `<rect>` sur une grille de modules ; `grid` de cellules
2	Typographie géante recadrée (Keller)	Titre plus grand que la fenêtre, coupé par un ou deux bords. L'identité de la page est le mot lui-même.	`font-size: 28vw; line-height: .8; margin-inline-start: -.05em;` section `overflow: clip`
3	Typographie entrelacée (Hofmann)	Mots empilés avec un interlignage négatif pour qu'ils se touchent ou se chevauchent, formant un bloc typographique unique.	`line-height: .75`, marges négatives, `mix-blend-mode: multiply` sur une seconde couleur
4	Plan tourné (Müller-Brockmann)	Un bloc de contenu, une grille ou une dispersion de petits carrés placés sur un plan incliné à 45° ou 90°, par rapport à la grille droite.	`transform: rotate(-45deg)` sur un conteneur ; gardez le texte à l'intérieur lisible ou tournez-le à 90°
5	Géométrie figure-fond (Hofmann)	Un grand cercle, demi-cercle ou anneau en encre ou dans une couleur forte de la palette, coupé par le bord de l'écran. Le texte se trouve à l'intérieur de la forme ou l'entoure.	Élément `border-radius: 50%` / SVG, `clip-path`, `shape-outside`
6	Colonne verticale de mots (Ballmer)	Une colonne de couleur étroite sur toute la hauteur avec un mot disposé verticalement. Arabe : faites pivoter le mot entier (n'empilez jamais les lettres).	`writing-mode: vertical-rl`, `transform: rotate(180deg)`
7	Champ de couleur + bloc d'encre (Keller)	Toute une section dans une couleur de champ forte avec un rectangle noir solide contenant le texte, ou deux couleurs fortes se rencontrant bord à bord.	deux blocs sur la grille, pas d'ombres
8	Grille comme contenu (Müller-Brockmann)	Lignes de grille dessinées intentionnellement, avec des données, des nombres ou du texte alignés dans les cellules. Utilisez-le pour un horaire, une grille de prix ou un index de section.	bordures sur les cellules, ou lignes `repeating-linear-gradient`
9	Tension d'échelle dans une seule ligne	Un mot de 200 px à côté de métadonnées de 12 px sur la même ligne de base.	flex avec `align-items: baseline`
10	Sur-typage tonal	Deux mots d'affichage superposés, l'un en gris clair derrière et l'autre en encre ou en papier devant, décalés sur la grille.	positionnement absolu dans une cellule de grille
11	Héros objet (Sachplakat de Bâle)	Un objet réel photographié en gros plan, plus grand que nature, détouré ou recadré serré, avec seulement le nom et un fait.	`object-fit: cover`, image s'étendant sur 8 à 12 colonnes, recadrée par le bord
12	Photomontage (Matter)	Deux ou trois photographies à des échelles très différentes (un détail énorme, une vue large petite) découpées en champs de grille, avec la typographie placée dessus ou entre elles.	champs de grille avec `overflow: clip`, images alignées sur les bords du champ
13	Confrontation (Hofmann)	Deux éléments dissemblables se rencontrent intentionnellement : une lettre contre une forme géométrique, un bloc de texte dense contre un champ vide, une forme ronde contre une grille droite, le noir contre le blanc.	deux zones de grille partageant un bord ou se chevauchant, contraste délibéré de couleur et de densité

7. Coder avec discipline

Avant d'écrire du CSS, ouvrez references/looks.md pour les mécanismes éprouvés. La grille doit être la colonne vertébrale du CSS. Utilisez display: grid avec des largeurs de colonnes explicites (en fr ou en pourcentages), jamais grid-template-columns: repeat(auto-fit, minmax(...)) pour les mises en page d'affiche : l'intention est toujours explicite. Les couleurs viennent du Look et sont déclarées en propriétés personnalisées en haut de la feuille de style. Le fichier scripts/color_power.py vérifie que la capture d'écran finale a une puissance de couleur suffisante (au moins 60 % de couverture de fond) ; exécutez-le après chaque maquette.

Partie 2 — Grille, espacement, typographie, couleur

2.1 La grille

Colonnes : 12 colonnes pour les pages larges (≥960 px), 8 pour les tablettes, 4 pour le mobile. Ajustez les gouttières à 16 px (mobile) et 24 px (desktop).
Unité de base : 8 px. Tous les espacements (marges, padding, gouttières) sont des multiples de 8 : 8, 16, 24, 32, 48, 64, 96.
Ligne de base : La hauteur de ligne du corps de texte (1.5 × 16 px = 24 px) devient une unité de ligne de base. Les titres et les blocs s'alignent sur ses multiples.
Recettes de mise en page :
- Héro : titre aux colonnes 1–10, métadonnées 1–3, intro 6–11. Ou titre 2–9, image 10–12, métadonnées sous l'image.
- Section de contenu : deux colonnes de texte 3+4 avec une image 9–12, ou une grille 2+4+6 pour des données.
- Grille de cartes : trois cartes sur 4 colonnes chacune, ou deux cartes sur 6+6 avec des contenus différents.

2.2 Typographie

Une famille de polices, une échelle abrupte :

Niveau	Taille (px)	Hauteur de ligne	Graisse
Affichage (géant)	200–300	0.8–0.9	700–900
Titre 1	72	0.9	700
Titre 2	48	1.0	600
Titre 3	32	1.1	500
Corps	16	1.5	400
Petit	12	1.4	400
Métadonnées	10	1.3	300

Famille : Inter, Helvetica Neue, ou une police sans empattement similaire. Pour l'arabe, utilisez une police arabe sans empattement (comme Noto Sans Arabic, Cairo, ou une police coufique pour les titres) associée à une latine partenaire.
Alignement : Texte à fleur de gauche (ou à fleur de droite pour RTL), jamais justifié. Les titres peuvent être centrés rarement, uniquement dans des contextes symétriques intentionnels.
Casse : Les titres peuvent être en majuscules ou en casse normale selon le ton. Évitez les majuscules pour les longs textes.

2.3 Couleur

Les palettes sont dans references/looks.md. Principes généraux :

Couleur de fond : couvre au moins 60 % de la surface visible du premier écran. Les couleurs fortes (jaune, cyan, rouge, noir) sont privilégiées.
Couleur de texte : une couleur par surface, avec un contraste vérifié (rapport de contraste ≥ 4.5:1 pour le texte normal, ≥ 3:1 pour le grand texte).
Accentuation : une ou deux couleurs d'accent, utilisées pour les boutons, les liens et les éléments interactifs.
Évitez : les dégradés, les ombres portées (sauf si explicitement demandé par le Look), les transparences non intentionnelles.

Partie 3 — Arabe et RTL

Direction : dir="rtl" sur l'élément racine. La grille reste la même, mais les portées de colonnes sont inversées (colonne 1 est à droite).
Alignement du texte : texte à fleur de droite (text-align: right). Les listes et les éléments de navigation sont également inversés.
Polices : Utilisez une police arabe sans empattement pour le corps (par ex. Noto Sans Arabic, Cairo, ou une police coufique pour les titres). Associez-la à une police latine sans empattement pour les chiffres et les mots latins (par ex. Inter).
Hauteur de ligne : Les polices arabes ont souvent besoin d'une hauteur de ligne légèrement plus grande (1.6–1.8) pour une lisibilité optimale.
Gouttières et marges : Les gouttières et marges restent en multiples de 8, mais les valeurs margin-inline-start et margin-inline-end sont utilisées pour gérer automatiquement la direction.
Coufique carré : Pour les gestes signatures de lettres comme architecture (Geste #1), le coufique carré est une option puissante en arabe. Dessinez-le en SVG à partir de carrés, en vous assurant qu'il est lisible et qu'il s'intègre dans la grille.
Texte pivoté : Pour les colonnes verticales (Geste #6), utilisez writing-mode: vertical-rl (ou vertical-lr selon le contexte) et faites pivoter le mot entier ; n'empilez jamais les lettres arabes verticalement.

Partie 4 — Composants

4.1 Navigation

Barre de navigation horizontale, avec le logo à gauche (ou à droite pour RTL).
Liens de navigation en petit texte (12 px), avec un espacement généreux (32 px).
Pas de fond ou seulement un fond de couleur plate. Pas d'ombres.
Option : une barre de navigation collante avec un fond transparent (ou de la couleur du Look).

4.2 Héros

Le héros est une section à part entière, avec une seule idée forte (le message principal).
Utilisez un titre géant (Geste #2), ou une affiche-objet (Geste #11), ou une géométrie figure-fond (Geste #5).
L'élément géant doit venir du contenu (un nom, un nombre, un objet), pas d'un appel à l'action.
Un seul appel à l'action, en bouton (ou lien) en couleur d'accent, avec un texte factuel ("Inscrivez-vous le 15 mai", pas "Commencez maintenant").

4.3 Grilles de contenu

Sections avec des compositions de grille différentes. Évitez de répéter la même mise en page dans chaque section.
Utilisez des portées de colonnes inégales (5+7, 4+8, 3+9, etc.).
Pour les données, utilisez la grille comme contenu (Geste #8) : tableaux avec bordures, cellules de grille dessinées.

4.4 Cartes

Utilisez les cartes avec parcimonie. Préférez des blocs de contenu plats sur la grille.
Si des cartes sont utilisées (pour des produits, des articles), qu'elles soient sans arrondi, sans ombre et avec des couleurs de fond plates.
Le titre de la carte est en Titre 3, le corps en Petit, avec une image pleine largeur en haut si applicable.

4.5 Pied de page

Contenu minimal : copyright, liens légaux, peut-être un lien de contact. Pas de formulaire d'inscription par courriel, pas de grille de réseaux sociaux.
Fond de couleur forte (couleur du Look) ou noir.

Partie 5 — Ne pas ressembler à de l'IA : la liste de vérification

Avant de finaliser une sortie, vérifiez chaque élément :

Contenu : Tout le contenu est-il factuel, spécifique et non générique ? Pas de lorem ipsum, pas de remplissage marketing ?
Grille : La grille est-elle visible ou cohérente ? Pas de largeurs aléatoires, pas de centrage non intentionnel ?
Typographie : Une seule famille de polices ? L'échelle est-elle abrupte (pas de sauts de taille doux) ?
Couleur : La palette vient-elle d'un Look ? La couleur de fond couvre-t-elle au moins 60 % de l'écran ? Pas de dégradés, pas d'ombres ?
Asymétrie : Les portées de colonnes sont-elles inégales ? Les éléments lourds sont-ils décalés ?
Gestes signatures : Y a-t-il au moins trois gestes signatures sur une page d'atterrissage (ou un sur une UI de produit) ? Sont-ils basés sur le contenu, pas sur des astuces de design ?
Appels à l'action : Les textes des boutons sont-ils factuels (nom + verbe, date, objet) plutôt que des impératifs génériques ?
Variété : Chaque section a-t-elle une composition différente sur la même grille ? Les sections ne se répètent-elles pas ?
Résultat : La page ressemble-t-elle à quelque chose qu'un designer humain discipliné créerait, plutôt qu'à un modèle d'IA ? Montrez-la à un collègue (ou à vous-même après une heure) et demandez : "Cela a-t-il l'air fait par une IA ?"

Partie 6 — Source : l'école suisse en bref

Extrait du livret L'École suisse de design (traduction libre) :

L'École suisse de design, également connue sous le nom de Style typographique international, est née en Suisse dans les années 1950 et 1960. Ses pionniers (Ernst Keller, Josef Müller-Brockmann, Armin Hofmann, Emil Ruder, Karl Gerstner, et d'autres) cherchaient à créer un langage visuel universel, objectif et fonctionnel, libéré des ornements subjectifs et des tendances commerciales.

Les principes clés comprennent :

La grille comme structure logique : une grille mathématique rigoureuse organise le contenu, assurant une hiérarchie claire et une cohérence.
La typographie comme image : la police de caractères, en particulier les sans empattement (comme Helvetica), est utilisée non seulement pour le texte, mais aussi comme élément visuel principal.
L'asymétrie : l'équilibre est atteint par la distribution de forces visuelles, non par la symétrie.
L'espace blanc comme structure : l'espace négatif n'est pas un vide, mais un élément actif qui structure la composition.
L'objectivité : le contenu est présenté de manière factuelle, sans exagération ni fioritures.
La photographie et la géométrie : les photographies (souvent en noir et blanc, ou en objet brut) et les formes géométriques simples sont utilisées comme éléments de composition.

L'école suisse a eu une influence profonde sur le design graphique, le design web et la conception d'interfaces utilisateur. Sa quête de clarté et de fonctionnalité a jeté les bases de nombreux systèmes de design modernes. Cependant, son adoption universelle a également conduit à une certaine uniformité dans le design numérique, ce que ce skill cherche à contrer en appliquant les principes de manière spécifique au contenu de chaque projet.

Références et scripts

references/looks.md : Contient cinq Looks (Soleil, Encre violette, Bandes primaires, Noir + spectre, Affiche de concert) avec leurs tokens, paires de polices, mécanismes de composition et CSS testé. Utilisez-le à l'étape 4 du flux de travail.
scripts/color_power.py : Un script Python qui vérifie la puissance des couleurs d'une capture d'écran. Il calcule la couverture du fond (couleurs dominantes) et vérifie qu'elle atteint au moins 60 %. Exécutez-le après chaque maquette finale pour garantir la force visuelle.

This skill is designed to be used by AI agents like Claude Code, Cursor, and Codex to generate UI designs that adhere to the Swiss design tradition.

swiss-ui-design

Qu'est-ce que swiss-ui-design ?

Demander à votre IA préférée

Documentation