Les services basés sur l'IA améliorent continuellement leurs capacités chaque jour. C'est comme voyager dans un train à grande vitesse. Vous avez à peine le temps d'assimiler une innovation qu'une autre surgit déjà. Claude a lancé Artifacts, une nouvelle fonctionnalité puissante qui transforme les conversations en espaces de travail persistants et dynamiques.

Les Artifacts vous permettent de transformer une idée en quelque chose de concret. Vous pouvez créer une mini application, un outil personnalisé ou un contenu en décrivant simplement ce dont vous avez besoin. Claude le construit dans une fenêtre séparée en dehors du chat principal. Cela facilite la manipulation, l'ajustement, le développement ou la reprise ultérieure sans avoir à fouiller dans d'anciens messages. C'est comme avoir un espace de travail dynamique à côté de votre conversation.

Ce tutoriel vous apprend donc à utiliser les artifacts de Claude. Nous vous montrerons comment y accéder dans Claude, rédiger des prompts astucieux pour créer une mascotte de chien en 8-bit avec une page d'accueil et un petit jeu 2D. Nous vous montrerons également comment télécharger le code et accéder à l'application, ou à une version en page HTML unique, directement dans l'application artifacts.

À la fin de ce tutoriel, vous serez capable de :

• Activer la fonctionnalité artifacts
• Créer un site d'une seule page
• Créer un jeu propulsé par l'IA en moins de 2 minutes
• Publier votre projet ou télécharger le code

Commençons sans plus attendre !

Étape 1 - Activer la fonctionnalité artifacts

Claude a rendu Artifacts accessible à tous les utilisateurs. Vous pouvez y accéder avec un compte gratuit. Accédez à Claude et connectez-vous à votre compte.

Cliquez sur l'icône des paramètres de votre compte dans le coin inférieur gauche de la page et cliquez sur 'settings.'

Activez la fonctionnalité artifacts dans la section 'Feature Preview.'

Retournez à la page de discussion et cliquez sur 'artifacts' dans la barre de navigation latérale à gauche.

Claude Artifacts propose des projets inspirants comme point de départ. Vous pouvez parcourir les projets créés par d'autres utilisateurs. Cliquez sur n'importe quel projet pour afficher la conversation complète. Vous pouvez développer votre propre création en enrichissant cette conversation !

Étape 2 - Créer une page d'atterrissage

Vous pouvez créer des artifacts qui vont au-delà du contenu statique en y ajoutant des capacités d'IA. Ils deviennent alors des applications interactives permettant aux utilisateurs d'interagir directement avec Claude via une interface textuelle simple. Les utilisateurs peuvent poser des questions, obtenir des idées créatives, recevoir du coaching personnalisé, jouer à des jeux ou résoudre des problèmes en fonction de leurs besoins. Aucune clé API ou configuration n'est nécessaire, et le partage est entièrement gratuit. Une fois votre artifact mis en ligne, n'importe qui peut l'utiliser instantanément, qu'il s'agisse de quelques personnes ou de milliers d'utilisateurs.

Pour créer votre propre page d'atterrissage, une application ou un projet alimenté par l'IA, cliquez sur 'New artifact'.

Sélectionnez une catégorie pour votre premier projet Artifact. Nous allons créer une page d'accueil avec une mascotte. Nous choisirons donc "Apps and Websites".

Il vous demandera d'expliquer votre application ou site web. Écrivons notre premier prompt.

Prompt:

Crée une mascotte de chien en style 8-bit avec un look audacieux et ludique. Fais le perroquet principalement orange et convertis le design final en format SVG propre et adaptable.

On dirait que ce chien a été aplati par une voiture. Quoi qu'il en soit, créons une page d'accueil avec ce chien comme mascotte.

Prompt:

Crée une page d'accueil HTML simple pour un café avec ce chien comme mascotte.

La page d'atterrissage est magnifique. Cliquez sur l'icône du menu hamburger en haut à gauche du panneau de résultats. Ici, vous pouvez accéder au contrôle de la conversation et aux versions précédentes de l'application ou de la page HTML dans les artifacts.

Passons maintenant à la création d'un jeu avec les artifacts de Claude.

Étape 3 - Créer un jeu propulsé par l'IA en moins de 2 minutes

Pour créer un jeu propulsé par l'IA, vous avez besoin d'un prompt très détaillé. Artifacts est comme votre développeur d'applications personnel. Donnez des instructions précises, et il créera un jeu qui pourrait bien devenir le prochain grand succès.

Cliquez sur 'new artifact' pour ce projet. Sélectionnez 'Games' sur l'écran suivant.

Utilisez le prompt suivant pour vous inspirer. Vous pouvez modifier ce prompt selon les besoins de votre projet.

Prompt:

Create a first-person duck shooting game using HTML5 Canvas and JavaScript. The game should feature:

• Une perspective à la première personne montrant uniquement un fusil de chasse au bas de l'écran
• Des canards nageant à travers un étang en arrière-plan
• Mécanisme de tir par clic avec un curseur en forme de viseur
• Suivi du score et détection des impacts
• Modèles de mouvement réalistes des canards (nageant de gauche à droite à des vitesses variables)
• Effets sonores pour les tirs et les impacts sur les canards (utilisation de l'API Web Audio)
• Plusieurs niveaux de difficulté avec augmentation de la vitesse des canards
• Compteur de munitions avec mécanisme de rechargement
• Magnifique paysage d'étang avec effets d'eau animés
• Effets de particules pour les tirs réussis
• Conditions de fin de partie et fonctionnalité de redémarrage

Faites apparaître les canards de manière aléatoire depuis l'un ou l'autre côté de l'écran, qu'ils nagent à différentes profondeurs et plongent occasionnellement sous l'eau pour rendre le jeu plus stimulant. Incluez des animations fluides et donnez-lui l'ambiance d'un jeu d'arcade classique de chasse aux canards. Utilisez les technologies web modernes pour créer une expérience de jeu captivante et réactive.

‍

C'est un jeu incroyable. Ce jeu rétro peut offrir des heures de plaisir à n'importe qui. Vous pouvez fournir des prompts supplémentaires pour le rendre encore plus attrayant.

Étape 4 - Publiez votre projet ou téléchargez le code

Pour publier votre application/jeu ou la page d'accueil, cliquez sur le bouton 'Publish' en haut de l'écran d'aperçu des artefacts.

‍

Passez en revue les règles et cliquez sur 'Publish and copy link'.

Si vous ne souhaitez pas le publier sur Claude, vous pouvez copier le code ou le télécharger au format HTML.

C'est tout pour ce tutoriel. N'oubliez pas d'inclure des détails spécifiques sur une application ou un jeu dans vos prompts. Plus vous ajouterez d'informations, plus le résultat sera précis et complet.