skills.rest
Tugoukezhang
TugoukezhangCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate design systems with tokens and cross-stack implementation guidance.

8|1|Updated Apr 13, 2026
Search Tags:#ui#accessibility#implementation#tokens#ux#design-system#frontend-guidance
One-click install
npx skills add https://github.com/Tugoukezhang/workbuddy-skills --skill ui-ux-pro-max-tugoukezhang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/Tugoukezhang/workbuddy-skills/tree/main/skills/ui-ux-pro-max
Command: npx skills add https://github.com/Tugoukezhang/workbuddy-skills --skill ui-ux-pro-max-tugoukezhang

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Elevates UI/UX planning and implementation by providing automated design guidance, tokenized design systems, and implementation-ready recommendations across multiple platforms and stacks.

Core Features & Use Cases

  • Design-system generation: tokens, typography, color palettes, spacing, and accessibility guidelines tailored to your product.
  • Cross-stack guidance: actionable guidance for HTML/CSS/JS, React, Next.js, Vue, Svelte, and Tailwind, plus design-system tokenization.
  • End-to-end UX planning: UX patterns, information architecture, component specs, and copy/microcopy guidance for cohesive experiences.
  • Real-world use case: for a SaaS dashboard, generate a complete, ready-to-hand-off design system including tokens, components, and a11y checks.

Quick Start

Describe a complete design system for my SaaS dashboard, including tokens, typography, and color palette, ready for implementation.

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 complete design system with tokens and typography for my SaaS dashboard?▼

To generate a design system for a SaaS dashboard, you need automated UI/UX guidance that produces tokenized typography, color palettes, spacing, and accessibility rules ready for implementation. This delivers cohesive visual style direction and component specs tailored to your product.

What is the best way to plan information architecture and UX patterns for web applications?▼

Planning information architecture and UX patterns requires end-to-end UX reasoning that maps out user flows, component specs, and microcopy guidance. This ensures cohesive experiences across complex interfaces by structuring data hierarchy and interaction models before visual styling.

Can I get front-end code implementation guidance for React, Next.js, Vue, Svelte, and Tailwind?▼

Yes, front-end code implementation guidance is available for React, Next.js, Vue, Svelte, and Tailwind. It provides actionable code-change suggestions and design-system tokenization directly mapped to your cross-stack components, bridging the gap between design and development.

Does UI/UX design guidance include accessibility checks for component specifications?▼

Yes, UI/UX design guidance includes accessibility checks integrated into component specifications and token generation. It applies a11y guidelines directly to your design system to ensure safe, scalable, and compliant user experiences across all generated interface elements.

How do I create design tokens and color palettes that are ready for developer handoff?▼

Creating design tokens and color palettes for developer handoff involves automating token generation based on your product's visual style direction. This outputs structured design-system variables for spacing and color, ensuring developers can directly implement them across multiple frontend stacks.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
ryan-nguyen-01ryan-nguyen-01
4

agent-designer

Translate BA user stories and SA architecture into UI design documentation.

Community
Intermediate
nguyenthienthanhnguyenthienthanh
24

design-expert

Provides expert guidance on UI/UX design, design systems, and responsive layouts.

Community
Basic
LuisSambranoLuisSambrano
7

ui-prototype

Generate visual mockups and wireframes from textual descriptions.

Community
Basic