ui-ux-designer

Design user flows, wireframes, and high-fidelity mockups with WCAG accessibility audits.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/bennie-ng/AgCel --skill ui-ux-designer-bennie-ng
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/bennie-ng/AgCel/tree/main/skills/ui-ux-designer
Command: npx skills add https://github.com/bennie-ng/AgCel --skill ui-ux-designer-bennie-ng

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating user interfaces that are both functional and aesthetically pleasing, ensuring a positive and accessible user experience.

Core Features & Use Cases

  • User Flow Mapping: Visually chart user journeys through an application.
  • Wireframing & Prototyping: Create low-fidelity layouts and interactive mockups.
  • Visual Design & Branding: Define and apply consistent color palettes, typography, and spacing.
  • Accessibility Audits: Ensure designs meet WCAG standards for inclusivity.
  • Use Case: Design a new onboarding flow for a mobile app, ensuring clear navigation and a visually engaging interface.

Quick Start

Design a user flow for a new e-commerce checkout process.

Frequently Asked Questions about ui-ux-designer

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

FAQPage Schema
How do I design a user flow for a new application feature?

To design a user flow, you visually chart the user journey through an application by mapping out each step from entry to task completion. This process ensures clear navigation and identifies potential friction points before wireframing begins.

What is the best way to create wireframes and high-fidelity mockups?

The best way to create wireframes and mockups is to start with low-fidelity layouts to establish structure, then progress to high-fidelity interactive designs. This approach focuses on usability and aesthetics while applying consistent visual design and branding.

How do I ensure my UI design meets WCAG accessibility standards?

To ensure UI design meets WCAG standards, conduct an accessibility audit focusing on inclusivity and usability. This involves evaluating color contrast, component states, and navigation to verify compliance with established accessibility guidelines.

Can I build a complete design system with component states using this approach?

Yes, you can build a design system by defining and applying consistent color palettes, typography, and spacing. This includes creating various component states and supporting visual design rules to maintain UI consistency across an entire application.

How do I map an e-commerce checkout process for better usability?

To map an e-commerce checkout process, create a visual user flow that charts the customer journey from cart to payment confirmation. This ensures the interface is intuitive, navigation is clear, and the visual design is engaging for the user.

What is included in a UX accessibility audit for mobile apps?

A UX accessibility audit for mobile apps includes evaluating the interface against WCAG standards to ensure inclusivity. It checks component states, visual contrast, and user flow navigation to deliver a positive and accessible experience for all users.