Lazyweb Design Brainstorm

CRITICAL: Output Behavior

This skill produces FILES, not a plan. Regardless of whether you are in plan mode or not, ALWAYS:

Write the report to .lazyweb/design-brainstorm/{topic}-{date}/report.md
Write the HTML to .lazyweb/design-brainstorm/{topic}-{date}/report.html
Download references to .lazyweb/design-brainstorm/{topic}-{date}/references/
Do NOT write brainstorm content into a plan file
After saving, show the user a summary of ideas and tell them where the files are
Ask the user if the brainstorm looks good
If in plan mode, exit plan mode after the user confirms
Suggest next steps: "You can now prototype the top ideas, run /lazyweb-design-research for deeper analysis on a specific idea, or start building."

Find novel design patterns by deliberately looking OUTSIDE the obvious category. If everyone in fintech copies each other's dashboards, look at how gaming apps handle data visualization. If every productivity app has the same onboarding, look at how social apps hook new users.

The point is cross-pollination, not conformity.

When to Use This

User wants fresh/creative design ideas
User is tired of seeing the same patterns in their category
User asks "what if we did something different" or "brainstorm ideas"
User wants to differentiate their design from competitors

When NOT to Use This

User wants to understand standard patterns → use /lazyweb-design-research
User wants quick visual references → use /lazyweb-quick-references
User has an existing design and wants improvements → use /lazyweb-design-improve

Lazyweb MCP Setup

Use the hosted Lazyweb MCP tools for all Lazyweb database access.

Required MCP tools:

lazyweb_search — text search over mobile and desktop screenshots
lazyweb_find_similar — more results like a known Lazyweb screenshot ID
lazyweb_compare_image — visual search from image_base64 + mime_type or image_url
lazyweb_health — connectivity check

Before searching, verify MCP is available by listing tools and running lazyweb_health.

If Lazyweb MCP is not installed or auth fails: Tell the user: "Lazyweb MCP is not installed. Enable the global Lazyweb plugin or get the free one-line install prompt at https://lazyweb.com/#pricing, paste it into this agent, then rerun this skill." Then proceed with web research only — the brainstorm still works, just with web examples.

Browse Setup (run BEFORE any web capture)

LB=""
# Check lazyweb-skill browse first
for _P in "$(pwd)/.claude/skills/lazyweb-skill/browse/dist/browse" ~/.claude/skills/lazyweb-skill/browse/dist/browse; do
  [ -x "$_P" ] && LB="$_P" && break
done
# Fall back to gstack browse
if [ -z "$LB" ]; then
  _ROOT=$(git rev-parse --show-toplevel 2>/dev/null)
  [ -n "$_ROOT" ] && [ -x "$_ROOT/.claude/skills/gstack/browse/dist/browse" ] && LB="$_ROOT/.claude/skills/gstack/browse/dist/browse"
  [ -z "$LB" ] && [ -x ~/.claude/skills/gstack/browse/dist/browse ] && LB=~/.claude/skills/gstack/browse/dist/browse
fi
[ -x "$LB" ] && echo "BROWSE_READY: $LB" || echo "NO_BROWSE"

If NO_BROWSE: Web screenshot capture is unavailable. Lazyweb results still work — just describe web examples in text without screenshots. To enable web captures, run: cd ~/.claude/skills/lazyweb-skill/browse && ./setup

Workflow

1. Understand What They're Building

Clarify:

What's the product? (app type, audience, core value prop)
What specific screen or flow needs fresh thinking?
What's the "obvious" approach they want to avoid?
Mobile or desktop/web? This determines the reference balance.

2. Capture Current State (if applicable)

If the user is brainstorming for a specific page or app they're building, capture the current state:

Running dev server or URL available: Use preview/browse tools to screenshot it
Mobile app: Ask user to provide a screenshot
No specific page yet: Skip this step

Save as $REPORT_DIR/references/current-state.png and include it in the report after the TL;DR as:

## Current State
![Current State](references/current-state.png)
*{Brief description of what we're looking at}*

This grounds the brainstorm — the reader sees where we are before seeing where we could go.

3. Map the Obvious Category

First, understand what everyone in the user's space does. Quick search in the obvious category:

{"query":"<screen type>","category":"<their category>","limit":10}
{"query":"<screen type>","category":"<their category>","platform":"desktop","limit":10}

This establishes the baseline — the "zig" that everyone does.

4. Search Outside the Category

Now deliberately search in UNRELATED categories for the same screen type. The more different the category, the more novel the inspiration.

Category cross-pollination examples:

Building a finance app? Search in Gaming, Entertainment, Music, Social
Building a productivity tool? Search in Fitness, Food & Drink, Travel, Music
Building an e-commerce app? Search in Education, Health, Social Networking
Building a health app? Search in Gaming, Entertainment, Finance

{"query":"<screen type>","category":"Gaming","limit":15}
{"query":"<screen type>","category":"Entertainment","limit":15}
{"query":"<screen type>","category":"Social Networking","platform":"desktop","limit":15}

Platform routing: Lazyweb has both mobile app screenshots and desktop/web site screenshots.

--platform mobile — mobile app screenshots only
--platform desktop — desktop/web site screenshots only
--platform all (default) — search both, results grouped desktop-first then mobile
A mac app, SaaS dashboard, or web product → use --platform desktop
An iPhone/Android app → use --platform mobile
General research or cross-platform → omit (searches both)

Each result includes a platform field ("mobile" or "desktop") so you know the source. Desktop results also include a pageUrl field with the original site URL.

Also try searching for the underlying FUNCTION rather than the screen name:

Instead of "dashboard" → search "data visualization with gamification"
Instead of "onboarding" → search "first-time experience with tutorial"
Instead of "settings" → search "personalization with preferences"

Explore generously. Run 4-6 searches across different categories. Cast a very wide net — you can filter later. More raw material = better cross-pollination.

HIGH BAR FOR REFERENCES: Each Lazyweb result includes a visionDescription field — a text description of what's actually in the screenshot. Read it.

Rules for attaching references to the brainstorm:

Read visionDescription before using ANY screenshot
The screenshot MUST directly illustrate the cross-pollination idea you're proposing
If visionDescription doesn't match your idea — DO NOT USE IT
A brainstorm idea with no image but a great ASCII sketch beats one with a mismatched screenshot
Never guess what's in a screenshot — use visionDescription for captions
If there's no visionDescription, skip the screenshot

Mismatched references destroy user trust faster than anything else.

5. Search Connected Inspiration Libraries

Check if ~/.lazyweb/libraries.json exists and has connected libraries:

cat ~/.lazyweb/libraries.json 2>/dev/null

If libraries are configured, search each one using the browse tool. For brainstorms, search BOTH the obvious category AND unrelated categories in each library:

Navigate to the library's search URL: $LB goto "{searchUrl}"
Take a snapshot to understand the page: $LB snapshot -i
Search for the cross-pollination query: $LB fill @eN "{query}"
Submit and wait for results: $LB press Enter then $LB snapshot -i
Browse through results — look for the unexpected, the novel, the "wait, that's interesting"
Screenshot the standout results: $LB screenshot "$REPORT_DIR/references/{library}-{company}-{screen}.png"
Note what makes each one a genuine "zag"

Brainstorm-specific: Libraries like Mobbin and Savee have category filters. Use them to deliberately search outside the user's category — that's the whole point of this skill.

If the library session has expired (login wall, redirect to sign-in):

Tell the user: "Your {library} session has expired. Run /lazyweb-add-inspo-source to reconnect."
Skip this library and continue with other sources.

Label all library-sourced references: [Mobbin], [Savee], etc.

6. Web Research + Live Screenshot Capture (REQUIRED)

Lazyweb gives you curated screenshots. But brainstorms need the UNEXPECTED — Awwwards winners, experimental sites, award-winning designs nobody in the user's space is looking at.

Step A — Find unconventional URLs via WebSearch:

"unconventional [screen type] design"
"[different industry] approach to [problem]"
"creative [screen type] examples [current year]"
"[award-winning site] [screen type]" — Awwwards, FWA, CSS Design Awards winners

Collect 3-8 URLs of standout, unconventional examples.

Step B — Capture live screenshots from those URLs:

if [ -x "$LB" ]; then
  $LB goto "https://awwwards-winner.com/page"
  $LB screenshot "$REPORT_DIR/references/awwwards-winner-page.png"
fi

If the browse tool is not available, describe web examples in the report without images.

This is especially important for brainstorms. Web captures of unconventional sites are often the most novel cross-pollination sources because desktop/web has more design freedom than mobile.

Platform balance: Also deliberately search the OTHER platform for cross-pollination. A novel web layout can inspire a fresh mobile approach and vice versa.

7. Download References

REPORT_DIR="$(pwd)/.lazyweb/design-brainstorm/{topic-slug}-{YYYY-MM-DD}"
mkdir -p "$REPORT_DIR/references"

Download Lazyweb results (cap 30):

curl -sL "{imageUrl}" -o "$REPORT_DIR/references/{company}-{screen}.png"

For web-captured examples:

if [ -x "$LB" ]; then
  $LB goto "https://example.com"
  $LB screenshot "$REPORT_DIR/references/{company}-{screen}.png"
fi

8. Identify Transferable Patterns

For each cross-category result, ask:

What pattern is this app using? (not what it looks like, but what it DOES)
Why does this work in its original context?
Could this same pattern work in the user's context? How would it need to adapt?
What makes this a genuine "zag" vs just a random thing from another app?

Guardrail: Not everything novel is useful. A gaming leaderboard in a banking app might be terrible. Filter for ideas where the UNDERLYING PATTERN transfers, even if the surface aesthetic doesn't.

9. Write Brainstorm Document

Write to .lazyweb/design-brainstorm/{topic-slug}-{YYYY-MM-DD}/report.md

Reverse pyramid: Lead with the action (which ideas to prototype), then the ideas, then the analysis. The reader should know what to do in the first 30 seconds.

# Design Brainstorm: {Topic}

## TL;DR
{The most provocative transferable idea — 1-2 sentences}

## Current State
{Include ONLY if a current state screenshot was captured in step 2. Otherwise omit this section.}
![Current State](references/current-state.png)
*{Brief description of what we're looking at}*

## Which Ideas to Prototype
{ACTION FIRST. Rank ideas by feasibility × novelty. Best brainstorm ideas are
HIGH novelty AND HIGH feasibility — not just weird for weird's sake.}

| Idea | Novelty | Feasibility | Verdict |
|------|---------|-------------|---------|
| {idea} | High/Med/Low | High/Med/Low | Prototype / Explore / Skip |

## The Obvious Approach
{What everyone in this category does — the "zig."
Brief, with 1-2 example screenshots from the user's category.}

![Typical Example](references/typical-category-app.png)
*{Company} — the standard approach in {category} [{Lazyweb|Web}]*

## Cross-Pollination Ideas

### From {Source Category}: {Company}
![Reference](references/company-screen.png)
*{Company} — {What they do} [{Lazyweb|Web}]*

**The Pattern:** {What's the underlying design pattern, abstracted from the specific app}
**Applied Here:** {How this could work in the user's product — be specific}
**Why It's a Zag:** {What makes this different from what everyone else in the category does}
**Sketch:** {ASCII wireframe showing how this idea would look in the user's product}

**ASCII mockups:** For each cross-pollination idea, include a rough ASCII wireframe sketch
showing how the pattern would look applied to the user's product. Keep them simple —
box-drawing characters, just enough to communicate the layout idea. Example:

┌─────────────────────────────┐ │ Logo [Sign In] │ ├─────────────────────────────┤ │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │ img │ │ img │ │ img │ │ │ └──┬──┘ └──┬──┘ └──┬──┘ │ │ Plan A Plan B Plan C │ │ │ │ [Get Started →] │ └─────────────────────────────┘


These sketches help the user visualize the idea without needing to open a design tool.
They don't need to be pixel-perfect — just communicative.

### From {Source Category}: {Company}
...

## Wild Cards
{1-2 ideas that are genuinely unconventional. Might not work but worth
considering. Flag the risk alongside the upside.}

Label each reference [Lazyweb] or [Web] so the user knows where it came from.

10. Generate HTML Report

After writing report.md, generate a report.html alongside it for visual preview. The HTML report should:

Be a self-contained single HTML file with inline CSS (no external dependencies)
Use clean, readable styling: system fonts, max-width 900px, comfortable line-height
Reference images using RELATIVE paths (references/filename.png)
Style images with rounded corners, subtle shadow, max-width that fits the layout
Use a light blue callout box for the TL;DR section
Make tables clean with light borders and header background
Open the HTML file in the user's browser: open "$REPORT_DIR/report.html"

Tell the user where the report was saved.

Brainstorm Mindset

The goal is NOVELTY WITH PURPOSE — not random weirdness
Every idea should have a "why this could work here" explanation
If an idea is high novelty but low feasibility, flag it as a Wild Card
The best brainstorms find 1-2 genuinely transferable patterns, not 10 forced ones
It's OK to say "I didn't find strong cross-pollination opportunities for this screen type" — that's more honest than padding with irrelevant ideas

lazyweb-design-brainstorm