ck:ui-ux-pro-max

Generate multi-stack UI design systems with color, typography, spacing, and accessibility guidelines.

Updated Apr 9, 2026
One-click install
npx skills add https://github.com/DatTran26/KienTruThiHanh --skill ck-ui-ux-pro-max-dattran26
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ck:ui-ux-pro-max
Source: https://github.com/DatTran26/KienTruThiHanh/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/DatTran26/KienTruThiHanh --skill ck-ui-ux-pro-max-dattran26

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

UI/UX Pro Max delivers data-driven design guidance and reusable patterns to accelerate building web and mobile interfaces, reducing guesswork and rework.

Core Features & Use Cases

  • Generates multi-stack design systems (colors, typography, spacing, components) with accessibility considerations.
  • Recommends style decisions, interaction patterns, and implementation notes for dashboards, admin panels, marketing sites, and mobile apps.
  • Enables deterministic design with master + per-page overrides for scalable teams.

Quick Start

Generate a complete design system for a SaaS dashboard and apply it to your page.

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 scalable UI/UX design system for web and mobile interfaces?

A scalable UI/UX design system requires structured rules for color palettes, typography, spacing, and components. This approach delivers reusable patterns and accessibility guidelines to accelerate building web and mobile interfaces.

What is deterministic UI design and how does it work for multiple pages?

Deterministic UI design achieves consistent visual decisions by loading design rules from a master configuration and applying page-specific overrides. This mechanism ensures scalable teams maintain strict design consistency across multiple web and mobile pages.

How do I create an accessible color palette and typography system for a SaaS dashboard?

Creating an accessible color palette and typography system for a SaaS dashboard involves applying machine-friendly prompts to generate structured outputs. These outputs provide actionable style decisions and interaction patterns that meet accessibility considerations.

Can I use this design system approach for both marketing sites and admin panels?

Yes, you can use this design system approach for marketing sites, admin panels, and mobile apps. It recommends style decisions, interaction patterns, and implementation notes tailored for multi-stack web and mobile interface projects.

What's the best way to manage spacing and component guidelines for multiple tech stacks?

The best way to manage spacing and component guidelines across multiple tech stacks is to define data-driven design rules. This method provides machine-friendly prompts and structured outputs to deliver actionable implementation notes for real-world projects.

Why does my UI design system cause rework and guesswork during development?

Your UI design system causes rework and guesswork when it lacks data-driven design guidance and reusable patterns. Establishing a master design system with actionable implementation notes reduces guesswork and ensures consistent interaction patterns across interfaces.