skills.rest
MaiconGambini
MaiconGambiniCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-designer

Create interface designs, wireframes, and design systems with accessibility standards.

Updated Jul 29, 2026
Search Tags:#accessibility#design system#figma#wcag#ui design#wireframes#ux research
One-click install
npx skills add https://github.com/MaiconGambini/opencode-harness-guide --skill ui-ux-designer-maicongambini
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/MaiconGambini/opencode-harness-guide/tree/main/skills/ui-ux-designer
Command: npx skills add https://github.com/MaiconGambini/opencode-harness-guide --skill ui-ux-designer-maicongambini

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing consistent, accessible user interfaces across platforms requires expertise in design systems, user research, and WCAG compliance that many teams lack in-house. ## Core Features & Use Cases - Design System Creation: Build token-based component libraries with atomic design methodology, multi-brand support, and design-to-development handoff. - User Research & Validation: Plan interviews, usability tests, A/B tests, and journey mapping to ground design decisions in data. - Accessibility-First Design: Implement WCAG 2.1/2.2 AA/AAA compliance, contrast analysis, keyboard navigation, and inclusive design patterns. - Use Case: A product team redesigning a B2B dashboard can use this Skill to audit accessibility gaps, define a design token architecture, and produce a cross-platform component specification ready for developer handoff. ## Quick Start Ask the assistant to design an accessible component library with design tokens for a multi-brand 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: define base tokens for color, typography, and spacing, then compose components from those tokens. Tools like Figma Variables and Style Dictionary manage tokens and export them for development handoff.

How to make a website WCAG 2.2 AA compliant?▼

WCAG 2.2 AA compliance requires sufficient color contrast ratios, keyboard navigability, visible focus indicators, and semantic markup. Run an accessibility audit first, then remediate issues by priority and integrate accessibility testing into the design workflow.

What user research methods work for B2B software redesign?▼

Combine qualitative methods like user interviews and usability testing with quantitative approaches such as analytics review and A/B testing. Journey mapping and task analysis help align the redesign with actual user goals and mental models.

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 interfaces. It addresses cross-platform consistency and platform-specific conventions.

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

A full design system is overkill for one-off landing pages, quick prototypes, or small projects without long-term maintenance needs. In those cases, lightweight style guides or direct component design deliver results faster.

Related Skills

Explore More Design & Creative Skills→
KojiroSasaKojiroSasa

ux-researcher

Synthesize UX insights from interviews, usability tests, surveys, and analytics.

Community
Advanced
PMDevSolutionsPMDevSolutions
7

indesign-conversion

Convert InDesign IDML and PDF files into typed React components and design tokens.

Official
Advanced
AutumnsGroveAutumnsGrove
5

deer-sense

Audit digital interfaces for WCAG compliance using axe-core and manual testing.

Community
Advanced
VoDaiLoczVoDaiLocz
24

ui-styling

Automate building React UIs with shadcn/ui components and Tailwind CSS.

Community
Advanced