Back to Details

design-lookup

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design Lookup

设计资源查找

Search the web for CSS components, SVG icons, animations, and design resources. Return usable code with attribution.
从网络上搜索CSS组件、SVG图标、动效和设计资源。返回可直接使用的代码并标注来源。

Tools

工具

scripts/fetch_page.py
— Playwright browser fetcher

scripts/fetch_page.py
— Playwright浏览器抓取工具

Bypasses Cloudflare protection and renders SPAs. Use this for sites that block WebFetch (CodePen, UIVerse, etc.).
bash
undefined
绕过Cloudflare防护并渲染单页应用（SPA）。适用于那些屏蔽WebFetch的网站（如CodePen、UIVerse等）。
bash
undefined

Extract HTML/CSS/JS code from a CodePen pen (returns clean JSON)

从CodePen作品中提取HTML/CSS/JS代码（返回整洁的JSON格式）

python3 scripts/fetch_page.py "https://codepen.io/user/pen/ID" --codepen-code
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"
python3 scripts/fetch_page.py "https://uiverse.io/user/component-slug"

Extract specific elements with CSS selector

使用CSS选择器提取特定元素

python3 scripts/fetch_page.py "https://example.com" --selector ".code-block"
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.
python3 scripts/fetch_page.py "https://example.com" --wait 20

**适用场景：** 当WebSearch在受Cloudflare保护的网站（如CodePen、UIVerse等）上找到有价值的URL后，使用此脚本抓取实际代码。

**不适用场景：** 对于WebFetch可以正常工作的网站（如CSS-Tricks、GitHub raw、dev.to、MDN），WebFetch速度更快，无需使用此脚本。

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:
undefined
  1. 分类请求 — 确定用户需求类型：
    • CSS组件（按钮、卡片、加载器、开关等）
    • SVG图标（UI图标、品牌标志等）
    • CSS动画/效果（悬停效果、过渡、关键帧动画）
    • SVG图形（插画、波浪、Blob图形、背景）
    • 设计灵感（视觉参考，非代码类）
  2. 选择来源 — 参考references/sources.md获取最佳来源和搜索模式。使用“按请求类型划分的搜索策略”表格。
  3. 广泛搜索 — 运行2-3个并行WebSearch查询，组合以下方式：
    • 使用
      site:{source} {query}
      进行定向来源搜索
    • 以通用的
      {query} CSS/SVG
      搜索作为备选
    • 变换术语（例如“loader”、“spinner”、“loading animation”）
  4. 抓取代码 — 根据来源选择合适的提取方式：
    CodePen作品 — 使用
    fetch_page.py --codepen-code
    提取整洁的HTML/CSS/JS代码，以JSON格式返回。
    UIVerse组件 — 使用
    fetch_page.py
    获取页面文本（包含带行号的内嵌代码）。
    SVG图标 — 直接使用WebFetch从GitHub抓取原始SVG：
    • 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
      （也支持
      solid/
      、
      20/solid/
      ）
    • Tabler: 
      https://raw.githubusercontent.com/tabler/tabler-icons/main/icons/outline/{name}.svg
      （也支持
      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
    文章/教程 — 直接使用WebFetch抓取（CSS-Tricks、MDN、dev.to及各类博客均适用）。
  5. 展示结果 — 按以下格式输出：
undefined

{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.
来源: {URL}
{包含HTML/CSS/SVG的代码块}
{相关的一行自定义说明（如有需要）}

尽可能提供2-4个选项，供用户或设计agent选择。

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.
  • 清理提取的代码 — 移除不必要的浏览器前缀、框架特定的包装代码或无关样式。提供精简、独立可运行的代码片段。
  • 标注许可证 — 如果来源要求署名（例如Flaticon免费版），请注明。
  • SVG图标 — 优先使用内联SVG代码，而非图标字体链接。包含
    viewBox
    属性并移除不必要的元数据。
  • 生成器（波浪、Blob图形、渐变） — 建议用户访问生成器URL以调整参数，并提供示例输出。