ck:ui-ux-pro-max

Generate design systems with color palettes, typography, and UX best practices.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/weihung0831/claudekit --skill ck-ui-ux-pro-max-weihung0831
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ck:ui-ux-pro-max
Source: https://github.com/weihung0831/claudekit/tree/main/.opencode/skills/ui-ux-pro-max
Command: npx skills add https://github.com/weihung0831/claudekit --skill ck-ui-ux-pro-max-weihung0831

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides comprehensive UI/UX design intelligence, offering guidance on styles, color palettes, typography, and best practices to create professional and user-friendly interfaces.

Core Features & Use Cases

  • Design System Generation: Create a complete design system based on project type, industry, and desired style.
  • Component Styling: Get recommendations for specific UI elements like buttons, modals, and forms.
  • UX Best Practices: Ensure accessibility, performance, and usability with expert guidelines.
  • Use Case: When building a new SaaS dashboard, use this Skill to generate a modern, accessible design system with a professional color palette and clean typography.

Quick Start

Generate a design system for a 'fintech dashboard' project.

Frequently Asked Questions about ck:ui-ux-pro-max

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

FAQPage Schema
How do I generate a complete design system for a new web project?

To generate a design system, input your project type, industry, and desired style to receive style recommendations, color palettes, typography pairings, and UX best practices. This provides a complete, professional design foundation tailored to your specific application context.

What's the best way to ensure UI accessibility when building a frontend dashboard?

Ensuring UI accessibility involves applying expert guidelines for performance and usability directly to your component styling. This skill provides detailed UX best practices and accessibility guidance to help you build inclusive, user-friendly interfaces across multiple technology stacks.

Can I get typography and color palette recommendations for specific UI components like buttons and modals?

Yes, you can get component styling recommendations for specific UI elements like buttons, modals, and forms. It delivers tailored color palettes and typography pairings to ensure visual consistency and professional styling for individual interface components.

Does this UI/UX design guidance work across multiple frontend development stacks?

Yes, this design intelligence supports multiple technology stacks for frontend development. It delivers stack-aware style recommendations, typography pairings, and interaction design guidance, ensuring the generated design system fits your specific development environment.

When do I need a generated design system instead of manually styling individual UI components?

You need a generated design system when building comprehensive interfaces like a SaaS dashboard to ensure visual consistency. It establishes global color palettes, typography, and UX best practices upfront, preventing fragmented styling across individual UI components.

How does design system generation handle interaction design and performance?

Design system generation integrates detailed guidance on interaction design and performance alongside visual styling. It provides UX best practices that define how UI elements behave and perform, ensuring the resulting interface is both responsive and user-friendly.