Claude Design : du wireframe au code

Objectif

À la fin de ce guide, tu sauras :

• Accéder à Claude Design et créer ton premier projet
• Faire un wireframe rapide pour explorer une idée
• Mettre en place un design system
• Passer en haute fidélité pour avoir un vrai prototype interactif
• Transférer ce prototype vers Claude Code pour le coder

Claude Design est un produit Anthropic Labs, en research preview. Dispo sur les plans Pro, Max, Team et Enterprise.

1. Accéder à Claude Design

Va sur claude.ai/design. Crée un nouveau projet, puis choisis un template :

Prototype · Slide Deck · From Template · Other

Pour un prototype, tu choisis entre Wireframe ou High Fidelity.

Si ton organisation a déjà un design system publié, chaque nouveau projet l'hérite automatiquement.

2. Le wireframe

Le wireframe sert à explorer vite, sans se soucier du rendu final. Dans le chat, décris ce que tu veux construire :

Crée un dashboard qui montre le revenu mensuel avec des filtres région et ligne produit

Claude génère sur le canvas à droite.

Itérer

• Par chat, pour les changements globaux
• Par commentaire inline, pour du ciblé : clique sur l'élément et précise ce que tu veux changer

3. Le design system

À faire une seule fois par organisation. Une fois publié, tous les projets en héritent.

Prérequis : permissions admin + au moins une source (codebase, deck, assets de marque).

1. Ouvre Claude Design → clique sur le nom d'organisation
2. Sélectionne ou crée ton organisation
3. Upload tes assets. Claude extrait : palette, typographie, composants, patterns de layout
4. Teste avec un projet bidon pour valider
5. Active le toggle "Published"

4. Le prototype (haute fidélité)

Une fois la structure validée en wireframe, passe en High Fidelity.

• Commence simple, ajoute la complexité par couches
• Sois précis dans le feedback
• Référence les composants du design system par leur nom
• Précise le responsive dès le départ
• Demande 2-3 variantes si tu hésites

5. Transfert vers Claude Code

Bouton Export en haut à droite. Formats dispo :

• Télécharger en .zip
• Export PDF / PPTX
• Envoyer vers Canva
• Export HTML standalone
• Handoff vers Claude Code

C'est cette dernière option qui ferme la boucle : le prototype devient un point de départ exploitable en code.

6. Limites connues

• Commentaires inline qui disparaissent → copier dans le chat
• Vue compacte peut générer des erreurs → repasser en vue complète
• Grosses codebases → lier un sous-dossier précis
• Pas encore d'app Mac native (web only)

Workflow recommandé

1. claude.ai/design → nouveau projet
2. Wireframe pour explorer vite
3. Design system : upload → valider → publier
4. High Fidelity : itérer en chat + commentaires inline
5. Export → Handoff to Claude Code