skills.rest
hyagoviana
hyagovianaCOMMUNITY
Explore all skills by this author →
GitHub

aiox-ux-design-expert

Orchestrate UX research, wireframes, token extraction, and atomic component QA.

1|Updated May 15, 2026
Search Tags:#design system#design tokens#atomic design#wcag#ux design#ui components#roi analysis
One-click install
npx skills add https://github.com/hyagoviana/Sistema_Hyago_Viana_Adabtech --skill aiox-ux-design-expert-hyagoviana
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aiox-ux-design-expert
Source: https://github.com/hyagoviana/Sistema_Hyago_Viana_Adabtech/tree/main/meu-projeto/.claude/skills/AIOX/agents/ux-design-expert
Command: npx skills add https://github.com/hyagoviana/Sistema_Hyago_Viana_Adabtech --skill aiox-ux-design-expert-hyagoviana

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It removes the back-and-forth between UX research, wireframes, design systems, and implementation by providing a single, repeatable design workflow that stays aligned to design tokens and accessibility.

Core Features & Use Cases

  • End-to-end UX & Design Systems Workflow: Drive user research through wireframes, token extraction, atomic component building, and QA in one guided flow.
  • Design System Audits & Consolidation: Identify redundant UI patterns in existing codebases and quantify reduction via consolidation metrics.
  • Token-Driven, Atomic Build Pipeline: Extract tokens, set up the system, migrate (including Tailwind upgrades), then build accessible Atoms/Molecules/Organisms.
  • Documentation, Accessibility, and ROI: Generate a pattern library, run WCAG checks, and calculate ROI/cost savings to prove value.

Quick Start

Ask the agent to run the complete workflow for your project by executing research, wireframing, design-system setup, auditing, token extraction, component building, documentation, accessibility checks, and ROI calculation.

Frequently Asked Questions about aiox-ux-design-expert

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

FAQPage Schema
How do I build a design system from scratch using atomic design and design tokens?▼

To build a design system, you extract design tokens, set up the system, and construct accessible UI components following the Atomic Design structure from atoms to pages, producing reusable, WCAG-focused artifacts.

What is the best way to audit an existing design system for redundant UI patterns?▼

A design system audit identifies redundant UI patterns in existing codebases and quantifies the reduction through consolidation metrics, calculating ROI and cost savings to prove value.

Can I use this UX workflow for both greenfield and brownfield design systems?▼

Yes, this UX-to-design-system workflow supports both greenfield and brownfield design systems, handling tokenization, component composition, migration strategies, and accessibility validation.

How do I migrate my UI components and upgrade Tailwind in a token-driven design system?▼

You migrate UI components by extracting design tokens, setting up the token-driven pipeline, and executing Tailwind upgrades while building accessible atoms, molecules, and organisms.

Does this design system workflow include WCAG accessibility validation?▼

Yes, the workflow runs WCAG checks during the QA phase to validate accessibility, ensuring the generated pattern library and UI components meet compliance standards.

Related Skills

Explore More Design & Creative Skills→
DDTullyDDTully

ui-ux-designer

Produce UI/UX design artifacts, wireframes, and design system documentation.

Community
Advanced
rodrigo-altissimorodrigo-altissimo

design-brad-frost

Inventory interface variations and quantify redundancy for design system audits.

Community
Advanced
bbvch-aibbvch-ai
9

design-system

Provide Vue.js, Tailwind CSS, and PrimeVue design tokens and component patterns.

Official
Intermediate
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced