Communitygithub.com

direction-design

Ayuda a asumir el rol de responsable de diseño: definir las necesidades de diseño a nivel de hoja de ruta, planificar las instancias y revisiones adecuadas, y construir la argumentación necesaria para defender un punto de vista de diseño e influir en las decisiones, incluso en organizaciones lideradas por la dirección técnica.

¿Qué es direction-design?

Esta skill está diseñada para líderes de diseño que necesitan operar a escala estratégica, más allá de proyectos individuales. Cubre tres capacidades clave: construcción de hojas de ruta de diseño, cadencia de instancias de gobernanza y elaboración de argumentarios para arbitrajes. A diferencia de herramientas tácticas de diseño, esta skill se enfoca en cómo planificar el trabajo de diseño en función de los hitos del portafolio de productos, cómo crear y evolucionar las instancias de revisión necesarias (como comités o demostraciones) basándose en necesidades reales, y cómo presentar argumentos de diseño en un lenguaje que resuene con los objetivos de negocio y técnicos. La skill enfatiza la necesidad de basar los argumentos en datos verificados, anticipar objeciones y ofrecer opciones de repli. Es útil para quienes trabajan en organizaciones donde las decisiones finales recaen en la dirección técnica o de producto, y buscan equilibrar la visión de diseño con las restricciones reales. La skill no depende de ninguna plataforma específica y aplica a cualquier contexto de diseño de productos digitales.

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

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Dirección de diseño: hoja de ruta, instancias y arbitrajes

Lo que cubre esta skill

Tres capacidades precisas: la hoja de ruta de diseño (diferente del encuadre de un tema puntual), la cadencia de instancias (diferente del diseño de un taller específico) y la construcción de argumentarios para arbitraje (diferente de una lectura estratégica del mercado, que ilumina el desafío sin construir el argumento).

Hoja de ruta de diseño

Una hoja de ruta de diseño se construye a partir de lo que ya se conoce del portafolio de productos y sus hitos, nunca de forma aislada. Responde una pregunta diferente a la hoja de ruta del producto: indica cuándo el trabajo de diseño debe estar listo para no retrasar el resto (maqueta disponible antes del presupuesto, sistema de diseño estabilizado antes de una nueva versión), en lugar de la fecha de lanzamiento de una funcionalidad.

Estructura en horizontes de confianza (ahora, luego, más adelante) en lugar de fechas fijas mientras la dependencia técnica no esté confirmada. Haz visible explícitamente dónde la hoja de ruta depende de una decisión que no pertenece al diseño (arbitraje de oferta, restricción técnica), en lugar de presentarla como completamente controlable desde el diseño.

Cadencia de instancias

Parte de los rituales reales ya existentes (revisiones de sprint, planificación trimestral, comité del sistema de diseño, demostraciones) en lugar de un calendario de gobernanza ideal. Una instancia se crea cuando su ausencia ya se ha sentido concretamente, nunca por anticipación.

Para cada instancia, saber quién debe estar presente y por qué. Las instancias evolucionan con la madurez del equipo: si un polo de diseño se estructura, con su tablero de tareas, sus objetivos y sus indicadores, la cadencia se reorganiza con él. Una cadencia fijada demasiado pronto se convierte en un freno.

Arbitrajes y argumentarios

Navegar, argumentar e influir en un arbitraje en la organización tal como funciona, con sus relaciones de poder reales, incluso cuando las decisiones son tomadas por la dirección técnica o de producto.

Tres elementos están presentes en un buen argumentario:

  • Vincularlo a una restricción u objetivo que el interlocutor ya reconozca como propio (entrega, presupuesto, plazo de negocio), en lugar de a un principio de diseño que solo le importa al diseño.
  • Anticipar la objeción técnica o de negocio más probable y responderla antes de que se plantee, basándose en lo que realmente se sabe del tema: restricciones de entrega, desafíos de negocio, estado de avance.
  • Proponer una opción de repli aceptable, nunca una elección única de todo o nada. Esto transforma un arbitraje en una negociación.

Solo construir un argumentario sobre datos verificados. Un número o hecho incierto debilita todo el argumentario en el momento en que se discute: escribir «por confirmar» cuesta menos que ser sorprendido en falta sobre un punto verificable.

Formato de un argumentario listo para defender

  1. La posición defendida, en una frase.
  2. Lo que cuesta no adoptarla, formulado en los términos del interlocutor (entrega, presupuesto, riesgo, plazo).
  3. La objeción más probable, con la respuesta ya preparada.
  4. Una opción de repli si la posición completa no es aceptada.

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.

Skills relacionados