Summary  
This chapter explains how to supply a UI design reference image and a precise prompt to an AI code assistant so it can automatically restyle an app’s interface—preserving its structure and features while updating its look.

General domain of usage  
Web application UI design

À moins de disposer d’un fichier de design prêt à l’emploi, la manière la plus rapide de redéfinir le style de votre application consiste à trouver un exemple qui vous plaît et à le montrer à Claude Code. Ce chapitre explique précisément comment procéder.

### Comment le transmettre à Claude Code

Une fois que vous avez trouvé un design qui vous convient :
1. Copiez ou faites une capture d’écran de l’image
2. Collez-la directement dans le chat de Claude Code
3. Ajoutez une consigne précise en même temps

Une consigne efficace :

`
"Take the styling and colours of this UI design and implement it into my app. Keep the structure and functionalities exactly the same. Only change the design style."
`

Préciser ce qui doit rester identique est aussi important que de décrire ce que vous souhaitez modifier. Si vous ne demandez pas explicitement de conserver la structure, Claude Code pourrait modifier plus d’éléments que prévu.

### Quel modèle utiliser pour le design

Pour les modifications de design, sélectionnez le modèle Opus via le menu déroulant dans Claude Code. Opus interprète mieux les inspirations visuelles et les traduit en code. Pour la plupart des autres tâches, Sonnet est le choix adapté, mais pour le design, Opus est préférable.

### Prévoir plusieurs itérations

La première version couvrira la majorité des besoins, mais ne sera pas toujours parfaite. Ce n'est pas un problème. Examinez le résultat obtenu, identifiez l’élément précis à ajuster, puis envoyez une instruction de suivi spécifique à ce point.

Dire : « Change la couleur du titre en bleu foncé. Ne modifie rien d’autre. »

Dire : « Mets un arrière-plan gris foncé uni au lieu du dégradé. »

Dire : « Rends le bouton d’envoi plus arrondi et augmente légèrement sa taille. »

Quelle est la méthode recommandée pour modifier le design de votre application avec Claude Code ?

Créez et lancez une application réelle en un seul week-end en utilisant des outils d'IA modernes et un flux de travail simple et pratique, en utilisant Claude Code pour planifier, générer et affiner votre code, en gérant votre projet avec GitHub, et en déployant votre application finalisée en ligne avec Vercel. Vous commencerez avec une idée et la transformerez rapidement en un plan de projet clair, puis vous passerez étape par étape à la construction d'une application fonctionnelle, en vous concentrant sur les fonctionnalités principales, une architecture simple et une itération rapide au lieu d'une complexité inutile, tout en apprenant à travailler efficacement avec l'IA en rédigeant de meilleurs prompts, en corrigeant les erreurs et en améliorant les fonctionnalités, pour terminer avec une application en ligne, un projet GitHub propre et un système reproductible pour transformer plus rapidement vos futures idées en produits réels.

Comprendre les bases du développement assisté par l'IA, configurer votre environnement et se familiariser avec Claude Code avant de commencer votre première application.

Transformez votre idée en un plan clair et simple et définissez la version la plus minimale de votre application qui apporte une réelle valeur.

Passez de zéro à une application fonctionnelle en générant du code avec l'IA, en configurant le projet et en comprenant ce qui a été créé.

Améliorez votre application en ajoutant des fonctionnalités, en affinant le design et en apprenant à résoudre efficacement les problèmes.

Publiez votre projet, rendez-le accessible en ligne et assurez-vous que tout fonctionne en utilisant GitHub et Vercel.

Amélioration de la conception de l'application

Comment le transmettre à Claude Code

Quel modèle utiliser pour le design

Prévoir plusieurs itérations