skills.rest
leafcoder
leafcoderCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

UI/UX Intelligence Expert

Generate UI/UX design systems with color palettes, typography, and interaction patterns.

2|Updated Jun 27, 2017
Search Tags:#ui#accessibility#frontend#design system#tailwind#ux
One-click install
npx skills add https://github.com/leafcoder/litefs --skill ui-ux-intelligence-expert-leafcoder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UI/UX Intelligence Expert
Source: https://github.com/leafcoder/litefs/tree/main/.trae/skills/02_Designer_UIUXIntelligence
Command: npx skills add https://github.com/leafcoder/litefs --skill ui-ux-intelligence-expert-leafcoder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill solves the challenge of maintaining design consistency and accelerating the UI/UX design process by providing data-driven recommendations for styles, colors, and typography.

Core Features & Use Cases

  • Design System Generation: Automatically generates comprehensive design systems including color palettes, typography, and effects based on product type and industry.
  • UX Best Practices: Provides actionable guidance on accessibility, touch targets, and performance optimization.
  • Technical Stack Support: Offers implementation-specific guidelines for various frameworks like React, Vue, and Tailwind CSS.

Quick Start

Use the UI/UX Intelligence Expert skill to generate a complete design system for a fintech dashboard project.

Frequently Asked Questions about UI/UX Intelligence Expert

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

FAQPage Schema
How do I generate a design system for a web application?▼

Generate a design system by inputting product requirements to automatically produce color palettes, typography rules, and interaction patterns. This ensures UI consistency across web and mobile applications.

What is the best way to ensure WCAG compliance in my UI design?▼

Ensure WCAG compliance by applying the provided UX best practices for accessibility and touch targets. The generated design system automatically satisfies accessibility requirements for your application.

Can I use this to generate Tailwind CSS implementation guidelines?▼

Yes, you can generate Tailwind CSS implementation guidelines. The skill offers technical stack support and framework-specific implementation guidelines for various frontend frameworks.

Does this support generating UI components for React and Vue?▼

Yes, this supports React and Vue by offering implementation-specific guidelines for these frameworks. It helps apply the generated design system across multiple technology stacks.

How do I create a color palette for a fintech dashboard?▼

Create a color palette for a fintech dashboard by inputting your specific industry and product type. The skill generates data-driven color recommendations and typography to accelerate the design process.

Related Skills

Explore More Design & Creative Skills→
vibery-studiovibery-studio
3

ui-ux-pro-max

Generate design-system guidance across web and mobile technology stacks.

Official
Advanced
AshesOfTheUndeadAshesOfTheUndead

levels

Define semantic design tokens and component interaction rules for UI systems.

Community
Intermediate
ConnectiveTCSConnectiveTCS

ui-ux-expert

Guide accessible, responsive UI/UX design with WCAG 2.2 compliance.

Community
Advanced
seohowseohow

audit-accessibility

Evaluates website accessibility for WCAG 2.1 AA compliance via automated and manual testing.

Official
Advanced