ui-ux-designer

Create interface designs, wireframes, and design systems with accessibility-first workflows.

Updated Aug 10, 2026
One-click install
npx skills add https://github.com/Eng-suso/BK-GPT --skill ui-ux-designer-eng-suso
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/Eng-suso/BK-GPT/tree/main/.claude/skills/ui-ux-designer
Command: npx skills add https://github.com/Eng-suso/BK-GPT --skill ui-ux-designer-eng-suso

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing consistent, accessible interfaces across platforms requires deep expertise in design systems, user research, and WCAG standards that most teams lack in-house. This Skill provides structured UI/UX guidance covering design tokens, component libraries, user research, and inclusive design so teams can produce well-documented, accessible design decisions. ## Core Features & Use Cases - Design System Architecture: Build token-based design systems with atomic design methodology, multi-brand support, and design-to-development handoff workflows. - Accessibility & Inclusive Design: Apply WCAG 2.1/2.2 AA/AAA compliance, color contrast analysis, keyboard navigation, and screen reader optimization patterns. - User Research & Validation: Plan usability tests, user interviews, A/B tests, journey mapping, and persona development grounded in research data. - Use Case: A product team redesigning a B2B dashboard can use this Skill to define a design token architecture, audit the existing UI for accessibility violations, and produce a component library specification ready for developer handoff. ## Quick Start Ask the assistant to design an accessible component library with design tokens for your web application.

Frequently Asked Questions about ui-ux-designer

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

FAQPage Schema
How do I create a design system with design tokens?▼

Start with atomic design methodology by defining foundational tokens for color, typography, and spacing, then build components that consume those tokens. Tools like Figma Variables and Style Dictionary help manage and export tokens for development handoff.

How to make a web interface WCAG 2.2 compliant?▼

Ensure sufficient color contrast ratios, full keyboard navigation with visible focus states, semantic markup for screen readers, and clear error handling. Run an accessibility audit first, then remediate issues by severity against AA or AAA criteria.

What user research methods work for B2B software redesign?▼

Combine contextual user interviews, task analysis, and usability testing of the existing product to identify pain points. Supplement with journey mapping and analytics review to validate findings before designing new flows.

Does this skill cover mobile app design guidelines?▼

Yes, it covers native mobile design following iOS Human Interface Guidelines and Material Design, plus responsive web, PWA, desktop, and wearable interface patterns with cross-platform consistency guidance.

When should I not use a full design system approach?▼

A full token-based design system is overhead for one-off prototypes, short-lived landing pages, or early concept validation. In those cases, lightweight style guides or rapid wireframing deliver faster results without governance burden.