Sommaire
Recréateur de design — en développementCe qui ressort d'un design recrééComment vous l'utiliserezInspiration, pas appropriationPourquoi Rekreate le construitQuestions fréquentesLes designers et développeurs front-end déchiffrent chaque jour des interfaces : mesurer les espacements sur une capture d'écran, deviner l'échelle typographique, reconstruire un composant pour comprendre son comportement. Recréer un design transforme cela en une seule étape : déposez la capture d'écran ou l'URL et obtenez les tokens de design, la décomposition des composants et un code front-end fonctionnel.
Cet outil est en cours de développement chez Rekreate. Voici ce qu'il produira exactement, et ce que nos outils actuels peuvent déjà faire pour vous.
- Entrée : capture d'écran, cadre Figma ou URL. Sortie : tokens, composants, code.
- Palette de couleurs, échelle typographique, rythme des espacements, rayons et ombres extraits en tant que variables.
- Sortie au niveau des composants — une carte, une navigation, une table de prix — pas un simple bloc de balisage.
- En cours de développement. Les outils d'image dans
/makesont déjà disponibles.
Recréateur de design — en développement
Donnez-lui une interface et récupérez le système qui la compose : une palette de couleurs avec des tokens nommés, une échelle typographique, le rythme des espacements, les rayons d'angle et l'élévation, puis chaque composant reconstruit en HTML et CSS avec des noms de classes cohérents et un comportement responsive.
L'objectif n'est pas de cloner le produit de quelqu'un d'autre. C'est de répondre à la question que chaque designer pose à une capture d'écran — comment cela est-il réellement construit ? — en quelques secondes au lieu d'un après-midi.
Cet outil n'est pas encore en ligne. Créez un compte gratuit et nous vous informerons dans l'application dès qu'il sera disponible.
Ce que vous pouvez faire aujourd'hui
Ce qui fonctionne déjà dans Rekreate :
- Recréer une photo — reconstruisez un visuel, une maquette ou une illustration dans votre propre style.
- Recréer un logo — des assets de marque propres avec des arrière-plans transparents.
- Ideogram — des graphiques de style interface où le texte doit être lisible.
Pour le code aujourd'hui, utilisez un outil dédié de capture d'écran en code ; revenez ici lorsque le recréateur sera disponible.
Ce qui ressort d'un design recréé
| Couche | Sortie prévue |
|---|---|
| Couleur | Palette avec des rôles — surface, encre, atténué, accent, sémantique — en tant que variables CSS, clair et sombre |
| Typographie | Familles de polices, échelle utilisée, poids, hauteurs de ligne et espacement des lettres |
| Espacement | Le rythme sous-jacent (4/8pt ou autre) ainsi que les largeurs de conteneurs et les gouttières |
| Composants | Boutons, cartes, navigation, formulaires, tableaux — chacun en HTML et CSS isolés |
| États | Survol, focus, désactivé et erreur lorsqu'ils peuvent être déduits |
| Notes d'accessibilité | Alertes de contraste et états de focus manquants signalés, pas copiés silencieusement |
Comment vous l'utiliserez
Déposez la référence
Une capture d'écran d'un produit que vous admirez, un cadre Figma ou une URL en direct.
Choisissez la portée
L'écran entier, ou un composant que vous devez comprendre — la carte de prix, la barre latérale, l'état vide.
Examinez le système
D'abord les tokens : la palette est-elle correcte, l'échelle typographique correspond-elle, l'espacement est-il aligné sur une grille ? Corrigez tout ce que le modèle a mal deviné.
Prenez le code
Copiez les composants dans votre projet, ou gardez-les comme implémentation de référence pendant que votre équipe construit la version finale.
Inspiration, pas appropriation
Les patterns d'interface sont un savoir-faire partagé. Personne ne possède une carte avec un titre, un corps et un bouton ; l'industrie a convergé vers ces patterns parce qu'ils fonctionnent.
Ce qui est protégé : l'identité visuelle d'un produit — son logo, son style d'illustration, ses polices personnalisées, ses images et son contenu — ainsi que tout code propriétaire. Un design recréé doit vous apprendre les mécanismes, puis être habillé avec votre propre marque.
Si votre écran ressemble à celui d'un concurrent avec un logo différent, vous avez copié leur identité, pas appris de leur structure. Utilisez les tokens comme point de départ et adaptez-les à votre propre système.
Pourquoi Rekreate le construit
Tout notre produit repose sur une idée : partir de quelque chose qui fonctionne déjà, puis le personnaliser. Cela a commencé avec des vidéos virales, s'est étendu aux publicités, photos et voix, et le design applique ce même principe aux interfaces.
Cela complète également la famille /make pour les équipes : recréez la publicité, recréez la landing page, recréez le système de design derrière — tout au même endroit, dans la langue dans laquelle vous travaillez.
Suivez le recréateur de site web et le recréateur d'application si vous souhaitez découvrir les outils voisins.
Questions fréquentes
L'IA peut-elle recréer un design UI à partir d'une capture d'écran ?
Oui — les modèles de vision peuvent extraire une palette, une échelle typographique et une mise en page à partir d'une image et reconstruire les composants en code. Le recréateur de design de Rekreate est en développement ; aujourd'hui, nos outils en direct couvrent les images, les logos et les vidéos.
Est-ce que cela me donnera des fichiers Figma ?
La sortie prévue est constituée de tokens de design et de code front-end. Les tokens s'importent facilement dans la plupart des outils de design, mais l'outil est conçu pour aboutir à un code fonctionnel.
Est-il légal de recréer l'UI de quelqu'un d'autre ?
Les patterns de mise en page et d'interaction ne sont pas protégés comme le sont les assets de marque. Ne réutilisez pas leur logo, illustrations, polices personnalisées, contenu ou code propriétaire — prenez la structure, apportez votre propre identité.
Gère-t-il le mode sombre ?
Oui, c'est prévu : les tokens sont extraits par thème afin que les composants recréés fonctionnent dans les deux modes plutôt que d'être codés en dur pour un seul.
Quand sera-t-il lancé ?
Aucune date publique pour l'instant. Créez un compte gratuit et les nouveaux outils /make apparaîtront dans l'application dès qu'ils seront disponibles.
Que dois-je utiliser en attendant ?
Le recréateur d'image de Rekreate pour les visuels et le recréateur de logo pour les assets de marque, ainsi qu'un outil dédié de capture d'écran en code pour le balisage.
Créez votre prochaine vidéo virale avec Rekreate
Trouvez une vidéo courte qui a fait ses preuves, recréez-la avec votre script, avatar et voix, et générez des scènes avec Seedance, Kling et Veo dans un seul espace de travail.
Commencer l'essai gratuit →