What kind of design artifacts can it produce?

It can output component specifications, layout wireframes, design tokens, interaction notes, state diagrams, and detailed developer handoff documentation.

Does this skill generate actual code?

The UI Designer skill focuses on specifications, hierarchy, and design logic. It is intended to work in tandem with frontend development skills to bridge the gap between design intent and implementation.

How does the skill handle accessibility?

Accessibility is a core requirement. The skill automatically checks for color contrast, keyboard navigation paths, focus states, and screen-reader-friendly structures.

Can I use my own design system?

Yes. The skill includes a mandatory context discovery step where it identifies and adopts your existing brand guidelines, component libraries, and theme tokens.

UI Design & Design Systems

Name: UI Design & Design Systems
Author: Masked-Kunsiquat

byMasked-Kunsiquat

Design Tools

Designs intuitive, accessible, and visually coherent interfaces while ensuring alignment with brand guidelines and existing design systems.

About

This skill empowers Claude to act as a professional UI Designer, focusing on creating interfaces that balance form, function, and accessibility. It mandates a context-first approach by querying existing brand guidelines and design systems to ensure consistency across web, mobile, and desktop platforms. From defining visual hierarchy and interaction clarity to producing detailed component specifications and accessibility annotations, this skill ensures that all UI outputs are production-ready, user-centric, and technically feasible.

Key Features

Context-aware design based on brand guidelines and existing systems
Non-negotiable accessibility standards including contrast and navigation
Production of detailed component specs and handoff documentation
0 GitHub stars
System-aligned visual hierarchy and interaction clarity
Support for responsive layouts across web, mobile, and desktop

Use Cases

Generating accessibility annotations and fixes for keyboard navigation and screen readers
Refining existing application interfaces for better usability and visual consistency
Designing new UI components and layout wireframes based on specific brand tokens

About

Key Features

Context-aware design based on brand guidelines and existing systems
Non-negotiable accessibility standards including contrast and navigation
Production of detailed component specs and handoff documentation
0 GitHub stars
System-aligned visual hierarchy and interaction clarity
Support for responsive layouts across web, mobile, and desktop

Use Cases

Generating accessibility annotations and fixes for keyboard navigation and screen readers
Refining existing application interfaces for better usability and visual consistency
Designing new UI components and layout wireframes based on specific brand tokens