prototypepar Emil Kowalski

Prototype Skill.

Un skill pour Claude Code et Codex destiné à la conception d'interfaces : construit plusieurs versions réellement différentes d'un élément d'interface derrière un sélecteur visuel en direct.

Web et UI
Code UI

Télécharger OpenDesign Voir le guide d'utilisation

emilkowalski/skills · skills/prototype/SKILL.mdSKILL.md

--- name: prototype description: Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own. --- ## Operating Posture ## Hard Rules ## Workflow ## Invocation Variants ## Tone

Matière préliminaire et titres de section lus depuis le fichier source le 14/09/2026 · 7 432 caractères au total

01 Ce qu'il fait

Ce que fait le prototype Skill 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

Un skill de divergence pour explorer un élément d'UI à la fois — une notification toast, la carte tarifaire, un bouton hold-to-delete. Il prend un élément décrit, construit plusieurs versions réellement différentes divergeant sur un axe nommé (mise en page, densité, personnalité, animation, modèle d'interaction), et les place derrière un sélecteur visuel afin que l'utilisateur puisse les parcourir en direct et en promouvoir une.

Il ne s'exécute que sur invocation explicite, propose trois variantes par défaut, garde l'exploration hors du code de production, et supprime la surface de prototype une fois qu'une variante est intégrée.

Ce qu'il produit

Un sélecteur visuel en direct contenant les variantes, afin de les parcourir et d'en promouvoir une.
Un tableau comparatif nommant l'axe de chaque variante, son cas d'usage idéal, et son coût.
Le code de production de la variante choisie, intégré dans la base de code, avec la surface de prototype supprimée.
Des captures d'écran de chaque variante lorsque des outils navigateur sont disponibles.

Voir l'exemple de prompt ↗

Fonctionnement

01
Se limiter à un seul élément
Si le brief couvre plusieurs composants, le skill choisit l'élément le plus impactant, précise lequel et pourquoi, et propose les autres en exécutions ultérieures.
02
Explorer le terrain
Recense le framework, le système de styles, la bibliothèque d'animation, les tokens, la personnalité du produit et le contexte dans lequel l'élément s'affiche, afin que les variantes paraissent natives au produit.
03
Nommer les directions d'abord
Propose trois variantes par défaut et jusqu'à cinq sur demande ou lorsque l'espace est réellement vaste ; chacune reçoit un nom et un axe avant qu'aucun code ne soit écrit.
04
Construire le harnais du sélecteur
Dans un projet, une route isolée contient un fichier par variante ainsi qu'un petit fichier de harnais ; le sélecteur lui-même est copié depuis PICKER.md plutôt que conçu.
05
Vérifier avant de présenter
Le harnais est exécuté et chaque variante est parcourue pour vérifier le rendu et l'interaction, avec des captures d'écran si des outils navigateur existent.
06
Promouvoir la gagnante
Une fois le choix de l'utilisateur fait, cette variante est intégrée en suivant l'organisation des fichiers, le nommage et l'usage des tokens du projet, et la surface de prototype est supprimée.

02 Trouvez celui qui vous convient

Quand utiliser le skill prototype

Utilisez le skill prototype dans Claude Code ou Codex lorsque le travail est une conception UI de ce type. L'adéquation et les limites ci-dessous sont tirées du fichier du skill lui-même.

Bon choix

Vous avez un élément d'UI décrit à explorer — une notification toast, une carte tarifaire, un bouton hold-to-delete.
Vous voulez plusieurs directions défendables côte à côte et préférez choisir en les parcourant en direct plutôt qu'en lisant une spécification.
Le travail se situe dans un projet en cours d'exécution avec un serveur de développement, où une route isolée peut héberger le harnais.
Vous explorez sans aucun projet et avez simplement besoin de quelque chose à ouvrir directement dans un navigateur.

Connaître les limites

L'examen d'une UI déjà existante — cette tâche relève de review-animations.
Planifier des corrections pour une animation existante ou choisir une dépendance ; ce sont deux autres skills.
Utiliser la divergence comme prétexte pour baisser la qualité d'exécution : une variante bâclée n'apprend rien sur la direction qu'elle représente.

Quoi fournir

Une description de l'élément d'UICe qu'est la chose, où elle vivra et ce qu'elle doit faire — le brief est reformulé en une seule phrase.
Un accès au projet pour la reconnaissanceAfin que les tokens, la personnalité et le contexte environnant puissent borner jusqu'où la variante la plus audacieuse peut aller.
Un nombre de variantes, en optionLa forme x5 de l'invocation demande davantage de variantes, plafonnées à cinq.
Votre choix à la finLe skill s'arrête après avoir présenté l'ensemble ; la promotion attend le choix ou une commande keep/riff.

03 Dans le skill

Règles que le skill de prototype 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.

Ne jamais toucher au code de production pendant l'exploration
Tout le travail reste sur une surface de prototype isolée ; l'intégration n'a lieu qu'en Phase 6, uniquement pour la variante choisie par l'utilisateur.
Chaque variante occupe un axe nommé
Les variantes doivent diverger sur la mise en page, la densité, la personnalité, le mouvement ou le modèle d'interaction, et chaque axe doit être formulable en une phrase avant la construction.
Du contenu réel dans chaque variante
De vraies interactions, de vrais mouvements, du texte à forme de produit réel avec des noms et des chiffres plausibles ; pas de lorem ipsum, pas de boutons morts, pas de "imaginez cette partie".
Le sélecteur est un chrome fixe
Son balisage, ses styles, son câblage clavier et son comportement viennent verbatim de PICKER.md et ne s'adaptent jamais au projet — son apparence n'est pas une décision de design.
La barre d'exigence s'applique par variante
La divergence n'abaisse pas le niveau : ease-out sur les entrées et jamais d'ease-in, mouvement d'UI sous 300 ms, transform-origin correct, transform/opacity uniquement, reduced-motion géré.
Le changement de variante est instantané
Basculer est une action de 100+ par session, donc selon la règle de fréquence, le changement de variante n'a droit à aucune animation.
Les noms décrivent des directions
Les variantes sont nommées selon la direction — Quiet, Editorial, Playful, Dense — jamais Option A/B/C ; deux directions ne différant que par la couleur d'accent ou le texte constituent une seule direction.
Supprimer la surface après le choix
Lorsqu'un gagnant est promu, la surface de prototype est retirée à moins que l'utilisateur ne demande de la conserver.

04 Mettez-le en pratique

Installer prototype 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 prototype à 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/emilkowalski/skills --skill prototype

Forme générique de la CLI skills pour skills/prototype/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 me a few versions of the toast that appears after someone saves a filter. It shows bottom-left over the dashboard, has an undo action, and auto-dismisses. We're on React with Tailwind and the tokens live in theme.css. Give me 3 variants and put them behind the picker.

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 :

Chaque variante a un nom et un axe indiqué, et deux variantes ne partagent jamais la même position d'axe.
Chaque variante est accessible depuis le sélecteur et fonctionne correctement, sans erreur de console.
Aucun favori n'est présélectionné dans le tableau de remise ; si on vous demande lequel vous choisiriez, la raison provient de la personnalité du produit et de la fréquence d'utilisation.
Si deux variantes ont convergé pendant la construction, supprimez-en une et dites-le plutôt que de gonfler l'ensemble.
Après une commande keep, vérifiez si le sélecteur était censé subsister : la forme keep simple supprime la surface de prototype, la forme leave-the-picker la conserve.

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

Télécharger OpenDesign Lire le démarrage rapide

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.

Author: Emil Kowalski
Repository: github.com/emilkowalski/skills Branche main
Fichier du skill: skills/prototype/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit d23d7f8
License: MIT Depuis LICENSE.
Étoiles du dépôt: 37 516 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt emilkowalski/skills, qui contient 9 skills de ce catalogue. Il ne s'agit pas d'une note ni d'un compteur d'utilisation pour prototype.
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

Posture opérationnellePosture d'ingénieur de conception senior ; la divergence est toute la valeur, le niveau de qualité s'applique toujours
Règles impérativesCinq contraintes numérotées sur le code de production, les axes, les variantes fonctionnelles, le sélecteur et le nettoyage
WorkflowPhases 1 à 6 : périmètre, reconnaissance, orientations, harnais, vérification, promotion
Variantes d'invocationTableau des invocations description, x5, riff et keep et de leur comportement
TonVendez chaque variante honnêtement, nommez son coût, ne présélectionnez jamais un favori

Description du skill lui-même

Construisez plusieurs versions vraiment différentes d'un élément d'interface que vous décrivez, rendues derrière un sélecteur visuel pour pouvoir les parcourir en direct et promouvoir celle qui vous semble juste. Ne s'exécute que lorsqu'il est explicitement invoqué ; ne se déclenche pas automatiquement.

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

06 Avant d'installer

Questions sur le skill prototype

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Se déclenche-t-il tout seul quand j'édite l'UI ?

Non. Il ne s'exécute que sur invocation explicite et ne se déclenche jamais seul, et l'invocation par modèle est désactivée pour lui. Vous l'appelez avec une description, un nombre x5 optionnel, ou une commande riff ou keep.

Prototype

Exécutez prototype sur une tâche réelle de conception UI.

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

Télécharger OpenDesign Parcourir tous les skills

Terminal

npx skills add https://github.com/emilkowalski/skills --skill prototype

Ce que fait le prototype Skill dans Claude Code et Codex

Dans les termes du Skill

Fonctionnement

Quand utiliser le skill prototype

Bon choix

Connaître les limites

Quoi fournir

Règles que le skill de prototype donne à Claude Code et Codex

Ne jamais toucher au code de production pendant l'exploration

Chaque variante occupe un axe nommé

Du contenu réel dans chaque variante

Le sélecteur est un chrome fixe

La barre d'exigence s'applique par variante

Le changement de variante est instantané

Les noms décrivent des directions

Supprimer la surface après le choix