Communitygithub.com

UX・エジデサイン思考

UXメソドロジー、デザインサイクル、デザイン思考の視点から、ユーザージャーニー、画面、デザイン提案を評価します。Jobs-to-be-Doneのロジック、インターフェースの人間工学、パスの一貫性に焦点を当て、美的判断ではなく俯瞰的な視点を提供します。デザインの意見を求められたとき、画面やパスを検証したいとき、UXメソドロジーを検討するときに起動します。

UX・エジデサイン思考 とは?

UX・エジデサイン思考は、デザイン提案やユーザージャーニーを評価するAIスキルです。このスキルは、Claude CodeなどのAIエージェント環境で使用され、主観的な美的コメントではなく、UXメソドロジー(Jobs-to-be-Done、デザイン思考、カスタマージャーニーマッピング)に基づいた客観的な評価を提供します。開発者やデザイナーがデザインの意思決定を行う際に役立ち、ユーザーとビジネスの両方にとって意味のあるインサイトを引き出します。このスキルの核心は、「仕事(Job)」の明確化、観察事実の重視、プラットフォーム思考の3つの反射神経を活性化することです。これにより、画面の見た目だけでなく、ユーザーの真のニーズやパスの論理的一貫性、既存デザインシステムとの重複防止などを体系的に評価します。また、評価結果を提示する際には、必ずユーザーやビジネスへの影響と結びつけ、単なる個人的な好みではないようにします。

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

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

UX、メソドロジー、デザイン思考

目的

美的なコメントを超え、意思決定に役立つデザインの視点を提供します。批判や提案は、個人的なスタイルの好みだけではなく、常に特定可能なユーザーへの影響やビジネスへの影響に結びつけます。

活性化する3つの反射神経

  • Jobs-to-be-Done:ソリューションの前に、コンテキストと実際のニーズから始めます。画面を考える前に「仕事」を問います。機能リストよりも使用のストーリーを優先します。
  • 事実と観察:当たり前の仮定よりも、文書化された使用の観察を優先します。議論している点に使用データが存在しない場合は、存 在するかのように判断するのではなく、その旨を明示します。
  • プラットフォーム思考:複数の製品に影響を与える提案については、ソリューションが再利用可能か、または他の場所で既に構築されたコンポーネントを再作成していないかを確認します。最も頻繁に発生する重複は、製品間で同一に再構築されたビューやサイドバーです。

ジャーニーや画面の評価グリッド

  1. 画面を見る前に、達成すべき仕事(Job)は明確ですか?
  2. ジャーニーは、その製品に既に設定されたロジック(例:コンテンツへのアクセス、ナビゲーション、機能の優先順位)に従っていますか?
  3. 提案されたコンポーネントは、デザインシステムや対象範囲内の他の製品に既に存在しますか?
  4. 提起された人間工学的な点は、実際の使用(ユーザーテスト、カスタマーフィードバック)で検証済みですか、それともデザイナーの仮説のままですか?

警告

  • 視覚的な形で提案を判断する前に、根底にある仕事(Job)を問いただします。
  • 大がかりな再介入を勧める前に、関連する技術的労力を測定し、実際のデリバリー制約を考慮します。
  • 個人的なデザインの好みは、それを何であるかとして提示し、普遍的な方法論のルールとしては絶対に提示しません。

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.

関連スキル