Aller au guide d’utilisation
improve-uipar Julien Thibeaut

Improve UI Skill.

Un skill Claude Code et Codex pour la revue de design : audite une surface produit par rapport à ses propres preuves de design et rédige des plans d'implémentation.

  • Revue de conception et accessibilité
  • Rapport de revue
ibelick/ui-skills · skills/improve-ui/SKILL.mdSKILL.md
--- name: improve-ui description: Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent. Strictly read-only on product source. Use when asked to review, refine, improve, or clean up an interface without replacing its identity; investigate design-system drift; or prepare a design handoff. --- ## Boundaries ## 1. Select the surface ## 2. Reconstruct the local system ## Design language ## 3. Prove findings ## 4. Vet findings
En-tête et titres de section lus depuis le fichier source le 14 septembre 2026 · 7 816 caractères au total

01 Ce qu'il fait

Ce que fait le skill improve-ui 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

Improve UI audite une surface produit cohérente par rapport au design system qui la régit réellement, puis rédige des plans d'implémentation autonomes destinés à être exécutés par un autre agent. Il est en lecture seule sur la source du produit : les fichiers ne sont créés ou modifiés que sous design-plans, et aucune dépendance, formatage, commit ou push n'est autorisé.

Les constats doivent résister à trois preuves — contrat, exécution et correction —, ainsi qu'à une passe ultérieure de falsification, et le rapport s'arrête à trois éléments, classés par confiance, impact utilisateur, portée et coût de correction. Ce skill convient aux designers et développeurs qui révisent, affinent ou nettoient une interface sans en remplacer l'identité, qui enquêtent sur une dérive du design system, ou qui préparent une passation de design. L'accessibilité, le comportement, la performance et l'architecture sont hors périmètre, sauf demande explicite.

Rapport de revue
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Sélectionner une surface cohérente

    Une demande large est réduite à une seule application déployable et une seule famille de surfaces cohérentes pour une tâche produit principale ; le skill énonce cette sélection au lieu de traiter le dépôt comme un produit unique.

  2. 02
    Reconstruire le système local

    Il n'utilise une source qu'après avoir prouvé qu'elle est à jour et qu'elle régit la surface sélectionnée ; les brouillons, propositions, migrations et listes de tâches décrivent une intention future, sauf s'ils sont explicitement acceptés et à jour.

  3. 03
    Exiger trois preuves par candidat

    Chaque candidat retenu nécessite un contrat, un chemin d'exécution et une correction déterministe ; les résultats de recherche, les répétitions et les différences d'implémentation produisent des candidats, pas des constats.

  4. 04
    Vérifier et falsifier

    Les candidats sont à nouveau attaqués avant le rapport, et seuls ceux qui survivent à cette passe sont admis dans le tableau des constats.

  5. 05
    Rapport, ordonné et plafonné

    Les constats sont classés par confiance, impact utilisateur, portée et coût de correction, et la liste est limitée à trois éléments.

  6. 06
    Spécifier les changements sélectionnés

    Avant la rédaction, les sources citées sont rouvertes, le commit actuel est enregistré lorsqu'il est disponible, et les primitives réutilisables exactes ainsi que les exemples sont identifiés sur les surfaces concernées.

02 Trouvez celui qui vous convient

Quand utiliser la Skill improve-ui

Utiliser la skill improve-ui dans Claude Code ou Codex lorsque le travail consiste en une revue de design de ce type. L'adéquation et les limites ci-dessous sont tirées du propre fichier de la skill.

Bon choix

  • Lorsqu'on demande de revoir, d'affiner, d'améliorer ou de nettoyer une interface sans remplacer son identité

Connaître les limites

  • Ne jamais modifier le code source du produit. Créer ou éditer des fichiers uniquement sous design-plans/.
  • Ne pas installer de dépendances, exécuter de formateurs, committer, pusher ou autrement muter l'arbre de travail.
  • Ne pas mettre à jour la documentation de design. Consigner les modifications de documentation acceptées dans le plan pour son exécuteur.
  • Utiliser les preuves rendues uniquement lorsque l'utilisateur les fournit ou demande explicitement une inspection visuelle.

03 Dans le skill

Ce que la Skill improve-ui apporte à la revue de design

4 choses que le SKILL.md demande à Claude Code ou Codex de faire, dans l'ordre des sections du fichier.

  1. 1. Sélectionner la surface

    Respecter le périmètre de l'utilisateur. Si la demande est large, sélectionner une application déployable et une famille de surfaces cohérente représentant une tâche produit principale.

  2. 2. Reconstruire le système local

    Vérifier DESIGN.md, les directives du dépôt et la documentation de design locale à la surface.

  3. Langage de design

    Écrire Aucune exception documentée sous Exceptions explicites sauf si une source citée identifie explicitement l'exception.

  4. 3. Prouver les constats

    Avant d'appliquer la porte de preuve, inspecter les libellés visibles par l'utilisateur, la présentation des états actifs, les branches responsives et les variantes sœurs de chaque surface tracée pour détecter les contradictions internes.

04 Mettez-le en pratique

Installer improve-ui 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 improve-ui à 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/ibelick/ui-skills --skill improve-ui

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

Donner au skill une première tâche de révision de conception

Le SKILL.md ne contient pas d'exemple de prompt ; ce démarrage est rédigé à partir du résumé en une ligne du catalogue. Remplacez la ligne de tâche par votre vrai brief.

Starter prompt
Use the improve-ui skill on the material I attach. What the skill should do here: Audits a product surface against its own design evidence and writes implementation plans. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Source : prompt de démarrage rédigé à partir de l'utilisation en une ligne du catalogue (pas à partir du SKILL.md).

Vérifiez le premier résultat

Avant d'accepter le résultat, recherchez ceci dans la transcription et les fichiers :

  • Le résultat est livré sous forme de rapport de revue, tel que listé dans le catalogue pour ce skill.
  • L'agent nomme la skill improve-ui dans son plan ou sa transcription avant de produire le résultat.
  • Votre propre contenu, vos noms et vos chiffres apparaissent inchangés dans la sortie.

Dans OpenDesign, importez improve-ui 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.

Repository
github.com/ibelick/ui-skills Branche main
Fichier du skill
skills/improve-ui/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 79081ab
License
MIT Depuis LICENSE.
Étoiles du dépôt
8 402 Instantané GitHub pris le 14-09-2026 pour l'ensemble du dépôt ibelick/ui-skills, qui contient 5 skills dans ce catalogue. Pas une note ni un compteur d'utilisation pour improve-ui.
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.
Description du skill lui-même
Auditer une surface produit existante en la confrontant à ses propres preuves de design, identifier les problèmes UI vérifiés et rédiger des plans d'implémentation autonomes pour un autre agent. Strictement en lecture seule sur le code source produit. À utiliser quand on vous demande de revoir, affiner, améliorer ou nettoyer une interface sans remplacer son identité ; enquêter sur la dérive du design system ; ou préparer un transfert de design.

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

Improve UI

Exécuter improve-ui sur une tâche réelle de design review.

Téléchargez OpenDesign, importez improve-ui 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/ibelick/ui-skills --skill improve-ui

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