How does this skill improve my frontend code?

It ensures that the code Claude generates follows strict UI/UX principles such as visual hierarchy, accessibility, and consistency, rather than just basic functionality.

Does this skill support mobile-first design?

Absolutely. It incorporates principles from Apple’s Human Interface Guidelines and Material Design to help create responsive, mobile-friendly layouts.

What design tools is this skill compatible with?

While it operates within Claude Code, its outputs and delivery patterns are designed to be compatible with workflows in Figma, Sketch, and Adobe XD.

Can I customize the design system used by this skill?

Yes, you can configure specific design principles, spacing units, border radii, and shadows within the skill's JSON configuration.

Can it help with user journey mapping?

Yes, it includes core functions for user research, requirement analysis, and creating detailed user journey maps to optimize user experience.

UI/UX Design Pro

Name: UI/UX Design Pro
Author: Protagonistss

byProtagonistss

0•

Design Tools

Facilitates the creation of intuitive, aesthetic, and user-centric interfaces by applying modern design principles and industry best practices.

The UI/UX Design skill empowers Claude to act as a professional product designer, bridging the gap between functional code and exceptional user experience. It provides specialized guidance on information architecture, visual hierarchy, and interaction patterns, ensuring that generated frontends are not just functional but also highly usable and accessible. Whether you are wireframing a new feature, optimizing a conversion funnel, or building a comprehensive design system, this skill provides the domain expertise needed to create high-fidelity interfaces that follow established standards like Material Design and Apple's Human Interface Guidelines.

Key Features

01Strategic user research and persona development guidance

02Interface design optimization for visual hierarchy and information architecture

03Interactive flow design and micro-interaction planning

040 GitHub stars

05Usability testing strategy and iterative feedback loops

06High-fidelity prototyping and wireframing assistance

Use Cases

01Designing professional dashboard layouts with complex data visualizations

02Implementing consistent design systems across large-scale multi-page applications

03Optimizing user registration and checkout flows to reduce friction and bounce rates

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add protagonistss/claude-plugins ui-ux

For use in Claude.ai and ChatGPT

Download Skill