Communitygithub.com

direction-design

Ajuda a assumir uma posição de liderança em design: definir necessidades de design no nível do roadmap em vez de um único tópico, planejar as instâncias e revisões adequadas, e construir argumentos para defender um ponto de vista de design e influenciar decisões, mesmo em organizações lideradas pela direção técnica.

O que é direction-design?

Esta skill capacita designers a atuarem como líderes de design, indo além do trabalho de design tático. Ela fornece estrutura para três áreas cruciais: criar roadmaps de design que se alinham com portfólios de produtos e marcos técnicos; estabelecer a cadência de instâncias de design (reuniões, revisões) baseada em rituais existentes e necessidades reais; e construir argumentos para arbitragem que abordem restrições e objetivos reconhecidos por stakeholders técnicos e de produto. A skill enfatiza que roadmaps de design devem ser estruturados em horizontes de confiança, instâncias devem evoluir com a maturidade da equipe, e argumentos devem incluir opções de fallback aceitáveis. É útil para qualquer designer ou líder de design que participe de roadmapping, criação de processos de design ou negociações de prioridades em equipes multifuncionais.

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

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Design de direção: roadmap, instâncias e arbitragens

O que esta skill abrange

Três capacidades precisas: o roadmap de design (diferente do escopo de um tópico pontual), a cadência de instâncias (diferente do design de uma oficina específica) e a construção de argumentos para arbitragem (diferente de uma leitura estratégica do mercado, que ilumina o problema sem construir o argumento).

Roadmap de design

Um roadmap de design é construído a partir do que já é conhecido do portfólio de produtos e de seus marcos, nunca de forma isolada. Ele responde a uma pergunta diferente do roadmap do produto: indica quando o trabalho de design deve estar pronto para não atrasar o restante (maquete disponível antes da estimativa, design system estabilizado antes de uma nova versão), em vez da data de lançamento de uma funcionalidade.

Estruture em horizontes de confiança (agora, depois, mais tarde) em vez de datas fixas até que a dependência técnica seja confirmada. Explicite onde o roadmap depende de uma decisão que não pertence ao design (arbitragem de oferta, restrição técnica), em vez de apresentá-lo como totalmente controlável pelo design.

Cadência de instâncias

Parta dos rituais reais já existentes (revisões de sprint, planejamento trimestral, comitê do design system, demonstrações) em vez de um calendário de governança ideal. Uma instância é criada quando sua ausência já foi sentida concretamente, nunca por antecipação.

Para cada instância, saiba dizer quem deve estar presente e por quê. As instâncias evoluem com a maturidade da equipe: se um polo de design se estrutura, com seu quadro de tarefas, objetivos e indicadores, a cadência é reformulada junto com ele. Uma cadência fixada cedo demais se torna um entrave.

Arbitragens e argumentos

Navegar, argumentar e influenciar em uma arbitragem na organização como ela funciona, com suas relações de poder reais, inclusive quando as decisões são tomadas pela direção técnica ou de produto.

Três elementos estão presentes em um bom argumento:

  • Vincule-o a uma restrição ou objetivo que o interlocutor já reconhece como seu (entrega, orçamento, prazo de negócio), em vez de um princípio de design que só fala ao design.
  • Antecipe a objeção técnica ou de negócio mais provável e responda a ela antes que seja feita, apoiando-se no que realmente se sabe sobre o assunto: restrições de entrega, questões de negócio, status de andamento.
  • Proponha uma opção de recuo aceitável, nunca uma escolha única do tipo tudo ou nada. Isso transforma uma arbitragem em negociação.

Construa um argumento apenas com dados verificados. Um número ou fato incerto enfraquece todo o argumento no momento em que é discutido: escrever "a confirmar" custa menos do que ser pego em erro em um ponto verificável.

Formato de um argumento pronto para defender

  1. A posição defendida, em uma frase.
  2. O que custa não adotá-la, formulado nos termos do interlocutor (entrega, orçamento, risco, prazo).
  3. A objeção mais provável, com a resposta já pronta.
  4. Uma opção de recuo caso a posição completa não seja adotada.

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.

Habilidades Relacionadas