# UKP — Claude Design # Unité de Connaissance Professionnelle — Agents 21 (Design System) & 31 (Graphiste) > Source : NotebookLM "21-31-Claude-Design" — 20 sources — https://notebooklm.google.com/notebook/862f705c-b9c1-494f-b9fe-5503ecd1c393 > Généré le : 06/06/2026 > Statut : ✅ v1 — à enrichir si nouvelles sources disponibles > Agents consommateurs : 21 (Design System), 31 (Graphiste) --- ## 1. Qu'est-ce que Claude Design — définition et périmètre **Définition :** Claude Design est une plateforme spécialisée, propulsée par le modèle Opus 4.7, conçue pour transformer des concepts, des captures d'écran ou des fichiers Figma en prototypes interactifs, pitch decks et interfaces prêtes pour la production. **Différence avec Claude Artifacts :** Les Artifacts sont des fenêtres d'aperçu statiques ou des mini-applications au sein d'un chat standard. Claude Design est un environnement de travail complet capable de gérer des systèmes de design (Design Systems) complexes et des animations avancées. **Ce qu'il fait :** - Création de landing pages, maquettes d'applications (iOS/Android), présentations animées - Génération de composants UI via du code (HTML/CSS/React) - Gestion de systèmes de design avec tokens (couleurs hex, typographie, espacements) - Prototypage interactif à partir d'une capture d'écran ou d'un croquis **Ce qu'il ne fait pas :** - Ne gère pas le backend (bases de données, paiements) - Reste limité pour la collaboration d'équipe intensive (vs Figma) - Ne remplace pas les assets photo-réalistes (Gemini/Nano Banana reste supérieur pour ça) **Cas d'usage B2B Fidulia :** Idéal pour créer des landing pages d'audit pour experts-comptables, des présentations stratégiques pour notaires, des carrousels LinkedIn structurés — avec un rendu professionnel immédiat. --- ## 2. Capacités techniques concrètes **Formats de sortie :** - Code natif : HTML, CSS, JavaScript (React possible) - Export : ZIP, PDF pour présentations, envoi vers Canva - Pas d'export PNG natif direct — passer par capture ou Claude Code **Contrôle des dimensions :** - Contrôle strict des formats LinkedIn : 1080×1350 (visuels 4:5), 1584×396 (bannière profil) - Les dimensions sont spécifiables explicitement dans le prompt ou le Design System **Fidélité aux tokens hex :** - **Quasi-parfaite** quand les couleurs sont définies dans le Design System - On peut passer des codes précis (`#0C132A`, `#D70459`) — ils sont appliqués systématiquement aux composants - Sans Design System configuré, risque de dérive vers le "style maison" Claude (dégradés violets génériques) **Intégration Design System JSON :** - Possible d'importer un profil JSON définissant : palettes, typographie, espacements, ombres - Le JSON garantit la précision technique et la cohérence inter-visuels - Le Design System doit être "publié" dans le projet pour persister entre sessions **Composants vs images :** - Claude Design effectue un rendu de **composants réels** (boutons, formulaires, menus) interactifs et modifiables - Différence fondamentale avec la génération d'image (IA générative classique) : les éléments sont éditables en code --- ## 3. Workflow d'intégration avec un système de production agentique **Chaîne de production recommandée :** ``` Agent 21 (brief stratégique + tokens JSON) → Claude Design (production visuelle interactive) → Agent 31 (validation + export via Claude Code ou capture) → Publication ``` **Claude Design vs Claude.ai Projects :** - Claude Design **surpasse** les Projects classiques pour l'UI/UX : il utilise des "Design Skills" spécifiques et un canevas visuel dédié à l'itération graphique - Avantage : boucle de retouche visuelle native, aperçu immédiat - Limite : moins adapté à la production de documents Markdown ou briefs textuels (Claude Projects reste meilleur pour ça) **Claude Design vs Nano Banana (Gemini Image) :** - Pour les assets **photo-réalistes** : Gemini reste supérieur - Claude Design apporte de la valeur sur la **structure et la hiérarchie visuelle** des composants - Les deux sont complémentaires : Claude Design pour la structure, Nano Banana pour les fonds d'ambiance **Utilisation du DESIGN-BRIEF.md :** - Ce fichier peut servir d'**Instruction File** (système de prompt persistant) - L'agent lit ce fichier avant toute action pour appliquer les standards Fidulia (typographie, palette, ton) sans répétition manuelle dans chaque prompt --- ## 4. Mode Sketch et fonctionnalités avancées **Mode Croquis (Sketch Mode) :** - Permet de dessiner grossièrement des sections sur le canevas - Claude interprète ces formes pour créer ou modifier des composants UI en temps réel - Idéal pour prototyper rapidement la structure d'un carrousel (Hook → Story → CTA) avant production finale **Déploiement en ligne :** - Option **Handoff** : envoie le code vers Claude Code ou le déploie directement sur Vercel/Hostinger en quelques clics - Passage de la maquette au produit en ligne sans export manuel **Itération et retouches :** - Outil **Tweak** : demander des variations précises sur un élément sélectionné ("cadran de montre" vs "anneau", variation de couleur, etc.) - Modifications ciblées sans regénérer l'ensemble du visuel **Boucle Screenshot Review Pass :** - Fonctionnalité avancée : l'IA capture un screenshot de sa propre production, l'analyse, et corrige elle-même les imperfections visuelles avant l'export final - À utiliser systématiquement en phase de production Agent 31 pour garantir la qualité **Gestion des composants réutilisables :** - Les éléments créés peuvent être sauvegardés dans le Design System - Réutilisables d'un projet à l'autre → garantit l'identité visuelle Fidulia dans la durée --- ## 5. Limites et points de vigilance **Ce que Claude Design ne sait pas bien faire :** - Manipulation de logos complexes importés (risque de flou ou de mauvais détourage) - Intégration de polices personnalisées très spécifiques sans configuration manuelle préalable - Export PNG HD natif (nécessite Claude Code ou capture externe) **Risque AI Slop — comment l'éviter :** - Sans instructions précises, Claude produit un "style maison" : dégradés violets, look générique - **Règle absolue** : toujours forcer l'usage du Design System JSON Fidulia avant toute production - Ne jamais lancer une génération sans passer `DESIGN-BRIEF.md` comme contexte **Contraintes de licence — polices :** - Vigilance sur les polices générées automatiquement - Trinité Fidulia (bascule 2026-07-15) : **Playfair Display**, **Raleway**, **League Spartan** — toutes trois disponibles gratuitement sur Google Fonts (licence SIL Open Font). Les VF locales sont dans `Contexte/Design-System/Fonts/`. - Fallback CSS : Georgia (serif), system-ui (sans), Bebas Neue / Impact (numeric). Voir `tokens.css` pour la liste complète. - Sana Sans (asset historique achetée MyFonts) n'est plus utilisée par défaut mais reste disponible en fallback réactivable si besoin d'un rendu spécifique. **Cohérence inter-visuels :** - La cohérence repose **exclusivement** sur la configuration initiale du Design System - Si le Design System n'est pas "publié" dans le projet, le style peut dériver d'une session à l'autre - **Action obligatoire** : publier le FIDULIA-DESIGN-SYSTEM.json dans chaque projet Claude Design client avant toute production --- ## 6. Recommandations d'intégration pour Fidulia Claude Design apporte une valeur ajoutée sur **la vitesse de prototypage des carrousels** et la création de **pages de destination ultra-spécifiques** pour les professions de confiance. **Ordre d'intégration recommandé — 3 étapes :** **Étape 1 — Standardisation (Agent 21)** Créer un fichier `FIDULIA-DESIGN-SYSTEM.json` contenant tous les tokens : couleurs navy/magenta, typographies, espacements, rayons, ombres. Ce fichier est la source de vérité — tout le reste en dépend. **Étape 2 — Prototypage (Sketch Mode)** Utiliser le mode sketch pour définir la structure des carrousels LinkedIn (Hook → Story → CTA) directement sur le canevas de Claude Design, avant de passer à la production finale. **Étape 3 — Production finale (Agent 31)** Générer les versions HTML/CSS finales et utiliser la **Screenshot Review Pass** (boucle de capture d'écran) pour que l'IA vérifie et corrige elle-même les imperfections visuelles avant l'export. **Ce que Claude Design remplace :** - Partiellement Claude.ai Projects pour la production de composants UI LinkedIn - Le prototypage manuel HTML/CSS des structures de carrousels **Ce qu'il ne remplace pas :** - Nano Banana / Gemini pour les assets photo-réalistes et fonds d'ambiance - Claude.ai Projects pour les briefs textuels, SOPs, documents Markdown - Canva pour les exports PNG rapides et les modifications manuelles légères --- ## Annexe — Questions de suivi suggérées par NotebookLM 1. Comment configurer le fichier `FIDULIA-DESIGN-SYSTEM.json` avec les tokens ? 2. Comment lancer une boucle de correction via Screenshot Review Pass ? 3. Exemple de code pour un carrousel LinkedIn avec Claude Design ?