design-ui

Guide UI design with accessibility standards, design tokens, and sector-specific patterns.

10|5|Updated Jan 29, 2026
One-click install
npx skills add https://github.com/Claude-Code-Community-Ireland/claude-code-resources --skill design-ui-claude-code-community-ireland
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-ui
Source: https://github.com/Claude-Code-Community-Ireland/claude-code-resources/tree/main/plugins/vibeworks-library/skills/design-ui
Command: npx skills add https://github.com/Claude-Code-Community-Ireland/claude-code-resources --skill design-ui-claude-code-community-ireland

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill tackles the challenge of creating distinctive, high-quality user interfaces that avoid generic AI-generated patterns and adhere to modern design principles.

Core Features & Use Cases

  • AI-Powered Design Guidance: Provides expert advice on UI design patterns, accessibility standards, and design token creation.
  • Anti-Vibe-Code Patterns: Actively helps eliminate common, generic AI design tells like overly rounded corners or bland gradients.
  • Sector-Specific Design: Offers tailored recommendations for industries like Fintech, Healthcare, E-commerce, SaaS, and Creative.
  • Use Case: When a user asks to "design a dashboard for a new fintech app," this Skill will guide the process, ensuring the design is accessible, unique, and aligned with industry best practices.

Quick Start

Use the design-ui skill to generate a responsive landing page for a new SaaS product.

Frequently Asked Questions about design-ui

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

FAQPage Schema
How do I design a dashboard that avoids generic AI-generated UI patterns?

To design a dashboard that avoids generic AI UI patterns, you need to actively eliminate common design tells like overly rounded corners and bland gradients while applying sector-specific design patterns and accessibility standards.

What are design tokens and when do I need them for a landing page?

Design tokens are centralized variables for UI design values like color and spacing. You need them when building a landing page to maintain visual consistency and ensure accessible contrast ratios across the entire interface.

How do I make a fintech UI design accessible and compliant?

Making a fintech UI accessible requires applying standard accessibility guidelines to financial data displays, ensuring readable color contrast, and using sector-specific design patterns that prioritize data clarity for all users.

Can I get tailored UI design recommendations for different industries like Healthcare or SaaS?

Yes, tailored UI design recommendations are available for specific industries including Fintech, Healthcare, E-commerce, SaaS, and Creative, ensuring the interface aligns with unique sector requirements and best practices.

What's the best way to create a non-generic SaaS interface?

The best way to create a non-generic SaaS interface is to use expert design pattern guidance that actively avoids common AI design pitfalls, establishing unique design tokens and adhering to modern accessibility standards.