npx claudepluginhub aboul3ata/lazyweb-skill --plugin lazywebThis skill is limited to using the following tools:
**This skill produces FILES, not a plan.** Regardless of whether you are in plan mode
Captures screenshot of user's current design, finds similar Lazyweb screens, generates concrete improvement ideas with real references. For UI feedback and reviews.
Scouts aesthetic references, UI patterns, and interaction examples from diverse domains to inspire design feel and visual direction beyond competitive research.
Researches competitors and visual trends in a niche, captures screenshots, generates moodboards, and delivers strategic UI/UX dossiers for redesigns or new features.
Share bugs, ideas, or general feedback.
This skill produces FILES, not a plan. Regardless of whether you are in plan mode or not, ALWAYS:
.lazyweb/design-brainstorm/{topic}-{date}/report.md.lazyweb/design-brainstorm/{topic}-{date}/report.html.lazyweb/design-brainstorm/{topic}-{date}/references//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.
/lazyweb-design-research/lazyweb-quick-references/lazyweb-design-improveUse the hosted Lazyweb MCP tools at https://www.lazyweb.com/mcp for all Lazyweb database access.
Required MCP tools:
lazyweb_search — text search over mobile and desktop screenshotslazyweb_find_similar — more results like a known Lazyweb screenshot IDlazyweb_compare_image — visual search from image_base64 + mime_type or image_urllazyweb_health — connectivity checkThese are stable public compatibility aliases. The server may also expose canonical
tools such as search_screenshots, list_filters, vision_screenshots, and
metadata_screenshots; prefer the lazyweb_* names in this skill.
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 setup instructions at https://www.lazyweb.com/mcp-install, paste them into this agent, then rerun this skill. Lazyweb is free; the bearer token is only for no-billing UI reference tools and is okay in ignored local config." Then proceed with web research only — the brainstorm still works, just with web examples.
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
Clarify:
If the user is brainstorming for a specific page or app they're building, capture the current state:
Save as $REPORT_DIR/references/current-state.png and include it in the report
after the TL;DR as:
## Current State

*{Brief description of what we're looking at}*
This grounds the brainstorm — the reader sees where we are before seeing where we could go.
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.
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:
{"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--platform desktop--platform mobileEach 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:
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:
visionDescription before using ANY screenshotvisionDescription doesn't match your idea — DO NOT USE ITvisionDescription for captionsMismatched references destroy user trust faster than anything else.
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:
$LB goto "{searchUrl}"$LB snapshot -i$LB fill @eN "{query}"$LB press Enter then $LB snapshot -i$LB screenshot "$REPORT_DIR/references/{library}-{company}-{screen}.png"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):
/lazyweb-add-inspo-source to reconnect."Label all library-sourced references: [Mobbin], [Savee], etc.
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:
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.
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
For each cross-category result, ask:
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.
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.}

*{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.}

*{Company} — the standard approach in {category} [{Lazyweb|Web}]*
## Cross-Pollination Ideas
### From {Source Category}: {Company}

*{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.
After writing report.md, generate a report.html alongside it for visual preview.
The HTML report should:
references/filename.png)open "$REPORT_DIR/report.html"Tell the user where the report was saved.