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

0•

Herramientas de Diseño

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

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.

Características Principales

01Context-aware design based on brand guidelines and existing systems

02Non-negotiable accessibility standards including contrast and navigation

03Production of detailed component specs and handoff documentation

040 GitHub stars

05System-aligned visual hierarchy and interaction clarity

06Support for responsive layouts across web, mobile, and desktop

Casos de Uso

01Generating accessibility annotations and fixes for keyboard navigation and screen readers

02Refining existing application interfaces for better usability and visual consistency

03Designing new UI components and layout wireframes based on specific brand tokens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add masked-kunsiquat/crm-orbit2 ui-designer

For use in Claude.ai and ChatGPT

Download Skill