Un NOUVEAU repo open source vient de cloner le design de Claude
CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Un deuxième clone de v0 vient de sortir sur GitHub. Oui, c'est exact,
00:00:06nous avons encore un autre clone de v0, sauf que cette fois,
00:00:13il dispose d'une véritable interface graphique. Plus tôt cette semaine,
00:00:20j'ai publié une vidéo sur hu-washu-design, le premier clone de v0 sur le marché.
00:00:24Il fonctionnait très bien, rivalisant avec le format standard de v0,
00:00:30sans les problèmes d'utilisation habituels. Mais l'un de ses soucis,
00:00:36c'est qu'il ne tournait que dans le terminal, sans interface graphique,
00:00:43contrairement à ce nouvel outil open source qui imite presque parfaitement v0.
00:00:48Regardez ces deux outils : voici Open Design, dont nous parlons aujourd'hui,
00:00:54et voici v0. C'est extrêmement similaire. Ce qui est génial avec Open Design,
00:00:59c'est qu'il est basé sur hu-washu-design. Et comme vous l'avez vu,
00:01:06hu-washu est excellent : nous avons obtenu de superbes designs front-end.
00:01:11Ici, on ajoute simplement une couche graphique pour faciliter l'interaction,
00:01:16ce qui apporte la finition que l'on appréciait initialement chez v0.
00:01:22Mieux encore, Open Design est compatible avec n'importe quel outil de code.
00:01:28Pas seulement Claude : on peut utiliser Gemini, Codex, et sans les limites
00:01:34imposées par v0. Aujourd'hui, nous allons explorer Open Design.
00:01:39Je vais vous montrer comment il fonctionne, comment l'installer,
00:01:43ce qui est vraiment utile et ce qui l'est moins, puis nous le comparerons à v0.
00:01:49Spoiler : c'est solide. Je suis ravi de voir ces alternatives apparaître,
00:01:53car j'adore v0, mais ses restrictions d'usage sont insupportables.
00:02:00Plus ces outils sortiront, plus vite Anthropic sera forcé de réagir.
00:02:05Open Design est donc l'alternative open source à v0.
00:02:12On peut le connecter à Claude Code, Codex, ou utiliser sa propre clé API.
00:02:16Il détecte automatiquement les agents de codage sur votre ordinateur.
00:02:24Il intègre déjà 31 compétences et 72 systèmes de design de haut niveau.
00:02:28Quand je disais qu'il reposait sur hu-washu, je ne plaisantais pas,
00:02:34ils le revendiquent. C'est un mélange de hu-washu, de PowerPoint skill,
00:02:40d'Open Code Design et de Multica. En résumé, c'est hu-washu avec une interface.
00:02:45Le dépôt détaille le fonctionnement interne avec des exemples et démos.
00:02:49Retenez que c'est ce qui se rapproche le plus d'un v0 open source.
00:02:53Avant l'installation, un mot rapide de notre sponsor d'aujourd'hui : moi.
00:02:58Je viens de sortir ma Masterclass Claude Code. C'est le meilleur moyen
00:03:04de devenir un développeur IA, même sans bagage technique.
00:03:09Je la mets à jour chaque semaine avec des cas d'usage réels pour votre business.
00:03:14Le lien est en commentaire épinglé dans Chase AI+. On se retrouve là-bas.
00:03:18Pour l'installation, deux options : soit via le terminal sur leur dépôt GitHub,
00:03:23soit via le lien que je mettrai en description. Vous le copiez
00:03:28dans Claude Code ou Codex et vous dites : "Installe ceci dans un nouveau dossier".
00:03:32Une fois installé, il devrait vous donner un lien vers le serveur local.
00:03:36Sinon, demandez à Claude Code de lancer le serveur de dev pour Open Design.
00:03:42Vous verrez une page comme celle-ci. Une fenêtre surgissante vous demandera
00:03:46si vous voulez utiliser le CLI local ou l'API d'Anthropic.
00:03:51Choisissez le CLI local. Cela utilisera Claude Code ou Codex,
00:03:56ce qui vous évite de payer des frais d'API. Tout passe par vos comptes existants.
00:04:01Pour le modèle, laissez par défaut sur la config CLI. Ensuite,
00:04:06nous pouvons ajouter des fournisseurs de médias. Car, comme vous le voyez,
00:04:13je peux créer des prototypes, des présentations, mais aussi des images et vidéos.
00:04:18Pour générer de la vidéo ou des images depuis l'interface, il faut une clé API
00:04:24pour un modèle dédié, comme MiniMax, OpenAI ou ElevenLabs.
00:04:30C'est très utile, et c'est quelque chose qu'on ne trouve pas dans v0.
00:04:36En haut, nous avons les designs, exemples, systèmes de design et modèles.
00:04:40Qu'est-ce que ces systèmes de design ? C'est comme awesomedesigns.md.
00:04:46Ils ont analysé des sites comme Airbnb pour en extraire la structure :
00:04:52palette, typographie, composants, thèmes visuels et atmosphère.
00:04:58L'idée est que si je veux un site au style similaire à Airbnb,
00:05:06je peux utiliser ce prompt. Les résultats varient, mais l'intention est là.
00:05:13La section "Design Systems" est intéressante, mais à voir en pratique.
00:05:18Les modèles d'images sont similaires : des exemples avec des prompts JSON.
00:05:23Pour moi, c'est un peu gadget, tout comme les modèles vidéo.
00:05:29C'est joli, mais vous n'en tirerez probablement pas beaucoup de valeur.
00:05:35Les exemples sont sympas, mais comprenez bien que ce sont juste
00:05:42les résultats obtenus avec un prompt d'une seule ligne.
00:05:47Il n'y a pas de magie complexe en arrière-plan. Voici le prompt exact :
00:05:53"Design Mutuals, un site de rencontre pour utilisateurs de X,"
00:06:00"avec tableau de bord, stats et flux communautaire". Ne soyez pas
00:06:07trop impressionnés par les exemples. C'est juste du "one-line prompt".
00:06:12Concentrons-nous sur l'essentiel : créer des prototypes et des présentations,
00:06:16le genre de livrables classiques que l'on attend de v0.
00:06:22Le fonctionnement est identique. Vous nommez la démo, choisissez un style
00:06:28parmi la liste intégrée, et décidez si vous voulez un fil de fer
00:06:32ou de la haute fidélité. On peut même importer un fichier ZIP de v0.
00:06:37Si vous avez créé un système dans v0, vous pouvez l'importer ici
00:06:44sous forme de ZIP. Je veux vous montrer cet exemple rapidement.
00:06:51J'ai demandé à Open Design de créer la même chose que dans ma vidéo hu-washu :
00:06:57une page d'accueil pour un faux SaaS nommé Lighthouse, destiné aux
00:07:03petites équipes. J'ai demandé trois variantes pour comparer.
00:07:11J'ai une version classique, une plus éditoriale et une plus percutante.
00:07:17En comparant avec ce que v0 a produit, les similitudes sont frappantes.
00:07:21Mêmes polices, mêmes couleurs, surtout avec l'approche éditoriale.
00:07:26Vous remarquerez aussi à gauche qu'Open Design suit le même processus
00:07:32de questions-réponses que v0. Il me pose des questions,
00:07:37propose des boutons de sélection... C'est pratiquement le même produit.
00:07:43Une différence notable cependant : Open Design est un peu plus lent.
00:07:49Il a fallu 10 minutes là où v0 en aurait mis la moitié. De plus,
00:07:56bien qu'on voie les options "Commenter", "Éditer" et "Dessiner",
00:08:01elles ne sont pas encore actives, même si elles sont prévues.
00:08:06Pour faire des ajustements, il faut demander directement à Open Design :
00:08:13"Peux-tu créer un panneau de réglages pour modifier les éléments ?"
00:08:18C'est très similaire à ce qu'on fait avec hu-washu. Open Design est un peu lent,
00:08:24manque de finitions, mais il reste très proche de l'expérience v0.
00:08:30Voyons maintenant comment utiliser votre propre système de design,
00:08:35car c'est un point qui demande un petit contournement.
00:08:40Si je veux créer une présentation basée sur mon système "Agentic Dashboard OS",
00:08:46voici l'esthétique visuelle que je recherche. Dans v0,
00:08:51j'ai déjà un système de design pour cela. Comment faire dans Open Design ?
00:08:56Cela s'applique aussi si vous avez votre propre site ou vos propres polices.
00:09:01Il n'y a pas encore de bouton direct pour créer cela de zéro
00:09:08dans la section "Design Systems". C'est dommage.
00:09:14La solution est d'importer un ZIP provenant de v0.
00:09:20Si votre système existe déjà dans v0, allez dans le projet,
00:09:25cliquez sur "Partager", puis "Télécharger le projet en .zip".
00:09:32Dans Open Design, sélectionnez ce ZIP et importez-le.
00:09:39Vous verrez alors tous les fichiers de design apparaître dans l'interface.
00:09:45Si vous n'avez pas encore de système dans v0, je vous conseille
00:09:51de le faire là-bas d'abord, c'est le plus simple. Sinon,
00:09:55vous devrez le recréer manuellement dans Claude Code, ce qui est fastidieux.
00:10:00C'est l'un des points faibles d'Open Design par rapport à hu-washu.
00:10:04Dans le terminal, avec Claude Code, je peux simplement dire :
00:10:08"Regarde ce dossier, analyse tout ce qu'il contient,
00:10:14et recrée cette présentation dans ce style". Le revers de la médaille du GUI.
00:10:20J'ai donc demandé de créer une présentation sur mon SaaS Lighthouse,
00:10:25l'outil d'analyse pour petites équipes. Voici les questions qu'il me pose :
00:10:29À qui s'adresse la présentation ? Disons pour un lancement de produit.
00:10:34Qui est dans la salle ? Des chefs de produit.
00:10:44Combien de slides ? Court. Fidélité ? Haute. Notes de l'orateur ? Non.
00:10:51Style visuel ? Brutaliste. Utilise le système de design Agentic OS.
00:11:00Ensuite, il définit le déroulement de l'histoire et commence à travailler.
00:11:04Comme avec Claude Code, il crée une liste de tâches et avance pas à pas.
00:11:08Voici la première slide obtenue. Elle est plutôt réussie,
00:11:13tout à fait dans l'esprit du système de design fourni.
00:11:20Cependant, je ne pouvais pas passer d'une slide à l'autre dans l'interface.
00:11:25J'ai dû signaler à Open Design que je ne voyais que la première.
00:11:29Voici le résultat final, exporté vers PowerPoint pour voir le rendu.
00:11:34L'exportation est cruciale car ce qui est beau dans v0
00:11:39ou Open Design peut parfois se décaler une fois dans PowerPoint.
00:11:43La première slide est bien, la deuxième aussi, bien que
00:11:52le placement des chiffres pourrait être affiné. La troisième
00:11:58a un petit souci d'espacement entre les blocs. La quatrième est parfaite.
00:12:04La sixième mériterait d'être remontée un peu. Enfin, la septième
00:12:13présente quelques problèmes de formatage avec le texte hors des cadres.
00:12:18C'est une solution à 90 %. En cinq minutes, vous corrigez le reste.
00:12:24Le système de design est respecté, mais on sent bien
00:12:29qu'Open Design est encore un peu brut par rapport à v0.
00:12:33C'est normal, l'outil vient de sortir cette semaine. J'espère
00:12:37qu'ils continueront à l'améliorer. Mais pour une première version,
00:12:42Open Design est vraiment un outil solide pour ceux qui veulent
00:12:48une interface graphique tout en évitant les limites de v0.
00:12:54Si l'interface ne vous importe pas, hu-washu-design reste
00:13:00probablement supérieur : il est plus rapide et plus flexible
00:13:05grâce au terminal. Mais si vous avez besoin de visuel,
00:13:10c'est une alternative très sérieuse. J'adore v0,
00:13:15ne vous méprenez pas, mais les restrictions actuelles sont absurdes.
00:13:21Comme je l'ai dit, j'espère voir déferler des tonnes d'outils comme celui-ci.
00:13:26Cela poussera Anthropic à régler ses problèmes d'utilisation ridicules.
00:13:31C'est ici que je vous laisse. C'est un outil très cool à tester,
00:13:34facile à installer et très flexible avec vos agents de code.
00:13:40Dites-moi ce que vous en pensez en commentaire, jetez un œil
00:13:43à Chase AI+ pour la Masterclass, et à bientôt.