mp-design-ui-3

Generating UI variants involves spawning parallel subagents to create multiple styled versions of a component in your source directory. This produces a comparison view of distinct visual directions to accelerate design decisions.

Yes, UI variant generation is framework-aware and supports Svelte, React/Next, Vue/Nuxt, and HTML projects. It detects your project dependencies to infer the correct file extension and component scope automatically.

A design tokens file is a markdown document extracting the core style attributes from a selected UI variant. It is generated when you finalize your winning variant, extracting its visual properties into a reusable style system definition.

To finalize a winning design variant, you select your preferred style from the generated comparison page. The system copies the chosen variant to your target path, writes the design-tokens.md file, and cleans up the temporary variant directories.

You can specify multiple design styles for component variant generation, such as brutalism, cafe, cosmic, luxury, and editorial. The system reads a style catalog to apply these distinct visual themes across your generated variants.

No, you do not need to manually clean up temporary UI variant files. The system automatically removes the temporary variant directories from your project after copying the winning variant to the target path and generating the design tokens file.