C'est quoi Claude Design ?

Aujourd'hui, nous partons à la découverte d'un nouvel outil : Claude Design. Ce dernier vous permet notamment de créer des interfaces web. Le but est de partir d'une idée (plus ou moins réfléchie) pour arriver à une maquette prête à être utilisée.

Avant de commencer, sachez que nous irons jusqu'au bout ! Le but est de lier un projet Django minimaliste et Claude Design en passant par... Claude Code ! Voici le lien vers le dépôt GitHub du projet en question.

Voici à quoi il ressemble actuellement :

Un site sur l'actualité vidéoludique brut de décoffrage... pour le moment !

Comment avoir accès à Claude Design ?

Pour commencer, il faut avoir au minimum un abonnement Pro chez Claude, qui coûte environ 20 € par mois.

Après avoir souscrit un abonnement, vous pouvez directement vous rendre dans la partie design :

Et maintenant, il est temps de entrer dans le vif du sujet.

Bien choisir son point de départ

Lorsque vous arrivez sur Claude Design, il est possible de choisir plusieurs modes comme Prototype ou Slide deck. Si Slide deck permet de créer entre autres des présentations, c'est bien évidemment le mode Prototype que nous allons utiliser. En effet, c'est ce dernier qui permet de créer des interfaces web.

Le workflow idéal : du wireframe à la haute fidélité

L'idée est vraiment d'y aller étape par étape afin d'arriver à un design qui nous convienne. En effet, n'attendez pas forcément le design parfait dès le premier coup de prompt !

Commencer par un wireframe

Commencez par demander un wireframe. Cela permet de se concentrer sur la structure et la disposition des éléments. De plus, Claude Design pourra vous proposer plusieurs versions. Voyez cela comme un brouillon interactif.

Sélectionnez Wireframe et donnez un nom à votre projet.

Et vous voici sur votre nouveau projet :

Vous pouvez écrire un prompt. Pour ma part :

J'aimerais obtenir une proposition de design pour un site d'actualités vidéoludiques développé avec Django MVT. Dans un premier temps, je souhaite me concentrer uniquement sur la page d'accueil, qui affichera les derniers articles publiés.

Et vous pouvez même ajouter des captures si vous voulez lui donner des inspirations. Prenons une capture de la page d'accueil de l'excellent Xboxygen.

Lorsque vous envoyez votre prompt, Claude vous pose quelques questions :

Ensuite, selon ce que vous avez répondu, Claude va vous générer plusieurs maquettes. D'ailleurs, prenez le temps d'aller vous faire couler un café.

Claude a bien travaillé :

1. J'ai le choix entre plusieurs wireframes

2. Tweaks permet de faire des modifications rapides

3. Edit permet de peaufiner son design

En cliquant sur Edit, il est possible de modifier les éléments un par un :

Inutile de préciser qu'il est possible d'itérer via un nouveau prompt. La proposition A me convient très bien, alors je décide de basculer en mode fidélité avec celle-ci.

Basculer en mode haute fidélité

Pour ma part, je vais demander à Claude de choisir l'option A et de basculer en mode haute fidélité via un prompt :

L'option A — Portail classique me convient très bien. Tu peux basculer en mode high fidelity.

Vous pouvez aller reprendre un autre café.

Une fois terminé, le design s'affiche directement dans votre projet :

À cette étape, il est toujours possible d'effectuer des modifications. Mais ce qui nous intéresse, c'est de lier ce design à un projet Django.

Utiliser un design dans un projet Django

Via le bouton Share, il est possible de l'exporter sous différents formats : PowerPoint, PDF, HTML, ZIP.

Nous allons plutôt cliquer sur Send to... et Claude Code :

Ensuite, Claude Design vous donne la commande à copier-coller dans Claude Code. Il est même possible de modifier le prompt :

Dans mon projet Django, j'ai ouvert Claude Code et copié la commande :

Pour ma part, il a fait un excellent travail du premier coup. C'est un très bon début, il a bien respecté mon prompt :

Aller plus loin avec le design system

Si vous avez besoin de créer plusieurs designs, vous aurez certainement besoin que ces derniers collent à votre image de marque (mêmes couleurs, styles de boutons, typographies, etc.) sans avoir besoin de tout préciser à chaque fois.

Vous imaginez bien que si j'en parle ici, c'est que Claude Design a prévu de créer des design systems :

En arrivant sur l'interface de création de design system, on remarque qu'il est possible de :

1. Créer un design system via un prompt

2. Utiliser un design system existant via plusieurs options (voir l'image ci-dessous)

À savoir qu'il est aussi possible de s'inspirer de design systems existants sur getdesign, merci à Shubham pour le tuyau.

Quand vous créez un design system avec Claude Design, préparez-vous à un interrogatoire digne d'un directeur artistique afin qu'il définisse au mieux votre identité numérique.

Et surtout, préparez-vous trois ou quatre cafés.

Une fois terminé, vous pouvez accéder à tous les éléments de votre design system (marque, couleurs, composants, etc.).

Une fois ce socle configuré, vous pourrez le sélectionner à chaque nouveau prototype pour que votre image de marque soit respectée.

À vous de jouer ! 😉