Qu'est-ce que Replit Design

Replit Design est l’endroit où vous façonnez l’apparence et le ressenti de votre logiciel. Vous décrivez ce que vous voulez, et Replit Design génère des maquettes interactives que vous pouvez explorer et affiner. Quand l’une d’elles est la bonne, elle devient une application fonctionnelle dans le même projet.

​

Repartir de zéro ou importer des designs existants

Démarrez sur Replit Design, ou sélectionnez Design sous le champ de création sur la page d’accueil de votre espace de travail. Quatre façons de démarrer :

• Prompt : décrivez ce que vous voulez et générez vos premières frames.
• Templates : partez d’une page d’atterrissage, d’une affiche, d’une publication sociale, d’un écran mobile ou d’un prototype préconstruit, puis remixez-le.
• Import : importez un design depuis Figma ou Claude, ou recréez un site à partir de son URL ou d’une capture d’écran.
• Design system : démarrez à partir d’un système enregistré pour que votre première frame soit déjà à l’image de votre marque.

​

Explorer les variantes

Élargissez le champ avant de vous engager. Chaque résultat atterrit sous forme de nouvelle frame, donc vous ne perdez jamais une direction.

• Suggestions : sélectionnez une frame et Replit Design propose quoi essayer ensuite, en un clic chacune.
• Un modèle différent : changez le modèle derrière Design et renvoyez le même brief pour une direction véritablement différente.

​

Affiner

Façonnez le gagnant comme cela vous semble naturel :

• Chat : briefez Agent avec vos propres mots, à propos de tout le tableau ou d’une frame à la fois.
• Visual Editor : cliquez sur n’importe quel élément et ajustez directement le texte, les couleurs, l’espacement et les images. Les modifications simples s’appliquent instantanément au code source, sans dépenser de crédits.
• Draw : entourez les problèmes, indiquez d’une flèche l’élément que vous visez, laissez une note autocollante. Agent lit vos annotations.
• Generate assets : créez les images, clips vidéo et graphiques vectoriels dont votre design a besoin, avec des références jointes pour qu’ils correspondent au style de votre projet.

​

Build

Quand une frame est la bonne, confiez-la à Agent. Un design, ici, n’est jamais qu’une simple image : c’est la spécification d’un véritable logiciel.

• Construisez votre design : transformez la frame en une nouvelle application fonctionnelle.
• Restyliser une application existante : appliquez l’apparence de la frame à une application que vous avez déjà.

​

Évoluer

Rendez le prochain design plus rapide que le précédent :

• Créer un système de design : extrayez vos couleurs, votre typographie, vos tokens et vos composants à partir d’un design que vous aimez, ou générez-en un à partir de zéro avec un prompt.
• Démarrer un nouveau travail à partir de lui : les nouveaux artefacts se génèrent à l’image de votre marque dès la première frame.
• Intégrer des applications existantes au système : reconstruisez le style des applications que vous avez déjà pour que tout corresponde.
• Changer de système : choisissez ou changez le système par projet.

À partir d’ici, le parcours revient à Démarrer, et désormais chaque design commence déjà à l’image de votre marque.

​

Quand démarrer dans Design plutôt que dans Build

Design et Build sont deux points d’entrée dans le même projet. Build est l’endroit où Agent fait fonctionner votre logiciel ; Design est l’endroit où vous façonnez son apparence. Rien de ce que vous concevez n’est isolé dans un outil de design.

• Démarrez dans Design quand l’apparence est la partie difficile : explorez d’abord les directions, puis construisez la gagnante.
• Démarrez dans Build quand le comportement est la partie difficile : faites-la fonctionner, puis restylisez-la dans Replit Design.

​

Étape suivante