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
Recréer une maquette en interface fidèle v1.0.0
Utilisez cette ressource pour recréer une maquette ou une capture d'écran en interface web
Nouveau
- 459 téléchargements
- 213 mentions J'aime
- 223 sauvegardes
Gratuit
Installer avec la CLI
Dans un terminal, depuis le dossier voulu :
npx --yes palatekit@latest install image-to-ui-recreationSans 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 regarde l'image, relève dimensions, textes, espacements, polices et couleurs, puis construit la page avec les composants de votre projet. Il l'affiche à la même taille que la référence, compare les deux et corrige les écarts. Vous obtenez une interface fidèle, avec un compte rendu honnête de ce qui a été comparé.
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 : méthode en trois temps (examiner, implémenter, comparer et corriger), traduit en français
- Des règles de fidélité : pas de redesign, pas de ressource inventée
- Une consigne de compte rendu qui signale les écarts restants
Pour qui
- Passer d'une maquette Figma ou d'une capture à une page codée
- Cloner fidèlement un écran de référence fourni par un client
- Recoder une page à partir d'un visuel validé
Pas pour qui
- Imaginer un design à partir d'un brief sans image
- Améliorer ou retoucher le design d'une maquette
- Générer des images ou des illustrations
Étiquettes
- maquette
- capture
- html
- css
- interface
À propos
Vous dites
« Voici la maquette de ma page d'accueil : recrée-la à l'identique en HTML et CSS et compare avec une capture. »
Skill publiée par UIZZE sous licence MIT, traduite par PalateKit.
Voir plusVoir moins
Prérequis
- À préparer
- L'image de référence (capture ou maquette) et Le projet ou le dossier où créer la page
Comment l'utiliser
- Installez la skill et ajoutez l'image de référence.
- Indiquez la page ou le projet cible.
- Relisez le compte rendu et les écarts signalés.
Aperçu du contenu
Fichiers
- LICENSE1,1 Ko
- NOTICE-PALATEKIT.md0,4 Ko
- SKILL.md3,7 Ko
Origine et licence
Modifié par PalateKit
- Auteur
- uizze
- Source
- github.com/uizze/uizze/tree/40b0ee439ba88aecb65d68bcb379da0e716b899e/skills/image-to-ui
- Licence
- MIT
Notice
Version modifiée de « image-to-ui » (uizze, MIT) : traduction française et fiche par PalateKit.
Avis des utilisateurs
–
Aucune note pour l'instant
Chargement des avis…
Questions fréquentes
L'agent doit-il voir l'image ?
Oui, il doit regarder l'image elle-même ; si son outil ne peut pas, il demandera une copie lisible.
Les polices manquantes sont-elles remplacées ?
La skill demande de signaler la limite au lieu de remplacer en silence ; fournissez les polices pour un rendu exact.