Open Design : Pourquoi 40k développeurs ont abandonné Claude Design
BBetter Stack
컴퓨터/소프트웨어창업/스타트업AI/미래기술
Transcript
00:00:00Voici OpenDesign, une alternative open source à Claude Design qui vous permet d'utiliser n'importe quel agent
00:00:05ou modèle que vous avez déjà installé pour générer des prototypes web complets, des applications mobiles et même des diapositives
00:00:11en HTML. Avec 72 systèmes de design de qualité professionnelle intégrés, chaque projet reste sur votre machine,
00:00:17donc rien n'est envoyé dans le cloud. Mais nous savons déjà que Claude Opus 4.7 est vraiment doué pour le design
00:00:23front-end, il n'est donc pas logique de permettre à l'utilisateur de choisir n'importe quel modèle, car la plupart
00:00:27d'entre eux pourraient être vraiment mauvais en design, abonnez-vous et découvrons-le.
00:00:33Claude Design d'Anthropic est sorti le mois dernier et a connu un succès immédiat. Il a donné aux gens
00:00:38la possibilité de créer des designs vraiment esthétiques à l'aide d'un modèle impressionnant, il a offert aux gens une
00:00:43alternative à Lovable, v0 et des outils similaires. Mais c'est un outil propriétaire uniquement dans le cloud, limité à un
00:00:49seul modèle, et qui vous coûtera 20 $ par mois, ce qui signifie en gros qu'il n'est pas pour tout le monde.
00:00:54Alors, 11 jours plus tard, Tom et l'équipe Nexa ont sorti une alternative open source qui a été très populaire.
00:01:00Cela me rappelle un peu OpenCode venant de Claude Code, et maintenant OpenDesign vient de Claude
00:01:05Design. Quelle est la prochaine chose qu'Anthropic va créer et à laquelle quelqu'un va ajouter “open” devant ?
00:01:09Mais comment cet outil open source peut-il créer des designs aussi bons que Claude Design ? Eh bien,
00:01:14c'est parce que deux choses fonctionnent ensemble. La première, ce sont les systèmes de design. OpenDesign en contient beaucoup
00:01:18avec des spécifications de marque complètes, typographie, espacement et jetons de couleur inspirés de marques comme Linear,
00:01:24Stripe et Spotify. La seconde, ce sont les compétences. Beaucoup, beaucoup de compétences pour chaque type de sortie. Ainsi, une compétence
00:01:30de tableau de bord sait comment disposer les graphiques, et une compétence de présentation sait comment structurer des diapositives. Il y a même une liste de contrôle
00:01:35anti-IA intégrée dans chaque invite, et avant de générer quoi que ce soit, il vous interroge sur votre public,
00:01:41le ton et le contenu de la marque. Si vous avez regardé ma vidéo sur Impeccable, cela vous semblera très familier,
00:01:45mais c'est différent, et nous aborderons les différences plus tard dans la vidéo. Mais pour l'instant,
00:01:49passons à une démonstration simple. Donc, pour commencer, vous pouvez soit télécharger OpenDesign pour macOS ou
00:01:54Windows, cloner le dépôt et l'installer à l'aide de Docker, ou l'exécuter à partir de la source, ce que j'ai décidé
00:01:59de faire. Donc, avec le projet en cours d'exécution, je peux visiter ce port dans mon navigateur, ce qui m'amène à cette interface utilisateur,
00:02:04qui semble assez intimidante pour quelqu'un qui n'est pas habitué à Claude Design, mais passons-la en revue.
00:02:08Donc, si je clique ici, vous pouvez voir qu'il a détecté les harnais d'agents que j'ai déjà installés,
00:02:13donc Claude Code, Codex et OpenCode. Et si je clique sur Claude Code et que je fais défiler vers le bas,
00:02:17nous pouvons choisir le modèle. Par défaut, il choisira celui qui est sélectionné dans l'interface de ligne de commande, mais je peux en choisir
00:02:21un ici. Je peux aussi faire la même chose avec Codex, mais Codex me permet de changer l'effort de raisonnement,
00:02:26ce qui est une touche agréable. Mais je vais choisir OpenCode. Je vais faire défiler vers le bas et changer le
00:02:31modèle pour GLM 5.1. Maintenant, ici aussi, je pourrais choisir la mémoire, c'est-à-dire les instructions qui seront ajoutées
00:02:36à chaque invite, les fournisseurs de médias, et par défaut, il a détecté ma clé OpenAI, et il va utiliser
00:02:41GPT Image 2 pour générer des images. Mais je pourrais aussi connecter ma clé API ElevenLabs pour faire des choses comme
00:02:46la synthèse vocale ou différents effets sonores pour les animations que vous pourriez avoir sur votre site web. Ensuite
00:02:50ici, je pourrais voir toutes les compétences disponibles. Je peux voir tous les systèmes de design,
00:02:54que nous passerons en revue un peu plus tard. Et je peux même choisir un animal de compagnie, ce qui est quelque chose que fait Codex.
00:02:58En gros, nous avons beaucoup d'options ici, mais je vais fermer cela et commencer à concevoir. Donc, je
00:03:03vais donner un nom à mon projet, puis choisir un système de design. Maintenant, si vous n'avez aucune idée de ce que sont ces
00:03:08systèmes de design, vous pouvez cliquer sur l'onglet système de design pour les voir tous, et il y en a
00:03:13beaucoup. Mais je les ai parcourus avant d'enregistrer la vidéo, et je pense que j'aime celui de Miro, qui ressemble
00:03:17à ceci et donne des détails sur les jetons de design, ainsi que des informations dans le fichier MD de design.
00:03:22Notez que je suis dans l'onglet prototype, mais il y a aussi des artefacts en direct pour les choses que vous voulez mettre à jour
00:03:27en fonction de l'évolution des données, un diaporama pour générer des diapositives HTML, ou pour construire à partir d'un modèle.
00:03:33Donc, je pourrais cliquer sur l'onglet modèles ici et choisir un modèle que je veux. Maintenant, nous allons juste rester
00:03:38avec prototype et cliquer sur créer. Maintenant, à partir d'ici, nous sommes redirigés vers une autre page où nous pouvons lui donner
00:03:42une invite. Maintenant, je vais essayer quelque chose d'un peu unique ici. Donc, en ce moment, j'ai mon application
00:03:47de recherche de chaîne YouTube en cours d'exécution, et je voulais créer une version beaucoup plus esthétique de celle-ci. Donc, ce que je vais
00:03:52faire, c'est lui donner cette URL et voir si GLM est capable de rechercher à travers les onglets et les
00:03:57entrées et d'utiliser cela pour son design. Donc, ici, je lui ai donné une consigne pour me faire un site web simple et bien conçu
00:04:02pour un produit que je peux utiliser pour rechercher des chaînes YouTube. Je lui ai aussi donné le lien du
00:04:07site web pour qu'il le visite en utilisant le navigateur de l'agent ou l'outil qu'il juge approprié. Et de cette façon, il peut
00:04:12voir les entrées et parcourir toutes les pages. Alors voyons ce qu'il fait. Donc, maintenant il m'a posé quelques
00:04:15questions sur le ton visuel, le contexte de la marque et quelques autres choses, auxquelles je vais répondre.
00:04:20Et ensuite, nous continuerons avec le processus de design et regardez ça. Il a été capable d'exécuter une commande curl
00:04:24pour ouvrir le site en utilisant Chrome. Et maintenant, il utilise le navigateur de l'agent pour se connecter au site. Donc, je n'ai
00:04:29ouvert rien de tout cela ou visité l'URL et il parcourt le site dans le navigateur. Nous pouvons voir quelques
00:04:34commandes supplémentaires du navigateur de l'agent pour comprendre comment cela fonctionne. D'accord. Donc, à ce stade, il continue encore.
00:04:38Il n'a pas tout à fait fini. Il a encore quelques petites choses à faire, mais j'aime la direction que prennent les choses.
00:04:43J'aime la page de recherche qu'il a faite avec les filtres avancés ici, et je peux basculer
00:04:48entre les titres de vidéos et le nom de la chaîne pour la recherche. Nous avons les résultats de recherche, qui semblent
00:04:52très impressionnants et il utilise des données du site web réel. Donc, je ne sais pas ce qu'il a fait,
00:04:57s'il a récupéré et enregistré cela quelque part, mais ce sont des données réelles en dehors des miniatures manquantes. Nous avons aussi
00:05:01la page des favoris. Donc, si j'ajoute une personne en favori ici, c'est là qu'elle ira et je peux générer
00:05:06un e-mail pour les contacter ou les supprimer. Et il y a aussi une page cachée ici. Donc, par exemple,
00:05:11si j'appuyais sur X, alors une personne se retrouverait sur cette page. Et on dirait qu'après environ 20 minutes. Oui.
00:05:17GLM 5.1 n'est pas le modèle le plus rapide. Tout est terminé. Et donc voici ce qu'il m'a dit.
00:05:23Il m'a donné les cinq fichiers qu'il a créés. Et je pense qu'il a tout exporté dans un emplacement
00:05:28temporaire. Donc, ce que je peux faire maintenant, c'est lui donner une autre consigne. Donc, si je voulais ajouter un mode sombre,
00:05:33je pourrais le faire, mais je pourrais aussi cliquer sur finaliser le package de design, ce qui synthétisera
00:05:37tout dans un seul fichier MD de design. Donc, la transcription, le système de design et tous les artefacts
00:05:42qui ont été générés, essentiellement ces cinq pages. Je peux aussi cliquer sur partager pour exporter dans différents formats.
00:05:48Et je peux même exporter un HTML autonome et le donner à Claude Code pour l'implémenter dans mon projet réel
00:05:53et même le déployer sur Vercel ou Cloudflare Pages, ce qui est une très belle touche.
00:05:57Donc, c'est un aperçu rapide d'OpenDesign. Est-ce que ça vaut la peine de l'utiliser ? Eh bien, si vous avez déjà un agent
00:06:02de codage installé et que vous payez pour un abonnement à Anthropic, alors c'est une évidence
00:06:07à essayer. La combinaison de systèmes de design et de compétences signifie qu'il peut réellement produire quelque chose
00:06:12d'assez décent, peu importe le harnais ou le modèle. Mais comment cela se compare-t-il à quelque chose comme Impeccable ?
00:06:16Eh bien, personnellement, je préfère la façon dont Impeccable fait sa planification. Il vous demande tout à l'avance
00:06:22et conçoit différentes maquettes en utilisant un modèle d'image, à partir duquel vous pouvez choisir et itérer.
00:06:27Donc, vous pouvez pratiquement n'avoir aucune idée de ce à quoi vous voulez que le design ressemble au début,
00:06:32mais finir avec quelque chose d'assez décent. Tandis qu'avec OpenDesign, vous devez en quelque sorte
00:06:37en savoir un peu sur le design avant de commencer. Je veux dire, il vous demande quel système de design vous voulez avant
00:06:42que vous commenciez et je sais que le modèle peut en générer un, mais le fait qu'il vous le demande signifie qu'il est destiné
00:06:48à quelqu'un qui en sait un peu plus sur le design. Mais je dois admettre, OpenDesign a une excellente interface utilisateur,
00:06:53vous donnant la possibilité de voir des vues réactives, d'exporter où vous voulez, d'ajouter des compétences, des outils MCP,
00:06:58et même des animaux de compagnie, ce qui est agréable pour quelqu'un qui a l'habitude d'utiliser l'interface Codex ou l'application de bureau Claude.
00:07:04Et il a fait un excellent travail en concevant une application en utilisant GLM 5.1, qui n'est pas le meilleur modèle de conception
00:07:10disponible. Donc, si je voulais concevoir quelque chose relativement rapidement et que j'avais un peu une idée
00:07:15de la direction que je voulais prendre, alors j'essaierais certainement OpenDesign. Mais si cela ne vous dérange pas
00:07:19de dépenser un peu d'argent, Claude Design est assez bon. Je veux dire,
00:07:22regardez ce qu'il a été capable de faire avec exactement la même consigne.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video