skills.rest
WebWakaHub
WebWakaHubOFFICIAL
Explore all skills by this author →
GitHub

UI Designer

Design accessible, pixel-perfect UI design systems with WCAG AA compliance.

20|9|Updated Mar 10, 2026
Search Tags:#ui#accessibility#design-system#responsive-design#component-library#developer-handoff
One-click install
npx skills add https://github.com/WebWakaHub/manus-agency-skills --skill ui-designer-webwakahub
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UI Designer
Source: https://github.com/WebWakaHub/manus-agency-skills/tree/main/agency-design-ui-designer
Command: npx skills add https://github.com/WebWakaHub/manus-agency-skills --skill ui-designer-webwakahub

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes inconsistency and guesswork from UI creation by turning brand goals, usability needs, and accessibility standards into a coherent design system.

Core Features & Use Cases

  • Design System Foundation: Establishes tokens, typography, spacing, color, and elevation rules for consistent products.
  • Component Library Creation: Defines reusable buttons, inputs, cards, navigation, and feedback states with responsive behavior.
  • Accessibility and Handoff: Ensures WCAG AA-ready interfaces with clear specifications for developers, including measurements, states, and implementation guidance.
  • Use Case: Use it when you need a polished dashboard, a scalable design system, or a pixel-accurate redesign that must work across breakpoints and themes.

Quick Start

Ask the UI Designer skill to create a responsive, WCAG AA-compliant design system for my product with tokens, core components, and developer handoff details.

Frequently Asked Questions about UI Designer

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

FAQPage Schema
How do I create a design system with semantic color tokens and typography hierarchy?▼

To create a design system, you establish semantic color tokens, typography hierarchy, and spacing scales. This ensures consistent products by turning brand goals and usability needs into a coherent foundation for reusable components.

How do I ensure my component library meets WCAG AA compliance for accessibility?▼

To ensure component libraries meet WCAG AA compliance, you apply accessibility standards to reusable buttons, inputs, and cards. This includes defining responsive behavior and feedback states that align with visual accessibility requirements.

What is the best way to prepare pixel-perfect UI designs for developer handoff?▼

The best way to prepare pixel-perfect UI designs for developer handoff is to provide clear specifications. This includes precise component measurements, interactive states, and implementation guidance alongside the interface layouts.

Can I use this approach to design responsive layouts and dark mode themes for a dashboard?▼

Yes, you can design responsive layouts and dark mode themes for a polished dashboard. The approach applies to web and product interface work, ensuring pixel-accurate designs function correctly across breakpoints and themes.

What do I need to define when building a scalable UI component library from scratch?▼

When building a scalable UI component library, you need to define reusable buttons, inputs, and navigation with responsive behavior. Establishing spacing scales and elevation rules ensures the components remain consistent across the product.

Why does my UI design lack consistency across different breakpoints and themes?▼

Your UI design lacks consistency across breakpoints and themes due to missing design system foundations. Without established tokens, typography hierarchy, and spacing scales, guesswork enters the process and breaks interface coherence.

Related Skills

Explore More Design & Creative Skills→
randoneeringrandoneering

using-streamlit-layouts

Structure Streamlit layouts with sidebars, columns, containers, and dialogs.

Community
Intermediate
h4vzzh4vzz
33

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

Community
Advanced
dinoudondinoudon

accessibility-audit

Audit web applications for WCAG 2.2 compliance across seven accessibility categories.

Community
Advanced
ExpeditoJExpeditoJ

aiox-ux-design-expert

Automate UX/UI design tasks from research to quality assurance.

Community
Advanced