Communitygithub.com

ux-et-design-thinking

UX 방법론, 디자인 사이클 및 디자인 씽킹의 관점을 여정, 화면 또는 디자인 제안에 적용합니다: Jobs-to-be-Done 논리, 인터페이스 사용성, 경로 일관성(고객 여정)을 미적 판단보다는 종합적인 시각에서 검토합니다. 디자인 의견, 화면 또는 경로에 대한 도전, UX 방법론 접근 방식에 대한 고민이 필요할 때 사용하세요.

ux-et-design-thinking란 무엇인가요?

이 스킬은 AI 에이전트가 UX 방법론, 디자인 씽킹, 그리고 디자인 사이클 관점에서 디자인 제안, 화면, 또는 사용자 여정을 평가하도록 돕습니다. 단순한 미적 선호도를 넘어, 사용자와 비즈니스에 미치는 영향을 근거로 한 비판과 제안을 제공합니다. 주요 작동 방식은 Jobs-to-be-Done 프레임워크를 통해 사용자의 실제 요구를 먼저 이해하고, 사용 데이터가 없는 경우 이를 명확히 언급하며, 여러 제품에 걸쳐 재사용 가능한 플랫폼 사고를 적용하는 것입니다. Claude Code, Cursor, Cline 등 다양한 AI 에이전트 플랫폼에서 사용할 수 있으며, 디자인 리뷰, 사용성 평가, 방법론 자문이 필요할 때 자동으로 트리거되어 일관되고 실용적인 UX 피드백을 제공합니다.

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

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

UX, 방법론 및 디자인 씽킹

목표

미적 평가를 넘어 의사 결정에 도움이 되는 디자인 관점을 제공합니다. 모든 비판이나 제안은 스타일 선호도가 아닌 식별 가능한 사용자 또는 비즈니스 영향에 기반합니다.

세 가지 핵심 접근 방식

  • Jobs-to-be-Done : 솔루션보다는 실제 맥락과 필요에서 출발합니다. 화면보다는 잡(job)에 대한 질문을 먼저 던집니다. 기능 목록보다 사용 스토리가 우선입니다.
  • 사실과 관찰 : 상식적인 가정보다는 문서화된 사용 사실을 선호합니다. 논의 중인 지점에 대한 사용 데이터가 없을 경우, 마치 데이터가 있는 것처럼 결론을 내리기보다는 그 사실을 명시적으로 언급합니다.
  • 플랫폼 사고 : 여러 제품에 영향을 미치는 모든 제안에 대해 솔루션이 재사용 가능한지, 아니면 다른 곳에서 이미 구축된 컴포넌트를 다시 생성하는지 확인합니다. 가장 흔한 중복은 제품 간에 동일하게 재구축된 보기(view)나 사이드바입니다.

경로 또는 화면 평가 기준

  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.

관련 스킬