用途:从网络查找并获取 CSS 组件、SVG 图标、CSS 动画/效果、SVG 图形及设计灵感,返回可用代码并附出处。
主要能力:内置 scripts/fetch-page.py(基于 Playwright 的浏览器抓取脚本),可绕过 Cloudflare 保护并渲染单页应用,用于 WebFetch 无法访问的站点(如 CodePen、UIVerse)。支持从 CodePen pen 提取干净 HTML/CSS/JS 的 JSON、按 CSS 选择器提取指定元素、设置等待时间。
常用命令(保持原样): python3 scripts/fetch-page.py "https://codepen.io/user/pen/ID" --codepen-code python3 scripts/fetch-page.py "https://uiverse.io/user/component-slug" python3 scripts/fetch-page.py "https://example.com" --selector ".code-block" python3 scripts/fetch-page.py "https://example.com" --wait 20
使用方式:先对请求分类(CSS 组件、SVG 图标、CSS 动画、SVG 图形、设计灵感),参考 references/sources.md 选择来源,运行 2-3 条并行搜索,再按来源选择抓取方式——CodePen 用 --codepen-code,UIVerse 用普通抓取,SVG 图标从 GitHub 原始文件获取(如 Lucide、Heroicons、Tabler、Feather、Simple Icons),文章教程直接用 WebFetch。结果以“描述+来源 URL+代码块+自定义提示”的格式呈现,尽量给出 2-4 个选项。
适用场景:需要现成 CSS/SVG 代码片段、图标或视觉参考的设计与前端任务。
限制:WebFetch 可正常访问的站点应优先用 WebFetch,脚本仅用于受保护站点;需清理提取代码中的冗余厂商前缀与框架包装;来源要求署名时需注明(如 Flaticon 免费版);SVG 图标优先内联并保留 viewBox;生成器类资源建议提供生成器 URL 以便调参。官方未提供更多细节。