Brainstorm

playwright-cli screenshot --filename=reference-{n}.png
playwright-cli snapshot --filename=reference-{n}.yaml

Summarize patterns observed across the reference sites (layout patterns, color usage, typography hierarchy, spacing rhythm, component patterns) and incorporate them into the brainstorm ideas. Map observations to the project's existing theme tokens and components.

2. Gather Context

• Read docs/components.md to discover available components
• Read docs/pages.md to discover existing pages
• Read shared/references/component-registry.md for component details
• Read shared/references/tailwind-theme.md for available design tokens

3. Generate Ideas

Create 3-5 design alternatives, each containing:

• Title: Descriptive name for the idea
• Description: What it is and why it's useful
• Layout: Rough layout description (sections, arrangement)
• Components Used: Existing components from the registry
• Components Needed: New components that would need to be created
• Design Notes: Color scheme, typography, spacing suggestions using theme tokens

4. Store Brainstorm

Save the brainstorm document:

• repository → docs/brainstorms/{topic-slug}.md
• local → docs/_local/brainstorms/{topic-slug}.md

Document format:

# Brainstorm: {Topic}
Date: {date}

## Idea 1: {Title}
**Description**: ...
**Layout**: ...
**Uses**: {existing components}
**Needs**: {new components}
**Design Notes**: ...

## Idea 2: {Title}
...

5. Offer Next Steps

Ask the user which idea they'd like to pursue:

• "Would you like me to create this as a component?" → trigger /create-component
• "Would you like me to create this as a page?" → trigger /create-page

Output

Report:

1. Number of ideas generated
2. Brainstorm document saved (path)
3. Existing components referenced
4. New components suggested
5. Reference websites analyzed (if any)

Example

User: "Brainstorm ideas for a pricing page"

Generates 3-5 pricing page design alternatives using existing components and theme.

User: "Brainstorm a dashboard layout, I like how https://vercel.com/dashboard and https://railway.app look"

Captures both reference websites via playwright-cli, analyzes their layout patterns, color schemes, and component structures, then generates 3-5 dashboard ideas inspired by those references — mapped to the project's theme tokens and existing components.