Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

Loslegen

icon-catch-skill

Sterne23

Forks3

Aktualisiert19. Juli 2026 um 01:13

Use when 用户需要按语义搜索并下载专业 SVG 图标。

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

jiushiwon

jiushiwon/wg-skills

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

SoftwareentwicklerInformatik- und Mathematikberufe·SOC 15-1252

Datei-Explorer

3 Dateien

SKILL.md

readonly

name	icon-catch-skill
description	Use when 用户需要按语义搜索并下载专业 SVG 图标。

icon-catch-skill — 图标抓取规范

本技能提供图标抓取流程，不执行本地脚本。Claude 应根据以下规范，直接调用 Iconify API 或浏览器工具完成下载。

数据源

所有图标来自 Iconify 聚合平台，免费、无需 Key。

源名	Iconify prefix	风格特点	推荐场景
`lucide`	`lucide`	现代线性，命名与前端术语对齐	默认首选，大多数 UI 场景
`tabler`	`tabler`	5000+ 业务图标，含 filled 变体	电商/金融/医疗等细分业务
`heroicons`	`heroicons`	outline/solid，Tailwind 官方	Tailwind / 简洁后台
`phosphor`	`ph`	6 种风格	需要多状态切换的图标
`remix`	`ri`	中文语义匹配度高	国内业务
`feather`	`feather`	280+ 极简基础图标	轻量产品
`simple-icons`	`simple-icons`	3000+ 品牌单色 Logo	品牌 Logo、第三方登录
`mdi`	`mdi`	数量庞大	兜底

未指定源时，默认先用 Iconify 聚合搜索；若无结果，再按上表优先级逐个尝试单个库。

使用前询问规范

当用户要求抓图标时，Claude 必须先询问用户想用的图标库，给出风格推荐，再执行。示例：

准备抓 home 图标，可选图标库：

lucide — 现代线性，前端默认推荐（推荐）

tabler — 业务图标丰富

heroicons — Tailwind 官方

phosphor — 多粗细风格

remix — 中文语义友好

全部自动 — 从所有库中挑最合适的（默认）

你想用哪个？直接回车默认全部自动。

如果用户明确指定了库（如"用 lucide 风格"），则不再询问。

标准抓取流程

理解语义：从用户需求提取图标用途词（如「个人中心入口」→ user）。
询问图标库：向用户展示可选库及风格，确认后执行；用户已指定则跳过。
英文关键词：优先使用英文搜索；中文需求参考 references/icon-sources.md 的中英文映射表。
搜索图标：调用 Iconify API：
- 聚合搜索：GET https://api.iconify.design/search?query={英文词}&limit={数量}
- 指定库搜索：GET https://api.iconify.design/search?query={英文词}&prefix={prefix}&limit={数量}
挑选最优：按优先级 lucide → tabler → heroicons → ph → ri → feather → simple-icons → mdi 挑选，同库时优先选名称与搜索词最匹配的图标。
下载 SVG：GET https://api.iconify.design/{prefix}/{name}.svg?color=%23{颜色}&width={尺寸}&height={尺寸}
落地保存：保存到项目图标目录（uniapp 默认 static/icons/，Web 项目 src/assets/icons/ 或用户指定目录）。
展示图标询问（可选）：下载完成后，询问用户是否需要输出一个「图标展示」公共 class（居中 icon + 圆角正方形浅色背景）。需要则按下方「图标展示」规范输出。
批量场景：逐个语义词执行，保持颜色、尺寸一致，确保风格统一。

参数规范

参数	说明	示例
`out`	输出目录	`./static/icons`
`color`	图标颜色（hex，不带 `#`）	`666` / `3B82F6`
`size`	宽高（px）	`24`
`name`	自定义文件名（不含扩展名）	`icon-home`

图标展示（可选）

当用户需要把下载的图标以「居中 icon + 圆角正方形浅色背景」形式展示时，输出一个公共 CSS class。

触发时机

单图标或批量图标下载完成后，Claude 主动询问：

图标已下载到 {outDir}。是否需要输出一个「图标展示」公共 class（居中 icon + 圆角正方形浅色背景）？

用户也可在抓图前直接说：

「图标展示」
「展示图标」
「图标样式」
「图标 icon」
「给图标加个背景」
「图标容器样式」

CSS 规范

统一 class 名 .icon-box（若项目已有命名约定，可替换为项目前缀）：

.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;          /* 容器默认 48px */
  height: 48px;
  border-radius: 12px;  /* 统一圆角 */
  background-color: var(--color-primary-light, rgba(59, 130, 246, 0.12)); /* 浅色主题色 */
}

.icon-box svg,
.icon-box image,
.icon-box img {
  width: 24px;          /* 图标默认 24px */
  height: 24px;
  color: var(--color-primary, #3B82F6); /* 图标色跟随主题色 */
}

约定

背景色使用主题色的 12% 透明度（rgba(主色, 0.12)），无 CSS 变量时回退到 rgba(59, 130, 246, 0.12)。
容器默认 48×48px，图标默认 24×24px。
容器圆角 12px（约 25% 圆角）。
优先使用 CSS 变量 var(--color-primary)，无变量时回退到默认蓝色 #3B82F6。
uniapp / 小程序项目：建议把 class 放入 App.vue 的 <style> 或 static/common.css；Web 项目：建议放入 src/styles/common.css 或对应的全局样式文件。

输出物

公共 class 代码（如上）。
推荐放置位置。
使用示例：

<view class="icon-box">
  <image src="/static/icons/home.svg" />
</view>

SVG → PNG

如需 PNG，优先建议：

项目使用 SVG 直接渲染（推荐）。
确需 PNG 时，可使用 icon-forge 技能生成，或用其他 PNG 渲染工具/在线服务。

本技能不本地执行任何 SVG→PNG 脚本。

异常处理

搜不到结果：换更通用/更具体的英文词重试（如 快递 → delivery / truck）。
多次失败：建议改用 icon-forge 技能生成。
网络失败：检查网络/代理，自动重试 2 次后仍失败则降级下一源。

使用规范

同一项目只用一个图标集（优先 lucide）。
线性/填充风格不混用。
导航 20px、卡片 32px、按钮 16px；颜色跟随文字色。
图标必须贴合功能语义，禁止用 Emoji 作为功能图标。

Mehr aus diesem Repository

gleiches Repository

ui-template-builder

jiushiwon/wg-skills

UI页面模板构建器 - 固化常见页面模板，多套风格可选，支持mock数据。从个人中心到商品页，从登录页到大屏，一键生成风格统一、质量稳定的页面代码。

2026-07-2423

agent-interview-skill

jiushiwon/wg-skills

Agent 工程师面试准备导师：知识树、项目包装、模拟面试题。触发词：/agent-interview、Agent 工程师面试、准备 Agent 面试、Agent 面试题。

2026-07-2223

agent-learning-skill

jiushiwon/wg-skills

Agent 系统学习路线导师：从 Agent 概念、最小实现、模型底层、算法到 Skill/Tool 学习。触发词：/agent-learning、什么是 Agent、怎么做一个 Agent、Agent 学习路线。

2026-07-2223

vibecoding-guide-skill

jiushiwon/wg-skills

VibeCoding / AI 开发全流程知识导师入口。识别用户目标后分流到 vibecoding-workflow-skill、agent-learning-skill 或 agent-interview-skill。只做推荐，不调用其他 skill。

2026-07-2223

vibecoding-workflow-skill

jiushiwon/wg-skills

VibeCoding 产品落地全流程导师：工具/模型/IDE 选型、提示词、产品模块拆解、开发、联调、测试、部署推荐。最终生成 docs/vibecoding/roadmap.md。触发词：/vibecoding-workflow、我要做商城、帮我选型模型、前后端怎么联调。

2026-07-2223

workflow-diagram-skill

jiushiwon/wg-skills

Use when 用户想用一句话生成流程图、工作流图解、开发流程图、AI 流程图或任何步骤型图解，支持多风格输出（flat icon / 暖白手账风 / dark / cute），并提供现成模板一键出图。

2026-07-2223

name	icon-catch-skill
description	Use when 用户需要按语义搜索并下载专业 SVG 图标。

icon-catch-skill — 图标抓取规范

本技能提供图标抓取流程，不执行本地脚本。Claude 应根据以下规范，直接调用 Iconify API 或浏览器工具完成下载。

数据源

所有图标来自 Iconify 聚合平台，免费、无需 Key。

源名	Iconify prefix	风格特点	推荐场景
`lucide`	`lucide`	现代线性，命名与前端术语对齐	默认首选，大多数 UI 场景
`tabler`	`tabler`	5000+ 业务图标，含 filled 变体	电商/金融/医疗等细分业务
`heroicons`	`heroicons`	outline/solid，Tailwind 官方	Tailwind / 简洁后台
`phosphor`	`ph`	6 种风格	需要多状态切换的图标
`remix`	`ri`	中文语义匹配度高	国内业务
`feather`	`feather`	280+ 极简基础图标	轻量产品
`simple-icons`	`simple-icons`	3000+ 品牌单色 Logo	品牌 Logo、第三方登录
`mdi`	`mdi`	数量庞大	兜底

未指定源时，默认先用 Iconify 聚合搜索；若无结果，再按上表优先级逐个尝试单个库。

使用前询问规范

当用户要求抓图标时，Claude 必须先询问用户想用的图标库，给出风格推荐，再执行。示例：

准备抓 home 图标，可选图标库：

lucide — 现代线性，前端默认推荐（推荐）

tabler — 业务图标丰富

heroicons — Tailwind 官方

phosphor — 多粗细风格

remix — 中文语义友好

全部自动 — 从所有库中挑最合适的（默认）

你想用哪个？直接回车默认全部自动。

如果用户明确指定了库（如"用 lucide 风格"），则不再询问。

标准抓取流程

理解语义：从用户需求提取图标用途词（如「个人中心入口」→ user）。
询问图标库：向用户展示可选库及风格，确认后执行；用户已指定则跳过。
英文关键词：优先使用英文搜索；中文需求参考 references/icon-sources.md 的中英文映射表。
搜索图标：调用 Iconify API：
- 聚合搜索：GET https://api.iconify.design/search?query={英文词}&limit={数量}
- 指定库搜索：GET https://api.iconify.design/search?query={英文词}&prefix={prefix}&limit={数量}
挑选最优：按优先级 lucide → tabler → heroicons → ph → ri → feather → simple-icons → mdi 挑选，同库时优先选名称与搜索词最匹配的图标。
下载 SVG：GET https://api.iconify.design/{prefix}/{name}.svg?color=%23{颜色}&width={尺寸}&height={尺寸}
落地保存：保存到项目图标目录（uniapp 默认 static/icons/，Web 项目 src/assets/icons/ 或用户指定目录）。
展示图标询问（可选）：下载完成后，询问用户是否需要输出一个「图标展示」公共 class（居中 icon + 圆角正方形浅色背景）。需要则按下方「图标展示」规范输出。
批量场景：逐个语义词执行，保持颜色、尺寸一致，确保风格统一。

参数规范

参数	说明	示例
`out`	输出目录	`./static/icons`
`color`	图标颜色（hex，不带 `#`）	`666` / `3B82F6`
`size`	宽高（px）	`24`
`name`	自定义文件名（不含扩展名）	`icon-home`

图标展示（可选）

当用户需要把下载的图标以「居中 icon + 圆角正方形浅色背景」形式展示时，输出一个公共 CSS class。

触发时机

单图标或批量图标下载完成后，Claude 主动询问：

图标已下载到 {outDir}。是否需要输出一个「图标展示」公共 class（居中 icon + 圆角正方形浅色背景）？

用户也可在抓图前直接说：

「图标展示」
「展示图标」
「图标样式」
「图标 icon」
「给图标加个背景」
「图标容器样式」

CSS 规范

统一 class 名 .icon-box（若项目已有命名约定，可替换为项目前缀）：

.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;          /* 容器默认 48px */
  height: 48px;
  border-radius: 12px;  /* 统一圆角 */
  background-color: var(--color-primary-light, rgba(59, 130, 246, 0.12)); /* 浅色主题色 */
}

.icon-box svg,
.icon-box image,
.icon-box img {
  width: 24px;          /* 图标默认 24px */
  height: 24px;
  color: var(--color-primary, #3B82F6); /* 图标色跟随主题色 */
}

约定

背景色使用主题色的 12% 透明度（rgba(主色, 0.12)），无 CSS 变量时回退到 rgba(59, 130, 246, 0.12)。
容器默认 48×48px，图标默认 24×24px。
容器圆角 12px（约 25% 圆角）。
优先使用 CSS 变量 var(--color-primary)，无变量时回退到默认蓝色 #3B82F6。
uniapp / 小程序项目：建议把 class 放入 App.vue 的 <style> 或 static/common.css；Web 项目：建议放入 src/styles/common.css 或对应的全局样式文件。

输出物

公共 class 代码（如上）。
推荐放置位置。
使用示例：

<view class="icon-box">
  <image src="/static/icons/home.svg" />
</view>

SVG → PNG

如需 PNG，优先建议：

项目使用 SVG 直接渲染（推荐）。
确需 PNG 时，可使用 icon-forge 技能生成，或用其他 PNG 渲染工具/在线服务。

本技能不本地执行任何 SVG→PNG 脚本。

异常处理

搜不到结果：换更通用/更具体的英文词重试（如 快递 → delivery / truck）。
多次失败：建议改用 icon-forge 技能生成。
网络失败：检查网络/代理，自动重试 2 次后仍失败则降级下一源。

使用规范

同一项目只用一个图标集（优先 lucide）。
线性/填充风格不混用。
导航 20px、卡片 32px、按钮 16px；颜色跟随文字色。
图标必须贴合功能语义，禁止用 Emoji 作为功能图标。