ux-ui-design

Produce accessible UI/UX design artifacts across research, wireframing, prototyping, and design systems.

1|Updated Jan 12, 2026
One-click install
npx skills add https://github.com/josavicentevw/ai-agent-skills --skill ux-ui-design-josavicentevw
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ux-ui-design
Source: https://github.com/josavicentevw/ai-agent-skills/tree/main/skills/ux-ui-design
Command: npx skills add https://github.com/josavicentevw/ai-agent-skills --skill ux-ui-design-josavicentevw

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps designers produce accessible, user-centered UI/UX designs, unifying research, IA, wireframing, prototyping, visual design, and design systems to create cohesive experiences.

Core Features & Use Cases

  • User Research & IA: Define user needs, create personas, journey maps, and information architectures.
  • Wireframing & Prototyping: Produce low- and high-fidelity wireframes and interactive prototypes to validate flows.
  • Visual Design & Accessibility: Establish typography, color systems, and accessible design patterns (WCAG-compliant).
  • Design Systems & Handoff: Build scalable design tokens, components, and guidelines for handoff to developers.
  • Use cases include creating end-to-end design artifacts, evaluating usability, and producing deliverables like style guides and component libraries.

Quick Start

Start by outlining the problem, identifying target users, and listing key tasks. Then draft a basic IA, sketch wireframes for core screens, and document visual design specs and accessibility considerations. Finally, assemble a design system draft with tokens and components and prepare stakeholder-facing deliverables.

Frequently Asked Questions about ux-ui-design

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

FAQPage Schema
How do I create accessible UI/UX designs that meet WCAG compliance?

To create accessible UI/UX designs, you establish typography, color systems, and design patterns that enforce WCAG-compliant accessibility criteria. This ensures your visual design supports user-centered experiences across web and mobile platforms.

What is the process for building a scalable design system with tokens?

Building a scalable design system involves creating token-based components and guidelines that unify visual design, wireframing, and prototyping. You assemble design tokens to ensure cohesive experiences and prepare structured deliverables for developer handoff.

How do I start an end-to-end UI/UX design workflow from scratch?

To start an end-to-end UI/UX workflow, outline the problem, identify target users, and list key tasks. Then draft a basic information architecture, sketch wireframes for core screens, and document visual design specs and accessibility considerations.

Can I use this approach for both web and mobile wireframing and prototyping?

Yes, this UI/UX design approach supports end-to-end workflows across both web and mobile platforms. It helps you produce low- and high-fidelity wireframes and interactive prototypes to validate user flows and information architectures.

What user research artifacts do I need for information architecture design?

For information architecture design, you need user research artifacts such as personas and journey maps. These artifacts define user needs and help structure the information architecture before you move into wireframing and visual design.

Does this UI/UX design method generate developer handoff specifications?

Yes, this UI/UX design method generates developer handoff specifications alongside style guides and component libraries. It enforces the creation of deliverable documentation and scalable design tokens to ensure accurate technical implementation.