Tu scrolles sur le web, et tu tombes sur un site magnifique. Le hero section te donne des frissons. Les boutons ont ce petit quelque chose. Les cards sont parfaitement équilibrées.
Et tu te dis : "J'aimerais tellement avoir le même style pour mon projet."
Avant, cette pensée se transformait en frustration. Parce que reproduire un design, c'était un chemin de croix. Maintenant ? Tu prends une capture d'écran, tu la donnes à Claude, et il te génère le code. Je te montre comment.
Le Workflow Ancien vs Le Nouveau Monde
Comment on faisait avant (le calvaire)
Tu vois un site qui te plaît. Tu ouvres les DevTools de ton navigateur (les fameux outils de développement qu'on ouvre avec F12 ou clic droit puis "Inspecter"). Tu commences à fouiller dans le CSS (le code qui définit les couleurs, les tailles, les espacements). Tu copies des bouts de code. Tu les adaptes. Tu te perds dans les media queries (les règles qui changent le design selon la taille de l'écran). Tu passes 3 heures pour un résultat qui ressemble vaguement à ce que tu voulais.
J'ai fait ça pendant des années. C'était pénible.
Comment on fait maintenant (la magie)
Tu fais une capture d'écran. Tu la donnes à Claude. Tu lui expliques ce que tu veux. Il analyse le design et te génère le code.
C'est tout.
Claude Code a une capacité que beaucoup de gens ignorent : il peut voir et analyser les images. Et pas juste les décrire vaguement. Il peut identifier les couleurs précises, comprendre la structure, repérer les espacements, et transformer tout ça en code fonctionnel.
Comment Ça Marche Concrètement
Étape 1 : Capture ton inspiration
Fais une capture d'écran du design que tu veux reproduire. La qualité compte : plus l'image est nette, mieux Claude comprendra les détails.
Tu peux capturer :
- Un site web complet : pour t'inspirer de l'ambiance générale
- Une section spécifique : un hero, un footer, une grille de cards
- Une maquette Figma : si tu as un designer qui t'a préparé quelque chose
- Même un croquis papier : oui, Claude comprend les dessins à main levée
Mon astuce : je capture toujours un peu plus large que ce dont j'ai besoin. Ça donne du contexte à Claude sur l'ambiance générale du site.
Étape 2 : Formule ta demande
Dans Claude Code, tu peux glisser-déposer une image directement dans le terminal, ou donner le chemin vers le fichier. Ensuite, tu décris ce que tu veux.
Voici un design que j'aime [glisse l'image]. Reproduis ce style pour ma page d'accueil. J'utilise React avec Tailwind CSS. Je veux garder les mêmes proportions et le même type de couleurs, mais adapte le contenu pour un site de coaching fitness.
Tu vois la différence avec un prompt vague ? Je précise :
- La stack technique (React + Tailwind)
- Ce que je veux garder (proportions, couleurs)
- Le contexte de mon projet (coaching fitness)
Étape 3 : Claude analyse et génère
Voici ce que Claude fait quand il reçoit ton image :
- Analyse des couleurs : Il détecte les codes hexadécimaux (genre
#FF5733) ou RGB utilisés - Compréhension de la structure : Header, sections, footer, comment ils s'articulent
- Mesure des espacements : Il estime les paddings et margins (les espaces intérieurs et extérieurs des éléments)
- Identification des patterns : Grilles, flexbox, dispositions responsives
- Génération du code : Il produit du code propre et commenté
Le résultat ? Un composant fonctionnel que tu peux utiliser directement.
Des Exemples Concrets Qui M'ont Bluffé
Exemple 1 : Reproduire un Hero Section Moderne
J'avais repéré un hero section avec un dégradé subtil, un titre imposant et un CTA (Call-to-Action, le bouton qui incite à l'action) flottant. Au lieu de passer 2 heures à deviner les couleurs exactes du dégradé, j'ai fait une capture et demandé :
Voici le hero section d'un site que j'aime [image]. Crée un composant React similaire avec : - Le même style de dégradé en arrière-plan - Un titre principal avec ce style de typographie bold - Le bouton CTA avec cet effet d'ombre au survol - Responsive : le titre doit être plus petit sur mobile Utilise Tailwind CSS et explique-moi les classes que tu utilises.
En 30 secondes, j'avais un composant fonctionnel. Et bonus : Claude m'a expliqué pourquoi il avait choisi certaines classes Tailwind plutôt que d'autres. J'ai appris quelque chose au passage.
Exemple 2 : Copier un Style de Card E-commerce
Pour un projet client, je devais créer des cards produits. J'ai trouvé un site e-commerce avec des cards élégantes : image en haut, titre, prix, bouton. L'ombre était parfaite, les coins arrondis juste ce qu'il faut.
Regarde cette card produit [image]. Crée un composant Card avec : - La même disposition (image, titre, prix, bouton) - Les mêmes proportions d'arrondi et d'ombre - Un effet de hover subtil comme sur l'original - Prends en compte que l'image peut avoir différents ratios
Résultat : une card réutilisable, avec gestion des images de différentes tailles. Quelque chose qui m'aurait pris une heure m'a pris 2 minutes.
Exemple 3 : Combiner plusieurs inspirations
C'est là que ça devient vraiment puissant. Tu peux montrer plusieurs captures à Claude et lui demander de fusionner les styles.
J'ai trois inspirations pour mon site : - [image1] : j'aime ce style de navigation avec le logo centré - [image2] : j'aime ces cards avec l'effet glassmorphism (le flou derrière) - [image3] : j'aime ce footer minimaliste avec les icônes réseaux sociaux Crée-moi une page complète qui combine ces trois styles de façon cohérente. Garde une palette de couleurs unifiée basée sur du bleu marine et du blanc cassé.
Claude ne se contente pas de coller les morceaux. Il harmonise les styles, ajuste les couleurs pour qu'elles fonctionnent ensemble, et crée quelque chose de cohérent.
Les Astuces Pour de Meilleurs Résultats
Astuce 1 : Sois spécifique sur ce que tu veux garder (et changer)
"Garde exactement le même style de boutons (coins arrondis de 8px, ombre portée au hover), mais change les couleurs pour du bleu #3B82F6 au lieu du vert."
Plus tu es précis, moins tu auras d'aller-retours.
Astuce 2 : Précise toujours ta stack technique
Claude peut générer du HTML/CSS pur, du React, du Vue, du Svelte, avec ou sans Tailwind, avec Bootstrap... Si tu ne précises pas, il choisira pour toi (souvent bien, mais pas toujours ce que tu veux).
"Génère le code en React avec Tailwind CSS. Pas de CSS inline, pas de fichier CSS séparé."
Astuce 3 : Demande des explications pour apprendre
Reproduis ce design et explique-moi : - Pourquoi tu as choisi ces classes Tailwind spécifiques - Comment fonctionne le responsive que tu as implémenté - Ce que fait l'effet de hover en détail
Tu codes ET tu apprends. C'est comme avoir un mentor qui code avec toi.
Astuce 4 : Itère rapidement
Le premier résultat n'est jamais parfait. Et c'est normal. L'avantage de Claude, c'est que les corrections sont instantanées :
"C'est bien, mais les espacements sont trop grands. Réduis tous les paddings de moitié."
"Le bouton est trop petit sur mobile, augmente sa taille de 20%."
"Ajoute une ombre plus prononcée sur les cards au hover."
En 3-4 itérations, tu as exactement ce que tu veux.
Ce Que Claude Analyse Dans Ton Image
Pour que tu comprennes pourquoi ça marche si bien, voici ce que Claude "voit" :
| Élément | Ce que Claude détecte |
|---|---|
| Couleurs | Codes hex précis, dégradés, opacité |
| Typographie | Taille approximative, poids (bold, regular), espacement des lettres |
| Layout | Structure en grille, flexbox, disposition des éléments |
| Espacements | Paddings, margins, gaps entre éléments |
| Effets | Ombres, bordures, coins arrondis, transparence |
| Responsive | Il peut deviner comment le design s'adapte |
Les Limites (Soyons Honnêtes)
Claude est puissant, mais il a ses limites. Les connaître t'évitera des frustrations.
1. Les polices exactes
Claude peut suggérer une police visuellement similaire, mais il ne peut pas identifier avec certitude la police exacte d'un screenshot. Si c'est important pour toi, utilise un outil comme WhatTheFont pour identifier la police, puis dis à Claude de l'utiliser.
2. Les images et assets
Claude ne peut pas extraire les images d'une capture d'écran. Il peut décrire leur emplacement et suggérer des placeholders, mais tu devras fournir tes propres images.
3. Les animations complexes
Il peut voir qu'il y a une animation, mais reproduire des animations CSS complexes à partir d'une image statique est difficile. Pour les animations, décris-les plutôt en mots.
4. Le code propriétaire
Claude reproduit le style visuel, pas le code exact du site original. C'est une bonne chose : tu obtiens du code propre et adapté à ta stack, pas du code copié qui pourrait poser des problèmes.
L'Éthique et La Légalité
Question importante : est-ce légal de reproduire un design ?
Reproduire un style est légal. Les styles visuels, les mises en page, les choix de couleurs ne sont pas protégés par le droit d'auteur.
Copier du contenu ne l'est pas. Les textes, les images, les logos, les illustrations sont protégés.
Utilise cette technique pour t'inspirer et créer ton propre design unique. Pas pour cloner un site à l'identique et voler le travail de quelqu'un d'autre.
Mon Workflow Quotidien
Voici comment j'utilise cette technique dans mes projets :
- Phase d'inspiration : Je parcours Dribbble, Awwwards, ou Lapa.ninja et je capture les éléments qui m'inspirent
- Création du moodboard : Je rassemble 3-5 captures d'écran par projet
- Génération avec Claude : Je demande à Claude de combiner les styles en quelque chose de cohérent
- Itérations rapides : J'affine avec 3-4 corrections
- Personnalisation finale : J'ajoute ma touche personnelle
Temps total : 30 minutes pour une page complète. Contre 3-4 heures à l'ancienne.
Pour Aller Plus Loin
Le design n'est plus une barrière. Tu n'as plus besoin d'être designer pour créer des interfaces professionnelles. Tu as besoin d'un bon oeil pour repérer ce qui te plaît, et de Claude pour le transformer en code.
Pour ceux qui veulent aller plus loin : on a créé le Workshop "Bâtir avec l'IA".
Articles connexes qui pourraient t'intéresser :
- Votre première landing page avant ce soir : applique ce que tu viens d'apprendre
- La stack idéale 2026 pour lancer un projet : les outils que je recommande
- ChatGPT vs Claude Code : pourquoi j'ai arrêté de copier-coller : comprends pourquoi Claude Code change tout
Montre à Claude ce que tu veux. Il te montre comment le faire.
— Charles
