skills.rest
zai-org
zai-orgOFFICIAL
Explore all skills by this author →
Website𝕏@Zai_orgGitHub

ui-ux-pro-max

Generate UI design systems with tokens and implementation guidance for frontend stacks.

588|41|Updated May 13, 2026
Search Tags:#accessibility#tokens#ui-ux#design-system#ai-guidance#multidomain-search
One-click install
npx skills add https://github.com/zai-org/Synapse --skill ui-ux-pro-max-zai-org
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/zai-org/Synapse/tree/main/.setup/skills/clawhub/skills/ui-ux-pro-max
Command: npx skills add https://github.com/zai-org/Synapse --skill ui-ux-pro-max-zai-org

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

UI/UX teams and developers struggle to create consistent design systems and actionable implementation guidance from vague briefs.

Core Features & Use Cases

  • Generate a complete design system with color tokens, typography, spacing, components, and accessibility guidelines.
  • Provide multi-domain guidance across product, style, color, landing, and typography with reasoning-based selections.
  • Produce implementation-ready guidance and code-ready specs for frontend stacks (React, Next.js, Vue, Svelte, HTML/CSS/Tailwind).
  • Preserve a Master + Overrides pattern to support page-specific overrides.

Quick Start

Describe your project brief (platform, stack, goals) and ask for a complete design system with tokens and a ready-to-implement plan.

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 UI design system with color tokens and typography from a project brief?▼

To generate a UI design system, provide a project brief describing your platform, stack, and goals. The tool outputs tailored color tokens, typography, spacing, component patterns, and accessibility guidelines for consistent web or mobile implementation.

Does this UI design guidance tool support React, Next.js, Vue, Svelte, and Tailwind?▼

Yes, this UI design guidance tool supports React, Next.js, Vue, Svelte, and plain HTML/CSS with Tailwind. It produces implementation-ready specs and code-ready guidance tailored to your specific frontend stack.

What's the best way to create accessible UI design guidelines across multiple domains?▼

The best way to create accessible UI guidelines is using multi-domain search across product, style, color, landing, and typography domains. The system applies reasoning to select best matches and outputs actionable accessibility guidelines.

Can I apply page-specific design token overrides without breaking the master design system?▼

Yes, you can apply page-specific overrides using the Master + Overrides persistence workflow. This pattern preserves your master design system tokens while allowing targeted customization for individual pages.

How do I get implementation-ready frontend specs for a vague UI project brief?▼

To get implementation-ready frontend specs, input your vague project brief into the tool. It applies reasoning to generate code-ready guidance, including component patterns and design tokens, for immediate frontend development.

Related Skills

Explore More Design & Creative Skills→
madhusudanpatnaikmadhusudanpatnaik

frontend-design

Generate distinctive frontend interfaces with a design system generator.

Community
Advanced
v4lheruv4lheru

pact-frontend-patterns

Provide React frontend patterns for scalable, accessible UI components.

Community
Intermediate
paopp2paopp2

tailwindcss

Apply Tailwind CSS utility classes for responsive, themed UI styling.

Community
Intermediate
xianmingyaoxianmingyao
1

ui-ux-pro-max

Generate UI/UX design systems with tokens, patterns, and implementation guidance.

Community
Advanced