TypingMindTypingMindThe best frontend for AI
Icon Image Catch Skill logo

Icon Image Catch Skill

Community
jiushiwon
icon-image-catch-skill

Use when 用户需要为项目搜索/下载图标（icon）、真实图片（配图、背景图、banner），或要求审计项目素材需求。

Overview

Publisherjiushiwon
Repositorywg-skills
Skill nameicon-image-catch-skill
Stars
123
Forks
38
Bundled files
4
LicenseApache-2.0
Links
Skill sourceRepository
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 4 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by jiushiwon on GitHub. Read the source before you install it.

Installation

Install the Icon Image Catch Skill AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/jiushiwon/wg-skills/tree/main/vibeCoding/frontend/icon-image-catch-skill
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/jiushiwon/wg-skills.git /tmp/wg-skills
mkdir -p .claude/skills
cp -r /tmp/wg-skills/vibeCoding/frontend/icon-image-catch-skill .claude/skills/icon-image-catch-skill
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Icon Image Catch Skill in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Icon Image Catch Skill on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Icon Image Catch Skill is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

icon-image-catch-skill — 远程素材抓取总入口

本技能不执行任何本地脚本，只提供规范与流程。Claude 应根据以下规则，直接调用 Iconify、图库 API 或浏览器/网络工具完成素材抓取。

路由判断

用户意图进入子技能
要图标、icon、小图标、功能图标、tabBar 图标icon-catch-skill
要图片、配图、背景图、banner、头图、照片image-catch-skill
两者都要先 icon 后图片，分别执行
扫描项目并自动抓取所需素材先执行「项目素材需求审计」，再按审计结果自动进入对应子技能抓取
审计项目需要哪些素材见下文「项目素材需求审计」

通用工作原则

  1. 语义先行：先把用户需求翻译成精准英文搜索词。
  2. 选库/选源询问：抓图标前先问用户想用的图标库；抓图片前先问图源。用户不选则默认自动降级。
  3. 就近落地：素材下载到用户项目约定的目录（如 static/icons、static/images）。
  4. 可追溯：记录素材来源、作者、原始链接，必要时写入同目录元数据文件。
  5. 风格统一：同一项目的图标必须来自同一图标集、同一风格；图片色调与项目主题色协调。
  6. 降级意识：icon 某库失败 → 自动降级下一库；抓不到 → 换关键词 → 仍不行建议用 frontend-icon-skill 生成。图片某源失败 → 自动降级下一源。
  7. 压缩询问：下载图片时默认询问用户是否压缩；若压缩，可用 frontend-icon-skill 等工具处理，或依赖图源远程缩放参数。

环境准备（由 Claude 负责）

  • icon 抓取：基于 Iconify，零配置、免费、无需 Key。
  • 图片抓取：
    • 自定义源：询问用户是否有自己的图片 CDN/图片服务。
    • 正版图库：Pexels / Pixabay / Unsplash，需用户自行申请免费 Key。
    • 默认兜底：未配置任何 Key 时，使用 Lorem Flickr（关键词语义）和 Picsum（随机占位）。

Claude 不应在 skill 目录下执行 npm install 或运行 Node.js 脚本。

项目素材需求审计

当用户要求审计项目素材时：

  1. 读取用户项目文件（页面、组件、样式、配置文件）。
  2. 探测项目框架（uniapp / vue3 / react / next / nuxt 等）、平台类型（移动端 / PC / Web）、主题色、静态资源目录。具体探测规则参考 references/project-type-detection.md。
  3. 扫描代码中可能需要 icon / image 的位置（如 tabBar、navbar、hero、banner、background、avatar、logo 等关键词）。
  4. 盘点已有 icon / image / font 资源。
  5. 必须输出 assets-requirements-report.md，包含：
    • 项目框架、平台、主题色
    • 现有资源清单
    • 按平台推荐的尺寸规格（参考 references/image-sizes.md 与 references/project-type-detection.md）
    • 发现的素材需求位置
    • 可复用现有资源的建议
    • 推荐抓取风格与色调

报告文件默认放在项目根目录；若项目已有 docs/ 目录且用户无特殊要求，可放入 docs/assets-requirements-report.md。

Claude 应使用文件读取、搜索等工具完成审计，不运行任何本地审计脚本。

与其他技能的关系

  • frontend-icon-skill：本技能「抓取」现成专业图标；抓不到合适图标时，建议转 frontend-icon-skill 的 icons 模式生成。
  • frontend-icon-skill：本技能负责找图；需要本地压缩、裁剪、格式转换、水印、合成时，转 frontend-icon-skill。
  • uniapp-app-generate-skill / frontend-ui-foundry：生成页面时若需要图标与配图，应调用本技能能力获取真实素材。

触发词

icon-image-catch、icon-image-catch-skill — 远程素材抓取总入口

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Icon Image Catch Skill AI skill do?

Use when 用户需要为项目搜索/下载图标（icon）、真实图片（配图、背景图、banner），或要求审计项目素材需求。

Why use Icon Image Catch Skill on TypingMind?

Because you install it once and use it with any model. Icon Image Catch Skill is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Icon Image Catch Skill in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/jiushiwon/wg-skills/tree/main/vibeCoding/frontend/icon-image-catch-skill. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Icon Image Catch Skill?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Icon Image Catch Skill?

As many as you like. As long as a model supports skills, you can use Icon Image Catch Skill with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Icon Image Catch Skill AI skill free?

Yes. It is published on GitHub by jiushiwon under the Apache-2.0 license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Related AI Skills

View all
affaan-m logo

Accessibility

affaan-m
CommunityPopular

WCAG 2.2 レベル AA 標準を用いてインクルーシブなデジタルプロダクトを設計・実装・監査します。Web 用のセマンティック ARIA および Web・ネイティブプラットフォーム（iOS/Android）のアクセシビリティトレイトを生成するために使用します。

39.1K
261.1K
Instructions
View
NousResearch logo

Archify

NousResearch
OrganizationPopular

Validated interactive HTML diagrams, upstream-maintained.

53.5K
250.4K
Instructions
View
NousResearch logo

Auteur

NousResearch
OrganizationPopular

Design and build cinematic, award-level web pages.

53.5K
250.4K
25 files
View
NousResearch logo

Concept Diagrams

NousResearch
OrganizationPopular

Generate flat, minimal educational SVG visuals as HTML.

53.5K
250.4K
19 files
View

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇