skills.rest
cctyl
cctylCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate UI/UX design recommendations with color palettes, typography, and accessibility notes.

Updated Jan 16, 2025
Search Tags:#typography#accessibility#ui-ux#style-guide#color-palette#design-guidance
One-click install
npx skills add https://github.com/cctyl/bili-rec-web --skill ui-ux-pro-max-cctyl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/cctyl/bili-rec-web/tree/main/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/cctyl/bili-rec-web --skill ui-ux-pro-max-cctyl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Provide a centralized, searchable knowledge base for UI/UX design, typography, color palettes, and UX guidelines to accelerate design decision-making.

Core Features & Use Cases

  • Searchable UI style database with stack-specific guidelines.
  • Generate palette, typography pairings, accessibility notes, and UX patterns for dashboards, websites, and apps.
  • Use Case: quickly assemble a design system for a SaaS dashboard or marketing site.

Quick Start

Analyze a design brief and generate a comprehensive UI/UX plan with style, color, typography, and accessibility recommendations.

Frequently Asked Questions about ui-ux-pro-max

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

FAQPage Schema
How do I generate a UI style guide with color palettes and typography pairings for a SaaS dashboard?▼

To generate a UI style guide for a SaaS dashboard, you can use AI-assisted design guidance to instantly produce structured color palettes, typography pairings, and accessibility notes. This provides stack-specific guidelines for frameworks like React, Vue, and Next.js.

What UX guidelines and design patterns should I use for a mobile app landing page?▼

UX guidelines and design patterns for a mobile app landing page should prioritize readability and conversion. AI design guidance can assemble these patterns alongside typography and color palettes specifically optimized for React Native and Flutter environments.

Does this design guidance support frontend frameworks like Svelte and SwiftUI?▼

Yes, this design guidance supports Svelte and SwiftUI, alongside React, Vue, Next.js, React Native, Flutter, and plain HTML/Tailwind. It returns structured recommendations and stack-specific guidelines tailored to your chosen frontend framework.

Can I get accessibility notes and color palettes exported for an admin panel design?▼

You can get accessibility notes and color palettes exported for an admin panel design by processing a design brief through the UI/UX guidance system. It returns structured recommendations and can export fonts, colors, and accessibility constraints directly.

What is the best way to assemble a design system for websites and mobile apps?▼

The best way to assemble a design system for websites and mobile apps is to analyze a design brief to generate a comprehensive UI/UX plan. This consolidates searchable style patterns, typography, and UX guidelines into a centralized knowledge base.

Related Skills

Explore More Design & Creative Skills→
Junior-Frontend-devJunior-Frontend-dev

user-intent-parser

Parse vague user requirements into structured intent documents with assumptions and acceptance criteria.

Community
Intermediate
lazyFrogLOLlazyFrogLOL
127

frontend-design

Design and generate production-grade frontend interfaces with HTML/CSS/JS or framework code.

Community
Intermediate
retrip-airetrip-ai
2

base-ui-design

Standardize React UI components with Base UI design guidelines.

Official
Basic
Michal-J-KolodziejMichal-J-Kolodziej

ui-ux

Generate UI/UX design systems with style libraries, palettes, typography, and guidelines.

Community
Advanced