Communitygithub.com

Direction Design

Hilft, die Rolle eines Designverantwortlichen auszufüllen: Designanforderungen auf Roadmap-Ebene statt für Einzelthemen rahmen, passende Gremien und Reviews planen und Argumentationen aufbauen, um eine Designposition zu vertreten und in Abwägungen Gewicht zu haben – auch in einer von der technischen Leitung geprägten Organisation. Einsetzen, wenn eine Design-Roadmap vorbereitet, Gremien geschaffen oder weiterentwickelt oder eine Position in einer Abwägung oder Priorisierungsverhandlung verteidigt werden muss.

Was ist Direction Design?

Diese Skill unterstützt Designverantwortliche dabei, ihre Rolle strategisch auszufüllen: Sie hilft, eine Design-Roadmap zu erstellen, die sich an bestehenden Produktportfolios und Meilensteinen orientiert, geeignete Gremien und Rhythmen zu etablieren, die aus der Praxis heraus wachsen, und überzeugende Argumentationen für Abwägungen und Priorisierungen aufzubauen – auch in stark von der technischen Leitung geprägten Umgebungen. Die Skill eignet sich für agile und skalierte Entwicklungskontexte, in denen Design nicht isoliert, sondern eng mit Produkt- und Technikteams zusammenarbeitet. Sie vermittelt praktische Methoden wie Horizontstrukturierung für Roadmaps, bedarfsorientierte Gremienbildung und datenbasierte Argumentationsaufbereitung mit Ausweichoptionen. Ziel ist es, Design-Themen auf Augenhöhe zu positionieren und Entscheidungen aktiv mitzugestalten.

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

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Direction Design: Roadmap, Gremien und Abwägungen

Was diese Skill abdeckt

Drei konkrete Fähigkeiten: die Design-Roadmap (anders als die Rahmung eines einzelnen Themas), die Taktung von Gremien (anders als die Gestaltung eines bestimmten Workshops) und die Erstellung von Argumentationen für Abwägungen (anders als eine strategische Marktanalyse, die den Kontext beleuchtet, ohne die Argumentation aufzubauen).

Design-Roadmap

Eine Design-Roadmap wird auf Basis dessen erstellt, was bereits über das Produktportfolio und seine Meilensteine bekannt ist – niemals isoliert. Sie beantwortet eine andere Frage als die Produkt-Roadmap: Sie gibt an, wann die Designarbeit fertig sein muss, um den weiteren Ablauf nicht zu verzögern (Mockup vor der Aufwandsabschätzung, Designsystem vor einem neuen Release), nicht das Auslieferungsdatum einer Funktion.

Strukturieren Sie in Vertrauenshorizonte (jetzt, als nächstes, später) statt in feste Termine, solange die technische Abhängigkeit nicht bestätigt ist. Machen Sie explizit sichtbar, wo die Roadmap von einer Entscheidung abhängt, die nicht im Design liegt (Angebotsabwägung, technische Einschränkung), statt sie als vollständig aus dem Design heraus steuerbar darzustellen.

Taktung von Gremien

Gehen Sie von den tatsächlich bestehenden Ritualen aus (Sprint-Reviews, Quartalsplanung, Designsystem-Komitee, Demos), nicht von einem idealen Governance-Kalender. Ein Gremium wird erst dann geschaffen, wenn sein Fehlen sich konkret bemerkbar gemacht hat, niemals vorausschauend.

Wissen Sie für jedes Gremium, wer teilnehmen muss und warum. Gremien entwickeln sich mit der Reife des Teams: Wenn sich ein Design-Bereich mit eigenem Aufgabenboard, Zielen und Indikatoren strukturiert, wird die Taktung entsprechend angepasst. Eine zu früh eingefrorene Taktung wird zum Hemmnis.

Abwägungen und Argumentationen

Navigieren, argumentieren und Gewicht haben in einer Organisation, wie sie tatsächlich funktioniert, mit ihren realen Machtverhältnissen – auch wenn Entscheidungen von der technischen Leitung oder der Produktleitung getroffen werden.

Drei Elemente sind in einer guten Argumentation enthalten:

  • Verknüpfen Sie sie mit einer Einschränkung oder einem Ziel, das der Gesprächspartner bereits als sein eigenes anerkennt (Lieferung, Budget, Geschäftsfrist), statt mit einem Designprinzip, das nur im Design spricht.
  • Antizipieren Sie den wahrscheinlichsten technischen oder geschäftlichen Einwand und antworten Sie darauf, bevor er geäußert wird, gestützt auf das, was tatsächlich über das Thema bekannt ist: Lieferbeschränkungen, geschäftliche Aspekte, Fortschrittsstand.
  • Schlagen Sie eine akzeptable Ausweichoption vor, niemals eine einzige Alles-oder-Nichts-Entscheidung. Das verwandelt eine Abwägung in eine Verhandlung.

Bauen Sie eine Argumentation nur auf überprüften Daten auf. Eine unsichere Zahl oder Tatsache schwächt die gesamte Argumentation in dem Moment, in dem sie diskutiert wird: „Zu bestätigen“ zu schreiben kostet weniger, als bei einem überprüfbaren Punkt widerlegt zu werden.

Format einer verteidigungsbereiten Argumentation

  1. Die vertretene Position in einem Satz.
  2. Was es kostet, sie nicht zu übernehmen, formuliert in den Begriffen des Gesprächspartners (Lieferung, Budget, Risiko, Frist).
  3. Der wahrscheinlichste Einwand, mit der bereits vorbereiteten Antwort.
  4. Eine Ausweichoption, falls die vollständige Position nicht übernommen wird.

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.

Verwandte Skills