Les artefacts de Claude peuvent désormais être partagés — 7 idées à essayer

L'impressionnante fonctionnalité Artefact de Claude vient de bénéficier d'une mise à niveau massive, devenant plus facile à partager avec d'autres utilisateurs et même avec des personnes sans compte Claude.

Les artefacts ont été introduits avec Claude 3.5 Sonnet, permettant aux utilisateurs d'interagir avec le code, les graphiques vectoriels et d'autres contenus créés par le chatbot. Chacun d'entre eux peut également être réutilisé pour améliorer un projet sans avoir à copier et coller l'intégralité du résultat dans un nouveau message.

Avec la dernière mise à jour d'Artifacts, Anthropic a enfin ajouté l'une des fonctionnalités les plus demandées, offrant aux utilisateurs la possibilité de partager un artefact.

Artifacts présente certaines limitations, notamment un accès limité aux modules et API tiers, ainsi qu'un nombre de mots assez restrictif, ce qui signifie qu'il existe une limite de code/fonctionnalité. Mais il s'agit toujours d'un développement passionnant avec lequel il vaut la peine de jouer.

Si vous souhaitez créer des applications Web entières à partir de rien d'autre qu'une invite de texte, je vous suggère de consulter Websim.

Que sont les artefacts de Claude ?

Une idée simple mais impressionnante : en substance, les artefacts sont des wrappers qui permettent à Claude d'offrir un morceau de code, un morceau de texte ou toute autre forme de contenu, y compris des graphiques vectoriels, d'une manière avec laquelle l'utilisateur peut jouer, partager ou enregistrer sans se perdre dans le maelström d'une conversation.

Le partage est la dernière nouveauté et ce qui est encore plus impressionnant que de pouvoir simplement partager l'artefact, c'est la fonction de remixage. Cela permet aux utilisateurs d'itérer et d'améliorer tout artefact créé par un autre utilisateur. Vous pouvez même l'utiliser pour améliorer un de vos propres artefacts.

C'est un concept tellement impressionnant que d'autres outils d'IA ont commencé à le copier, notamment Poe, l'agrégateur de chatbots IA soutenu par Quora, où vous pouvez désormais utiliser un concept similaire dans plusieurs modèles de langage.

Le mettre à l'épreuve

J'ai eu sept idées intéressantes à partager et j'ai peaufiné chacune d'entre elles à travers plusieurs invites pour obtenir un artefact fonctionnel et utilisable. C'était plus difficile que prévu au départ, car il a fallu plusieurs tentatives pour le faire fonctionner correctement.

J'ai également demandé à Claude de créer à chaque fois une invite résumant tout ce qui a été créé jusqu'au moment où j'ai cliqué sur Publier sur l'Artefact. Cela vous permet d'essayer chacun d'eux individuellement par vous-même à partir de zéro et non pas simplement en remixant l'Artefact.

Si vous choisissez de remixer, l'artefact sera partagé avec une nouvelle instance de Claude et des instructions seront incluses pour vous proposer trois façons de l'améliorer. Si vous souhaitez simplement utiliser chaque artefact, vous n'avez pas besoin d'un compte Claude.

1. Planificateur de budget personnel

En théorie, l'une des choses les plus simples à réaliser à l'aide d'un artefact est un simple planificateur de budget. Cependant, ce que j'ai découvert en mettant cela en place, c'est qu'il faut être très précis avec Claude quant à ce que vous voulez qu'il fasse.

Par exemple, si vous souhaitez qu'il puisse suivre différents types de dépenses, vous devez le préciser, car il n'y aura par défaut qu'une colonne de dépenses générales. Je pense que ce que j'ai mis au point est un outil simple et assez efficace.

Create a React component for a comprehensive Personal Budget Planner dashboard. The dashboard should include features for inputting and displaying income, expenses, and savings. Implement a tabbed interface with three main sections: an overview showing expense breakdown and budget summary with charts, an expenses management tab for adding and removing expense categories, and a history tab displaying budget trends over time. Include interactive elements like editable fields for income and expenses, and dynamic updates of savings and financial health indicators. Use charts (pie chart for expense breakdown, bar chart for budget summary, and line chart for historical data) to visualize the data. Incorporate a financial health indicator that changes based on the savings rate. Ensure the design is responsive and user-friendly, with clear labeling and intuitive controls. Use components from a UI library like shadcn/ui for consistent styling, and implement data visualization using a library like recharts. The component should update all calculations and visualizations in real-time as the user interacts with it.

Bien entendu, vous pouvez ajuster cela comme vous le souhaitez. Vous pouvez lui demander de supprimer certaines fonctionnalités, d'ajouter des catégories spécifiques ou simplement de le simplifier en deux colonnes et un bouton.

Pour effectuer des modifications, cliquez simplement sur Remixer et vous pourrez le modifier comme bon vous semble. Il vous suffit de dire à Claude ce que vous souhaitez modifier.

• Afficher ou remixer l'artefact du tableau de bord financier

2. Application Fitness Dashboard

Ensuite, un simple tracker de fitness personnel. À l'origine, j'allais essayer de créer une sorte de système de défi où vous pourriez saisir les temps ou les pas de différents utilisateurs à un jour donné, mais cela n'a pas fonctionné en raison des limitations d'un artefact.

Au lieu de cela, j'ai créé un tableau de bord de fitness personnel avec le nombre de pas et la fréquence cardiaque. J'ai atteint la limite de ce qui est possible dans une seule invite. Certains boutons ne fonctionnent donc pas, mais la fonctionnalité principale est là.

Develop a comprehensive Fitness Dashboard React component that helps users track and visualize their fitness progress. Include modules for tracking daily step count, workout duration, calorie burn, and water intake. Implement a weight tracker with a graph showing trends over time. Add a workout log feature where users can record different types of exercises (e.g., cardio, strength training, flexibility) with duration and intensity. Create a meal planner and calorie counter, allowing users to log their daily food intake. Include a goal-setting feature for various fitness metrics (e.g., target weight, daily step goal, workout frequency). Implement a sleep tracker that records duration and quality of sleep. Add a motivational feature that provides daily fitness tips or challenges. Create an analytics section that shows weekly and monthly progress summaries. Design an intuitive and visually appealing UI with charts and graphs to display data. Implement a simple user profile system to personalize the dashboard. Optimize the code for efficiency and compactness while maintaining readability. Ensure the component works within the Artifact constraints, using only React and basic UI components without external libraries. Include helpful comments explaining key aspects of the code for easy understanding and modification.

Bien qu'il n'y ait pas beaucoup de possibilités d'améliorer ou de renforcer spécifiquement ce qui existe déjà, vous pouvez faire en sorte qu'il échange différentes fonctionnalités après avoir cliqué sur Remixer.

Par exemple, vous pouvez décider qu'au lieu de suivre les pas, vous souhaitez suivre les longueurs dans la piscine ou les répétitions. Demandez simplement à Claude d'effectuer ces modifications, puis de mettre à jour l'artefact. Si vous trouvez quelque chose de convaincant, j'adorerais le voir.

• Afficher ou remixer l'artefact Fitness Tracker

3. Application de roulette de recettes

Maintenant que nous savons où va tout notre argent et que nous avons une idée de la quantité d'exercice que nous faisons, il est temps de s'occuper de la nourriture. Dans ce cas, j'ai dû faire preuve d'une grande créativité pour pouvoir intégrer plus de quelques recettes dans l'Artefact.

J'ai demandé à Claude de ne pas rendre le code joli ou lisible par l'homme, ce qui signifie qu'il a pu inclure plus de code dans un fichier plus petit. En conséquence, nous avons un artefact qui peut fournir une douzaine de recettes différentes disponibles en appuyant sur un bouton.

Create an interactive Recipe Roulette React component that allows users to discover random recipes. Include at least 10 diverse recipes from different cuisines, each with a name, origin, cooking time, ingredients list, and step-by-step instructions. Use a compressed data structure to store recipe information efficiently. Implement a function to display a random recipe when requested. Add features for users to customize the recipe, such as adjusting serving sizes or ingredient quantities. Include a simple rating system for recipes. Make the UI attractive and user-friendly, with a clean layout and appealing color scheme. Optimize the code for compactness while maintaining readability. Ensure the component works within the constraints of an Artifact, using only React and basic UI components without external libraries. Add comments explaining key parts of the code for easy understanding and modification.

Claude, comme la plupart des grands modèles de langage, est exceptionnellement doué pour les recettes. Si vous ne voulez pas d'une application de roulette de recettes générale comme celle que j'ai créée ici, vous pouvez demander à Claude d'échanger les recettes et d'y ajouter des boissons ou des sauces, voire d'en faire une application d'activités. Vous pourriez même lui demander de proposer une douzaine d'activités aléatoires au lieu de nourriture ou de boisson.

• Afficher ou remixer l'artefact de recette aléatoire

4. Animateur de pixels

Il est temps de s'amuser un peu — celui-ci m'a pris par surprise car je ne pensais pas qu'il fonctionnerait aussi bien. L'idée est de créer un outil d'animation simple.

Il s'agit d'un animateur stop-motion glorifié. Ajoutez une nouvelle image et un ou deux nouveaux pixels sur 20 à 30 images et vous obtenez quelques secondes de mouvement.

Je pensais que ça marcherait, mais que ce serait bancal. Cependant, c'est nettement mieux que ce à quoi je m'attendais. C'est un simple outil d'animation de pixels.

Design an interactive Pixel Storyteller React component that allows users to create simple pixel art animations. Implement a grid-based canvas (at least 16x16) where users can paint pixels with a selection of colors (minimum 8 colors). Include tools for drawing, erasing, and filling areas. Add functionality to create multiple frames for animation, with options to add, delete, and reorder frames. Implement a preview mode that plays the animation in a loop. Include features like copy/paste of frame content, mirror/flip tools, and basic shape drawing (line, rectangle, circle). Create a simple UI for selecting colors, tools, and managing frames. Add the ability to adjust animation speed. Implement a basic save/load feature using compressed string representations of the pixel art and animation data. Optimize the code for efficiency and compactness while maintaining readability. Ensure the component works within the constraints of an Artifact, using only React and basic UI components without external libraries. Add helpful comments to explain key parts of the code for easy understanding and modification by others.

Je ne sais pas exactement comment vous pourriez améliorer ce modèle, mais vous pourriez demander une gamme de couleurs plus large. Vous pourriez même lui demander de créer des tampons ou des formes que vous pourriez déposer sur le tableau. D'autres options incluent différentes tailles de toile ou le réglage des images par seconde pour l'animation finale. Les options d'enregistrement ne fonctionneront pas dans un artefact.

• Vue ou remjex l'Artefact d'Animation Pixel

5. Un moment de calme

Maintenant que nous sommes en bonne santé, que nous avons mangé et joué un peu, il est temps de se détendre. Cet outil est un outil de respiration simple. Inspirez, expirez, sentez-vous mieux. Il ne fait pas grand-chose de plus et c'est une interface très simple et apaisante.

Même si ce n'était pas très apaisant la première fois que j'ai demandé à Claude de le créer, j'ai dû le pousser à être plus imaginatif et à décrire l'interface utilisateur que je recherchais.

Develop a Mindful Moments React component for guided breathing and relaxation exercises. Include multiple breathing patterns (e.g., 4-7-8, box breathing, equal breathing) that users can choose from. Implement a visually appealing animated guide for each breathing exercise, using SVG or CSS animations. Add a timer feature allowing users to set custom durations for their sessions. Include background ambient sounds or calming music that users can toggle on/off. Implement a simple mood tracker that allows users to record their mood before and after each session. Add a daily streak counter to encourage regular use. Create a clean, minimalist UI with a soothing color scheme that adjusts based on the time of day. Include a simple statistics view showing usage patterns and mood changes over time. Optimize the code for efficiency and compactness while maintaining readability. Ensure the component works within the Artifact constraints, using only React and basic UI components without external libraries. Add helpful comments explaining key aspects of the code for easy understanding and modification.

Il y a beaucoup de choses que vous pourriez faire pour améliorer celle-ci, car c'est une application incroyablement simple.

Par exemple, vous pouvez ajouter différentes techniques de visualisation à l'aide d'animations ou de graphiques vectoriels. Vous pouvez demander à Claude de créer une gamme plus large de longueurs et de durées et même d'afficher des messages positifs pendant que vous effectuez le processus d'inspiration et d'expiration.

N'oubliez pas cependant que vous ne pouvez pas utiliser le son ou d'autres fonctionnalités de ce type dans un artefact en raison des limitations de l'écosystème.

• Voir ou remixer l'artefact de respiration

6. Simulateur de jardin zen

Pour rester dans la détente, faisons un jardin zen. C'est un simple simulateur de jardin zen traditionnel dans lequel vous créez quelque chose de vraiment beau et complexe, puis vous balayez le tout. Cela fonctionne, ce n'est pas parfait. Il y a probablement beaucoup de choses que vous pourriez faire pour l'améliorer si vous étiez plus fan des jardins zen que moi.

Create an interactive Zen Garden Designer React component that allows users to design their own digital zen garden. Implement a grid-based layout (at least 16x16) where users can place various elements such as rocks, plants, lanterns, and sand patterns. Include at least 6 different elements with distinct visual representations using SVG. Add functionality to rotate and scale placed elements. Implement a sand raking tool that allows users to create different patterns in the sand (e.g., straight lines, circles, wavy patterns). Include an undo/redo feature for design actions. Add a simple save/load system using compressed string representations of the garden layout. Create an aesthetically pleasing UI with a soothing color palette and smooth interactions. Implement a day/night cycle feature that changes the garden's appearance. Add ambient sound options (e.g., water, wind chimes) that users can toggle. Optimize the code for efficiency and compactness while ensuring readability. Ensure the component works within the Artifact constraints, using only React and basic UI components without external libraries. Include helpful comments explaining key parts of the code.

Une idée d'amélioration potentielle consiste à améliorer l'effet de ratissage, en faisant en sorte que vous deviez glisser manuellement sur le plateau de jeu pour supprimer les objets que vous avez créés ou ajouter des motifs supplémentaires dans le processus de ratissage. Cependant, pour ce faire, vous devrez probablement supprimer certaines des autres fonctionnalités, car vous vous retrouverez confronté à cette limite de messages.

• Voir ou remixer l'artefact du jardin zen

7. Cartes mémo de langue

Enfin, maintenant que vous êtes dans un état Zen, apprenons une nouvelle langue.

En fait, pas vraiment. Vous n'apprendrez pas grand-chose de plus que quelques phrases de base que vous pourriez utiliser dans un café. Mais j'ai étudié le français pendant cinq ans à l'école et c'est à peu près tout ce dont je me souviens.

Celui-ci vous proposera une série de flashcards simples avec des mots-clés dans cinq langues différentes. Et vous pourrez passer de l'une à l'autre.

Create an interactive Language Learning Flashcards React component. Include support for at least 5 languages (e.g., English, Spanish, French, German, Italian) with the ability to easily add more. Implement a flashcard system with front (question) and back (answer) sides, allowing users to flip cards with a smooth animation. Include categories for vocabulary (e.g., greetings, food, travel, business) and difficulty levels (beginner, intermediate, advanced). Add a spaced repetition algorithm to optimize learning (e.g., a simplified version of the SuperMemo-2 algorithm). Implement a study mode where users can rate their familiarity with each card, affecting its future appearance frequency. Add a quiz mode that randomly tests users on their learned vocabulary. Include a progress tracking feature showing mastery levels for different categories and overall language proficiency. Create an intuitive UI with easy navigation between languages, categories, and modes. Implement a simple system for users to add custom flashcards. Optimize the code for efficiency and compactness while maintaining readability. Ensure the component works within the Artifact constraints, using only React and basic UI components without external libraries. Add helpful comments explaining key parts of the code for easy understanding and modification.

Cela pourrait être vraiment amusant à améliorer. Tout ce que je ferais, c'est de choisir une seule langue plutôt que cinq et de lui demander d'aller plus en détail.

Vous pourriez même le transformer de flashcards en une conversation où vous pouvez lui parler. Mais pour être honnête, si c'est comme ça que vous voulez utiliser l'IA, je parlerais simplement à Claude parce que c'est un excellent causeur et qu'il peut le faire dans plusieurs langues.

• Voir ou remixer l'artefact de la carte de langue

Dernières pensées

Les artefacts sont une nouvelle fonctionnalité puissante, mais ils présentent des limites évidentes. La plus importante est la limite des messages, où vous devez pouvoir obtenir l'intégralité du contenu du code de l'artefact dans une seule invite.

La limite de caractères des messages est définitivement quelque chose sur laquelle Anthropic doit travailler s'il veut qu'ils deviennent un outil utile et utilisable en dehors de Claude.

Si vous avez apprécié l'un de ces artefacts, n'hésitez pas à les remixer, à les modifier ou même à en créer de nouveaux et à les partager. Identifiez-moi si vous les publiez sur X ou envoyez-moi un e-mail, j'adorerais les découvrir.