GratuitVidéo
Fenêtre d'application et zoom
- 365365 téléchargements
- 125125 mentions J'aime
- 188188 sauvegardes
Compatible avec
+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
Variantes d'interface à comparer en direct v1.0.0
Utilisez cette ressource pour explorer plusieurs directions de design pour un composant d'interface
Nouveau
- 454 téléchargements
- 150 mentions J'aime
- 123 sauvegardes
Gratuit
Installer avec la CLI
Dans un terminal, depuis le dossier voulu :
npx --yes palatekit@latest install ui-variant-prototyperSans option, la skill va dans ~/.agents/skills/ ; ajoutez --agent claude-code (ou codex, cursor…) pour viser un agent.
Première fois : connectez la CLI avec
npx --yes palatekit@latest loginL'agent prend un élément d'interface que vous décrivez (un toast, une carte de tarifs, un bouton) et en construit 3 à 5 versions qui diffèrent vraiment par la mise en page, la densité ou le mouvement. Elles s'affichent une par une, en pleine taille, derrière un sélecteur. Vous choisissez, l'agent intègre la gagnante et supprime le reste.
Mise à jour le 2 novembre 2026
Aperçus
Caractéristiques
- Fonctionne dans
- Guides d'installation
- Génère avec
- Le modèle de votre agent
- Licence
- MIT
Ressources similaires
Tout voir- Gratuit
GratuitVidéo
Un seul grand chiffre
- 463463 téléchargements
- 223223 mentions J'aime
- 100100 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
PalateKit Motion, la bibliothèque
- 338338 téléchargements
- 198198 mentions J'aime
- 249249 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Trois barres face à face
- 348348 téléchargements
- 133133 mentions J'aime
- 182182 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Avant / après au curseur
- 322322 téléchargements
- 248248 mentions J'aime
- 238238 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Carrousel de trois cartes
- 418418 téléchargements
- 157157 mentions J'aime
- 101101 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Échange en bulles
- 564564 téléchargements
- 127127 mentions J'aime
- 161161 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Liste qui se coche
- 442442 téléchargements
- 233233 mentions J'aime
- 160160 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
Ce que vous obtenez
- SKILL.md : la méthode en six phases, traduit en français
- PICKER.md : le balisage et le comportement exacts du sélecteur de variantes
- Un tableau final qui donne l'axe, l'intérêt et le coût de chaque variante
Pour qui
- Hésiter entre plusieurs directions pour une carte de tarifs ou un bouton clé
- Montrer à un client plusieurs pistes réellement différentes d'un même composant
- Explorer un composant avant de l'intégrer à un site existant
Pas pour qui
- Auditer ou corriger une interface déjà en place
- Concevoir une page entière ou un tableau de bord complet en une fois
- Choisir une bibliothèque de composants
Étiquettes
- design
- prototype
- composants
- variantes
- mouvement
À propos
Vous dites
« /prototype une carte de tarifs avec trois formules pour mon site de coaching »
Skill publiée par emilkowalski sous licence MIT, traduite par PalateKit.
Voir plusVoir moins
Prérequis
- À préparer
- La description d'un seul composant d'interface et Idéalement, un projet web existant dont l'agent reprendra le style
Comment l'utiliser
- Copiez la skill dans votre projet et lancez-la en décrivant un seul composant.
- L'agent explore votre projet, propose les directions, construit les variantes et le sélecteur.
- Parcourez les variantes au clavier, puis dites laquelle garder.
Aperçu du contenu
Fichiers
- LICENSE1,1 Ko
- NOTICE-PALATEKIT.md0,4 Ko
- PICKER.md7,6 Ko
- SKILL.md9,1 Ko
Origine et licence
Modifié par PalateKit
- Auteur
- emilkowalski
- Source
- github.com/emilkowalski/skills/tree/a81dbca07f2217b7103e510c0f13f8d5b017afc9/skills/prototype
- Licence
- MIT
Notice
Version modifiée de « prototype » (emilkowalski, MIT) : traduction française et fiche par PalateKit.
Avis des utilisateurs
–
Aucune note pour l'instant
Chargement des avis…
Questions fréquentes
Faut-il un projet existant ?
Non. Sans projet, l'agent produit un seul fichier HTML autonome que vous ouvrez dans un navigateur, avec un style sobre par défaut.
La skill modifie-t-elle mon site pendant l'exploration ?
Non. Tout reste dans une surface de prototype isolée. L'intégration n'a lieu qu'après votre choix, puis le prototype est supprimé sauf demande contraire.