design-lookup

name	design-lookup
version	1.0.0
description	Search and retrieve CSS components, SVG icons, design patterns, and visual inspiration from the web. Use when the user asks to find, look up, or search for CSS snippets, SVG icons, UI components, loading spinners, animations, design inspiration, or any visual/frontend design resource. Triggers on requests like "find me a CSS button", "look up an SVG spinner", "search for a card component", "find a wave divider SVG", or "get design inspiration for a dashboard".

Design Lookup

Search the web for CSS components, SVG icons, animations, and design resources. Return usable code with attribution.

Tools

scripts/fetch-page.py — Playwright browser fetcher

Bypasses Cloudflare protection and renders SPAs. Use this for sites that block WebFetch (CodePen, UIVerse, etc.).

# Extract HTML/CSS/JS code from a CodePen pen (returns clean JSON)
python3 scripts/fetch-page.py "https://codepen.io/user/pen/ID" --codepen-code

# Fetch any protected page as text
python3 scripts/fetch-page.py "https://uiverse.io/user/component-slug"

# Extract specific elements with CSS selector
python3 scripts/fetch-page.py "https://example.com" --selector ".code-block"

# Increase timeout for slow pages
python3 scripts/fetch-page.py "https://example.com" --wait 20

When to use: After WebSearch finds promising URLs on Cloudflare-protected sites (CodePen, UIVerse, etc.), use this script to fetch the actual code.

When NOT to use: For sites where WebFetch works fine (CSS-Tricks, GitHub raw, dev.to, MDN). WebFetch is faster.

Workflow

1. Classify the request — Determine what the user needs:

   • CSS component (button, card, loader, toggle, etc.)
   • SVG icon (UI icon, brand logo, etc.)
   • CSS animation/effect (hover effect, transition, keyframe animation)
   • SVG graphic (illustration, wave, blob, background)
   • Design inspiration (visual reference, not code)

2. Choose sources — Consult references/sources.md for the best sources and search patterns. Use the "Search Strategy by Request Type" table.

3. Search broadly — Run 2-3 parallel WebSearch queries combining:

   • site:{source} {query} for targeted source searches
   • A general {query} CSS/SVG search as fallback
   • Vary terminology (e.g., "loader" vs "spinner" vs "loading animation")

4. Fetch code — Use the appropriate extraction method per source:

   CodePen pens — Use fetch-page.py --codepen-code to extract clean HTML/CSS/JS as JSON.

   UIVerse components — Use fetch-page.py to get the page text (includes code with line numbers inline).

   SVG icons — Fetch raw SVGs directly from GitHub with WebFetch:

   • Lucide: https://raw.githubusercontent.com/lucide-icons/lucide/main/icons/{name}.svg
   • Heroicons: https://raw.githubusercontent.com/tailwindlabs/heroicons/master/optimized/24/outline/{name}.svg (also solid/, 20/solid/)
   • Tabler: https://raw.githubusercontent.com/tabler/tabler-icons/main/icons/outline/{name}.svg (also filled/)
   • Feather: https://raw.githubusercontent.com/feathericons/feather/main/icons/{name}.svg
   • Simple Icons: https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/{name}.svg

   Articles/tutorials — Fetch directly with WebFetch (CSS-Tricks, MDN, dev.to, blogs all work).

5. Present results — Format output as:

## {Description of component}
Source: {URL}

{code block with HTML/CSS/SVG}

{One-line note on how to customize, if relevant}

Provide 2-4 options when possible so the user or design agent can choose.

Agentic Workflow & Vibe Coding

• Iterative Sourcing: Do not expect the perfect component or icon on the first search. Fetch a candidate, review the extracted code, isolate any framework-specific bloat or conflicting styles, strip or adapt ONE CSS class/rule at a time, and preview the result until the snippet is clean and usable.
• Vibe Coding: Commit the clean, working CSS or SVG snippet locally before attempting to integrate it into complex layout structures or interactive components.

Guidelines

• Clean up extracted code — Remove unnecessary vendor prefixes, framework-specific wrappers, or unrelated styles. Present minimal, self-contained snippets.
• Note licenses — If a source requires attribution (e.g., Flaticon free tier), mention it.
• For SVG icons — Prefer inline SVG code over links to icon fonts. Include viewBox and strip unnecessary metadata.
• For generators (waves, blobs, gradients) — Suggest the generator URL so the user can tweak parameters, and provide a sample output.