ui-variations

Coordinate five parallel UI design variants with Pencil-based construction and comparison.

35|Updated Feb 15, 2026
One-click install
npx skills add https://github.com/sean-sunagaku/claude-code-plugin --skill ui-variations
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-variations
Source: https://github.com/sean-sunagaku/claude-code-plugin/tree/main/ui-variations/skills/ui-variations
Command: npx skills add https://github.com/sean-sunagaku/claude-code-plugin --skill ui-variations

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill enables teams to generate and compare five UI design variations in parallel, accelerating exploration and decision-making for UI direction choices.

Core Features & Use Cases

  • Parallel five-variant UI design generation by five designer teams (each with a reviewer and copywriter) to produce 5 screens simultaneously.
  • Pencil-based side-by-side comparison workflow and batch design execution for rapid evaluation.
  • End-to-end process including planning, design construction, review, copywriting, and centralized screenshot comparison to inform decisions.
  • Use Case: You need to evaluate multiple visual directions for a new app; this skill produces five ready-to-compare designs.

Quick Start

Instruct the AI to generate five UI design variations in parallel and compare them side-by-side using Pencil.

Frequently Asked Questions about ui-variations

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

FAQPage Schema
How do I generate multiple UI design variations for side-by-side comparison?

You can generate multiple UI design variations by orchestrating five parallel agent teams that each build a distinct variant for side-by-side comparison in Pencil. This approach produces five ready-to-compare designs simultaneously.

What is the best way to explore visual directions for a new app across iOS and Web?

The best way to explore visual directions across iOS and Web is to use a parallel design workflow that generates multiple variants simultaneously. This method includes cross-platform consistency checks and storyboard-like outputs for rapid stakeholder review.

How do I use parallel agents to create design variations in Pencil?

To create design variations in Pencil, instruct the AI to generate five UI variations in parallel. It will automatically coordinate five designer, reviewer, and copywriter subteams to construct and aggregate the designs for centralized comparison.

Does the parallel UI design workflow include copywriting and design review?

Yes, the parallel UI design workflow includes copywriting and design review. Each of the five parallel variant teams consists of a dedicated designer, reviewer, and copywriter to ensure complete, evaluated design outputs.

Can I evaluate multiple visual themes for mobile apps using parallel design generation?

Yes, you can evaluate multiple visual themes for mobile apps using parallel design generation. This process supports UI exploration tasks across platforms like iOS and Web, performing style alignment and visual comparison to inform your decisions.

Are there limitations to generating UI variations with parallel agent teams?

The main limitation of generating UI variations with parallel agent teams is that the workflow is fixed to producing exactly five variants. It outputs storyboard-like screenshots in Pencil, requiring centralized aggregation for stakeholder review.