Design Original
Exécutez une session interactive, axée sur les questions qui transforme un produit ou un sujet en un langage de design complet — un monde visuel cohérent à partir duquel chaque écran, cadre, icône, illustration et animation est tiré comme un "artefact" — et délivrez-le sous la forme d'un Design Language Brief rempli. Cela fonctionne pour tout livrable visuel : une infographie, un storyboard vidéo, un site web ou une UI/UX d'application mobile. Le principe directeur : l'originalité ne consiste pas à être unique — elle consiste à être cohérent en interne autour d'une idée centrale. Ne demandez pas "comment rendre cela unique ?" ; demandez "quelle est la manifestation visuelle de l'idée centrale ?". Le changement le plus important imposé par cette compétence : ne concevez pas des écrans — concevez un monde. Tout le reste est un élément de ce monde.
Quand l'utiliser / quand ne pas l'utiliser
- À utiliser lorsque l'utilisateur a besoin d'une identité visuelle ou d'une direction artistique originale, ou lorsqu'un design existant semble générique/par défaut IA et a besoin d'une idée unificatrice.
- Si l'utilisateur a besoin d'un guide de style de marque pratique (palette, polices, ambiance pour la génération d'actifs) plutôt que d'un monde original →
skills/creative/creative-strategist; le brief de cette compétence peut alimenter celui-ci. - Si le langage de design existe déjà et que l'utilisateur a juste besoin d'actifs → allez directement à la compétence de production pour le support (voir Phase 9).
- Si le problème est la structure/l'utilisabilité de l'UI plutôt que l'identité visuelle →
skills/frontend-design/frontend-orchestrator.
Comment exécuter cette compétence (à lire en premier)
Il s'agit d'une conversation facilitée, pas d'un formulaire à remplir. Suivez ces règles :
- Une phase à la fois. Posez la ou les questions ciblées pour la phase en cours, attendez la réponse, reformulez-la en une ou deux phrases, puis passez à la suite. Ne collez jamais les sept phases en une fois.
- Proposez toujours une recommandation. Pour chaque question, suggérez 2 à 4 options concrètes (dont une "(recommandé)" en premier) afin que l'utilisateur puisse réagir au lieu d'inventer à partir de rien. Ils peuvent toujours répondre librement.
- Utilisez des questions structurées lorsque l'hôte le permet. Dans Claude Code, préférez l'outil
AskUserQuestionpour les phases basées sur des options. Dans d'autres agents, demandez en texte brut avec une courte liste d'options étiquetées. - Recueillez des inspirations visuelles en direct sur le web aux Phases 1.5 et 6 (voir references/inspiration-browsing.md). Choisissez la méthode de navigation qui correspond à l'agent hôte.
- Capturez les décisions au fur et à mesure dans un Design Language Brief en cours (modèle dans assets/design-language-brief-template.md).
- Passez par le Test d'Originalité avant de produire la sortie finale. Ne le sautez pas.
- Passez le relais à une compétence de production pour le support choisi (voir references/medium-playbooks.md).
Copiez cette checklist dans vos notes de travail et cochez les éléments :
Progrès du Design Language :
- [ ] Phase 0 : Cadrer le monde (support, sujet, public)
- [ ] Phase 1 : Métaphore centrale (une phrase)
- [ ] Phase 1.5 : Balayage d'inspiration (web)
- [ ] Phase 2 : Univers visuel (vocabulaire)
- [ ] Phase 3 : ADN du design (formes / couleurs / mouvement / texture)
- [ ] Phase 4 : Système de mascotte (si applicable)
- [ ] Phase 5 : La contrainte signature
- [ ] Phase 6 : Inspiration cross-domaine (web)
- [ ] Phase 7 : Générer de nombreux concepts → choisir le monde
- [ ] Phase 8 : Test d'Originalité (5 questions) — PORTE
- [ ] Phase 9 : Rédiger le brief + transfert au support
Phase 0 — Cadrer le monde
Établissez ce que vous créez réellement avant tout élément visuel. Demandez :
- Que créons-nous ? → infographie · storyboard vidéo · site web · UI/UX d'application mobile · autre
- Quel est le produit/sujet, en une ligne ?
- À qui est-ce destiné, et que devraient-ils ressentir ?
Puis énoncez le changement de mentalité à voix haute pour l'utilisateur : "Nous n'allons pas concevoir des écrans. Nous allons concevoir un monde, et votre "+ support +" sera constitué d'artefacts de ce monde."
Ne vous attardez pas : si la demande répond déjà à ces questions (par exemple "un look original pour mon application de maths pour enfants"), reformulez les réponses comme des hypothèses en une ligne et passez directement à la Phase 1 — la règle interactive s'applique aux questions de design, pas à redemander ce que l'utilisateur a déjà dit.
Phase 1 — Définir la métaphore centrale
Tout découle de la métaphore centrale.
Posez la question clé : "Si ce produit était un objet ou un lieu physique, que serait-il ?"
Proposez des pistes en fonction du domaine (elles proviennent de la méthode source) :
| Type de produit | Métaphore possible |
|---|---|
| Application de maths / apprentissage | Blocs de construction |
| Assistant IA / tuteur | Sage Mentor |
| Application finance / trading | Centre de commandement |
| Application de voyage | Journal de l'explorateur |
| Application de connaissance / docs | Bibliothèque vivante |
Insistez pour une métaphore, pas trois. Ensuite, rédigez le langage de design en une phrase : "Ceci est un [métaphore] — donc ça ressemble à [sentiment/monde]."
S'ils ne peuvent pas le dire en une phrase, la métaphore n'est pas encore assez précise — continuez à l'affiner.
Phase 1.5 — Balayage d'inspiration (web)
Avant de définir le vocabulaire, recueillez des références réelles pour la métaphore et l'ambiance choisies. Suivez references/inspiration-browsing.md : parcourez cosmos.so, Pinterest, Savee, Dribbble, Behance, Are.na pour la métaphore + l'ambiance, collectez 8 à 15 références, et notez les motifs récurrents (éclairage, température de couleur, composition, texture, formes). Résumez les motifs à l'utilisateur avant de continuer.
Phase 2 — Construire un univers visuel
Listez tout ce qui existe dans ce monde. Cela devient votre vocabulaire visuel.
Avec la métaphore fixée, réfléchissez avec l'utilisateur à chaque objet, surface, personnage et texture qui vit dans ce monde. Exemple pour Bibliothèque vivante : Livres, Étagères, Notes, Encre, Tampons, Marque-pages, Texture de papier.
Ensuite, mappez explicitement le vocabulaire sur les couches de design :
| Objet du monde | Devient |
|---|---|
| (ex. Livres, Tampons) | Icônes |
| (ex. Croquis dans la marge) | Illustrations |
| (ex. Tourner la page, bavure d'encre) | Animations / mouvement |
| (ex. Étagères, fiches) | Éléments UI / mise en page |
| (ex. Encre, papier, cuir) | Couleurs |
| (ex. Titres manuscrits) | Typographie |
Visez un vocabulaire de 6 à 10 éléments concrets. Cette liste est la source de vérité pour tout ce qui suit.
Phase 3 — Créer votre ADN de design
Définissez les règles système que tout suivra.
Verrouillez quatre dimensions. Gardez chacune serrée — les contraintes ici sont ce qui donne l'impression d'avoir été conçu :
- Formes — 2 à 3 familles de formes (ex. rectangles arrondis, cercles, cubes)
- Couleurs — 3 à 5 couleurs principales avec des noms liés au monde (ex. Bleu profond, Bleu électrique, Jaune chaud, Gris doux)
- Mouvement — une philosophie en une phrase (ex. "élastique et ludique, avec un but")
- Texture — un langage (ex. "papier, dessiné à la main, esquissé")
Enregistrez les valeurs hexadécimales exactes pour les couleurs et l'intention concrète d'easing/timing pour le mouvement afin que le brief soit prêt à être construit.
Phase 4 — Concevoir un système de mascotte (quand cela convient)
Une mascotte donne à votre produit un visage et une personnalité, et devient le cœur du monde.
Demandez si une mascotte sert ce projet. C'est puissant pour les produits axés sur l'apprentissage, la consommation, les enfants et la marque ; souvent omis pour les outils entreprise/finance ou minimalistes. Si oui, définissez :
- Qui/ce que c'est (ex. Robot Curieux, Renard Sage, Petit Scientifique, Constellation Vivante)
- Personnalité en 3 adjectifs
- Comment il apparaît sur le support (états vides, chargement, intégration, narrateur dans une vidéo, guide dans une infographie)
Pourquoi c'est important : connexion émotionnelle, mémorabilité, et cela unifie toute l'expérience.
Phase 5 — Créer la contrainte signature
Les contraintes ne limitent pas la créativité. Elles créent l'identité.
Définissez une règle que le design ne transgressera jamais. Cette seule décision est souvent ce qui rend un langage reconnaissable :
| Contrainte | Style résultant |
|---|---|
| Pas de photos autorisées | propre, illustré (style Zenn) |
| Tout est en blocs géométriques | structuré (style appli de maths) |
| Seulement noir, blanc + un accent | net, linéaire (style Linear) |
| Chaque illustration doit sembler dessinée à la main | chaleureux, humain (style Excalidraw) |
Rédigez la contrainte comme une phrase exécutoire : "Dans ce monde, nous ne ___ jamais / nous ___ toujours."
Phase 6 — S'inspirer de domaines non liés (web)
Ne copiez pas les concurrents. Empruntez à d'autres mondes.
Tirez l'inspiration de domaines extérieurs à la catégorie du produit pour rester frais : Architecture, Nature, Jouets, Manuscrits anciens, Diagrammes scientifiques, Missions spatiales, Machinerie industrielle. Utilisez references/inspiration-browsing.md pour parcourir 2 à 3 domaines non liés et en extraire des idées transférables (un système de grille de l'architecture, une histoire de couleurs de la nature, un style d'étiquetage de diagrammes scientifiques). Rapportez 3 à 5 "emprunts" concrets.
Phase 7 — Générer de nombreux concepts, puis choisir le monde
Une idée centrale. De nombreux mondes. La quantité crée la possibilité du génie.
Générez un grand lot de courtes directions de concepts — chacune un "monde" différent exprimant la même idée centrale (ex. Musée, Vaisseau spatial, Académie magique, Tableau de détective, Cerveau vivant… visez 20 à 50 concepts d'une ligne). La plupart seront moyens ; vous cherchez celui qui est extraordinaire.
Présentez-les groupés, laissez l'utilisateur réagir, puis réduisez à 1 direction principale (optionnellement 1 à 2 sauvegardes). Pour un grand lot, vous pouvez déléguer un sous-agent ou un workflow pour développer les concepts, mais gardez l'utilisateur dans la boucle de sélection.
Phase 8 — Le Test d'Originalité (PORTE)
Avant de produire quoi que ce soit, passez les cinq questions. Chaque réponse doit être "oui". Si l'une est "non", revenez à la phase pertinente.
- Puis-je expliquer le langage visuel en une phrase ? (→ Phase 1)
- Chaque élément vient-il de la même métaphore ? (→ Phase 2)
- Puis-je retirer le logo et toujours identifier le produit ? (→ Phase 3/5)
- Un enfant dessinerait-il le même langage de design ? (est-ce simple et clair ? → Phase 3)
- Cela ressemble-t-il à un monde plutôt qu'à une UI ? (→ global)
Énoncez chaque question et son verdict à l'utilisateur explicitement.
Phase 9 — Rédiger le brief et passer le relais
Remplissez assets/design-language-brief-template.md avec chaque décision verrouillée et sauvegardez-le dans le projet de l'utilisateur (suggérez design-language.md). Ensuite, traduisez le langage dans le support choisi en utilisant references/medium-playbooks.md (lisez-le à cette phase pour les tableaux de traduction par support), et proposez d'invoquer la compétence de production correspondante :
- Infographie / graphique social →
skills/creative/social-graphics,skills/creative/image-generation, ouskills/creative/brand-asset - Storyboard vidéo →
skills/creative/remotion-script-writer,skills/creative/product-video, ouskills/creative/creative-strategist - Site web →
skills/frontend-design/frontend-orchestrator,skills/frontend-design/design-foundation,skills/frontend-design/color-system,skills/frontend-design/typography-system - UI/UX d'application mobile →
skills/frontend-design/frontend-orchestrator,skills/frontend-design/component-architecture,skills/frontend-design/layout-system
Le brief est le contrat : chaque actif en aval doit être un artefact du monde qu'il décrit.
Format de sortie requis
Le livrable est le brief complété — toujours la structure exacte de assets/design-language-brief-template.md, chaque section remplie, aucune sautée :
# Design Language Brief — [Produit / Sujet]
## 1. Métaphore centrale (le langage de design en une phrase)
## 2. Univers visuel (6 à 10 éléments de vocabulaire mappés aux icônes/illustrations/mouvement/UI/couleurs/typo)
## 3. ADN de design (formes · couleurs avec hex · une philosophie de mouvement · un langage de texture)
## 4. Système de mascotte (qui/personnalité/où il apparaît — ou "aucun" avec raison)
## 5. Contrainte signature ("Dans ce monde, nous ne ___ jamais / nous ___ toujours")
## 6. Inspiration cross-domaine (3 à 5 emprunts concrets avec sources)
## 7. Direction choisie (le monde gagnant + 1 à 2 sauvegardes)
## 8. Test d'Originalité (les cinq questions avec verdicts OUI explicites)
## 9. Notes de production (transfert au support : quelle compétence, ce qu'elle doit respecter)
Deux sessions exécutées sur le même produit doivent produire des briefs avec ces neuf mêmes sections dans cet ordre ; seul le contenu créatif diffère.
Erreurs courantes
| Erreur | Correctif |
|---|---|
| Déverser les 7 phases en un seul questionnaire | Une phase à la fois ; reformulez chaque réponse |
| Choisir 3 métaphores "pour être sûr" | Forcez-en exactement une — les métaphores mélangées tuent la cohérence |
| Sauter le balayage d'inspiration web | Les références réelles empêchent une sortie générique par défaut IA |
| Pas de contrainte signature | Sans contrainte, il n'y a pas d'identité (la Phase 5 n'est pas optionnelle) |
| Concevoir des écrans/cadres avant le monde | Définissez le monde en premier ; les artefacts viennent en dernier |
| Livrer sans le Test d'Originalité | La porte des 5 questions est obligatoire |
Intégration
skills/creative/creative-strategist→ consomme : l'ADN de design du brief (couleurs, texture, mouvement) comme matière première pour un guide de style pratique de génération d'actifs.skills/creative/social-graphics,skills/creative/image-generation,skills/creative/brand-asset→ consomment : le brief ; chaque actif généré doit être un artefact du monde (pipeline d'images du dépôt :docs/creative_cli.py, modèlefal-ai/nano-banana-pro).skills/creative/product-video,skills/creative/talking-head,skills/creative/remotion-script-writer→ consomment : le brief comme le monde visuel dont leurs beats, décors et scènes sont tirés.skills/frontend-design/frontend-orchestrator→ consomme : le brief comme la couche d'identité au-dessus de ses compétences de système de design (design-foundation,color-system,typography-system,layout-system,component-architecture).
L'essentiel
Concevez un monde. Tout le reste n'est qu'un élément de ce monde. Chaque écran, vignette, image, icône et animation doit donner l'impression d'être un artefact du même univers.