Claude + Skills : le workflow pour générer un look and feel de homepage prêt pour Figma

En 2026, la question n'est plus de savoir si les agences web vont intégrer l'IA dans leur workflow de design. Elle est de savoir lesquelles l'ont structuré suffisamment pour en tirer un avantage réel sur leurs délais, leur qualité de livraison et leur capacité à projeter le client dès les premières semaines du projet.

Chez Noqode, agence Webflow spécialisée sur l'IA Claude, on utilise Claude associé aux Skills depuis plusieurs mois pour accélérer la phase de design exploratoire. Ce n'est pas une démonstration de technologie. C'est un process opérationnel qu'on applique sur nos projets clients, et qu'on a voulu documenter ici de manière concrète.

Dans cet article, on détaille chaque étape du workflow : comment on structure le brief projet pour Claude, comment on configure les Skills avec un design system complet, pourquoi les images changent la qualité du rendu, et ce qu'on fait réellement avec le résultat. Le tout illustré sur un cas client fictif, Vektis Conseil, cabinet de conseil indépendant.

Qu'est-ce qu'un Skill Claude et pourquoi ça change tout pour le design

Un Skill, dans l'écosystème Claude, est un fichier Markdown que l'IA consulte comme référence permanente lors de ses générations. Concrètement, au lieu de recopier vos tokens de design dans chaque prompt, vous créez une fois un fichier brand-client.md qui contient l'intégralité du design system : couleurs primaires et secondaires, typographies avec leurs familles, corps et graisses, échelle de spacing en rem et en pixels, valeurs de border-radius, règles d'élévation et de shadow, composants de base et leurs variantes, et surtout les règles d'usage, c'est-à-dire ce que vous avez le droit de combiner et ce qui est interdit.

Ce fichier, Claude le charge et l'applique à chaque génération sans que vous ayez à le répéter. C'est ce qui distingue une sortie cohérente avec l'identité du client d'une sortie générique. Et c'est ce qui rend le combo Skills + contexte projet réellement utilisable en production d'agence, pas seulement en démo.

La documentation officielle des Skills est disponible sur le site d'Anthropic. Notre fiche outil dédiée à Claude détaille également les modèles disponibles et nos cas d'usage concrets en agence.

Le cas client : Vektis Conseil

Pour illustrer ce workflow, on a construit un cas client fictif représentatif d'une typologie de projet qu'on rencontre régulièrement chez Noqode. Le client s'appelle Vektis Conseil. C'est un cabinet de conseil indépendant fondé en 2011, avec 17 consultants seniors et 2,8 millions d'euros de chiffre d'affaires. Trois axes d'intervention exclusifs : restructuration organisationnelle, pilotage de la performance opérationnelle, et conduite du changement sur des projets de transformation.

Sa cible prioritaire, ce sont les dirigeants et directeurs généraux d'ETI dans les secteurs industrie, distribution B2B et services. Des profils méfiants vis-à-vis des grands cabinets, qui cherchent un partenaire qui comprend les contraintes terrain, qui lisent peu et jugent vite. Le positionnement est clair : ni le moins cher, ni le plus gros, mais le plus rigoureux sur son segment.

Le site existant date de 2019 sous WordPress, retouché en 2022. Les problèmes identifiés en kick-off sont classiques mais réels : copie trop institutionnelle qui ne parle pas à la cible dirigeante, aucune preuve sociale visible dès les premières secondes, structure pensée comme une plaquette commerciale plutôt que comme un outil de conversion, et une invisibilité totale sur les LLMs malgré un SEO organique correct.

Étape 1 : structurer le contexte projet dans Claude

Le contexte projet est le document fondateur de chacune de nos missions. Avant de générer quoi que ce soit, on renseigne un fichier d'instructions structuré que Claude va pouvoir lire comme une source de vérité permanente sur le projet.

La cible

Pas un persona marketing vague, mais un profil précis avec une fonction, un secteur, une taille d'entreprise, une posture psychologique, un comportement de lecture et des objections connues. Pour Vektis, ça donne : directeur général d'une ETI industrielle de 150 à 600 personnes, méfiant vis-à-vis des consultants généralistes, qui lit en diagonale et juge la crédibilité en moins de 10 secondes sur un site.

Le positionnement

Ce que le client est, ce qu'il n'est pas, ses vrais différenciateurs. On évite les formulations génériques pour forcer des prises de position claires que Claude pourra retranscrire dans la copie.

Le ton de voix est documenté avec des exemples concrets

Les mots que le client utilise lui-même (rigoureux, terrain, engagé, direct, mesurable) et la liste des mots à bannir (innovant, agile, excellence, expertise reconnue). Ce point seul améliore drastiquement la qualité du copywriting généré.

Les résultats clients sont intégrés avec leurs chiffres

Une ETI industrielle de 400 personnes restructurée en 8 mois, un distributeur B2B avec +31% de productivité sur 18 mois. Claude les intègre naturellement comme preuves sociales dans les sections appropriées.

Les problèmes détectés en kick-off

Ils permettent à Claude de comprendre ce qu'il faut corriger, pas seulement ce qu'il faut créer. Un site qui manque de preuves sociales va structurellement recevoir plus de social proof dans la génération.

Les références visuelles

Ce sont des URLs de sites du secteur ou hors secteur qui sortent un peu. Pas pour copier, mais pour cadrer le niveau d'ambition visuelle et sortir des sorties génériques.

L'arobresence du site

Avec toutes les pages, leurs slugs et leurs objectifs. Claude sait ainsi ce que chaque page doit accomplir avant de générer la moindre section. Ce document d'instructions représente entre 2 et 4 pages. C'est le travail amont du chef de projet, construit après le call client. Claude ne le remplace pas.

Étape 2 : configurer les Skills design

Une fois le contexte posé, on attache les Skills. Pour un projet de design de homepage, on en utilise trois en parallèle.

brand-vektis-conseil.md est le Skill spécifique au client. Il contient l'intégralité du design system créé en amont : la palette de couleurs avec leurs valeurs hexadécimales exactes, les typographies (familles, tailles par niveau hiérarchique, graisses, line-heights, letter-spacing), l'échelle de spacing en rem et en px, les valeurs de border-radius par composant, les règles d'élévation et de shadow, la bibliothèque de composants de base avec leurs états, et les règles d'usage strictes qui précisent quelles combinaisons sont autorisées et lesquelles sont interdites. Ce dernier point est crucial : sans règles d'usage, Claude prend des libertés qui cassent la cohérence du système.

frontend-design.md est le Skill front-end d'Anthropic, disponible publiquement sur le GitHub officiel. Il encadre les bonnes pratiques de structure HTML sémantique, d'accessibilité, de patterns d'interface modernes et de qualité de code CSS.

seo-content.md est notre Skill interne de rédaction, qui force Claude à produire un contenu structuré pour les moteurs de recherche et les LLMs, avec des réponses directes en début de section, une sémantique contrôlée et un format snippet-ready. Il s'inscrit dans notre approche SEO et AEO native qu'on intègre sur tous les projets.

L'appel des Skills se fait directement dans le prompt avec la syntaxe /nom-du-skill. Claude les charge et les applique à la génération sans configuration supplémentaire.

Comment créer un fichier design.md pour Claude

Le Skill brand est le fichier le plus structurant du workflow. Sa qualité détermine directement la cohérence des sorties. Voici la structure qu'on applique sur nos projets.

L'en-tête pose le contexte en deux lignes : nom du client, nature du projet, usage attendu du fichier. Claude lit cet en-tête en priorité.

Les couleurs sont documentées avec leurs valeurs hexadécimales exactes, organisées par rôle : couleur primaire, secondaire, neutre, d'état (succès, erreur, warning). On ajoute systématiquement les règles d'usage : sur quel fond cette couleur est autorisée, quelles combinaisons sont interdites pour des raisons de contraste ou d'identité.

La typographie liste les familles utilisées, les tailles par niveau hiérarchique (H1 à H6, body, caption, label), les graisses associées, les line-heights et les letter-spacing. On précise également les règles de fallback pour le web.

Le spacing documente l'échelle utilisée en rem et en pixels, avec les correspondances entre les niveaux (xs, sm, md, lg, xl) et leurs valeurs exactes.

Les composants décrivent les éléments de base : boutons (primaire, secondaire, ghost, disabled), cards (avec leurs variantes), inputs, badges, tags. Pour chaque composant : border-radius, padding, états interactifs.

Les règles d'usage sont la partie la plus importante. Elles précisent ce que Claude a le droit de faire et ce qui est explicitement interdit : pas de shadow sur fond sombre, pas de couleur secondaire en background pleine page, pas de texte body en weight 700, etc. Sans ces règles, Claude prend des libertés créatives qui cassent la cohérence.

Un fichier design.md bien construit fait entre 200 et 400 lignes. Il se construit une fois par client, en partant du design system Figma existant ou en le créant simultanément. Une fois en place, il se réutilise sur toute la durée du projet sans modification.

Étape 3 : intégrer des images d'ambiance

Avant de lancer la génération, on attache 4 images Unsplash sélectionnées en cohérence avec l'univers du client. Pour Vektis Conseil, on a choisi des images qui évoquent le conseil terrain sans tomber dans les clichés corporate : des espaces de travail industriels, des réunions en situation réelle, des environnements qui parlent à la cible ETI.

Ce détail compte beaucoup sur la qualité visuelle du rendu. Claude ne génère pas des placeholders abstraits ou des rectangles gris. Il compose réellement avec les images fournies, les positionne dans les sections appropriées, et adapte les choix de couleurs et de contrastes en fonction. Le résultat est immédiatement plus ancré et plus crédible qu'une génération sans support visuel.

Étape 4 : lancer la génération avec un prompt sobre

Le prompt final est volontairement court :

Crée une première version de la homepage en te basant sur le contexte dans les instructions de projet. Utilise les images en pièce jointe et appuie-toi sur les Skills frontend-design et brand-vektis-conseil.

Tout le travail est dans la préparation, pas dans le prompt. Un brief de 3 pages + deux Skills bien configurés + 4 images : Claude a suffisamment de matière pour produire quelque chose de juste sans qu'on ait besoin de lui détailler chaque section dans le message.

La génération prend 5 à 10 minutes. On lance généralement deux ou trois variations pour avoir des partis pris différents à comparer. La deuxième ou troisième version est souvent la meilleure, notamment parce que Claude affine son interprétation du design system entre les itérations.

Claude vs Lovable vs Bolt : pourquoi on utilise Claude pour le design

La question revient souvent. Lovable et Bolt génèrent aussi des interfaces à partir d'un prompt, ils sont plus accessibles, et certains les présentent comme des alternatives directes. Notre choix de Claude pour ce workflow n'est pas idéologique, il est fonctionnel.

Le point de bascule, c'est la maîtrise du design system. Lovable et Bolt génèrent des interfaces correctes à partir de zéro, mais ils ne permettent pas d'encapsuler un design system client complet et de le rappeler de manière fiable sur chaque génération. Les Skills de Claude résolvent exactement ce problème. On charge brand-client.md une fois, et chaque sortie respecte les tokens, les règles d'usage et les composants définis en amont. C'est non négociable en contexte agence.

Lovable et Bolt restent pertinents pour des prototypes rapides sans contrainte de marque, ou pour des projets personnels où la vitesse prime sur la cohérence. En contexte agence avec un client qui a une identité existante, un brief précis et des exigences de qualité, Claude + Skills est le seul outil qui permet de capitaliser le travail amont et de le réinjecter de manière fiable dans chaque génération.

Ce qu'on fait avec le résultat

La sortie de Claude est une base interne de travail, pas un livrable client. On ne l'envoie pas, on ne la montre pas en l'état. Ce point est non négociable.

En revanche, elle remplit une fonction précise dans notre workflow : elle compresse la phase de page blanche qui précède les vrais wireframes Figma. L'équipe design de Noqode repart de cette base pour produire deux à trois variantes de homepage client, chacune avec une direction artistique distincte, avant de passer en production Webflow.

Le gain est mesurable. La réflexion stratégique et le positionnement sont déjà documentés dans le brief Claude. Les tokens de design sont déjà posés dans le Skill brand. Les sections clés sont déjà structurées dans la sortie. Il reste à affiner, élever et livrer, pas à recommencer depuis zéro.

Ce workflow s'inscrit dans une logique plus large d'intégration de l'IA dans nos process d'agence, qu'il s'agisse du connecteur natif Claude x Webflow via le MCP pour opérer le CMS directement depuis une conversation, ou de la génération de contenu structuré pour l'AEO.

4 enseignements après plusieurs mois d'utilisation

1) Le contexte fait 80% du résultat

C'est la leçon la plus importante. Un prompt brillant sur un brief flou produit du générique. Un brief structuré de 3 pages avec un prompt simple de deux lignes produit de la justesse. Le temps investi dans le document d'instructions est toujours rentable.

2) Les Skills sont un investissement ponctuel à retour permanent

Ce qu'on faisait avant en collant des tokens de design dans chaque prompt est désormais capitalisé une fois pour toutes. Un design system documenté en Skill se réutilise sur chaque session sans perte de cohérence.

3) L'IA accélère la réflexion, elle ne la remplace pas

Le kick-off, la définition de l'arbre du site, le choix des références visuelles, la construction du ton de voix, la sélection des images : tout cela reste humain. Claude exécute mieux quand le travail stratégique en amont est sérieux.

4) Itérer vite est un avantage compétitif

Générer trois variantes de look and feel en quelques minutes, là où la même exploration prenait une demi-journée sur Figma, change la dynamique de validation avec le client. On arrive aux réunions avec des propositions concrètes, pas des intentions.

Questions fréquentes sur Claude + Skills pour le design web

Qu'est-ce qu'un Skill Claude exactement ?

Un Skill est un fichier Markdown attaché à un projet Claude que l'IA consulte comme référence permanente. Il peut contenir un design system complet, des règles de rédaction SEO, un process opérationnel ou tout autre cadre structuré. Claude l'applique à chaque génération sans que vous ayez à le répéter dans le prompt.

Peut-on envoyer une homepage générée par Claude directement à un client ?

Non. La sortie sert de base de travail interne pour la phase exploratoire. La version client est produite ensuite sur Figma par l'équipe design, puis intégrée sur Webflow. La génération Claude réduit la phase de page blanche, elle ne remplace pas le travail de design.

Quels Skills utiliser pour générer une homepage ?

Au minimum trois : un Skill brand spécifique au client avec le design system complet, le Skill frontend-design d'Anthropic pour la qualité du code et des patterns d'interface, et un Skill de rédaction pour encadrer le copywriting. Les trois combinés produisent une sortie cohérente visuellement et éditorialement.

Combien de temps faut-il pour mettre en place ce process ?

La génération elle-même prend 1 à 2 minutes. La préparation du contexte projet et la création du Skill brand demandent plusieurs heures de travail amont. C'est un investissement qui s'amortit sur la durée du projet et se réutilise sur chaque session de travail.

Quelle version de Claude faut-il utiliser ?

Nous utilisons Claude Opus 4.7 comme modèle par défaut sur nos projets. Pour les tâches de design et de génération complexes qui nécessitent une forte fidélité aux Skills, Claude Opus 4.7 produit des résultats plus précis.

Quelle différence entre un Skill et un Project Instruction dans Claude ?

Les Project Instructions sont des consignes textuelles permanentes attachées à un projet Claude, visibles et éditables directement dans l'interface. Les Skills sont des fichiers Markdown externes, plus structurés et plus denses, qui permettent d'encapsuler des systèmes complexes comme un design system complet ou un process de rédaction. En pratique, on utilise les Project Instructions pour le contexte projet (cible, positionnement, objectifs) et les Skills pour les référentiels techniques (design system, règles de code, guidelines SEO).

Claude peut-il remplacer Figma ?

Non. Claude génère une base exploratoire en HTML/CSS qui sert à accélérer la phase de réflexion visuelle. Figma reste l'outil de production des vrais livrables client : précision pixel-perfect, composants interactifs, prototypage, collaboration en temps réel et handoff développeur. Le workflow est séquentiel : Claude compresse la phase de page blanche, Figma prend le relai pour tout ce qui suit.

Claude peut-il générer un design system complet ?

Oui, avec les bons Skills et un brief structuré, Claude peut générer une première version d'un design system : palette de couleurs, échelle typographique, système de spacing, composants de base et leurs variantes. Le résultat est un point de départ solide, pas un livrable final. Le design system généré doit être revu, affiné et validé par un designer avant d'être utilisé en production. On l'utilise comme base pour construire le Skill brand du projet.

Comment structurer le prompt pour obtenir le meilleur résultat ?

Le prompt lui-même doit rester court et sobre. Toute la complexité doit être dans le brief projet et les Skills, pas dans le prompt. Une formulation comme "Crée une première version de la homepage en te basant sur les instructions projet et les Skills frontend-design et brand-client" suffit. Un prompt trop détaillé crée des conflits avec les instructions déjà posées dans les Skills et dégrade la qualité de la sortie.