Communitygithub.com

ux-et-design-thinking

Aporta una visión de metodología UX, ciclo de diseño y design thinking sobre un recorrido, una pantalla o una propuesta de diseño: lógica Jobs-to-be-Done, ergonomía de interfaz, coherencia del recorrido (customer journey), con una perspectiva elevada en lugar de un juicio estético. Actívalo cuando se solicite una opinión de diseño, se quiera desafiar una pantalla o un recorrido, o se esté reflexionando sobre un enfoque metodológico UX.

¿Qué es ux-et-design-thinking?

Esta habilidad proporciona un enfoque estructurado de metodología UX, ciclo de diseño y design thinking para evaluar recorridos de usuario, pantallas o propuestas de diseño. Su objetivo es ir más allá de los comentarios estéticos superficiales, conectando cada crítica o sugerencia con un impacto medible en el usuario o en el negocio. Se basa en tres pilares fundamentales: Jobs-to-be-Done (entender el contexto y la necesidad real antes de la solución), hechos y observación (priorizar datos de uso documentados sobre hipótesis), y pensamiento de plataforma (evitar duplicaciones reutilizando componentes existentes en el ecosistema de productos). Incluye una grilla de evaluación para guiar el análisis de recorridos y pantallas, así como salvaguardas que ayudan a evitar sesgos personales y a considerar las restricciones técnicas y de entrega del equipo de desarrollo. Está diseñada para integrarse en asistentes de IA como Claude Code o Cursor, proporcionando un marco riguroso y reproducible para la crítica de diseño.

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

Preguntar en tu IA favorita

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

Documentación

UX, metodología y design thinking

Objetivo

Aportar una mirada de diseño que ayude a decidir, más allá del comentario estético. Toda crítica o propuesta se vincula a un impacto de usuario o de negocio identificable, nunca a una preferencia de estilo únicamente.

Tres reflejos a movilizar

  • Jobs-to-be-Done: partir del contexto y la necesidad real antes de la solución. Plantear la pregunta del trabajo antes que la de la pantalla. La narrativa de uso está antes que la lista de funcionalidades.
  • Hechos y observación: preferir una constatación de uso documentada a una hipótesis de sentido común. Cuando no existan datos de uso sobre el punto en discusión, decirlo explícitamente en lugar de decidir como si existieran.
  • Pensamiento de plataforma: en toda propuesta que involucre varios productos, verificar si la solución es reutilizable o si está recreando un componente ya construido en otro lugar. Las duplicaciones más frecuentes son vistas o barras laterales rehechas de manera idéntica de un producto a otro.

Grilla de lectura de un recorrido o una pantalla

  1. ¿El trabajo por realizar está claro antes incluso de mirar la pantalla?
  2. ¿El recorrido respeta la lógica ya establecida para este producto (por ejemplo: acceso a contenidos, navegación, funcionalidades, en ese orden de prioridad)?
  3. ¿El componente propuesto ya existe en el sistema de diseño, o en otro producto del ámbito?
  4. ¿El punto de ergonomía planteado ha sido verificado en el uso (prueba de usuario, comentario de cliente), o sigue siendo una hipótesis de diseñador?

Salvaguardas

  • Cuestionar el trabajo subyacente antes de juzgar una propuesta por su forma visual.
  • Medir el esfuerzo técnico asociado antes de recomendar una intervención pesada, apoyándose en las restricciones de entrega reales.
  • Presentar una preferencia personal de diseño por lo que es, y nunca como una regla 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.

Skills relacionados