Communitygithub.com

UX-ET-Design-Thinking

以 UX 方法论、设计周期和设计思维审视用户旅程、界面或设计提案:聚焦 Jobs-to-be-Done 逻辑、界面人体工程学、旅程一致性(客户旅程),而非美学评判。当寻求设计意见、挑战界面或流程、或考虑 UX 方法论方法时触发。

UX-ET-Design-Thinking 是什么?

该技能提供了一种系统化的 UX 设计审查方法,帮助开发者、产品经理和设计师在设计决策中超越纯美学偏好。它基于三项核心原则:Jobs-to-be-Done(从真实需求和上下文出发而非解决方案)、基于事实的观察(优先于假设,并在缺乏数据时明确指出)、以及平台思维(跨产品复用而非重复劳动)。该技能通过四个关键问题提供了检查流程或界面的框架:工作是否明确、流程是否与已建立的产品逻辑一致、设计系统或其它产品中是否有相同组件、人体工程学观点是否得到用户测试或客户反馈验证。它适用于任何设计审查、界面挑战、或 UX 方法讨论场景,并且与所有 AI 编码代理(如 Claude Code、Cursor、Codex 等)兼容,因为这些代理可以自然地集成这些原则到代码生成和设计建议工作流中。

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

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

UX、方法学和设计思维

目标

提供超越美学评论的设计视角,帮助做出决策。任何批评或建议都应关联可识别的用户或业务影响,而非仅凭个人风格偏好。

要养成的三个习惯

  • Jobs-to-be-Done:从上下文和真实需求出发,而非解决方案。先问“工作是什么”,再问“屏幕如何”。使用叙事优先于功能列表。
  • 事实与观察:优先采用有据可查的使用观察,而非想当然的假设。当所讨论的点缺乏使用数据时,明确说明,而不是假装存在。
  • 平台思维:对于任何涉及多个产品的提案,验证解决方案是否可复用,或者是否重复了其他产品中已存在的组件。最常见的重复是不同产品间完全相同的视图或侧边栏。

检查流程或界面的框架

  1. 在审视屏幕之前,待完成的任务是否已经清晰?
  2. 流程是否遵循已为该产品建立的逻辑(例如:按优先级顺序访问内容、导航、功能)?
  3. 提议的组件是否已存在于设计系统中,或该范围内的其他产品中?
  4. 引发的人体工程学问题是否经过实际使用验证(用户测试、客户反馈),还是仅仅停留在设计师假设层面?

安全护栏

  • 在评判提案的视觉形式之前,先质疑其底层任务。
  • 在建议进行重大重做之前,基于实际交付限制评估相关的技术成本。
  • 明确个人设计偏好的本质,绝不能将其视为普适方法学规则。

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.

相关技能