skills.rest
Elevaria-bia
Elevaria-biaCOMMUNITY
Explore all skills by this author →
GitHub

aiox-ux-design-expert

Generate tokenized atomic UI components from user research through WCAG AA quality gates.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes guesswork from UX and design-system delivery by guiding teams through research, system audits, token extraction, component building, and quality assurance in one coherent workflow.

Core Features & Use Cases

  • Complete UX-to-Components Workflow: Runs a full sequence from user research and wireframes to design tokens and atomic component implementation, ensuring continuity from insight to UI.
  • Design System Optimization (Brownfield or Greenfield): Audits existing UI patterns, consolidates redundancies, and generates a token-driven system with migration planning.
  • Quality Guardrails: Supports accessibility checks (WCAG-focused) and ROI-oriented validation to keep the system usable, scalable, and defensible.

Quick Start

Ask for an end-to-end design-system build by saying: Activate aiox-ux-design-expert and run a complete workflow starting with user research and wireframes, then proceed through audit, token extraction, component building, and final QA.

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 user research to atomic UI components?▼

Building a design system from user research involves executing a structured workflow that translates insights into wireframes, extracts design tokens, and assembles tokenized atomic UI components. This process ensures continuity from initial research directly to final interface implementation.

What is the best way to audit an existing UI for design token extraction?▼

The best way to audit existing UI for design token extraction is to perform a brownfield evaluation that identifies redundant patterns, consolidates them, and generates a token-driven system. This includes creating a migration plan for updating legacy interfaces.

How do I ensure my UI components meet WCAG accessibility standards?▼

To ensure UI components meet WCAG accessibility standards, you apply quality guardrails during the component building phase. The workflow enforces WCAG AA minimum quality gates to validate that the final atomic components are accessible and usable.

Can I calculate the ROI of a design system optimization initiative?▼

Yes, you can calculate the ROI of a design system optimization initiative. The workflow includes ROI-oriented validation and ROI calculation to evaluate the scalability and financial defensibility of your UX and component system investments.

Do I need a greenfield project to use an atomic design workflow?▼

No, you do not need a greenfield project to use an atomic design workflow. The system supports both greenfield creation and brownfield optimization, allowing you to audit existing UI patterns and consolidate redundancies into a structured token system.

Related Skills

Explore More Design & Creative Skills→
TheCraigHewittTheCraigHewitt
7.3k

product-marketing-context

Create and maintain a product marketing context document at .claude/product-marketing-context.md.

Community
Intermediate
grvpanchalgrvpanchal
1

ui-atomic-design

Organize UI components into a five-level atomic design hierarchy.

Community
Intermediate
TheGreatLTheGreatL

ui-visual-validator

Validate UI modifications for visual regressions, design compliance, and accessibility.

Community
Advanced
poko8nadapoko8nada

ui-design

Apply Tailwind-based design guidelines for typography, color, spacing, and components.

Community
Intermediate