Ouverture de la nouvelle "prompt-o-thèque"

⚡Des dizaines de prompts, classés par catégorie et prêts à l'emploi. 🔥 Trouvez le prompt parfait en 1 clic ! 🎯

Comment créer une (mini-)appli en 3 mn chrono sur Claude.AI sans rien y connaître ?

Créez vos apps avec Claude : notre guide pour générer des applications web interactives avec un simple prompt.
Créez vos apps avec Claude
Pas besoin de savoir coder. Pas besoin d'installer un IDE ou autre extension ou plugin. Un prompt de quelques lignes suffit. Découvrez comment créer facilement des applis avec Claude sans vous prendre la tête.

Partager la publication

Sommaire
    Add a header to begin generating the table of contents

    Etape 1 : s’inscrire et accéder à Claude

    Pour commencer, rendez-vous sur le site officiel de Claude.AI et connectez-vous ou inscrivez-vous en quelques clics. Que vous choisissiez la version gratuite ou payante, l’accès à la fonctionnalité Artifacts est simple et rapide. Une fois connecté, le panneau de navigation à gauche vous permettra d’accéder à toutes les options nécessaires.

    Etape 2 : créer un nouvel Artéfact pour une app

    Cliquez sur "Artéfacts" dans la barre latérale de gauche, puis sur "+ Nouvel Artefact" et choisissez "Applications et sites web". Cette fonctionnalité vous permet de lancer la création de votre application web, en quelques secondes, à partir d’un simple prompt.

    Etape 3 : insérer un prompt décrivant l'application

    La clé pour obtenir une mini app sur-mesure avec Claude, c’est de bien formuler votre demande. Soyez précis sur le design, les fonctionnalités et l’expérience utilisateur que vous souhaitez. Voici un exemple de prompt particulièrement efficace :

     

    Créez une mini-application web amusante et colorée en utilisant HTML, CSS et JavaScript. L'application doit permettre aux utilisateurs de saisir une tâche et de l'ajouter à une liste. Chaque tâche doit s'afficher sous la forme d'une note autocollante d'une couleur pastel aléatoire. Chaque note doit avoir un bouton "✅ Fait" pour la barrer et l'estomper, et un bouton "🗑️ Effacer" pour la supprimer avec une animation douce. Faites en sorte que l'application soit adaptée aux mobiles et utilisez des animations simples et propres. Conservez tout le code dans un seul fichier et ajoutez des commentaires pour expliquer ce que fait chaque segment. Ne montrez que le code, sans texte supplémentaire.

     

    N'oubliez pas dans vos futurs prompts des précisions sur la compatibilité mobile pour obtenir une application adaptée à tous les écrans.

    Etape 4 : laisser Claude générer votre appli

    Après avoir soumis votre prompt, Claude va générer en quelques secondes un code complet et bien structuré, généralement en HTML, CSS et JavaScript réunis dans un seul fichier. Vous verrez des commentaires clairs pour chaque section, facilitant la compréhension et la personnalisation du code.

    claude vibe coding 1
    Claude en train d'écrire le code

     

     

    claude vibe coding bis 1
    Claude a fini d'écrire l'application

    Etape 5 : tester, personnaliser et déployer votre application

    Testez directement votre application dans l’aperçu de Claude, ou copiez le code et collez-le dans un fichier HTML sur votre ordinateur. Vous pouvez ensuite l’intégrer sur votre site web, l’ajouter à votre portfolio, ou la partager avec d’autres. Pour aller plus loin, modifiez le code selon vos envies ou redemandez à Claude d’ajouter de nouvelles fonctionnalités.

    D'autres articles d'IA qui pourraient vous intéresser
    Retour en haut