skills.rest
MotWakorb
MotWakorbCOMMUNITY
Explore all skills by this author →
GitHub

ux-designer

Enforce API-first design contracts and token-based design systems for consistent UI.

2|Updated Apr 19, 2026
Search Tags:#ui#accessibility#wireframes#ux#api-first#design-systems#heuristic-evaluation
One-click install
npx skills add https://github.com/MotWakorb/claude-agent-dev-team --skill ux-designer-motwakorb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-designer
Source: https://github.com/MotWakorb/claude-agent-dev-team/tree/main/ux-designer
Command: npx skills add https://github.com/MotWakorb/claude-agent-dev-team --skill ux-designer-motwakorb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

API-driven products often suffer from inconsistent UX, fragmented design systems, and accessibility gaps as data shapes and interactions come from backend services. This skill provides a unified, user-centered governance model that aligns product teams around a shared design language and API contracts.

Core Features & Use Cases

  • API-first design discipline that maps UI actions to backend capabilities
  • Design tokens, components, and system documentation to ensure consistency across web and mobile
  • Heuristic evaluation and accessibility audits as a default guardrail during reviews
  • Wireframes, component specs, and information architecture guidance to accelerate handoffs and shipping
  • Identity and conflict-resolution perspectives to maintain user advocacy throughout the product lifecycle

Quick Start

Audit the current UI against API contracts and outline a tokenized design system to guide future work.

Frequently Asked Questions about ux-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I align UI design with API contracts to ensure consistent UX?▼

Aligning UI design with API contracts requires enforcing API-first design discipline that maps UI actions directly to backend capabilities. This establishes a shared design language and governance model to prevent inconsistent UX across web and mobile products.

What is a token-based design system and how does it improve accessibility?▼

A token-based design system uses documented design tokens and component specifications to ensure visual consistency across platforms. It integrates heuristic evaluation and accessibility audits as default guardrails during reviews to maintain compliance throughout the product lifecycle.

How do I audit an existing UI for accessibility gaps and design fragmentation?▼

Auditing a UI for accessibility and fragmentation involves evaluating current interfaces against API contracts and conducting heuristic evaluations. This identifies inconsistencies and accessibility gaps to outline a tokenized design system for guiding future development.

Can I use this approach for both internal tools and customer-facing products?▼

Yes, API-first design governance applies to web apps, mobile apps, internal tools, and customer-facing products. It maintains user advocacy across research, design, and delivery phases by resolving conflicts and enforcing documented UX patterns.

What is the best way to structure design system documentation for developer handoffs?▼

The best way to structure handoff documentation is to provide wireframes, component specs, and information architecture guidance alongside token-based design system documentation. This accelerates shipping by ensuring clear alignment between designers and developers.

Why does my API-driven product suffer from fragmented UX across different platforms?▼

API-driven products suffer from fragmented UX when data shapes and interactions come directly from backend services without a unified design language. Implementing token-based design systems and API-first contracts resolves this by aligning product teams around shared governance.

Related Skills

Explore More Design & Creative Skills→
Jason-hub-starJason-hub-star

subagent-pattern-collect

Collect routing, domain module, and data-contract patterns from the current project.

Community
Intermediate
bipinksbipinks
3

wireframing-prototyping

Generate ASCII wireframes, information architecture diagrams, and Mermaid user-flow diagrams from design briefs.

Community
Intermediate
majiayu000majiayu000
258

product-ux-expert

Apply cognitive psychology, heuristics, and WCAG 2.2 to evaluate UX.

Community
Advanced
redisreadredisread

ui

Fix visual UI defects and build components with design token consistency.

Community
Advanced