Claude Design : le guide complet pour les non designers (2026)

Aujourd'hui, on va apprendre à utiliser cloud design de A à Z. On va voir des exemples en live sur mon écran. Je vais

vous montrer comment éviter les pièges de base, comment déployer vos designs en ligne, mais surtout on va voir le concept qui fait toute la différence, c'est le design système. C'est ça qui va vous permettre d'avoir des designs

vraiment uniques. Le design est sorti il

vraiment uniques. Le design est sorti il y a quelques jours et ça a fait énormément de bruit dans le monde des dev et des designers. L'action Figma a perdu 15 % en bourse. Les designers

paniquent, sauf qu'en réalité, c'est un outil. Et comme tous les outils, le

outil. Et comme tous les outils, le résultat va surtout dépendre de comment est-ce que vous l'utilisez parce que sans méthode, tous les résultats se ressemblent un petit peu sur internet et c'est ce qu'on appelle le AI slop. Et

dans ce guide complet, je vais vous montrer comment tirer le maximum de cloud design pour éviter le AI slop.

Pour ceux qui me connaissent pas, je m'appelle Shubam Charma. J'ai un passé d'ingénieur logiciel dans plusieurs start-ups en France et chez Conto récemment par exemple, je bossais en tant que product manager dans lequel et bien j'interagissais avec plusieurs

designers et notamment avec des design systèmes. Donc et là je suis hyper

systèmes. Donc et là je suis hyper content que ce genre d'outil sorte parce que ça va permettre à des boîtes qui jusque-l n'avaient pas de designer de pouvoir se différencier visuellement sur le marché. Alors on va commencer par

le marché. Alors on va commencer par regarder l'interface, comment ça s'utilise exactement cloud design et comment y accéder. Et ensuite, on va focus un petit peu sur le problème réel qui est que tous les designs se ressemblent assez rapidement et comment

est-ce que du coup on va pouvoir utiliser les design système, comment vous allez pouvoir créer le vôtre pour pouvoir vous différencier de tous les designs aujourd'hui qui seront générés par de l'IA. Et enfin, on va voir comment le mettre en ligne parce que

certes, c'est un outil de prototyping qui va nous permettre du coup de faire des prototypes d'application de site web, mais surtout comment est-ce qu'on va pouvoir aller jusqu'au bout et mettre notre application, notre site web, nos slides en ligne. Pour pouvoir accéder à

Cloud Design, il faut aller sur l'interface web de cloud, donc cloud.ai et ensuite on aura ce petit truc qui apparaît pour du coup aller sur la partie design du coup sur cloud design.

faire attention, ce n'est pas disponible aujourd'hui sur l'application euh qui est installée. Il faut absolument aller

est installée. Il faut absolument aller sur votre navigateur web pour y accéder.

Une fois qu'on arrive avec le design, bien on a deux parties. Une première qui est à gauche et une deuxième qui est à droite. La première à gauche va nous

droite. La première à gauche va nous permettre de créer, de discuter euh avec nos projets. Donc en gros, la manière

nos projets. Donc en gros, la manière dont ça fonctionne, c'est que d'abord on va créer notre projet et ensuite les projets seront disponibles ici. Et sur

cette partie de gauche, quand on veut créer des projets, et bien il y a deux manières principalement de créer des projets. Soit on veut créer un

projets. Soit on veut créer un prototype, soit on veut créer des slides. partie prototype, on va surtout

slides. partie prototype, on va surtout l'utiliser pour des applications, des maquettes d'application, des landing page. Grossièrement, ça va être tout ce

page. Grossièrement, ça va être tout ce qui est appartie slide deck, c'est quand on va vouloir utiliser du coup notre design pour faire des slides de présentation ou alors des bannières ou des des images statiques pour Instagram

et cetera. Ça va se passer plutôt sur la

et cetera. Ça va se passer plutôt sur la partie slide deck. Pour notre exemple, on va commencer par tout ce qui est prototype parce que on va vouloir faire une application de suivi d'habitude. Et

donc, imaginons qu'on veut créer un nouveau projet qui est suivi d'habitude.

Et du coup, il y a une question qui se pose, c'est est-ce qu'on choisit wireframe ou High Fidelity ? C'est quoi

la différence ? En fait, quand on veut souvent faire une application, souvent ça vaut le coup de passer par un wireframe, donc par un petit peu les plans de la maison, avant de savoir quelle couleur on va vouloir mettre euh sur les différents murs. Parce qu'il y a plein de gens quand ils veulent faire

une application, ils veulent le résultat final dans leur main utilisable. Sauf

que ils vont en fait oublier plein d'étapes au milieu, ils vont pas comprendre pourquoi leur résultat ne va pas exactement correspondre à ce qu'ils veulent. Et c'est pourquoi dans un

veulent. Et c'est pourquoi dans un premier temps, il est conseillé de passer par une maquette et du coup dans Cloud Design, on va pouvoir tester plein de types de maquettes différentes avant de passer sur la version ifidity. Donc

je vais vous montrer par l'exemple. Nous

on va commencer par une partie maquette.

On fait create. Il nous a créé un nouveau projet. Bah là, ça fonctionne

nouveau projet. Bah là, ça fonctionne exactement comme Clod. On va lui dire, j'aimerais créer une application de suivi d'habitude qui va me permettre d'ajouter toutes les habitudes que j'ai envie de suivre, de d'avoir un système

de gamification qui va m'aider à euh arriver à suivre ses habitudes et surtout un système de notification.

Crée-moi des versions de cette application en t'inspirant des meilleures applications qui existent sur le marché. Pose-moi toutes les questions

le marché. Pose-moi toutes les questions que tu veux pour pouvoir y arriver.

Cette application est juste pour moi dans un premier temps pour pouvoir arriver à suivre mes habitudes.

Là, j'envoie, je donne pas plus d'explications pour le moment. Et là,

bah Claude va revenir vers moi avec des questions supplémentaires. Plus votre

questions supplémentaires. Plus votre prompte va être basique et non précis, plus il va vous poser des questions. On

va voir vers la fin de cette vidéo quelles sont les bonnes pratiques pour cloud design, celles qui sont documentées par Cloud Design. Mais là,

on va faire comme si on les connaissait pas. Donc là, il me pose un certain

pas. Donc là, il me pose un certain nombre de questions. Bah sur quelle plateforme je la veux ? Donc moi, je veux dire que je veux mobile et desktop.

Quelles sont les l'habitudes que je veux suivre ? Là, je sélectionne un certain

suivre ? Là, je sélectionne un certain nombre de choses. Combien d'habitudes je prévois en même temps et cetera ? Je

veux plutôt un système comme duo ou alors plutôt comme un jeu et cetera. Ou

alors je peux dire "Décide pour moi." Et

là, il va il va prendre des décisions à ma place. Donc là, je vais répondre

ma place. Donc là, je vais répondre rapidement. souvent décide pour moi pour

rapidement. souvent décide pour moi pour vous montrer ce que ça donne. Je peux ne pas répondre à tout et puis et puis derrière il va commencer à générer des versions. Et c'est là où ça va être le

versions. Et c'est là où ça va être le plus intéressant dans la partie wireframe, c'est qu'on va pouvoir avoir des versions de notre application dans lequel on va pouvoir choisir parmi les différentes variations qu'il va nous proposer. Là, à partir de là, il va

proposer. Là, à partir de là, il va commencer à faire tout ce qu'il a à faire et regarder, tester les différentes directions vers lesquelles il va partir. Donc là, on va attendre que tout arrive. Il y a déjà une première page qui vient d'arriver. Pour

l'instant, elle est encore en train d'être générée par Claude. Donc voilà,

là il vient de terminer. Euh, il est en train de vérifier le projet, mais on a déjà cette page qui s'est ouverte. Et

là, on voit un petit peu ce qu'on explore. Il a proposé quatre directions.

explore. Il a proposé quatre directions.

Et là, vous voyez, ce sont des maquettes, pas l'application finale, c'est des maquettes juste pour qu'on se rende compte à quoi ça pourrait ressembler. Et là, du coup, je peux

ressembler. Et là, du coup, je peux éditer des trucs, je peux enlever des directions visibles et cetera pour garder celle que je veux. Et au moins, ça me permet de valider euh pour voir vers laquelle je vais pouvoir aller. En

fait, c'est juste pour donner la direction avant de construire notre vraie application. Donc, c'est

vraie application. Donc, c'est littéralement, on fait d'abord le plan de la maison et après on habillera la maison. Là, il est encore en train de

maison. Là, il est encore en train de bosser. Qu'est-ce qu'il a ? OK, il vient

bosser. Qu'est-ce qu'il a ? OK, il vient d'ajouter du coup maintenant la partie mobile, toujours sur la même direction.

Waouh, c'est hyper cool en vrai parce que ça me permet de voir en fait mon prompt était juste pas assez suffisant.

souvent ce que les gens font, ils balancent un prompt dans un outil des high et après ils se rendent compte que la que l'application est pas superbe et au moins là on arrive à avoir une une vraie prévisualisation. Et pour pouvoir

vraie prévisualisation. Et pour pouvoir vous balader dedans, soit vous avez un trackpad comme moi ici et du coup vous pouvez zoomer, dézoomer tout sur tout ça. Sinon, vous faites contrôle molette

ça. Sinon, vous faites contrôle molette et ça va vous permettre de voir du coup tout vos designs d'un coup et prendre les meilleures décisions possibles. Je

vais vous montrer un autre exemple de wireframe pour que vous ayez une bonne idée de de ce que ça peut représenter.

Euh j'ai fait moi un exemple dans lequel je veux créer une application où on va tracker un petit peu le nombre de vidéos qu'on poste et cetera. Et voici ce que ça a donné. Donc vous voyez, c'est un petit peu différent. Là, il m'a fait du

coup les cinq versions rituel matin, soir et cetera avec un contrôleur ici que je peux aller modifier avec l'intensité de shadow et cetera.

Évidemment, c'est pas la version finale mais ça me donne un bon aperçu vers quoi je veux aller. Une fois que j'ai terminé ça, je peux aller vers une direction et décider comment je veux l'habiller. Donc

ce qu'on appelle le high fidelity. Donc

dans un monde idéal, je vais lui dire par exemple, j'aime beaucoup cette direction. Donc je voulais dire j'aime

direction. Donc je voulais dire j'aime beaucoup la direction 4. J'aimerais bien

que tu me fasses un prompt pour que je puisse aller créer cette même app sur Cloud Design en High Fidelity. Donc

voilà, je lui donne le prompt là, il va me donner un texte. Moi, je vous déconseille de rester du coup dans cette version et de commencer à à rendre votre application réelle, donc High Fidelity dès maintenant. Mais je vous conseille

dès maintenant. Mais je vous conseille de passer par un prompt. Dans tous les tests que j'ai fait, c'est là où j'ai eu les meilleurs résultats. Parce que

pourquoi on fait ça ? Si jamais j'avais dès la première fois mis ce prompt là, celui où je disais que j'ai besoin de créer une application d'habitude, regardez la qualité de l'application qui m'a faite. Et ça c'est ce qu'on appelle

m'a faite. Et ça c'est ce qu'on appelle le AI slop. C'est veut dire que quand on passe pas par la partie wire framing avant, bah il nous fait des trucs normaux, des trucs qu'on a l'habitude de

voir sur internet. Et donc du coup le fait de passer par là, donc lui demander promptte à donner à Cloud Design et ben on a quelque chose de beaucoup plus clean. Du coup là, je vais faire ça, je

clean. Du coup là, je vais faire ça, je copie. Autre chose que je vous conseille

copie. Autre chose que je vous conseille de faire aussi, c'est bah de prendre en screenshot les différents écrans qui vous a qui vous a dessiné. Hop, comme

ça, on aura quelque chose. Voilà, donc

j'ai pris les screenshots. Là, je

reviens donc le design. Je vais appeler ça app high fidélity.

Créer. Je balance mes screenshots ici.

Donc là, il les a mis dans upload et surtout, je viens mettre le prompt qu'on m'a donné. Donc là voilà ça mis PS 58

m'a donné. Donc là voilà ça mis PS 58 line. Vous voyez c'est le prompte que

line. Vous voyez c'est le prompte que m'avait donné tout à l'heure l'autre version de cloud design. Et là je vais lancer ça. Et cette fois-ci il va non

lancer ça. Et cette fois-ci il va non pas créer cinq versions ou quatre versions, il va en créer une celle que j'ai choisie et on va pouvoir aller beaucoup plus loin dans ce design et surtout arriver à un design qui est pas

quelque chose qui ressemble à ça. Parce

que même s'il y a des animations un petit peu sympas aujourd'hui, ce genre d'application c'est le genre de truc qu'on voit partout. OK, donc il commence à avoir des choses. Euh je vais recharger la page comme ça. OK. Et là on

a des choses qui sont bah beaucoup plus une application. En fait ça ressemble

une application. En fait ça ressemble beaucoup plus à une application qui pourrait sortir sur l'Apple Store et cetera. Et là j'ai une V1. Ah il y a

cetera. Et là j'ai une V1. Ah il y a même une petite animation, je crois.

Voilà, il y a une petite animation qui est cool. Donc c'est juste un visuel

est cool. Donc c'est juste un visuel hein, c'est pas l'application qui qui fonctionne. Mais ce visuel là et ben je

fonctionne. Mais ce visuel là et ben je peux déjà commencer à faire pas mal de choses dessus. Et là je vais parler de

choses dessus. Et là je vais parler de tout ça, tout ce qu'il y a ici. Ici j'ai

un premier bouton qui est Twick. Et donc

là, je peux décrire au lieu de le taper ici, bah qu'est-ce que j'aimerais ? Donc

j'aimerais que tu me proposes plusieurs couleurs afin que je puisse tester des environnement de couleur pour voir lequel me plaît le plus.

Donc là, je fais ça et là du coup, il va bah proposer plusieurs couleurs. Jusque

là, entre guillemets, rien de nouveau.

Par contre, ce qui est cool, c'est quand je vais sur edit, je peux aller par exemple ici et là, vous voyez, on a la typo, la couleur, les différents espacements et cetera. Et ça du coup, on

peut avoir vraiment une un contrôle beaucoup plus précis qu'on l'avait sur autres outils jusque-l. Et c'est pour ça qu'il y en a plein qui parlent de de Figma Killer parce que Figma euh bah

nous permettait de faire tout ça jusque là. Sauf que là, on a à la fois et bien

là. Sauf que là, on a à la fois et bien le modèle Opus 4.7 qui est extrêmement performant et en plus on a un outil qui est connecté et bien à ce à ce modèle et il nous permet de faire des choses

vraiment cool. Voilà. Donc là, il vient

vraiment cool. Voilà. Donc là, il vient de me finir la partie tweak. Là, ce

qu'on a ajouté ici, elle peut être enlevée comme ça. Et ça me permet, voyez, d'avoir des version un peu comme tout à l'heure mais en fait juste avec des couleurs différentes. Et ça, déjà,

on est très loin de ça justement parce qu'on a pris 2 secondes à définir un petit peu la direction, à qu'on soit un tout petit peu plus précis. Puis

maintenant, on va s'intéresser un petit peu à ce crayon là qui est ici. Euh en

fait, une fois qu'on a ça, on peut par exemple hop entourer un élément. Euh à

ce moment-là, Cloud va très bien savoir de quoi on parle. On va être beaucoup plus précis là-dessus. Là, je vais pouvoir ajouter euh j'aimerais bien que ce système là, là qui est ici, bah ressemble pas trop à Apple. J'ai

l'impression que Apple fait exactement la même chose. Est-ce que tu peux me proposer un autre composant ? Donc du

coup là, il est en train de me designer une nouvelle visualisation qui s'appelle cadran du jour. et il va faire trois visualisations pour que je puisse les tweak donc essayer de choisir la bonne version qui me convient. Pendant qu'il

est en train de faire la modification, je vais vous montrer un dernier truc. Là

dans Draw, on a la possibilité aussi de collaborer. Donc une fois qu'on a fait

collaborer. Donc une fois qu'on a fait ça, on peut ajouter ici une note euh qui fait que cette note là sera disponible bah en commentaire ici à toutes les personnes qui collaborent sur le design.

Donc ils ont essayé grossièrement de refaire une desités de Figma pour vraiment essayer d'amener un max de monde dessus. De toute façon, la réalité

monde dessus. De toute façon, la réalité c'est que Cloud Design en fait il existait déjà via Cloud Code. C'est

juste qu'il y avait pas une interface comme ça pour tout le monde. Donc là,

les gens qui sont pas développeurs peuvent créer du design. Donc notamment

des gens qui veulent pas du tout s'embêter avec du code. Et bien une fois que ça sera fait, on pourra derrière aller coder cette application avec le handoff dont on va parler vers la fin de cette vidéo. Donc voilà, il presque

cette vidéo. Donc voilà, il presque fini, il est en train de vérifier. Je

vais reload. Waouh ! OK, là je trouve que du coup c'est très très sympa. Il

m'a refait une version anneau, une version cadrant. La version cadrant, je

version cadrant. La version cadrant, je la trouve vraiment cool. Après à voir à quel point elle va être utile, à quel point ça colle avec ce qu'on veut. Mais

voilà, vous voyez, on peut itérer comme ça. On peut itérer comme ça. Et je

ça. On peut itérer comme ça. Et je

trouve que la qualité de ce qui est produit est vraiment très très sympa.

Mais il y a une chose qu'il faut comprendre. Tout ça là, tout ce qu'on

comprendre. Tout ça là, tout ce qu'on fait, c'est juste la carcasse. C'est ce

qu'on appelle le front-end. Le

front-end, quand on fait une application et ben c'est tout ce qui est interaction, couleur, le fait que ça soit responsive et cetera. Le backend,

c'est tout ce qui ne se voit pas, c'est euh la gestion des utilisateurs, le paiement, la base de données et cetera qui sont très importants pour une application de ce genre-là. Et en fait souvent aujourd'hui quand on est utilisateur ou ou vibe codeer pour

beaucoup, ben ils veulent d'abord se rendre compte de à quoi ça va ressembler parce que c'est ce qui va être présenté devant un utilisateur. Et du coup, l'outil ici va permettre de faire ça sans nous occuper de la partie backend

dans un premier temps. Mais après, on va pouvoir derrière la coder avec Cloud Code ou autre outil. Mais là où ils ont été forts, c'est que Cloud Design, Cloud Code vont du coup travailler main dans la main pour pouvoir faire une application complète. Mais du coup, il y

application complète. Mais du coup, il y en a peut-être plein qui se demandent "Mais OK, Shubam, c'est quoi la différence avec des outils comme Lovable par exemple ?"

par exemple ?" Lovable, c'est un outil qui est superbe ou Bolt ou V0 qui nous permet de faire des applications en one shot comme ça qui sont fonctionnelles. Et vous avez raison, en fait, ces outils-là

permettent de passer de A à Z avec un prompt et nous permettent sans passer par la case proto arriver à une à une version finale. Et en fait, cloud design

version finale. Et en fait, cloud design c'est pas exactement comme V0 ou Bolt ou Lovable. Cloud Design, c'est un outil de

Lovable. Cloud Design, c'est un outil de prototyping qui une fois qu'on a prototypé, un peu comme Figma, derrière on va aller le coder avec des outils comme Cloud Code, curseur et cetera.

Mais c'est pas exactement la même catégorie d'outil parce que certes, les applications comme Lovable vont pouvoir vous donner un résultat, mais regardez par vous-même le résultat que ça a donné. Par exemple là, j'ai fait plus ou

donné. Par exemple là, j'ai fait plus ou moins le même prompt pour créer une application d'habitude. Voilà, ça

application d'habitude. Voilà, ça ressemble à ça et je sais pas vous, mais ce genre d'application avec ce logo et avec toutes ces tous ces émoticones et cetera, bah c'est pas très design et c'est exactement ce que maintenant on

appelle le AI slop. Parce que le problème avec l'Elop aujourd'hui, c'est pas la technique, c'est pas les animations, c'est euh c'est vraiment autre chose. C'est c'est qu'on manque

autre chose. C'est c'est qu'on manque aujourd'hui de différenciation. Vu que

le niveau pour pouvoir créer des applications est hyper bas maintenant.

Et quand je parle d'application, je parle aussi de de d'interface web, de landing page, de site web et cetera. Vu

que littéralement tout le monde peut y arriver avec un seul prompt, qu'est-ce qui fait la différence ? Et moi-même, en fait, je suis je suis coupable, je suis tombé dans ce piège là. J'ai voulu faire des des espèces d'affiches euh enfin des posts pour un workshop cloud code que je

vais organiser et je me suis dit trop bien, je vais les faire avec Cloud Design. Et je les ai fait avec un seul

Design. Et je les ai fait avec un seul prompt en me disant ça va ça va être cool de oui, ça a l'air cool mais maintenant ce type de design, on va le voir partout. le euh Orange Terracota

voir partout. le euh Orange Terracota avec euh cette police là, j'ai l'impression que sur X euh redit et cetera, on commence à voir que notre cerveau petit à petit s'habitue, que ça

c'est des designs générés par Claude parce que Claude a un style un style maison qui réutilise si jamais on lui donne pas assez de direction. Et pour

pouvoir donner cette direction, avoir une différenciation mais surtout garder une consistance parmi tous ces designs, la solution c'est le design system. Le

design système, c'est quoi en fait ?

C'est c'est une espèce de grammaire de design qu'on va donner à n'importe quelle application, n'importe quel site avant de commencer à la coder. Euh

c'est-àut qu'on peut très bien faire notre proto et cetera et après appliquer un design système qui va être l'habillage. Euh dans ce design system,

l'habillage. Euh dans ce design system, il y aura bah quel type de type on utiliser, quel type de couleur, quels sont les espacements, les composants et cetera. Aujourd'hui, toutes ces

cetera. Aujourd'hui, toutes ces boîtes-là, si elles sont aussi reconnaissables, si on on sait qu'on est dans leur environnement et que du coup, il y a de la consistance parmi tout leur design, c'est parce que elles ont travaillé à un moment donné sur un

design système. Ça par exemple, c'est un

design système. Ça par exemple, c'est un design système. Le design système de

design système. Le design système de Starbucks dans lequel on explique très clairement quelles sont les couleurs primaires secondaires, comment est-ce qu'on écrit les texte, avec quelle police, avec quel espacement, comment

est-ce qu'on gère les boutons, les interactions des boutons, comment est-ce qu'on gère les ombres et cetera. Tout ça

c'est ce qui va dans un design système, c'est la grammaire en question. Ça c'est

le design système de Claude. La raison

pour laquelle beaucoup de gens s'attachent aussi à Claude, c'est d'un point de vue design a fait un gros travail sur comment faire en sorte que avec les polices, les couleurs et cetera qu'on qu'on transmette une vibe pour pas que ça ait l'air d'être du AI slop. Là

autre exemple, ça c'est The Verge qui est un média. Pareil, eux ils ont un certain style. Quand on va sur le site

certain style. Quand on va sur le site euh de Verge, on voit euh que c'est un style très spécifique et que du coup, on sait qu'on est sur un site éditorial et

cetera et donc cette identité graphique qu'ils ont, bah elle est propre à eux.

Et du coup, comment est-ce qu'on fait quand on a une application pour bah créer la nôtre et pour qu'elle soit consistante derrière parmi nos slides, nos flyers, notre design, notre site web et les différentes applications qu'on va

créer. Et bien dans Cloud Design, il y a

créer. Et bien dans Cloud Design, il y a toute une partie qui est dédiée au design system qui nous permett de poser, de créer un design système une fois pour que derrière quand on va créer des

designs dans cloud design et bien qu'il utilise toujours ce même design system.

Donc en fait, on fait setup design et new design system en avez pas un. Et là,

on arrive dans cette interface dans laquelle on a deux possibilités. Soit on

donne un design système existant, donc si on en a déjà un par exemple, ou alors on lui demande de générer notre design système et de la même manière lui, il va nous poser un certain nombre de questions et cetera. J'en profite pour

vous parler de ce Ripo GitHub aussi qui est un endroit où on trouve tous les design systèmes des boîtes existantes, hein. Ce que je vous ai montré tout à

hein. Ce que je vous ai montré tout à l'heure, c'est ça venait de là. Donc en

fait, c'est une boîte qui euh qui montre un peu les design systèmes de toutes les entreprises un petit peu dont entend parler et ça ça peut vous aider pour vous inspirer un petit peu. Donc par

exemple, je peux prendre le design système de Shopify, je prends le design.mmd et je le donne dans Design

design.mmd et je le donne dans Design Système ici pour qu'il puisse à partir de ce moment-là bah me créer des mes designs comme si c'était Shopify. Mais

nous c'est pas ce qu'on va faire, on va le créer en partant de zéro. Donc, je

suis une entreprise qui vend des robots pour les piscines afin de les nettoyer et j'aimerais créer un design système.

Pose-moi toutes les questions dont tu as besoin afin d'être assez différencié sur le marché. Tous mes concurrents sont des

le marché. Tous mes concurrents sont des plateformes un petit peu old school et moi du coup je vais euh être un site sur lequel les gens vont pouvoir acheter des robot nettoyeur mais aussi s'informer

sur comment entretenir sa piscine. Mais

aussi il y aura une application mobile qui va être liée à ça qui va nous permettre et bien de gérer le robot à distance. J'aimerais que tu me fasses un

distance. J'aimerais que tu me fasses un design système pour ça. Mon entreprise,

j'ai pas encore de nom pour le moment euh mais hésite pas à en choisir un pour moi.

Là, je fais continue to generation. Ça

prend 5 minutes parce que c'est un process qui est assez lourd. C'est il va vraiment définir tout dans le design système, les couleurs, les espacements et cetera. Vous allez voir, il va être

et cetera. Vous allez voir, il va être extrêmement précis. Donc là, il me

extrêmement précis. Donc là, il me propose un certain nombre de choses. Je

veux lui dire voilà quel nom est-ce que tu préfères ? Je veux dire là, c'est

tu préfères ? Je veux dire là, c'est très cool. Il me demande quel est le

très cool. Il me demande quel est le style de la marque. Est-ce que c'est type Apple Dyson, Tesla comme ISOP et cetera ? Je trouve ça très cool. Moi,

cetera ? Je trouve ça très cool. Moi,

j'aime bien, on va dire musie ISOP.

Donc, je vais lui donner ça. Euh

expérience digitale ultra moderne, bleu profond, accent électrique. Ça je veux le dire des sites pour moi. Moi ce que je vous conseille, c'est de choisir tout un par un parce que il s'agit de votre marque et c'est que comme ça où il

arrivera à faire un design système qui soit vraiment spécifique à vous. Là,

j'ai dit décide pour moi, décide pour moi. On va voir ce que ça donne. Ça,

moi. On va voir ce que ça donne. Ça,

c'est juste pour vous montrer un petit peu comment est-ce qu'on crée un design system sur Cloud Design. Et donc, à partir de là, il va tout générer. Il va

établir une identité de marque, euh définir des couleurs, euh créer ce qu'on appelle des tokens euh qui vont pouvoir être réutilisés et cetera. Et vraiment

quand euh on travaille dans des boîtes qui qui ont une vraie équipe design, leur leur vrai travail tous les jours, c'est comment améliorer ce design systeme. Si je prends design system

systeme. Si je prends design system Airbnb, là par exemple, on a le design système d'irbnb. Euh, vous voyez, tout

système d'irbnb. Euh, vous voyez, tout est extrêmement précis. Chaque lettre

est définie. Quel typoot on utilise, quel bouton on utilise, quelle interaction on utilise, combien de colonnes on met sur le le site, quel bouton, qu'est-ce que ça fait quand on clique sur un bouton et cetera ? C'est

ce qui fait l'âme d'un site ou d'une application. Et nous, on est en train

application. Et nous, on est en train d'essayer de faire exactement la même chose. C'est pourquoi ça prend du temps.

chose. C'est pourquoi ça prend du temps.

Minutes après, on commence à voir un truc pas mal. Déjà, il m'a il m'a fait un logo. Euh, ça c'est cool. Ça c'est

un logo. Euh, ça c'est cool. Ça c'est

parce que je lui ai demandé d'être comme Eyes Up et cetera. OK, il met les différents espacements, les radius, les différents boutons. OK. OK. Je suis pas

différents boutons. OK. OK. Je suis pas fan de la de la typo euh mais franchement, on est pas mal. J'aime bien

la Il il a créé une une un nom de boîte.

Franchement, je trouve ça cool. Il faut

savoir que tous les fichiers design system sont ici avec le logo, les badge et cetera, tout ce que vous voyez là dans J System, c'est là. Donc

ça, en fait, on peut derrière le télécharger et l'utiliser dans n'importe quel projet Cloud ou même on peut le donner derrière à Lovable et cetera pour aller bosser avec. En fait, mon design

system du coup va se retrouver ici. Vous

voyez, il y a marqué design system onde.

Voilà, qui est là. Et par exemple, je peux le publier là. Et à partir de là, quand je vais créer un prototype, j'aurai 11 design system qui sera là. On

je vais vous montrer un autre exemple, celui que moi j'ai fait avec mon design system. Donc moi, j'ai un design system

system. Donc moi, j'ai un design system ici qui a été fait avant avant cloud design, c'est celui-là. C'est du coup donner des informations, donner donner un petit peu quel logo j'utilise, c'est

lui qui a fait mon logo et cetera. Euh

quelles sont les animations que j'utilise et cetera. Et donc je lui ai donné ça, ce design system là, je l'ai mis dans Cloud Design et derrière je lui ai demandé de faire une landing page de

Warhop. Euh du coup, il a pris pas mal

Warhop. Euh du coup, il a pris pas mal de choses dedans. Moi, je trouve ça plutôt pas mal. Ça, il l'a pris de Cloud euh parce que Claude écrit de cette manière-là et il m'a fait cette landing page là parce que je lui ai donné et

bien mon euh design système ici. Une

fois qu'on a ça et qu'on est content, par exemple, si j'ai envie de modifier des choses, je peux modifier ce que je veux, je vous ai promis qu'à la fin, je vous montrerai comment est-ce qu'on publie ça. Et bien pour publier, il faut

publie ça. Et bien pour publier, il faut faire chair. Et ici, soit on l'envoie à

faire chair. Et ici, soit on l'envoie à CL code si jamais c'est un projet compliqué, genre une app et cetera, soit on peut directement le télécharger en zip. Et donc là, je vais aller le

zip. Et donc là, je vais aller le télécharger pour aller le publier euh sur internet. Alors, il y a et bien, il

sur internet. Alors, il y a et bien, il y a deux manières de le faire. Soit il y a la manière simple, soit il y a la manière complexe. Et en fait, ça va

manière complexe. Et en fait, ça va dépendre de vos applications. La manière

simple, c'est quand vous avez une page web comme moi, ce que je vais faire, c'est que je vais faire share, je vais faire export as zip. Donc une fois que je vais avoir ça, je vais avoir un zip qui va être qui va être téléchargé. Là,

on a nos fichiers HTML qui sont ici.

Qu'est-ce qu'on en fait quand c'est des pages simples ? Je vous ai dit que une

pages simples ? Je vous ai dit que une des manières de le faire, c'était d'uploader sur un hébergeur. Moi,

l'hébergeur que j'utilise, c'est Hostinger. Ils ont une offre

Hostinger. Ils ont une offre d'hébergement site web qui est plus simple que les que les VPS que je conseille d'habitude dans lequel là, pour un site simple comme celui-là, on

peut utiliser l'offre ici et là pour euh parce que c'est celle qui est la moins chère. Et pour les euh les offres de 12,

chère. Et pour les euh les offres de 12, 24 et 48 mois, vous pouvez aussi utiliser le code promo Shubam Sharma qui vous donne 10 % de réduction. Une fois

qu'on a ça, on peut même ici sélectionner un nom de domaine qu'on veut qu'on veut utiliser. Donc là,

j'aurais pu utiliser Claude code euh workshop par exemple. On fait continuer.

Une fois qu'on s'est inscrit, on arrive ici. Ça c'est grossièrement l'endroit où

ici. Ça c'est grossièrement l'endroit où on va pouvoir gérer les fichiers euh qui euh qui sont sur notre site web. Et bien

qu'est-ce qu'on va mettre comme fichier ? On va mettre les fichiers qu'on a

? On va mettre les fichiers qu'on a téléchargé tout à l'heure qui sont juste là. On va aller dans public HTML qui est

là. On va aller dans public HTML qui est vide et on va venir glisser déposer ces fichiers là qui ont été générés par Cloud Design. Il y a une petite

Cloud Design. Il y a une petite subtilité parce que si là on va aller regarder euh notre notre site web et bien on va pour l'instant rien voir.

C'est c'est parce qu'il nous faut une page qui soit index.html. Euh ça veut dire que son son nom doit être égal à index donc en minuscule point html. Une

fois qu'on a une page index.html, html.

On revient ici et là vous voyez, vous allez pouvoir voir le site qui a été publié ici. Ça, c'est la version simple,

publié ici. Ça, c'est la version simple, mais il y a une autre version qui est celle-là dans lequel on va dans Cloud Design donner la main à Cloud Code.

Ensuite, on va pouvoir pusher sur GitHub et utiliser un outil comme Doc Ploy que je vous ai déjà présenté dans une vidéo qui s'affiche juste là dans laquelle on va utiliser Doc Plooy à la place de Versel qui est un outil open source là

aussi hébergé sur et ça va nous permettre bah d'avoir des applications plus compliquées qui vont pouvoir être mises dessus. Comment est-ce qu'on fait

mises dessus. Comment est-ce qu'on fait ça ? Et bien deux cloud design on passe

ça ? Et bien deux cloud design on passe à cloud code en utilisant la technique du handoff. Donc on va ici et on clique

du handoff. Donc on va ici et on clique sur handoff to cloud code pour pouvoir laisser la main à cloud code. Donc

voilà, maintenant vous avez un tour d'horizon d'un peu tout ce qui est possible avec Cloud design. Vous avez vu que les design system c'est important mais il faut prendre le temps de bien les configurer. Faut pas oublier que les

les configurer. Faut pas oublier que les design system c'est un truc sur lequel des équipes de design passent des des heures et des heures et des heures afin de les perfectionner. Là on les a fait en trois promptes. Clign ça nous permet de les créer mais ça fait pas non plus

de la magie. Il faut y passer du temps et c'est quelque chose une fois qu'on l'a et bien on le garde. Ça nous évite de réinventer la roue et ça nous permet de nous différencier sur le marché. Il y

avait un dernier truc que je voulais vous montrer, c'était ça. Cloud Design

nous donne un set de bonne pratique pour prompter un petit peu Cloud Design. Même

si Cloud Design nous pose un certain nombre de questions, il faut quand même lui donner un peu de contexte. Donc dans

l'idéal, on donne l'objectif, le layout, donc qu'est-ce qu'on veut mettre sur la page, le contenu affiché et aussi l'audience. Ça c'est un petit peu le

l'audience. Ça c'est un petit peu le prompt minimal. Donc Claude a besoin

prompt minimal. Donc Claude a besoin même pour vous poser de bonnes questions. Mais la réalité c'est que ce

questions. Mais la réalité c'est que ce genre de prompte est vrai pour tout.

C'est vrai aussi bien pour Cloud Code pour Cloud AI que pour Cloud Design.

Parce qu'aujourd'hui Cloud Design c'est juste une interface qui est posée sur un LLM qui est déjà existant qui est au + 4.7. Et si ça vous intéresse d'aller

4.7. Et si ça vous intéresse d'aller utiliser une autre facette de ce LLM, je vous incite à regarder cette vidéo dans laquelle je vous montre des cas d'utilisation de CL code cette fois-ci.

Allez, on se retrouve ici.