C'est quoi Claude Design ?

Aujourd'hui nous partons à la découverte d'un nouvel outil : Claude Design. Ce dernier vous permet de créer notamment 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 qui coûte environ 20€ par mois chez Claude.

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

Et maintenant il est temps de rentrer 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 autre 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 les 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. Car n'attendez pas forcément LE design dès le premier coup de prompt !

Commencer par un Wireframe

Commencez par delander un Wireframe. Celà permet de se concentrer sur la structure, la disposition des éléments. De plus, Claude Design pourra vous proposer plusieurs versions. Voyez ça comme un brouillon interactif.

Selectionnez Wireframe et donner 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 va vous poser 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 Wireframe

2. Tweaks permet de faire des modifications rapides

3. Edit permet de peauffiner son design

En cliquant sur Edit, il est possible de modifier élément par élément :

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 vais décider de basculer en mode fidélité avec celle-ci.

Basculter en mode haute fidélité

Pour ma part je vais demander à Claude de choisir l'option A et de basculer en mode High Fidelity 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 le lier à 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 m'a fait un super beau 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