skills.rest
12valor
12valorCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-designer

Implement design systems with token-based architecture and WCAG-compliant accessibility.

1|Updated Mar 25, 2026
Search Tags:#design thinking#inclusive design#design systems#user research#prototyping#user experience#ui-ux
One-click install
npx skills add https://github.com/12valor/LLM-SKills --skill ui-ux-designer-12valor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/12valor/LLM-SKills/tree/main/ui%20ix
Command: npx skills add https://github.com/12valor/LLM-SKills --skill ui-ux-designer-12valor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill offers expert-level guidance and tools for designing user interfaces and experiences that are accessible and user-centered, simplifying the design process for complex systems.

Core Features & Use Cases

  • Design Systems Mastery: Implementing design systems with token-based architecture, creating comprehensive documentation, and maintaining governance.
  • Modern Tools & Workflows: Leveraging advanced design tools like Figma for system integration, collaboration, and prototyping.
  • User Research & Analysis: Applying quantitative and qualitative research to inform design decisions and enhance user experience.
  • Accessibility & Inclusive Design: Ensuring WCAG compliance and integrating inclusive design principles.
  • UX Strategy & Information Architecture: Crafting user flows and site mapping to optimize content and enhance navigation.
  • Visual Design & Brand Systems: Developing typography systems, color palettes, and brand identities with visual hierarchy.
  • Interaction Design & Prototyping: Designing micro-interactions, state management, and cross-device consistency.
  • Design Research & Validation: Facilitating design sprints, conducting stakeholder alignment, and measuring design impact.
  • Cross-Platform Design: Adapting designs for web, mobile, desktop, wearables, and more.
  • Design System Implementation: Creating component documentation, design token conventions, and implementing dark mode.
  • Advanced Techniques: Automating design systems, handling dynamic content, and designing for emerging technologies.
  • Collaboration & Communication: Effective storytelling, team collaboration, and client communication.
  • Design Technology Integration: Integrating design systems with CI/CD, automated testing, and analytics.

Quick Start

Open the 'implementation-playbook.md' for a step-by-step guide to designing a UI/UX system.

Frequently Asked Questions about ui-ux-designer

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

FAQPage Schema
How do I implement a design system with token-based architecture?▼

To implement design systems with token-based architecture, you establish comprehensive documentation, create component guidelines, define design token conventions, and set up governance to maintain visual consistency across platforms.

What is the best way to ensure WCAG compliance and inclusive design in my UI?▼

Ensuring WCAG compliance and inclusive design involves applying established accessibility guidelines, integrating inclusive principles early, and validating visual hierarchy and interaction patterns against user research data.

How do I use Figma for design system integration and prototyping?▼

You use Figma for design system integration by leveraging its collaboration features to manage component libraries, build interactive prototypes, and maintain cross-device consistency for modern workflows.

How does user research inform UX strategy and information architecture?▼

User research informs UX strategy by applying qualitative and quantitative methodologies to optimize site mapping, craft user flows, enhance navigation, and validate design impact through stakeholder alignment.

How do I design for cross-platform consistency across web and mobile?▼

Designing for cross-platform consistency requires adapting interaction design, managing state transitions, and applying uniform visual design and brand systems across web, mobile, desktop, and wearables.

Can I integrate automated testing and CI/CD with my design system?▼

You can integrate design technology with CI/CD pipelines and automated testing to validate component states, measure analytics, handle dynamic content, and automate design system maintenance workflows.

Related Skills

Explore More Design & Creative Skills→
HechaoYannetHechaoYannet

create-architecture

Generate a master architecture document from GDDs, ADRs, and governance constraints.

Community
Advanced
jonnabiojonnabio
6

ci-cd-pipeline

Automate CI/CD pipeline design and configuration for software workflows.

Community
Intermediate
royvillasanaroyvillasana
34

ai-prototype-prompter

Convert Figma design data into structured prompts for AI UI prototyping tools.

Community
Intermediate
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-ux-designer

Create interface designs, wireframes, and design systems with Figma.

Community
Advanced