Communitygithub.com

ux-et-design-thinking

以UX方法論、設計循環與設計思考的角度審視使用者旅程、畫面或設計提案:聚焦Jobs-to-be-Done、介面人因工程、旅程一致性,並提供高層次洞察而非純粹美學判斷。每當需要設計意見回饋、挑戰畫面或旅程、或思考UX方法論時即可觸發。

ux-et-design-thinking 是什麼?

此技能專為AI代理(如Claude Code、Cursor、Codex等)設計,目的在於以UX方法論、設計循環與設計思考的專業框架,對設計提案、使用者旅程或單一畫面提供結構化評估。其核心是超越單純的美學評論,將每項批評或建議連結至可識別的使用者影響或商業效益。技能採用三個主要思考習慣:Jobs-to-be-Done(從情境與真實需求出發)、事實與觀察(偏好使用數據而非假設)、以及平台思維(確保跨產品方案可複用)。此外,技能提供一套四步驟的旅程或畫面審查清單,協助代理檢查工作是否明確、是否符合既定的產品邏輯、元件是否已存在於設計系統中、以及人因工程觀點是否經過實證。最後,技能強調三個預防原則:在判斷視覺形式前先探究底層工作、在建議重大修改時評估技術成本、以及區分個人偏好與方法論規則。支援所有主流開發與設計協作平台。

相容平台~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.

相關技能