ui-designer/design-variants

Generates 2-3 UI design variants with tradeoff analysis and comparison matrices for user selection.

553|50|Updated Jan 10, 2026
One-click install
npx skills add https://github.com/echoVic/boss-skill --skill ui-designer-design-variants
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-designer/design-variants
Source: https://github.com/echoVic/boss-skill/tree/main/skill/skills/ui-designer/design-variants
Command: npx skills add https://github.com/echoVic/boss-skill --skill ui-designer-design-variants

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

When a product's design direction is uncertain or stakeholders disagree, committing to a single UI design too early leads to costly rework. This Skill produces multiple distinct design proposals with structured tradeoff analysis so users can compare options and make an informed decision before implementation begins.

Core Features & Use Cases

  • Variant Strategy Selection: Chooses differentiation dimensions (style, layout, interaction, or complexity) based on PRD analysis, ensuring each variant has a genuinely different design philosophy rather than superficial color changes.
  • Structured Comparison Matrix: Generates a decision table covering visual complexity, development cost, learning curve, scalability, brand consistency, and mobile adaptability.
  • State-Managed User Decision Flow: Writes variants to .boss/<feature>/ui-design-variants.json, reports a NEEDS_CONTEXT status, records the user's choice via the boss runtime event stream, and promotes the selected variant into the formal ui-design.json and ui-spec.md artifacts.
  • Use Case: A PRD for a new dashboard leaves the layout open. The Skill produces a single-column, a card-based, and a dual-pane variant with pros/cons and a recommendation, then waits for the user's pick before finalizing the design spec.

Quick Start

Ask the agent to generate several design variants with tradeoff comparisons for the current feature's PRD and wait for your selection.

Frequently Asked Questions about ui-designer/design-variants

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate multiple UI design options from a PRD?

Provide a PRD that requests multiple proposals or explicitly ask for design variants. The Skill analyzes the PRD, picks a differentiation strategy such as style, layout, interaction, or complexity, and produces 2-3 variants with tradeoffs and a comparison matrix.

What makes each design variant meaningfully different?

Each variant differs along a clear design dimension such as minimalist versus rich styling, single-column versus card layouts, or stepwise versus single-page interaction. The Skill explicitly avoids variants that only change colors or fonts.

When should I avoid using design variants?

Avoid variant mode for simple features or when the design direction is already clear, since producing multiple proposals adds decision fatigue without benefit. It is intended for genuinely uncertain or contested design directions.

What happens after I select a design variant?

The selected variant ID is recorded in ui-design-variants.json, the choice is logged through the boss runtime event stream for replayability, and the chosen design is promoted into the formal ui-design.json and ui-spec.md artifacts before reporting DONE.

Does the design variants workflow require other skills?

Yes, it depends on the ui-designer/design-system skill, which supplies the concrete visual implementation, components, and styling foundations that each variant builds upon.