skills.rest
joneqian
joneqianCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Translate design goals into UI systems with tokens, components, and guidelines.

1|Updated Mar 12, 2026
Search Tags:#ui#accessibility#frontend#tokens#ux#design-system
One-click install
npx skills add https://github.com/joneqian/EvoClaw --skill ui-ux-pro-max-joneqian
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/joneqian/EvoClaw/tree/main/packages/core/src/skill/bundled/ui-ux-pro-max
Command: npx skills add https://github.com/joneqian/EvoClaw --skill ui-ux-pro-max-joneqian

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps product teams translate broad UX goals into concrete UI systems and actionable design documentation, reducing misalignment and speeding up delivery.

Core Features & Use Cases

  • UI concept + layout direction: provides a clear visual strategy, grid, typography, and color system for web and mobile.
  • Design system tokens & component guidelines: specifies tokens for color, typography, spacing, radii, and accessibility considerations, plus component rules.
  • Implementation-ready deliverables: outlines file-level edits, component breakdown, and acceptance criteria for developers.

Quick Start

Provide a project context (target platform, brand vibe, accessibility needs) and request a complete UI concept, tokens, and component specs.

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 translate UX goals into a concrete UI design system?▼

To translate UX goals into a UI design system, provide your project context, target platform, and accessibility needs to generate visual strategy, design tokens, and component guidelines for cross-platform consistency.

What are design tokens and how do they structure UI consistency?▼

Design tokens are defined variables for color, typography, spacing, and radii that maintain UI consistency across web and mobile projects. They act as the foundational visual language shared between designers and developers.

How do I generate implementation-ready UI component specs for developers?▼

You generate implementation-ready UI component specs by defining component rules, file-level edits, and acceptance criteria. This provides developers with exact breakdowns needed to build the interface accurately from the design system.

Can I use this to check accessibility considerations for my UI layout?▼

Yes, you can check accessibility considerations for your UI layout by specifying accessibility needs during the concept phase. The workflow integrates these requirements directly into your color system, typography, and component guidelines.

What is the best way to structure a cross-platform design system workflow?▼

The best way to structure a cross-platform design system workflow is progressing from concept through tokens, component specs, and final implementation plans. This ensures visual and functional consistency across both web and mobile platforms.

Do I need to provide brand guidelines to generate UI tokens and typography?▼

You need to provide project context such as target platform and brand vibe to generate accurate UI tokens and typography. This input allows the system to tailor the visual strategy and component rules to your specific requirements.

Related Skills

Explore More Design & Creative Skills→
nuoyanruoshuinuoyanruoshui
47

ux-review

Validate UX specifications, HUD designs, and interaction patterns for completeness and accessibility.

Community
Advanced
pingwupingwu
12

multi-file-architecture

Coordinate multi-file changes across frontend, backend, database, and config.

Community
Advanced
darblexdarblex

ui-ux-pro-max

Generate design systems and frontend UI code for web frameworks.

Community
Advanced
IsthisreelIsthisreel

Brand Design System

Enforce design tokens for color, typography, and spacing across UI components.

Community
Advanced