Communitygithub.com

direction-design

Aide à tenir une position de responsable design : cadrer les besoins de conception à l'échelle d'une feuille de route plutôt que d'un seul sujet, planifier les bonnes instances et revues, et construire l'argumentaire qui permet de défendre un point de vue design et de peser dans un arbitrage, y compris dans une organisation pilotée par la direction technique. Déclencher dès qu'il faut préparer une feuille de route design, décider quelles instances créer ou faire évoluer, ou construire un argumentaire pour défendre une position dans un arbitrage ou une négociation de priorité.

What is direction-design?

direction-design is a Claude Code agent skill that aide à tenir une position de responsable design : cadrer les besoins de conception à l'échelle d'une feuille de route plutôt que d'un seul sujet, planifier les bonnes instances et revues, et construire l'argumentaire qui permet de défendre un point de vue design et de peser dans un arbitrage, y compris dans une organisation pilotée par la direction technique. Déclencher dès qu'il faut préparer une feuille de route design, décider quelles instances créer ou faire évoluer, ou construire un argumentaire pour défendre une position dans un arbitrage ou une négociation de priorité.

Works with~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/marcus-clay/design-skills/tree/main/skills/direction-design

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

Direction design : feuille de route, instances et arbitrages

Ce que cette skill couvre

Trois capacités précises : la feuille de route de conception (différente du cadrage d'un sujet ponctuel), la cadence d'instances (différente de la conception d'un atelier donné) et la construction d'argumentaires pour arbitrage (différente d'une lecture stratégique du marché, qui éclaire l'enjeu sans construire l'argumentaire).

Feuille de route de conception

Une feuille de route design se construit à partir de ce qui est déjà connu du portefeuille de produits et de leurs jalons, jamais isolément. Elle répond à une question différente de la roadmap produit : elle indique quand le travail de conception doit être prêt pour ne pas retarder la suite (maquette disponible avant le chiffrage, design system stabilisé avant une nouvelle version), plutôt que la date de sortie d'une fonctionnalité.

Structurer en horizons de confiance (maintenant, ensuite, plus tard) plutôt qu'en dates fermes tant que la dépendance technique n'est pas confirmée. Faire apparaître explicitement où la feuille de route dépend d'une décision qui n'appartient pas au design (arbitrage d'offre, contrainte technique), plutôt que de la présenter comme entièrement pilotable depuis le design.

Cadence d'instances

Partir des rituels réels déjà en place (revues de sprint, planification trimestrielle, comité du design system, démonstrations) plutôt que d'un calendrier de gouvernance idéal. Une instance se crée quand son absence s'est déjà fait sentir concrètement, jamais par anticipation.

Pour chaque instance, savoir dire qui doit y être et pourquoi. Les instances évoluent avec la maturité de l'équipe : si un pôle design se structure, avec son tableau de tâches, ses objectifs et ses indicateurs, la cadence se remanie avec lui. Une cadence figée trop tôt devient un frein.

Arbitrages et argumentaires

Naviguer, argumenter et peser dans un arbitrage dans l'organisation telle qu'elle fonctionne, avec ses rapports de force réels, y compris quand les décisions sont portées par la direction technique ou produit.

Trois éléments sont présents dans un bon argumentaire :

  • Le rattacher à une contrainte ou à un objectif que l'interlocuteur reconnaît déjà comme sien (livraison, budget, échéance business), plutôt qu'à un principe de conception qui ne parle qu'au design.
  • Anticiper l'objection technique ou business la plus probable et y répondre avant qu'elle soit posée, en s'appuyant sur ce qui est réellement su du sujet : contraintes de livraison, enjeux business, état d'avancement.
  • Proposer une option de repli acceptable, jamais un choix unique en tout ou rien. Cela transforme un arbitrage en négociation.

Ne construire un argumentaire que sur des données vérifiées. Un chiffre ou un fait incertain affaiblit l'argumentaire entier au moment où il est discuté : écrire « à confirmer » coûte moins cher que d'être pris en défaut sur un point vérifiable.

Format d'un argumentaire prêt à défendre

  1. La position défendue, en une phrase.
  2. Ce que coûte de ne pas la retenir, formulé dans les termes de l'interlocuteur (livraison, budget, risque, échéance).
  3. L'objection la plus probable, avec la réponse déjà prête.
  4. Une option de repli si la position complète n'est pas retenue.

Individual skills in this repo

This repo contains 10 individual skills — each has its own dedicated page.

brand-system

Système de marque sobre et éditorial, fourni comme marque par défaut : palette bleue sur fond clair, typographie Inter, dégradé doux, boutons en pilule, cartes à ombre légère, icônes Phosphor. Appliquer à tout livrable (présentation, document, page, artefact web) quand aucune autre charte n'est donnée, ou s'en servir comme modèle à remplacer par la charte d'un projet. À combiner avec `slides` (mises en page) et `pptx` (génération du fichier). Déclencher dès qu'on demande une mise en forme soignée, une identité visuelle, des tokens de design, ou un livrable client à l'aspect professionnel.

card-illustrations

Use when asked for an illustration, a thumbnail or a card picture for a card in a grid of content, such as a library of resources (guide, template, deck, article), when a set of cards needs one consistent treatment, or when product screenshots are shared as a reference for card illustrations. Two modes, "noir et blanc" (ink accent) or "accent couleur" (ten-hue palette), chosen by the argument or the wording of the request.

drawing-animated-diagrams

Use when a page needs an explanatory diagram (process, timeline, flow, structure, before/after) as an SVG React component that draws itself as it scrolls into view, in a minimalist ink-and-grey style, for a Next.js or React site. Also when asked for a "diagramme animé", "schéma qui se dessine".

marker-sketch

Dessine n'importe quelle idée, description, flux, architecture, organisation, wireframe ou scène sous forme de croquis au feutre sur papier à points (SVG noir, blanc, gris, ombres portées, un accent rare), de façon rapide et toujours avec la même construction. Quatre modes, Croquis (réponse directe), Live (réunion, atelier, échange oral), Atelier (schéma dense, mise en page automatique), Interactif (évolution maintenant, ensuite, plus tard, éléments déplaçables, formes qui changent). À utiliser dès qu'on demande un schéma, diagramme, flow, croquis, sketch, illustration, wireframe, maquette rapide, carte mentale, vue d'ensemble dessinée, "montre-moi", "dessine", "visualise", "schématise", ou une illustration animée ou interactive d'une évolution. Utiliser même si l'utilisateur ne parle pas de style : ce style est le défaut.

personal-os

OS personnel avec Claude Code. À utiliser pour créer ou faire évoluer un second cerveau (un « brain »), un dossier de fichiers Markdown qui sert de mémoire et de tableau de bord à Claude Code. Déclencher quand on veut structurer son travail, traiter une inbox (comptes rendus, transcriptions, notes), mettre en place des règles d'ingestion, des agents, des commandes ou des vues générées, préparer un 1:1, tenir un registre de décisions, ou propager un changement dans tous ses contenus.

ship-to-show

Framework en 7 phases pour transformer un prototype en case study portfolio avec vidéos animées, contenu narratif bilingue et pack d'intégration. Déclencher quand l'utilisateur veut documenter un prototype, créer un case study, produire des vidéos de démonstration d'une interface, ou publier un projet dans un portfolio. Entrée : un fichier de code ou un prototype. Sortie : case study complet publié avec vidéos.

signal-research

Scans current signals across UI/UX, product design, design strategy, AI-assisted workflows, the design toolchain, B2B/B2G/SaaS design, AI regulation and process automation, then generates content angles calibrated to the user's own positioning. Use when the user asks for content ideas, wants to know what is trending or debated in design, product or AI, needs an editorial plan, or names a topic to write about (search first, then differentiate).

slides

Système de création de présentations et de slides : tokens de design, catalogue de quinze mises en page, structure narrative et conventions de rédaction des titres. Appliquer à tout output de type deck, pitch, présentation client, keynote, support de formation ou rapport visuel. Déclencher dès que la demande implique des slides, un deck, une présentation PowerPoint, Google Slides, ou tout support visuel multi-pages. Prend la priorité sur une skill de génération de fichiers (pptx) pour les choix visuels et stylistiques : celle-ci gère la technique, slides gère les tokens, la structure narrative et les mises en page.

socle

Framework de création de projet digital en 5 étapes : Structurer, Outiller, Construire, Livrer, Élargir. Appliquer systématiquement au démarrage de tout nouveau projet web, app, SaaS, ou outil interne. Déclencher dès que l'utilisateur mentionne un nouveau projet, un MVP, un prototype, un produit à construire, une app à développer, ou demande comment organiser le développement d'un produit. Également pertinent quand l'utilisateur a une idée de produit et veut passer à la réalisation, ou quand il se demande par où commencer. Ce skill prend la priorité sur les approches ad-hoc ou les scaffoldings improvisés.

ux-et-design-thinking

Apporte un regard de méthodologie UX, de cycle de design et de design thinking sur un parcours, un écran ou une proposition de conception : logique Jobs-to-be-Done, ergonomie d'interface, cohérence de parcours (customer journey), avec prise de hauteur plutôt que jugement esthétique. Déclencher dès qu'on demande un avis de conception, qu'on veut challenger un écran ou un parcours, ou qu'on réfléchit à une approche méthodologique UX.

Related Skills