mcpField
D
design-lookup

design-lookup

github.com/genericservice设计与 UI073 次安装24 周前更新
代码仓库

关于 design-lookup

用于搜索网页上的 CSS 组件、SVG 素材、动画和设计参考的 skill。它按来源选择搜索与提取方式，并整理代码、注明出处。

主要功能

  1. 01搜索 CSS 与 SVG 资源
  2. 02抓取受保护网页内容
  3. 03提取 CodePen 代码片段
  4. 04清理并调整检索到的代码
  5. 05注明资源来源

适用场景

  1. 01查找 CSS 按钮或加载动画
  2. 02获取 SVG 图标
  3. 03寻找动画效果
  4. 04收集视觉设计参考

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/genericservice/claude-skills --skill design-lookup

安装后在 Claude Code 中输入/design-lookup确认已加载。

附带文件references/sources.mdscripts/fetch-page.py

详细介绍

设计资源查找

搜索网页，查找 CSS 组件、SVG 图标、动画和设计资源。返回可用代码并注明出处。

工具

scripts/fetch-page.py — Playwright 浏览器抓取工具

绕过 Cloudflare 保护并渲染 SPA。适用于会阻止 WebFetch 的网站（如 CodePen、UIVerse 等）。

# 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

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

不适用场景： 对于 WebFetch 可正常使用的网站（CSS-Tricks、GitHub raw、dev.to、MDN），请使用 WebFetch。它速度更快。

工作流

  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 pens — 使用 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. 展示结果 — 按以下格式输出：

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

{code block with HTML/CSS/SVG}

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

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

Agent 工作流与氛围编程

  • 迭代寻找资源： 不要指望首次搜索就能找到完美的组件或图标。先获取候选项，检查提取出的代码，隔离任何特定于框架的冗余内容或冲突样式，然后一次剥离或调整一个 CSS 类/规则，并预览结果，直到代码片段简洁且可用。
  • 氛围编程： 在尝试将干净、可用的 CSS 或 SVG 代码片段集成到复杂布局结构或交互组件之前，先将其提交到本地。

指南

  • 清理提取的代码 — 删除不必要的厂商前缀、特定于框架的包装代码或无关样式。提供最简洁、独立的代码片段。
  • 注明许可 — 如果来源要求署名（例如，Flaticon 免费版），请注明。
  • 对于 SVG 图标 — 优先使用内联 SVG 代码，而非链接到图标字体。包含 viewBox 并删除不必要的元数据。
  • 对于生成器（波浪、斑 blob、渐变）— 提供生成器 URL，方便用户调整参数，并附上示例输出。

评论

支持 Markdown