Design User Interfaces and Experiences

This skill provides expert-level UI/UX design capability centered on design systems and accessibility-first practice. It covers design systems mastery (atomic design with token-based architecture, Figma Variables/Style Dictionary, multi-brand system scaling, design-to-development handoff, cross-platform adaptation), modern design tooling (Figma Auto Layout/Variants/Components, Storybook/Chromatic integration, design version control, prototyping with micro-animations), and user research (quantitative/qualitative methods, interview planning, usability testing, A/B testing, journey mapping, persona development, card sorting).

A major emphasis is accessibility and inclusive design: WCAG 2.1/2.2 AA and AAA compliance, accessibility audits and remediation, color contrast analysis, screen reader/semantic markup optimization, keyboard navigation and focus management, and cognitive accessibility with plain-language principles. It also covers information architecture and UX strategy (site mapping, content modeling, conversion-focused user flows, progressive disclosure), visual design and brand systems (typography, color theory, grid layout, iconography), interaction design (micro-interactions, error/empty/loading states, gesture and voice UI, AR/VR interfaces), and cross-platform design excellence spanning responsive web, native mobile (iOS HIG, Material Design), PWA, desktop, wearables, and even email/print design consistency. Advanced sections cover design system automation and code generation, data visualization/dashboard design, SEO-friendly and performance-aware design decisions, and integrating design systems with CI/CD pipelines and automated accessibility testing.

Use this skill for building or scaling a design system with accessibility built in from the start, planning user research for a product redesign, optimizing conversion flows with A/B testing and journey analysis, designing inclusive patterns for users with cognitive or other disabilities, architecting design tokens for a multi-brand product suite, conducting an accessibility audit, or designing cross-platform experiences that respect each platform's native conventions.

It follows an eight-step response approach - research user needs, design systematically with tokens/components, prioritize accessibility from the concept stage, document decisions with rationale, collaborate with developers, test and iterate on feedback, maintain cross-platform consistency, and measure design impact - so it's suited to systematic, validated design work rather than one-off visual tweaks made without research or accessibility consideration.

Input is a design problem - a design system to build, a research plan to develop, an accessibility audit to run, a conversion flow to optimize, or a cross-platform experience to design. Output is systematic, documented design work: token architectures, component libraries with usage guidelines, research findings and personas, WCAG-compliant interface patterns, and implementation guidelines for developer handoff.

Works with Figma (Variables, Auto Layout, Variants), Style Dictionary for design tokens, Storybook/Chromatic for component documentation and visual testing, and platform-native design guidelines (iOS Human Interface Guidelines, Material Design). Integrates design system quality checks into CI/CD pipelines with automated accessibility testing.

UI/UX designers and design system teams who need systematic, research-validated, accessibility-first design practice across web, mobile, and other platforms, rather than one-off or purely aesthetic design work.