From ui-variations
Generates 5 custom UI design variations in Pencil with 15 parallel agents analyzing app codebase, domain, personas, competitors. Builds screens simultaneously for comparison, A/B testing, design exploration.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ui-variations:ui-variationsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
現在のアプリを分析し、そのアプリに合った5つの異なるスタイル方向を動的に生成。
現在のアプリを分析し、そのアプリに合った5つの異なるスタイル方向を動的に生成。
各 ui-designer が mcp__pencil__batch_design で直接構築するため、5画面が同時に出来上がる。
固定プリセットは使わず、毎回アプリのドメイン・コードベース・ペルソナ・トンマナから導出する。
リーダー(あなた)
├── V1チーム: v1-designer + v1-reviewer + v1-copywriter
├── V2チーム: v2-designer + v2-reviewer + v2-copywriter
├── V3チーム: v3-designer + v3-reviewer + v3-copywriter
├── V4チーム: v4-designer + v4-reviewer + v4-copywriter
└── V5チーム: v5-designer + v5-reviewer + v5-copywriter
各 designer が直接 Pencil に書き込む(MCP ツールはサブエージェントでも使用可能)
リーダーは見守り + 最終比較レポート
以下を確認(不明ならユーザーに質問):
プリセットは使わない。 現在のアプリケーションを分析し、そのアプリに合ったスタイル方向を毎回ゼロから生成する。
以下のソースから情報を集める(存在するもの全て):
コードベースから:
ドキュメントから:
docs/personas/ - ペルソナ(あれば行動パターン・利用シーンを抽出).claude/app-tone-manner/ or docs/tone-manner/ - トンマナdocs/product-context.md - プロダクト定義docs/competitive-analysis/ - 競合分析CLAUDE.md - プロジェクトの概要ユーザーから:
収集したアプリ情報を元に、以下を WebSearch で調査する:
収集した情報を統合し、このアプリ固有の5つの方向性を設計する。
生成ルール:
各スタイルについて以下を定義:
get_editor_state で現在のファイルを確認get_guidelines でデザインガイドライン取得(topic: "design-system")find_empty_space_on_canvas で空き領域を特定V1 (gap:100) V2 (gap:100) V3 (gap:100) V4 (gap:100) V5
393x852 393x852 393x852 393x852 393x852
各フレームの設定:
重要: 各フレームのノードIDを記録する。designer に渡す情報として必須。
TeamCreate で ui-variations チームを作成。
TaskCreate で以下を作成:
バリエーションごと(x5):
V{N} デザイン構築 - ui-designer 担当V{N} デザインレビュー - design-reviewer 担当(デザイン構築に blockedBy)V{N} コピー作成 - copy-writer 担当(デザイン構築に blockedBy)全体:
スクリーンショット取得 + 比較 - リーダー担当(全15タスクに blockedBy)1つのメッセージで15エージェントを並列起動する。
各バリエーションにつき3エージェント:
subagent_type: "general-purpose"
team_name: "ui-variations"
name: "v{N}-designer" (or v{N}-reviewer, v{N}-copywriter)
model: "opus"
mode: "bypassPermissions"
run_in_background: true
注意: subagent_type は "general-purpose" を使用する(MCP ツールへのアクセスが必要なため)。
プロンプトに各エージェントの役割定義(agents/*.md の内容)を含める。
ui-designer へ:
v{N}-reviewer, v{N}-copywriterdesign-reviewer へ:
v{N}-designer, v{N}-copywritercopy-writer へ:
v{N}-designer, v{N}-reviewerリーダーの役割:
5つの designer が同じ .pen ファイルに同時書き込みする。競合を防ぐため:
document への直接 Insert は禁止(リーダーのみ)get_screenshot, batch_get のみ)、書き込みは designer が行うチーム内フロー:
mcp__pencil__batch_design でデザイン構築mcp__pencil__get_screenshot で確認mcp__pencil__get_screenshot でレビュー → フィードバックmcp__pencil__get_screenshot でデザイン確認 → コピー提案全チーム完了後:
get_screenshot を取得UI_VARIATIONS_REPORT.md として出力| 観点 | V1 | V2 | V3 | V4 | V5 |
|---|---|---|---|---|---|
| ビジュアル品質 | /10 | /10 | /10 | /10 | /10 |
| UX | /10 | /10 | /10 | /10 | /10 |
| アクセシビリティ | /10 | /10 | /10 | /10 | /10 |
| プラットフォーム準拠 | /10 | /10 | /10 | /10 | /10 |
| コピー品質 | /10 | /10 | /10 | /10 | /10 |
| 総合 | /50 | /50 | /50 | /50 | /50 |
shutdown_request を送信TeamDeletedesigner のプロンプトに必ず含める:
fill プロパティ(textColor は無効)justifyContent は space_between(アンダースコア、ハイフンではない)batch_design は最大25操作/コールfoo=I("parent", {...})descendants プロパティ経由G() 操作(AI生成 or stock)filePath パラメータは毎回必ず指定するnpx claudepluginhub sean-sunagaku/claude-code-plugin --plugin ui-variationsReviews and improves UI designs for iOS and Web using 5 specialist agents (UX, visual, accessibility, mobile UI, copy designers) that discuss and edit in Pencil tool.
Designs UI/UX systems with style guides, color palettes, typography, and component specs for new interfaces. Asks about product type, tech stack, and deliverables before producing design tokens, layouts, or style guides.
Guides crafting precise prompts for Google Stitch AI to generate high-quality UI designs for web and mobile apps from text or images.