design-arenalisted

# Design Arena ## Purpose Deploy Claude Code Agent Teams to generate competing UI/UX design interpretations for any project. Watch agents design in real-time on Pencil.dev's canvas, evaluate the results, synthesize the best elements into a locked design direction, then build out the full UI. This is a fully interactive, human-in-the-loop workflow — you are present and steering throughout. ## When to Use - Starting a new project and want to explore layout directions before committing - Existing project feels stale and needs a fresh perspective on composition - You have a locked design system (colors, type, spacing) but need to explore page layouts - You want to see how the same brief produces different information hierarchies - You want to visually compare 3-4 layout approaches side by side before writing production code ## Examples **Example 1: New project with no design spec** ``` User: "I want to explore designs for my personal finance tracker. Use the design arena." Claude: [Uses design-arena] Runs condensed design interview (5-8 questions), generates constraint brief, proposes 4 agent creative briefs, deploys Agent Team into Pencil.dev. User watches, steers, evaluates, synthesizes. ``` **Example 2: Existing project with design system** ``` User: "Run the design arena for my Agent Control Center — I have a design spec already." Claude: [Uses design-arena] Scans project for design-system-spec.md and tailwind.config.js, summarizes what it found, proposes agent briefs