Aller au guide d’utilisation
interface-designpar Dammyjay93

Interface Design Skill.

Un skill Claude Code et Codex pour la conception UI : conception d'interfaces orientée craft pour dashboards, panneaux admin, outils SaaS et pages de paramètres.

  • Web et UI
  • Code UI
Dammyjay93/interface-design · .claude/skills/interface-design/SKILL.mdSKILL.md
--- name: interface-design description: Craft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. Use when designing, building, reviewing, auditing, or refining product UI where visual craft, layout hierarchy, tokens, states, visual direction, or design-system consistency matter. Not for marketing pages, landing pages, campaigns, or brand-only work. --- ## Scope ## One focal point per view ## Type scale is a ratio, and weight beats size ## Density is a decision, expressed in px ## Spatial rhythm — breathe unevenly ## Proportions speak
En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 29 304 caractères au total

01 Ce qu'il fait

Ce que fait le skill interface-design dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Une discipline axée sur le métier pour concevoir des UI produit — tableaux de bord, panneaux d'administration, applications SaaS, outils, pages de paramètres, interfaces de données — avec les décisions qu'une équipe de design de premier plan prendrait. Il impose un brief de travail avant le code : qui est l'humain, le verbe unique qu'il est venu accomplir, et ce que l'interface doit faire ressentir, en des mots qui ont du sens.

À partir de là, il prescrit une exploration du domaine (domaine, univers de couleurs, signature, valeurs par défaut rejetées), une échelle typographique construite sur un ratio où le poids et la couleur assurent la hiérarchie, une stratégie de profondeur unique et assumée, des tokens sémantiques plutôt que des valeurs codées en dur, ainsi que les fondamentaux de finition et de mouvement — chiffres tabulaires, rayon concentrique, durées sous 300ms, aucune animation sur les actions à haute fréquence. Explicitement non destiné aux pages d'atterrissage, sites marketing, campagnes ou travaux de marque uniquement.

Ce qu'il produit

  • Une proposition Suggest + Ask nommant Domain, Color world, Signature, Rejecting et Direction.
  • Des spécimens rendus en ligne — échantillons de palette, échelle typographique dans la vraie police, cartes d'élévation superposées, la signature comme un vrai composant — lorsqu'un outil de rendu est présent ; l'implémentation elle-même finit toujours dans la base de code.
  • Un fichier .interface-design/system.md enregistré, contenant la direction, la stratégie de profondeur, les décisions de hiérarchie et les motifs de composants répétés, rédigé uniquement après que l'utilisateur ait dit oui.
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Rédiger le brief de travail

    Avant tout code, répondre à qui est l'humain, quel verbe il doit accomplir, et à quoi l'interface doit ressembler — resté compact sauf si la direction a besoin d'être confirmée.

  2. 02
    Explorer le domaine produit

    Produire quatre livrables avant de proposer une direction : au moins 5 concepts de domaine, 5+ couleurs issues du monde physique du produit, un élément signature, et 3 valeurs par défaut évidentes à rejeter.

  3. 03
    Proposer et confirmer la direction

    Commencer par un bloc Suggest + Ask nommant Domain, Color world, Signature, Rejecting et Direction, puis vérifier que la direction semble juste avant de construire.

  4. 04
    Rendre les spécimens quand c'est possible

    Si la session dispose d'un outil de rendu visuel en ligne, montrer la palette, l'échelle typographique, les paliers d'élévation et la signature sous forme de vrais composants plutôt que de les décrire ; sinon, revenir au code.

  5. 05
    Construire à partir de l'existant, puis vérifier

    Inspecter l'application, les tokens, les motifs de composants et system.md, corriger l'implémentation, exécuter le build, le typecheck ou les tests disponibles, puis vérifier visuellement aux largeurs desktop et mobile.

  6. 06
    Proposer d'enregistrer les motifs

    Après une tâche, proposer d'enregistrer la direction, la stratégie de profondeur, les décisions de hiérarchie et les motifs de composants répétés afin que les sessions suivantes restent cohérentes.

02 Trouvez celui qui vous convient

Quand utiliser le Skill interface-design

Utilisez le skill interface-design dans Claude Code ou Codex lorsque le travail est de la conception UI de ce type. La portée et les limites ci-dessous sont tirées du propre fichier du skill.

Bon choix

  • Travail d'interface produit : tableaux de bord, panneaux d'administration, applications SaaS, outils, pages de paramètres et interfaces de données.
  • Réviser, auditer ou affiner une interface produit existante, pas seulement construire de nouveaux écrans.
  • Écrans en création pure, refontes majeures et direction vague, où une passe de référence visuelle peut précéder le code.
  • Faire tenir un system.md existant à ses valeurs déclarées sur un nouveau travail.

Connaître les limites

  • Pages d'atterrissage, sites marketing, campagnes et travaux de marque uniquement, que le fichier renvoie plutôt vers un skill de design marketing ou frontend.
  • Les visuels générés couvrent uniquement les illustrations d'état vide et les textures — jamais les icônes, logos ou graphiques.
  • Les champs de sélection et de date natifs ne peuvent pas être stylisés, ils doivent donc être remplacés par un composant primitif headless plutôt que codés à la main.
  • Le rendu en ligne est conditionnel : en CI, avec des agents headless ou des terminaux simples, il n'y a pas de widget, donc le skill se replie sur le code, les tokens et une proposition écrite.

Quoi fournir

  • L'humain, le verbe et la sensationLe brief doit identifier qui ouvre l'interface, ce qu'il doit accomplir et quelle sensation cela doit procurer, avec des mots précis ; s'il ne le peut pas, le skill pose une question concise ou formule une hypothèse responsable et poursuit.
  • La base de code existanteL'application existante, les design tokens, les patterns de composants et .interface-design/system.md sont examinés afin que les contrôles et les styles soient réutilisés plutôt que réinventés.
  • Une capture d'écran, pour un paintoverLorsqu'un outil de génération d'images est disponible, une capture d'écran existante peut être transformée en une version plus forte avant qu'aucun code ne soit écrit.

03 Dans le skill

Règles que le skill interface-design donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

  1. Exécuter le Checkpoint avant le code

    Avant d'écrire tout code d'interface, même de petits ajouts, énoncez Intent, Hierarchy, Palette, Depth, Surfaces, Typography et Spacing — et soyez capable de justifier chacun d'eux.

  2. Natif, puis Primitif, puis codé à la main

    Ne jamais construire un div avec un onClick lorsque la plateforme propose déjà un bouton ou un lien ; les contrôles avec état comme select, combobox, dialog, popover, tooltip, tabs et date picker proviennent d'un primitive headless éprouvé.

  3. Tokens plutôt que littéraux codés en dur

    Liez le style à des tokens sémantiques — bg-card, border-border, text-muted-foreground — plutôt qu'à bg-white, border-gray-200 ou text-gray-500, qui cassent le theming et le mode sombre.

  4. Échelonner la typographie selon un ratio, pas au feeling

    Choisissez un ratio et échelonnez-le : environ 1.2 pour une interface dense ou calme, 1.25 pour la plupart des interfaces produit, 1.333 pour un rendu expressif, en partant d'un corps de texte de 14 à 16px et en arrondissant aux pixels entiers sur la grille d'espacement.

  5. S'engager sur exactement une stratégie de profondeur

    Choisissez bordures uniquement, ombres subtiles, ombres superposées ou variations de couleur de surface, et maintenez-la partout ; mélanger les stratégies figure dans la liste des choses à éviter.

  6. Garder les animations d'interface sous 300ms

    Pression de bouton 100 à 160ms, tooltips et popovers 125 à 200ms, menus déroulants 150 à 250ms, avec un ease-out personnalisé plutôt que les courbes intégrées faibles ou l'ease-in.

  7. Pas d'animation sur les actions répétées

    Tout ce qui est fait 100 fois ou plus par jour — raccourcis clavier, palette de commandes — ne reçoit aucune animation, car cela les fait paraître lents ; les modales, tiroirs et toasts reçoivent toujours une animation standard.

  8. Ne jamais animer depuis une échelle zéro

    Les entrées démarrent à une échelle de 0.95 avec une opacité de 0, car rien n'apparaît à partir de rien.

04 Mettez-le en pratique

Installer interface-design dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter interface-design à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal
npx skills add https://github.com/Dammyjay93/interface-design --skill interface-design

Forme générique de la CLI skills pour .claude/skills/interface-design/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au skill une première tâche de design UI

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt
Build the settings page for [product], a SaaS tool. [The person] opens it to [task], and it should feel [feel], not like a generic admin panel. Our tokens and components live in [existing design system], so reuse those. The focal element is [focal element], and it needs loading, empty and error states.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

  • Test de substitution — remplacez la police par celle habituelle et la mise en page par un modèle standard ; partout où rien ne semblerait différent, c'est là que vous avez opté pour le défaut.
  • Test du plissement des yeux — floutez votre regard ; la hiérarchie doit toujours se lire, et rien ne doit ressortir de manière abrupte.
  • Test de signature — désignez cinq éléments précis où la signature apparaît ; la sensation générale ne compte pas.
  • Test des tokens — lisez les variables CSS à voix haute et demandez-vous si elles appartiennent à l'univers de ce produit ou à n'importe quel projet.
  • Regardez le résultat dans l'outil de rendu inline, un navigateur local ou des captures d'écran aux largeurs desktop et mobile.
  • Corrigez les chevauchements, les espacements cassés, les états vides, le texte illisible, les assets manquants et la composition générique avant de présenter quoi que ce soit.

Dans OpenDesign importez interface-design depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Fichier du skill
.claude/skills/interface-design/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 2f9be32
License
MIT D'après LICENSE.
Étoiles du dépôt
5 692 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt Dammyjay93/interface-design. Pas une note ni un compteur d'utilisation pour interface-design.
Vérifié par OpenDesign
2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. PortéeÀ utiliser pour les tableaux de bord, panneaux d'administration, applications SaaS, outils, pages de paramètres ; pas pour les landing pages ou le travail marketing.
  2. L'intention d'abordRépondez à qui est l'humain, ce qu'il doit accomplir, ce que cela doit donner comme sensation.
  3. Exploration du domaine produitProduisez d'abord des concepts de domaine, un univers de couleurs, une signature et 3 valeurs par défaut rejetées.
  4. Rendez-le dès que possibleEffectuez un rendu conditionnel des spécimens lors des propositions, de la construction de composants ou des critiques, en gardant le raisonnement en prose.
  5. Visual H
Description du skill lui-même
Conception d'interfaces axée sur le craft pour tableaux de bord, panneaux d'administration, applications SaaS, outils, pages de paramètres, interfaces de données et produits interactifs. À utiliser lors de la conception, du développement, de la revue, de l'audit ou du raffinement d'interfaces produit où le craft visuel, la hiérarchie de mise en page, les tokens, les états, la direction visuelle ou la cohérence du design system sont importants. Pas pour les pages marketing, landing pages, campagnes ou travaux uniquement axés sur la marque.

Description du front-matter de SKILL.md. Le fichier complet fait environ 29 304 caractères. Lire le fichier complet sur GitHub.

Interface Design

Exécuter interface-design sur une vraie tâche de design d'interface.

Téléchargez OpenDesign, importez interface-design depuis son lien SKILL.md, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Terminal
npx skills add https://github.com/Dammyjay93/interface-design --skill interface-design

OpenDesign Desktop

Un seul design system. Votre marque, cohérente partout

Dans le Vibe Design Workspace complet, appliquez les mêmes règles de marque aux sites, slides, prototypes interactifs, dashboards, images et vidéos HTML. Connectez Codex, Claude Code, Cursor et vos autres agents de code locaux, puis créez gratuitement.

  • Sites, slides, prototypes, dashboards, images et vidéos
  • Plus de 140 design systems et la bibliothèque complète de modèles et skills
  • Codex local et plus de 21 agents de code · Gratuit
Télécharger gratuitement

Disponible sur macOS et Windows