Skills
.Work. You
Rest

ux-variation-designer

Community

Generate structural UX alternatives fast

Design & Creative#progressive disclosure#information architecture#interaction design#ux redesign#layout variations#mode awareness
AuthorB1u3B01t
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It helps you explore divergent UX and interaction designs for an existing interface so you can fix usability issues and rethink flows without getting stuck in surface-level cosmetic changes.

Core Features & Use Cases

  • Interaction-first redesign: produces multiple structural strategies (information hierarchy, interaction model, state communication) that solve the same user problem.
  • Cognitive-load-focused evaluation: audits current UX friction, defines a clear problem space, and rejects strategies that increase confusion or decision burden.
  • Interactive deliverable with rationale: outputs a single interactive React JSX artifact featuring a tab switcher for variations and a rationale card for each approach.
  • Use Case: you upload a screenshot of a confusing settings or onboarding screen and want fundamentally different interaction patterns that improve clarity, discoverability, and flow.

Quick Start

Ask: "Redesign this interface for better UX by generating 4 genuinely different interaction-structure variations based on the screenshot."

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ux-variation-designer
Download link: https://github.com/B1u3B01t/design-playground/archive/main.zip#ux-variation-designer

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.