Communitygithub.com

ux-et-design-thinking

Aplica uma perspectiva de metodologia UX, ciclo de design e design thinking a um fluxo, tela ou proposta de design: lógica Jobs-to-be-Done, ergonomia de interface, coerência de jornada (customer journey), com visão estratégica ao invés de julgamento estético. Acione sempre que for solicitada uma opinião de design, para desafiar uma tela ou fluxo, ou ao pensar em uma abordagem metodológica de UX.

O que é ux-et-design-thinking?

Esta skill capacita um agente de IA a atuar como um consultor de experiência do usuário especializado, fornecendo análises profundas e acionáveis que vão além de comentários superficiais sobre estética. Em vez de opinar sobre cores ou estilos, a skill guia o agente a estruturar seu raciocínio em três pilares fundamentais: Jobs-to-be-Done (foco no contexto e necessidade real do usuário), fatos e observações documentados (priorizando evidências de uso sobre suposições), e pensamento de plataforma (identificando duplicações e promovendo reutilização de componentes entre produtos). A análise resultante avalia criticamente se o 'job' do usuário está claro antes de examinar a solução, se o fluxo respeita a lógica estabelecida do produto, se o componente já existe em um design system e se as suposições de ergonomia foram validadas com usuários reais. A skill é compatível com qualquer plataforma de agente que suporte ferramentas customizadas (como Claude Code, Cursor ou Codex) e se baseia em um documento SKILL.md que fornece uma 'grade de leitura' e 'garde-fous' (salvaguardas) para garantir que o feedback seja pragmático, baseado em evidências e respeite as restrições técnicas e de entrega do projeto. Ao usar esta skill, o agente se torna um parceiro de design estratégico, ajudando equipes a tomar decisões informadas que equilibram as necessidades do usuário, a coerência do produto e a viabilidade técnica.

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

Perguntar na sua IA favorita

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

Documentação

UX, metodologia e design thinking

Objetivo

Trazer um olhar de design que ajude a decidir, além do comentário estético. Toda crítica ou proposta deve estar vinculada a um impacto identificável no usuário ou no negócio, nunca a uma preferência de estilo isolada.

Três reflexos a mobilizar

  • Jobs-to-be-Done: partir do contexto e da necessidade real antes da solução. Perguntar pelo job antes de perguntar pela tela. A narrativa de uso vem antes da lista de funcionalidades.
  • Fatos e observação: preferir uma constatação de uso documentada a uma hipótese de senso comum. Quando não existirem dados de uso sobre o ponto em discussão, dizê-lo explicitamente em vez de decidir como se eles existissem.
  • Pensamento de plataforma: em toda proposta que envolva vários produtos, verificar se a solução é reutilizável ou se recria um componente já construído em outro lugar. As duplicações mais frequentes são visualizações ou barras laterais reconstruídas de forma idêntica de um produto para outro.

Grade de leitura de um fluxo ou tela

  1. O job a ser realizado está claro antes mesmo de olhar para a tela?
  2. O fluxo respeita a lógica já estabelecida para este produto (por exemplo: acesso a conteúdos, navegação, funcionalidades, nessa ordem de prioridade)?
  3. O componente proposto já existe no design system, ou em outro produto do escopo?
  4. O ponto de ergonomia levantado foi verificado na prática (teste de usabilidade, retorno de cliente) ou continua sendo uma hipótese do designer?

Salvaguardas

  • Questionar o job subjacente antes de julgar uma proposta por sua forma visual.
  • Medir o esforço técnico associado antes de recomendar uma intervenção pesada, baseando-se nas restrições reais de entrega.
  • Apresentar uma preferência pessoal de design pelo que ela é, e nunca como uma regra metodológica universal.

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.

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é.

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.

Habilidades Relacionadas