skills.rest
rodrigo-altissimo
rodrigo-altissimoCOMMUNITY
Explore all skills by this author →
GitHub

aiox-ux-design-expert

Convert UX research and UI patterns into a token-driven design system.

Updated May 6, 2025
Search Tags:#accessibility#design systems#design tokens#wireframing#atomic design#ui components#ux research
One-click install
npx skills add https://github.com/rodrigo-altissimo/qiartificial --skill aiox-ux-design-expert-rodrigo-altissimo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aiox-ux-design-expert
Source: https://github.com/rodrigo-altissimo/qiartificial/tree/main/.claude/skills/AIOX/agents/ux-design-expert
Command: npx skills add https://github.com/rodrigo-altissimo/qiartificial --skill aiox-ux-design-expert-rodrigo-altissimo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of turning vague UX needs into a coherent, reusable, accessible design system that teams can implement consistently.

Core Features & Use Cases

  • End-to-end UX-to-system workflow: Runs user research through wireframes, design system audit, token extraction, atomic component building, and quality assurance.
  • Atomic Design implementation: Structures work into atoms, molecules, organisms, templates, and pages to reduce one-off UI and improve reuse.
  • Design-token driven delivery: Focuses on zero hardcoded values and token-based styling, enabling scalable theming and consistency.
  • Brownfield and greenfield support: Performs audits and consolidation for existing systems or starts clean with a new system.

Quick Start

Ask: "Guide me through a complete UX-to-design-system workflow for my product, then audit the current UI patterns, extract tokens, and build the first atomic components."

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 turn UX research into a scalable design system?▼

To build a design system from UX research, you can use an end-to-end workflow that processes user research through wireframes, UI pattern audits, design token extraction, and atomic component building for consistent frontend implementation.

What is the best way to extract design tokens from existing UI patterns?▼

The best way to extract design tokens from existing UI patterns is by running a brownfield design system audit. This process identifies hardcoded values and converts them into token-based styling for scalable theming and consistency.

How does atomic design structure UI components for web frontends?▼

Atomic design structures UI components by breaking interfaces into atoms, molecules, organisms, templates, and pages. This hierarchical structure reduces one-off UI elements and improves component reuse across web frontends.

Can I audit an existing design system for accessibility and WCAG compliance?▼

Yes, you can audit an existing design system for accessibility and WCAG compliance. The workflow includes dedicated quality assurance phases that perform WCAG-focused checks on your current UI patterns and atomic components.

Do I need hardcoded values to theme UI components across my product?▼

No, you do not need hardcoded values. A token-driven design system explicitly focuses on zero hardcoded values, using extracted design tokens to enable scalable theming and visual consistency across web frontends.

Related Skills

Explore More Design & Creative Skills→
nullmastermindnullmastermind
9

uiux-design

Gather design context from codebases and research current UX trends.

Community
Advanced
datamonsterrdatamonsterr

tailwind-patterns

Implement Tailwind CSS v4 CSS-first patterns, container queries, and design tokens.

Community
Intermediate
duynhneduynhne

accessibility-expert

Audit web interfaces for WCAG/ARIA issues and generate remediation recommendations.

Community
Advanced
ArcanexisArcanexis
13

pptx

Create and modify PowerPoint presentations from HTML slides or templates.

Community
Advanced