Qiaomu Icon Generator

Generate multiple app, favicon, or website icon candidates with either the local QM Icon Studio CLI or Codex built-in image generation with reference icons, then present a contact sheet so the user can choose. Use when building websites or apps and needing reusable icon options.

55 stars 5 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add joeseesun/qiaomu-icon-generator --skill qiaomu-icon-generator
Manual install
git clone --depth 1 https://github.com/joeseesun/qiaomu-icon-generator.git /tmp/qiaomu-icon-generator
mkdir -p ~/.claude/skills
cp -r /tmp/qiaomu-icon-generator/. ~/.claude/skills/qiaomu-icon-generator

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Qiaomu Icon Generator

用本机 QM Icon Studio CLI 或 Codex 内置生图能力,为网站、App、工具或 Skill 生成多套图标候选,并给用户一张选择稿。

Copyright (c) 向阳乔木
X: https://x.com/vista8
GitHub: https://github.com/joeseesun/

## When To Use

- 新网站、App、Chrome 插件、Skill、CLI 工具需要 favicon、app icon 或品牌入口图标。
- 用户想先看多个方向再选,而不是直接替换生产图标。
- 项目还没有完整品牌系统,但已有名称、域名、用途或一句话描述。

## Method Choice

Use the **QM Icon Studio CLI method** when the user wants deterministic, vector-friendly icons based on Iconify-style symbols, or when they need fast clean SVG candidates.

Use the **Codex bitmap reference method** when the user explicitly asks for Codex built-in image generation, wants richer iOS-style app icons, asks to reference existing icon galleries, or needs a polished raster icon direction before final export.

## Workflow: QM Icon Studio CLI

Read `references/qm-icon-studio-cli-method.md` before using this path.

1. 读取项目上下文:`README.md`、`package.json`、站点域名、已有 `public/` 或 `assets/` 图标、主色 CSS 变量。
2. 提炼一个短英文语义关键词,例如 `rocket`、`globe`、`code`、`book`、`camera`、`music`、`money`。中文需求可以直接传给 CLI;CLI 会先翻译再搜索 Iconify,必要时你也可以手动改成更准确的英文词。
3. 在项目内创建候选目录,默认使用 `design/icon-options/`;如果项目已有设计目录,沿用现有结构。
4. 如果当前机器有 QM Icon Studio CLI,调用:

```bash
node "$HOME/Documents/qm-icon-studio/cli/qm-icon-options.mjs" \
  --name "Product Name" \
  --query "rocket" \
  --count 8 \
  --out design/icon-options \
  --png
```

如果这个本机路径不存在,用 Codex bitmap reference method,或让用户提供自己的图标生成 CLI / 图标参考库路径。
Read the full skill on GitHub

Details

Skill name
qiaomu-icon-generator
License
MIT
Repo updated
21 June 2026

FAQ

What does the Qiaomu Icon Generator skill do?

Generate multiple app, favicon, or website icon candidates with either the local QM Icon Studio CLI or Codex built-in image generation with reference icons, then present a contact sheet so the user can choose. Use when building websites or apps and needing reusable icon options.

How do I install the Qiaomu Icon Generator skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add joeseesun/qiaomu-icon-generator --skill qiaomu-icon-generator. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Qiaomu Icon Generator popular?

It lives in joeseesun/qiaomu-icon-generator, which has 55 GitHub stars and 5 forks.

Related skills

Exploded

59

diip3sh/exploded

Turn a real, rendered UI component (button, input, switch, card, menu, dialog, any React/Vue/HTML component) into a live, interactive exploded spec sheet. The component is pulled apart in isometric into its paint layers (elevation, surface, stroke, inner surfaces, content, focus ring), every state (hover, focus, pressed, disabled, invalid, on/off) can be switched, and every measurement (padding, radius, gap, type, shadow, ring) plus the design token the author actually wrote is read from the browser, never typed. Use this whenever someone wants component documentation, a design-system or Story

Frontend & Design

Lecture Deck

49

RinDig/lecture-deck-skill

Build a high-quality animated HTML lecture or workshop deck from a storyboard, in any theme. Use whenever someone asks for a slide deck, session deck, workshop slides, lecture screens, a run-of-show deck, or speaker notes for a talk, especially one delivered live (in a room or on Zoom) with breakouts, share-screen moments and handoffs. Produces one self-contained HTML file with keyboard navigation, speaker notes, overview, print, copy-to-clipboard prompts and a mode strip on every screen, plus PNG renders for checking. Ships with three themes and a kit for diagrams, animation, a recurring cast

Frontend & Design10

Feel

61

diip3sh/feel

Build UI interactions whose motion comes from a physical model instead of durations and easing curves. Turn a feel described in words ("a toggle that feels heavy", "a drawer with a magnetic snap", "a card you throw into a corner", "a knob with heavy detents", "a sticky slider") into a production component driven by mass, stiffness, damping and force fields (magnets, friction, walls), on a line, in a plane or around a dial, plus a test rig that plots position, velocity and the force field, overlays the model's prediction on the measured motion, and exports the same spring to Framer Motion, reac

Frontend & Design

Kunpeng Skill

55

hufeng173/kunpeng-skill

跨智能体、本地优先的多源蒸馏与迁移工作流。用于收录或蒸馏代码仓库、网站、App、UI/交互、图片与品牌、视频、音频、文章、文档、书籍、课程及混合素材,形成带证据的可迁移画像、再生成规范、产品方案和本地方法库;也用于把画像应用到新主题或新 idea 并验收结果。

Frontend & Design

Website Audit

49

appariciojunior/website-audit-skill

Comprehensive website content and UX audit. Use this skill whenever someone asks to review, audit, check, or improve a website, landing page, or web product. Triggers include: "audit my website", "review my site", "check my content", "is my website ready to launch", "what's wrong with my site", "content review", "UX review", "website feedback", "check for broken links", "check for lorem ipsum", "review my copy", or any request that involves evaluating an existing website's content quality, UX structure, copy, or readiness for launch. Also trigger when someone shares a URL and asks for feedback

Frontend & Design

Wp Block Theme Converter

49

siddik-web/wp-block-theme-converter

Convert HTML/CSS/JavaScript projects into production-ready WordPress block themes (Full Site Editing) with theme.json v3, FSE templates and parts, block patterns, the Interactivity API, Block Bindings, and optional WooCommerce support. Use whenever the user wants to convert, port, or rebuild a static site, landing page, or classic WordPress theme as a block, FSE, or Gutenberg theme; scaffold a block theme from scratch; generate theme.json from design tokens; turn HTML into block patterns or templates; build custom blocks or style variations; migrate content or page builders (Elementor, Divi) t

Frontend & Design16

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.