skills.rest
truongnat
truongnatCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-system-pro

Generate design systems with color palettes, typography, and UX guidelines.

Updated Jun 27, 2026
Search Tags:#typography#design system#color palette#ux design#ui design
One-click install
npx skills add https://github.com/truongnat/aix --skill ui-ux-system-pro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-system-pro
Source: https://github.com/truongnat/aix/tree/main/content/skills/ui-ux-system-pro
Command: npx skills add https://github.com/truongnat/aix --skill ui-ux-system-pro

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenge of creating comprehensive design systems from scratch, providing data-driven color palettes, typography, UX guidelines, and chart types, ensuring accessibility and best practices are followed.

Core Features & Use Cases

  • Design System Creation: Build complete design systems with tokens, component libraries, and rationale.
  • Style Guides: Generate style guides for teams with color palettes, typography scales, and spacing systems.
  • Accessibility: Ensure color systems and UX guidelines are accessible and compliant.
  • Use Case: A product manager working on a SaaS dashboard can use this Skill to create a complete design system with accessible color palettes, typography, and UX guidelines.

Quick Start

Use the ui-ux-system-pro skill to create a design system for your product.

Frequently Asked Questions about ui-ux-system-pro

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

FAQPage Schema
How do I build a comprehensive design system with accessible color palettes and typography?▼

To build a comprehensive design system, generate data-driven color palettes, typography scales, and UX guidelines with rationale. This ensures your design system follows accessibility compliance and best practices from the start.

What is the best way to create a style guide for a SaaS dashboard?▼

The best way to create a style guide for a SaaS dashboard is to use design system intelligence to generate complete component libraries, spacing systems, and UX guidelines. This provides data-driven rationale for your design decisions.

Can I generate UX guidelines and chart types for my product design system?▼

Yes, you can generate UX guidelines and searchable databases for chart types within your product design system. This provides best practices and accessibility compliance for data-driven design decisions.

Does generating a design system provide rationale for color palette and typography choices?▼

Generating a design system provides detailed rationale for color palette and typography choices. It ensures your tokens and component libraries are built using established best practices and accessibility standards.

How do I ensure my UI design color systems are accessibility compliant?▼

To ensure UI design color systems are accessibility compliant, generate your color palettes using design system intelligence that checks for accessibility compliance. This integrates compliance directly into your style guide.

Related Skills

Explore More Design & Creative Skills→
yu13130122297yu13130122297

scout

Identify uncertainties in research framing, datasets, metrics, and baselines.

Community
Intermediate
chicongstchicongst
2

ui-design

Automates UI design execution by applying tokens, palettes, typography and spacing across frameworks.

Community
Intermediate
qqrusqqrus

ux-designer

Provide UX design guidelines for user research, wireframing, prototyping, and information architecture.

Community
Advanced
tuliopc23tuliopc23

ui-ux-pro-max

Search UI/UX design databases for styles, palettes, typography, and guidelines.

Community
Advanced