How does this prevent generic AI design output?

It specifically avoids 'anti-patterns' like system font defaults, purple gradients, and generic card layouts, instead using custom design tokens and distinctive typography.

Can I request specific visual styles?

Yes, you can choose from various aesthetic directions including Minimalism, Glassmorphism, Neubrutalism, Editorial, and Organic styles.

Does it generate responsive code?

Absolutely. All generated UI components follow mobile-first principles and include responsive breakpoints as a standard requirement.

How does this skill handle web accessibility?

The skill enforces WCAG AA standards by verifying contrast ratios, ensuring semantic HTML usage, and requiring visible focus states for all interactive elements.

UI/UX Design

Name: UI/UX Design
Author: arvindand

byarvindand

•

デザインツール

Creates production-grade frontend interfaces with a focus on accessibility, visual craft, and modern design patterns.

This skill transforms Claude into a specialized frontend architect that follows professional design workflows rather than generating generic AI code. It automates the creation of accessible, responsive, and visually distinctive web components by utilizing predefined aesthetic directions—such as minimalism or glassmorphism—and enforcing strict WCAG compliance. By integrating semantic HTML, focus states, and interactive logic, it ensures that every UI output is ready for production environments and user-centric applications.

主な機能

014 GitHub stars

02Automated accessibility auditing including WCAG AA/AAA contrast compliance

03Avoidance of generic AI anti-patterns to ensure unique, professional visual craft

04Mobile-first responsive design logic using semantic HTML5 elements

05Predefined aesthetic directions like Neubrutalism, Minimalism, and Glassmorphism

06Comprehensive state management for hover, focus, loading, and error states

ユースケース

01Creating complex, state-aware form components with built-in validation UX

02Refining legacy UI code to align with modern design systems and accessibility standards

03Building accessible and responsive landing pages from a high-level prompt

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add arvindand/agent-skills ui-ux-design

For use in Claude.ai and ChatGPT

Download Skill