skills.rest
hitoshiseki
hitoshisekiCOMMUNITY
Explore all skills by this author →
GitHub

aiox-ux-design-expert

Unify UX research, design system auditing, token extraction, and atomic component building.

Updated May 4, 2026
Search Tags:#design system#user research#atomic design#ux design#accessibility audit#roi calculation#component building
One-click install
npx skills add https://github.com/hitoshiseki/jutsu-simulator --skill aiox-ux-design-expert-hitoshiseki
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aiox-ux-design-expert
Source: https://github.com/hitoshiseki/jutsu-simulator/tree/main/.claude/skills/AIOX/agents/ux-design-expert
Command: npx skills add https://github.com/hitoshiseki/jutsu-simulator --skill aiox-ux-design-expert-hitoshiseki

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill eliminates fragmented UX and design system workflows by unifying user research, pattern auditing, design token extraction, and atomic component building into a single consistent, methodology-driven process for both new and existing products.

Core Features & Use Cases

  • Hybrid UX/Design System Expertise: Combines user-centric UX research principles with metric-driven design system architecture (Atomic Design methodology) for end-to-end project coverage.
  • Brownfield & Greenfield Support: Audits existing codebases for UI redundancies and generates migration strategies for legacy systems, or bootstraps new design systems from user research for new products.
  • Quality & ROI Validation: Includes built-in WCAG accessibility audits and ROI calculation tools to prove the business value of design system investments.
  • Use Case: A product team with 47 redundant button variations in their legacy codebase can use this skill to audit patterns, consolidate to 3 core variants, extract design tokens, and build a scalable atomic component library in weeks instead of months.

Quick Start

Use the aiox-ux-design-expert skill to run a full audit of your existing frontend codebase, consolidate redundant UI patterns, and generate a design token schema for your new design system.

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 consolidate redundant UI components in a legacy codebase?▼

To consolidate redundant UI components in a legacy codebase, perform a pattern audit to identify duplicates, then standardize them using atomic design methodology and extracted design tokens to eliminate hardcoded styling.

What is the best way to build a design system for a new product from user research?▼

The best way to build a design system from user research is to apply an atomic design methodology, extracting user needs into standardized design tokens and building scalable atomic components from the ground up.

How do you calculate the ROI of a design system investment?▼

You calculate the ROI of a design system by measuring workflow consolidation metrics, tracking reduced UI redundancies, and evaluating accelerated component building timelines to prove business value.

Can I perform a WCAG accessibility audit alongside my UX design workflow?▼

Yes, you can perform a WCAG accessibility audit within your UX design workflow to ensure component compliance, validate quality, and address accessibility barriers during the atomic component building phase.

Does this UX design workflow support both greenfield and brownfield projects?▼

Yes, this UX design workflow supports both greenfield products by bootstrapping new design systems from research, and brownfield projects by auditing legacy codebases and generating migration strategies.

Why use atomic design methodology for frontend system optimization?▼

Use atomic design methodology for frontend system optimization to enforce standardized design tokens, eliminate hardcoded styling, and ensure scalable, maintainable component architecture across product teams.

Related Skills

Explore More Design & Creative Skills→
vikingokftvikingokft

stitch::extract-design-md

Extract a Stitch-compatible DESIGN.md from frontend source code.

Official
Intermediate
viably-labsviably-labs

google-design-md

Lint DESIGN.md and export design tokens to CSS variables or framework formats.

Official
Intermediate
davidrrowleydavidrrowley

frontend-design-review

Review frontend interfaces for design quality and WCAG accessibility compliance.

Community
Intermediate
bychrisrbychrisr

aiox-ux-design-expert

Orchestrate UX design workflows with atomic components and WCAG compliance.

Community
Advanced