design-lookup

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](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.