Explore UI Design

Explore visual design options including layout, color, typography, and component composition.

When to Use

• Exploring layout options for a new feature

• Considering color palettes or theming

• Evaluating typography choices

• Exploring component visual treatments

Approach

Phase 1: Design Context

Clarify:

• What is the design system context? (Reference SPEC-CSS.md)

• What existing patterns should we align with?

• What mood/tone are we aiming for?

Phase 2: Visual Options

Generate 3-4 distinct visual approaches varying:

• Layout structure (grid, flex, composition)

• Visual hierarchy (size, weight, spacing)

• Color usage (accent, background, contrast)

• Component styling (borders, shadows, rounded corners)

Use ASCII wireframes with var(--token-name) syntax.

Phase 3: Recommendation

Recommend with:

• Visual rationale

• Token usage

• Alignment with design system

Constraints

• Use existing design tokens only — flag as "Hallucination" if token doesn't exist

• No code generation

• No interaction design — that's explore/ux