# Mp Design UI 3

> Generates several UI variants in different design styles for side-by-side comparison.

- Skill: `martinopolo/mp-design-ui-3` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add martinopolo/mp-design-ui-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/martinopolo/mp-design-ui-3/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: MartinoPolo (https://skillmd.com/u/martinopolo)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/martinopolo/mp-design-ui-3

---


# Design Style Exploration

Generate multiple UI variants in different design styles, compare side-by-side, pick a winner, extract design tokens.

## Usage

```
/mp-design-ui-3 LoginForm
/mp-design-ui-3 DashboardPage --count 5
/mp-design-ui-3 Sidebar --styles brutalism,cafe,luxury
/mp-design-ui-3 PricingCard --target src/components/PricingCard.svelte
```

## Arguments

- **First argument** (required): Component or page name in PascalCase
- `--count N`: Number of variants (default: 3, any positive integer)
- `--styles`: Comma-separated style slugs from `style-catalog.md` (overrides auto-selection)
- `--target`: Where the winner should be placed (auto-detected if omitted)

$ARGUMENTS

## Workflow

```
1. Parse & Detect → 2. Select Styles → 3. Spawn Subagents → 4. Generate Comparison → 5. User Picks → 6. Finalize
```

### Step 1: Parse Arguments & Detect Context

#### Detect framework

Read `package.json` in the project root. Determine framework:

| Dependency        | Framework | File extension |
| ----------------- | --------- | -------------- |
| `svelte`          | Svelte    | `.svelte`      |
| `react` or `next` | React     | `.tsx`         |
| `vue` or `nuxt`   | Vue       | `.vue`         |
| None of the above | HTML      | `.html`        |

#### Detect scope

Infer from the component name and context:

- Names containing `Page`, `View`, `Layout`, `Dashboard`, `Landing` → **page** scope
- Everything else → **component** scope
- User can clarify if ambiguous

#### Detect target path

If `--target` not specified, infer from project structure:

1. Search for existing file matching the component name
2. If found, use that path (the variant will replace it)
3. If not found, use `src/components/{Name}.{ext}` for components or `src/routes/` / `src/pages/` for pages

### Step 2: Select Styles

Read the style catalog: `~/.claude/skills/mp-design-ui-3/style-catalog.md`

**If `--styles` provided:** Use those exact styles.

**If auto-selecting:** Pick `N` styles that maximize distance across 4 axes:

1. **Theme polarity** — mix light and dark surfaces
2. **Typography family** — mix serif, sans, mono, and display fonts
3. **Density** — mix airy, medium, and dense
4. **Mood** — mix professional, playful, raw, and elegant

Algorithm: from the 18 catalog styles, select N that cover the widest spread. Prefer including at least one dark theme, one display/unusual font, and one minimal/clean option.

Present the selected styles to the user before spawning:

> "I'll generate 3 variants: **brutalism** (raw, thick borders), **cafe** (warm, cozy), **cosmic** (dark, neon). Generating now..."

### Step 3: Spawn Parallel Subagents

Create the variants directory:

```
src/.design-variants/
├── v1-{style-slug}/
├── v2-{style-slug}/
└── v3-{style-slug}/
```

Spawn one `mp-ui-variant-generator` sub-agent per style, **all in parallel**. Each agent receives:

```
Generate a {scope} named "{ComponentName}" in the {framework} framework.

## Functional Requirements
{user's original requirements or description of what the component/page does}

## Style Definition
{full style entry from style-catalog.md}

## Output
Write files to: {absolute path to variant folder}
Component name: {ComponentName}
Framework: {framework}
Scope: {scope}

## Anti-AI-Slop
- NEVER use generic fonts (Inter, Roboto, Arial) unless the style specifies them
- NEVER use purple gradients on white
- NEVER use centered 3-column equal card grids unless the style demands it
- Use the style's exact fonts and colors — no substitutions
- Use realistic example data, not "Lorem ipsum" or "John Doe"

## UX Quality
- Buttons: 4 states minimum — default, hover, active/pressed, disabled
- Secondary CTAs beside a primary: ghost button style (transparent until hover)
- Every interaction triggers visible feedback (focus ring, spinner, or micro-animation)
- Header text: letter-spacing -2% to -3%, line-height 110–120%
- Text over images: linear-gradient overlay or progressive blur — not flat semi-transparent
- Dark mode depth: elevated cards lighter than background surface; avoid heavy shadows
- Spacing: 8-point grid; group related elements tightly, ≥32px between distinct sections
```

### Step 4: Generate Comparison Page

After all subagents complete, generate a comparison page at `src/.design-variants/CompareAll.{ext}`.

#### Component scope — Side-by-side grid

Generate a page/component that imports all N variants and renders them in a responsive grid:

- 1 column on mobile, 2 columns on tablet, 3 columns on desktop
- Each cell has a label showing the style name
- Each cell renders the variant component with the same props/data

**Svelte example structure:**

```svelte
<script>
  import V1 from './v1-brutalism/{ComponentName}.svelte';
  import V2 from './v2-cafe/{ComponentName}.svelte';
  import V3 from './v3-cosmic/{ComponentName}.svelte';
</script>

<div class="compare-grid">
  <div class="variant">
    <h2>1. Brutalism</h2>
    <V1 />
  </div>
  <div class="variant">
    <h2>2. Cafe</h2>
    <V2 />
  </div>
  <div class="variant">
    <h2>3. Cosmic</h2>
    <V3 />
  </div>
</div>
```

#### Page scope — Tabbed view

Generate a tabbed layout where each tab renders one variant at full width:

- Tab bar at top with style names
- Active tab renders the full page variant below
- Keyboard navigable (arrow keys between tabs)

### Step 5: User Picks a Winner

Inform the user how to view the comparison:

> "All variants generated. View them at `src/.design-variants/CompareAll.svelte`.
> Start your dev server to see them side-by-side."

Then ask which variant they prefer:

Ask user to pick a variant (by style name) or "None — regenerate".

If user picks "None":

- Ask what they didn't like and what direction to try
- Go back to Step 2 with adjusted style selection

### Step 6: Finalize

After user picks a winner:

#### 6a. Move winner to target

Copy the winning variant's component file(s) to the target path (from Step 1). If a file already exists at the target, confirm before overwriting.

#### 6b. Extract design tokens

Create a `design-tokens.md` file alongside the target component:

```markdown
# Design Tokens — {style-name}

Extracted from {ComponentName} variant.

## Typography

- Display: {font}
- Body: {font}
- Mono: {font}

## Colors

- Primary: {hex}
- Secondary: {hex}
- Surface: {hex}
- Text: {hex}

## Spacing

- Density: {level}
- Base unit: {value}

## Motion

- Approach: {description}
- Duration: {values used}

## CSS Custom Properties

{extract all --custom-properties defined in the component}
```

#### 6c. Clean up

Delete the entire `src/.design-variants/` directory.

Report:

> "Done. Winner ({style-name}) placed at `{target-path}`. Design tokens saved to `{tokens-path}`. Variants cleaned up."

## Notes

- The comparison page uses minimal styling to avoid influencing perception of the variants
- Each variant is isolated — styles don't leak between them (scoped CSS)
- If a variant subagent fails, report the error and continue with the successful ones
- The skill does NOT commit anything — user decides when to commit