UI/UX Pro Max Design System Workflow

Problem it addresses

In UI/UX work, visual direction, user flows, and implementation details often live in different places. An agent conversation without structure can produce vague output: 'make the button nicer' without platform, stack, states, spacing, typography, or accessibility constraints. ui-ux-pro-max targets that low-signal design workflow by turning requests into concrete deliverables and reducing back-and-forth.

How it works and where to be careful

It starts with Triage, asking only for necessary context: target platform such as web, iOS, Android, or desktop; stack such as React/Next, Vue/Svelte, CSS/Tailwind; and goals such as conversion, speed, brand tone, or WCAG AA. It then produces the deliverables that fit:

• UI concept + layout: grid, typography, color, key screens/sections
• UX flow: critical paths, error/empty/loading states, edge cases
• Design system: color, type, spacing, radius, shadow tokens
• Implementation plan: file-level edits, component breakdown, acceptance criteria

The skill also bundles design heuristics and reference data, with an optional script for structured token generation. Output defaults to ASCII-only variables unless the project already uses Unicode, and should cover empty, loading, error, keyboard navigation, focus states, and contrast. It works best with usable inputs such as screenshots, Figma files, URLs, repositories, or user journeys; complex projects, nonstandard stacks, and strict brand rules still need human review.