원클릭으로 Manus에서 모든 스킬 실행

ux-patterns

스타5

포크0

업데이트2026년 4월 3일 19:51

UX design reference - research methods, design systems, accessibility (WCAG 2.2, EAA), UX laws, AI-driven workflows, tools (Figma, Penpot), and production best practices for 2024-2025. Use when making UX decisions, reviewing designs, implementing accessibility, selecting design tools, or applying UX principles.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

Rixmerz

Rixmerz/agentcockpit

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

UX Design Patterns and Practices

When to use this skill

Making UX research method or tool selection decisions
Reviewing designs for accessibility compliance (WCAG 2.2, EAA)
Selecting or evaluating design systems (Material 3, Apple HIG, Carbon, Polaris)
Choosing design tools (Figma, Sketch, Penpot, Framer)
Applying UX laws and cognitive principles to interface decisions
Implementing AI-driven design workflows
Evaluating UX career paths, certifications, or salary benchmarks

UX Research Method Decision Table

Scenario	Default method	Why
Validate a prototype before development	Usability testing (5 users)	Finds ~85% of usability issues with minimal cost
Understand information architecture	Card sorting (open)	Reveals users' mental models for content grouping
Measure satisfaction at scale	Survey (SUS/UMUX-Lite)	Quantitative data from large sample, benchmarkable
Compare two design variants	A/B testing	Statistical evidence for conversion/engagement differences
Audit an existing interface	Heuristic evaluation	Fast, expert-driven, catches obvious violations early
Understand long-term behavior	Diary study (7-14 days)	Captures real context, habits, and pain points over time
Identify drop-off points	Analytics + session recordings	Data-driven insights on where users struggle or abandon
Validate navigation structure	Tree testing	Tests findability without visual design influence
Understand user context deeply	Contextual inquiry	In-situ observation reveals tacit knowledge and workarounds

Design System Selection Guide

Context	Recommended system	Why
Android / cross-platform apps	Material 3 Expressive	Google-backed, 4x faster element location, extensive components
iOS / Apple ecosystem	Apple HIG (Liquid Glass)	Platform-native feel, iOS 26 unified versioning
Enterprise / data-heavy apps	IBM Carbon	Best documentation, accessibility-first, complex data patterns
E-commerce / Shopify ecosystem	Shopify Polaris	i18n optimized, commerce-specific patterns
Developer tools	GitHub Primer	Developer-first, code-oriented components
Large-scale SaaS	Atlassian Design System	Proven at scale, rich pattern library
Chinese market / Ant ecosystem	Ant Design 5	CSS-in-JS, extensive component set, large community
Microsoft ecosystem	Fluent 2	Cross-platform (Windows, Web, iOS, Android)
Brand differentiation required	Custom system	When existing systems conflict with brand identity

Design Tool Selection Matrix

Criteria	Figma	Sketch	Penpot	Framer
Best for	Team collaboration, full workflow	macOS-focused design	Open-source, self-hosted	No-code production sites
Platform	Web + Desktop (all OS)	macOS only	Web + self-hosted	Web
AI features	Generate, Rewrite, Search	Limited	None (planned)	AI Wireframer, AI Pages
Prototyping	Advanced (variables, conditions)	Basic + third-party	Basic interactions	Full site with CMS
Dev handoff	Dev Mode (paid)	Inspector (free)	Inspect mode (free)	Code export
Pricing (team)	$15/editor/mo	$12/editor/mo	Free (self-hosted)	$15/seat/mo
Open source	No	No	Yes (MPL 2.0)	No
Design tokens	Variables (native)	Via plugins	Native support	Limited
Key advantage	Market leader, $749M rev 2024	Native macOS performance	No vendor lock-in	Design-to-production

Core Web Vitals Targets (2024-2025)

Metric	Good	Needs Improvement	Poor
LCP (Largest Contentful Paint)	< 2.5s	2.5s - 4.0s	> 4.0s
INP (Interaction to Next Paint)	< 200ms	200ms - 500ms	> 500ms
CLS (Cumulative Layout Shift)	< 0.1	0.1 - 0.25	> 0.25

Supporting files

frameworks.md -- UX tools and frameworks (design, research, accessibility, AI)
design-patterns.md -- UX design patterns and 30 Laws of UX
architecture.md -- Design systems and UX architecture
best-practices.md -- Research methods, accessibility compliance, performance UX, ethical design
language-features.md -- UX industry landscape, trends, salaries, certifications

Related Skills

ui-patterns — Frontend architecture and component patterns
dev-patterns — Language-agnostic design principles

이 저장소의 다른 Skills

같은 저장소

testing

Rixmerz/agentcockpit

Testing strategy, patterns, and coverage optimization for quality assurance. Use this skill whenever the task involves deciding what to test, how to structure tests, what coverage to aim for, when to use mocks vs real dependencies, or how to write tests that actually catch bugs (not just pass). Also use when the user asks about test pyramids, flaky tests, integration vs unit, TDD, or improving an existing test suite.

2026-04-105

validation

Rixmerz/agentcockpit

Production readiness validation — runs all checks before merging or deploying. Use this skill whenever the task involves verifying that code is ready to ship: type checking, linting, tests passing, coverage thresholds, dead code, security issues, or any pre-merge checklist. Also use when the user asks "is this ready?", wants a pre-PR review, or needs to confirm nothing is broken after a refactor.

2026-04-105

swift-patterns

Rixmerz/agentcockpit

Swift architecture reference — SwiftUI, UIKit, Combine, async/await, actors, and production best practices for Swift 5.9/6.0 (2024-2025). Use when making architectural decisions, reviewing Swift code, or selecting libraries. Also use when the user mentions iOS development, macOS apps, or Apple platform development.

2026-04-035

ui-patterns

Rixmerz/agentcockpit

UI/Frontend architecture reference - React 19, Next.js 15, Vue 3, Svelte 5, Angular 19, CSS modern features, component libraries, state management, and production best practices for 2024-2025. Use when building frontend UIs, selecting frameworks, reviewing component code, or making frontend architecture decisions.

2026-04-035

csharp-patterns

Rixmerz/agentcockpit

C# architecture reference - frameworks, design patterns, ASP.NET Core, Entity Framework, Blazor, Unity, and production best practices for C# 12/13 and .NET 8/9 (2024-2025). Use when making architectural decisions, reviewing C# code, or selecting libraries.

2026-03-235

dev-patterns

Rixmerz/agentcockpit

Software development reference - design patterns, architecture patterns, CI/CD, cloud infrastructure, observability, security, and system design trade-offs. Language-agnostic. Use when making architectural decisions, designing systems, reviewing infrastructure, or evaluating technology choices.

2026-03-235

name	ux-patterns
description	UX design reference - research methods, design systems, accessibility (WCAG 2.2, EAA), UX laws, AI-driven workflows, tools (Figma, Penpot), and production best practices for 2024-2025. Use when making UX decisions, reviewing designs, implementing accessibility, selecting design tools, or applying UX principles.
user-invocable	true
argument-hint	[frameworks\|patterns\|research\|tools\|practices\|all]

UX Design Patterns and Practices

When to use this skill

Making UX research method or tool selection decisions
Reviewing designs for accessibility compliance (WCAG 2.2, EAA)
Selecting or evaluating design systems (Material 3, Apple HIG, Carbon, Polaris)
Choosing design tools (Figma, Sketch, Penpot, Framer)
Applying UX laws and cognitive principles to interface decisions
Implementing AI-driven design workflows
Evaluating UX career paths, certifications, or salary benchmarks

UX Research Method Decision Table

Scenario	Default method	Why
Validate a prototype before development	Usability testing (5 users)	Finds ~85% of usability issues with minimal cost
Understand information architecture	Card sorting (open)	Reveals users' mental models for content grouping
Measure satisfaction at scale	Survey (SUS/UMUX-Lite)	Quantitative data from large sample, benchmarkable
Compare two design variants	A/B testing	Statistical evidence for conversion/engagement differences
Audit an existing interface	Heuristic evaluation	Fast, expert-driven, catches obvious violations early
Understand long-term behavior	Diary study (7-14 days)	Captures real context, habits, and pain points over time
Identify drop-off points	Analytics + session recordings	Data-driven insights on where users struggle or abandon
Validate navigation structure	Tree testing	Tests findability without visual design influence
Understand user context deeply	Contextual inquiry	In-situ observation reveals tacit knowledge and workarounds

Design System Selection Guide

Context	Recommended system	Why
Android / cross-platform apps	Material 3 Expressive	Google-backed, 4x faster element location, extensive components
iOS / Apple ecosystem	Apple HIG (Liquid Glass)	Platform-native feel, iOS 26 unified versioning
Enterprise / data-heavy apps	IBM Carbon	Best documentation, accessibility-first, complex data patterns
E-commerce / Shopify ecosystem	Shopify Polaris	i18n optimized, commerce-specific patterns
Developer tools	GitHub Primer	Developer-first, code-oriented components
Large-scale SaaS	Atlassian Design System	Proven at scale, rich pattern library
Chinese market / Ant ecosystem	Ant Design 5	CSS-in-JS, extensive component set, large community
Microsoft ecosystem	Fluent 2	Cross-platform (Windows, Web, iOS, Android)
Brand differentiation required	Custom system	When existing systems conflict with brand identity

Design Tool Selection Matrix

Criteria	Figma	Sketch	Penpot	Framer
Best for	Team collaboration, full workflow	macOS-focused design	Open-source, self-hosted	No-code production sites
Platform	Web + Desktop (all OS)	macOS only	Web + self-hosted	Web
AI features	Generate, Rewrite, Search	Limited	None (planned)	AI Wireframer, AI Pages
Prototyping	Advanced (variables, conditions)	Basic + third-party	Basic interactions	Full site with CMS
Dev handoff	Dev Mode (paid)	Inspector (free)	Inspect mode (free)	Code export
Pricing (team)	$15/editor/mo	$12/editor/mo	Free (self-hosted)	$15/seat/mo
Open source	No	No	Yes (MPL 2.0)	No
Design tokens	Variables (native)	Via plugins	Native support	Limited
Key advantage	Market leader, $749M rev 2024	Native macOS performance	No vendor lock-in	Design-to-production

Core Web Vitals Targets (2024-2025)

Metric	Good	Needs Improvement	Poor
LCP (Largest Contentful Paint)	< 2.5s	2.5s - 4.0s	> 4.0s
INP (Interaction to Next Paint)	< 200ms	200ms - 500ms	> 500ms
CLS (Cumulative Layout Shift)	< 0.1	0.1 - 0.25	> 0.25

Supporting files

frameworks.md -- UX tools and frameworks (design, research, accessibility, AI)
design-patterns.md -- UX design patterns and 30 Laws of UX
architecture.md -- Design systems and UX architecture
best-practices.md -- Research methods, accessibility compliance, performance UX, ethical design
language-features.md -- UX industry landscape, trends, salaries, certifications

Related Skills

ui-patterns — Frontend architecture and component patterns
dev-patterns — Language-agnostic design principles